feat(app): populate the channel details sidebar

Author: iamnbutler

apps/app/src/channel.tsx

@@ -1,14 +1,23 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
-import type { Changes } from "@ace/channel/protocol";
-import type { Listing } from "@ace/host/protocol";
-import { SessionDetailsView, Sidebar, useLayoutRight } from "@ace/ui";
+import type { Changes, GithubPull } from "@ace/channel/protocol";
+import type { ChannelInfo, Listing } from "@ace/host/protocol";
+import {
+	type DetailsFact,
+	type DetailsLink,
+	type DetailsSubagent,
+	SessionDetailsView,
+	Sidebar,
+	useLayoutRight,
+} from "@ace/ui";
 
 import { Conversation } from "./conversation";
+import { forget, publish, useDetails } from "./details";
 import { host } from "./host";
 import { CHAT, Layout } from "./layout/layout";
 import { Diff } from "./panels/diff";
 import { Terminal } from "./panels/terminal";
+import type { Item } from "./transcript";
 
 // Channels have one chat today; its tabs follow the chat the Chat tab shows.
 const chat = 1;
@@ -24,8 +33,129 @@ type Props = {
 	onSettings?: () => void;
 };
 
+const LINK = /https?:\/\/[^\s<>()[\]{}"'`]+/g;
+const GITHUB = /^https:\/\/github\.com\/([^/]+\/[^/]+)\/(issues|pull)\/(\d+)\/?$/;
+const compact = new Intl.NumberFormat("en-US", { notation: "compact", maximumFractionDigits: 1 });
+const dollars = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
+const date = new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" });
+// Open checks change on their own, so a visible pull request is read again this often.
+const PULL = 60_000;
+
+/** Links people and agents wrote in the chat, newest mention first; tool output is left out. */
+function links(items: Item[], repo?: string): DetailsLink[] {
+	const seen = new Map<string, DetailsLink>();
+	for (const item of items) {
+		for (const match of item.text.matchAll(LINK)) {
+			const url = match[0].replace(/[.,;:!?*_]+$/, "");
+			if (!URL.canParse(url)) continue;
+			seen.delete(url);
+			const github = GITHUB.exec(url);
+			if (github) {
+				const [, path, kind, number] = github;
+				const label = `${path === repo ? "" : path}#${number}`;
+				seen.set(url, { url, label, kind: kind === "pull" ? "pull" : "issue" });
+				continue;
+			}
+			const { host, pathname, search } = new URL(url);
+			seen.set(url, { url, label: `${host}${pathname.replace(/\/$/, "")}${search}`, kind: "web" });
+		}
+	}
+	return [...seen.values()].toReversed();
+}
+
+function subagents(items: Item[], busy: boolean): DetailsSubagent[] {
+	return items.flatMap((item) =>
+		item.kind === "reply"
+			? item.tools.filter((tool) => tool.name === "subagent").map((tool) => {
+				const args = tool.args as { task?: string; model?: string };
+				const state: DetailsSubagent["state"] = tool.result
+					? tool.result.error ? "failed" : "done"
+					: busy && !item.stopped
+					? "running"
+					: "stopped";
+				const task = args.task?.trim().split("\n")[0] || "Subagent";
+				const model = args.model?.split("/").at(-1);
+				return { id: tool.call, task, model, state };
+			})
+			: []
+	);
+}
+
+function facts(channel: Listing, info?: ChannelInfo): DetailsFact[] {
+	const root = info?.chats.find((value) => value.id === chat);
+	const model = root?.model || channel.model;
+	const usage = info?.chats.reduce(
+		(sum, value) => ({
+			cost: sum.cost + (value.usage?.cost || 0),
+			tokens: sum.tokens + (value.usage?.totalTokens || 0),
+		}),
+		{ cost: 0, tokens: 0 },
+	);
+	return [
+		{
+			label: "Project",
+			value: channel.repo || channel.project.split("/").at(-1) || channel.project,
+			title: channel.project,
+		},
+		{ label: "Host", value: channel.host },
+		{ label: "Owner", value: channel.owner.split("@")[0]!, title: channel.owner },
+		...(model
+			? [{ label: "Model", value: model.modelId, title: `${model.provider}/${model.modelId}` }]
+			: []),
+		...(usage?.tokens
+			? [
+				{ label: "Tokens", value: compact.format(usage.tokens) },
+				{ label: "Estimated cost", value: dollars.format(usage.cost) },
+			]
+			: []),
+		{ label: "Created", value: date.format(channel.created) },
+	];
+}
+
+/** The newest pull request from the chat's branch, read again while it can be seen. */
+function usePull(
+	repo: string | undefined,
+	branch: string | undefined,
+	head: string | undefined,
+	open: boolean,
+) {
+	const [pull, setPull] = useState<{ key: string; value: GithubPull | null }>();
+	const key = repo && branch ? `${repo}\0${branch}` : undefined;
+	useEffect(() => {
+		if (!open || !repo || !branch) return;
+		let active = true;
+		const read = () =>
+			host.request<GithubPull | null>({ op: "github-pull", repo, branch }).then(
+				(value) => active && setPull({ key: `${repo}\0${branch}`, value }),
+				() => {},
+			);
+		void read();
+		const timer = setInterval(read, PULL);
+		return () => {
+			active = false;
+			clearInterval(timer);
+		};
+	}, [open, repo, branch, head]);
+	return pull && pull.key === key ? pull.value : undefined;
+}
+
 export function ChannelDetails({ channel }: { channel: Listing }) {
 	const right = useLayoutRight();
+	const details = useDetails(channel.id);
+	const { changes, info, items } = details;
+	const busy = !!info?.chats.find((value) => value.id === chat)?.busy;
+	const pull = usePull(channel.repo, changes?.branch, changes?.head, right.open);
+	const totals = useMemo(() => {
+		if (!changes) return;
+		const sum = { adds: 0, dels: 0, files: changes.files.length };
+		for (const file of changes.files) {
+			sum.adds += file.adds;
+			sum.dels += file.dels;
+		}
+		return sum;
+	}, [changes]);
+	const mentioned = useMemo(() => items && links(items, channel.repo), [items, channel.repo]);
+	const agents = useMemo(() => items && subagents(items, busy), [items, busy]);
 	return (
 		<Sidebar
 			side="right"
@@ -35,7 +165,17 @@ export function ChannelDetails({ channel }: { channel: Listing }) {
 			className="-my-2 h-[calc(100%+1rem)]"
 			innerClassName="h-full min-h-0"
 		>
-			<SessionDetailsView summary={channel.summary} onClose={() => right.setOpen(false)} />
+			<SessionDetailsView
+				summary={channel.summary}
+				changes={totals}
+				branch={changes?.branch}
+				pull={pull}
+				subagents={agents}
+				links={mentioned?.filter((link) => link.url !== pull?.url)}
+				facts={facts(channel, info)}
+				onDiff={details.diff}
+				onClose={() => right.setOpen(false)}
+			/>
 		</Sidebar>
 	);
 }
@@ -54,7 +194,10 @@ export function Channel({ channel, user, remote, draft, onDraftLoaded, onSetting
 		}
 		run.busy = true;
 		host.channel<Changes>(channel.id, { op: "changes", chat }).then(
-			(value) => setChanged(value.files.length > 0),
+			(changes) => {
+				setChanged(changes.files.length > 0);
+				publish(channel.id, { changes });
+			},
 			() => {},
 		).finally(() => {
 			run.busy = false;
@@ -64,12 +207,19 @@ export function Channel({ channel, user, remote, draft, onDraftLoaded, onSetting
 		});
 	}, [channel.id]);
 
+	const opener = useRef<() => void>(undefined);
+	useEffect(() => {
+		publish(channel.id, { diff: () => opener.current?.() });
+		return () => forget(channel.id);
+	}, [channel.id]);
+
 	return (
 		<Layout
 			id={channel.id}
 			name={remote ? `${channel.name} · ${channel.host}` : channel.name}
 			chat={chat}
 			changed={changed}
+			opener={opener}
 			render={(data, uid, active, update) => {
 				if (uid === CHAT) {
 					return (

apps/app/src/conversation.tsx

@@ -4,6 +4,7 @@ import { Button, Timeline } from "@ace/ui";
 import type { Listing } from "@ace/host/protocol";
 
 import { Composer } from "./composer";
+import { publish } from "./details";
 import { host } from "./host";
 import { toEvents } from "./timeline";
 import { useTranscript } from "./transcript";
@@ -57,6 +58,12 @@ export function Conversation(
 		[transcript.items],
 	);
 
+	// Replay delivers one event at a time; the sidebar reads the transcript once it is complete.
+	const items = transcript.live ? transcript.items : undefined;
+	useEffect(() => {
+		publish(channel.id, { info: transcript.info, items });
+	}, [channel.id, transcript.info, items]);
+
 	useEffect(() => {
 		if (transcript.live) onWork?.();
 	}, [transcript.live, transcript.busy, results, onWork]);

apps/app/src/details.ts

@@ -0,0 +1,38 @@
+import { useSyncExternalStore } from "react";
+
+import type { Changes } from "@ace/channel/protocol";
+import type { ChannelInfo } from "@ace/host/protocol";
+
+import type { Item } from "./transcript";
+
+/** What an open channel's views know, shared with its details sidebar outside their tree. */
+export type Details = {
+	info?: ChannelInfo;
+	changes?: Changes;
+	items?: Item[];
+	/** Shows the chat's Diff tab, opening one when none is open. */
+	diff?: () => void;
+};
+
+const EMPTY: Details = {};
+const values = new Map<string, Details>();
+const listeners = new Set<() => void>();
+
+function subscribe(listener: () => void) {
+	listeners.add(listener);
+	return () => void listeners.delete(listener);
+}
+
+export function publish(channel: string, patch: Details) {
+	values.set(channel, { ...values.get(channel), ...patch });
+	for (const listener of listeners) listener();
+}
+
+export function forget(channel: string) {
+	values.delete(channel);
+	for (const listener of listeners) listener();
+}
+
+export function useDetails(channel: string): Details {
+	return useSyncExternalStore(subscribe, () => values.get(channel) || EMPTY);
+}

apps/app/src/layout/layout.tsx

@@ -93,6 +93,8 @@ type Props = {
 	render: Render;
 	/** Notified when a tab is closed, so owners can release its resources. */
 	onTabClose?: (uid: string, data: Content) => void;
+	/** Receives the function that shows the chat's Diff tab, opening one beside the chat if needed. */
+	opener?: { current?: () => void };
 };
 
 const MIN = 350;
@@ -648,7 +650,7 @@ function Pane(props: PaneProps) {
 	);
 }
 
-function useLayout({ id, name, chat, changed, onTabClose }: Props) {
+function useLayout({ id, name, chat, changed, onTabClose, opener }: Props) {
 	const [data] = useState(() => read(id));
 	const [api] = useState(() => Split.create(data.state, { min: minimum }));
 	const [meta, setMeta] = useState<Meta>(data.meta);
@@ -721,6 +723,23 @@ function useLayout({ id, name, chat, changed, onTabClose }: Props) {
 		setMeta((meta) => ({ ...meta, [uid]: content("diff", chat) }));
 	}, [api, chat, changed, diff, meta]);
 
+	const reveal = useEffectEvent(() => {
+		const tabs = api.get().tabs;
+		const uid = tabs.find((uid) => {
+			const value = meta[uid];
+			return value?.type === "diff" && value.chat === chat;
+		});
+		if (uid) return activate(uid);
+		const pane = Split.host(api.get(), CHAT);
+		if (pane) add(pane, "diff");
+	});
+
+	useLayoutEffect(() => {
+		if (!opener) return;
+		opener.current = reveal;
+		return () => void (opener.current = undefined);
+	}, [opener]);
+
 	function nav(event: KeyboardEvent<HTMLElement>, pane: Split.Pane) {
 		const tabs = pane.tabs;
 		if (tabs.length < 2) return;

apps/host/src/gateway.ts

@@ -168,6 +168,7 @@ const localOps = new Set<HostRequest["op"]>([
 	"github-list",
 	"github-detail",
 	"github-files",
+	"github-pull",
 	"settings",
 	"diagnostics",
 	"key-set",
@@ -290,6 +291,8 @@ async function handle(
 			return github.detail(request);
 		case "github-files":
 			return github.files(request.repo, request.number);
+		case "github-pull":
+			return github.pull(request.repo, request.branch);
 		case "settings":
 			return settings();
 		case "diagnostics":