import { createResource, Show, createMemo, createSignal, onMount, type Accessor, type JSX } from "solid-js" import { TextAttributes, type RGBA } from "@opentui/core" import { useTerminalDimensions } from "@opentui/solid" import { debounce, leadingAndTrailing } from "@solid-primitives/scheduled" import type { Message, Part, Session as SdkSession, SnapshotFileDiff } from "@opencode-ai/sdk/v2" import { useTheme } from "@tui/context/theme" import { useSDK } from "@tui/context/sdk" import { useSync } from "@tui/context/sync" import { Locale } from "@/util/locale" import { Spinner } from "@tui/component/spinner" import { extractMessageMarkdown, extractMessageText, formatDiffSummary, relativeTime, shortModelLabel } from "./util" type WithParts = { info: Message; parts: Part[] } type Sdk = ReturnType type Sync = ReturnType const messageCache = new Map>() const diffCache = new Map>() function cacheKey(sessionID: string, version: number) { return `${sessionID}:${version}` } function hydrateFromSync(sync: Sync, sessionID: string): WithParts[] | undefined { const infos = sync.data.message[sessionID] if (!infos || infos.length === 0) return undefined return infos.map((info) => ({ info, parts: sync.data.part[info.id] ?? [] })) } function loadMessages(sdk: Sdk, sessionID: string, version: number): Promise { const key = cacheKey(sessionID, version) const cached = messageCache.get(key) if (cached) return cached const promise = sdk.client.session .messages({ sessionID, limit: 50 }) .then((res) => { if (res.error) messageCache.delete(key) return (res.data as WithParts[] | undefined) ?? [] }) .catch(() => { messageCache.delete(key) return [] as WithParts[] }) messageCache.set(key, promise) return promise } function loadDiff(sdk: Sdk, sessionID: string, version: number): Promise { const key = cacheKey(sessionID, version) const cached = diffCache.get(key) if (cached) return cached const promise = sdk.client.session .diff({ sessionID }) .then((res) => { if (res.error) diffCache.delete(key) return (res.data as SnapshotFileDiff[] | undefined) ?? [] }) .catch(() => { diffCache.delete(key) return [] as SnapshotFileDiff[] }) diffCache.set(key, promise) return promise } export function prefetchPreviews(sdk: Sdk, sync: Sync, sessionIDs: readonly string[]) { for (const id of sessionIDs) { const version = sync.data.session.find((session) => session.id === id)?.time.updated ?? 0 if (!hydrateFromSync(sync, id)) loadMessages(sdk, id, version).catch(() => {}) if (!sync.data.session_diff[id]?.length) loadDiff(sdk, id, version).catch(() => {}) } } export function createLeadingTrailingSignal(initial: T, ms: number): [Accessor, (v: T) => void, (v: T) => void] { const [get, set] = createSignal(initial) const setNow = (v: T) => set(() => v) const schedule = leadingAndTrailing(debounce, setNow, ms) return [get, setNow, schedule] } export function SessionPreviewPane(props: { sessionID: Accessor session?: Accessor }) { const { theme } = useTheme() const sdk = useSDK() const sync = useSync() const dimensions = useTerminalDimensions() const maxHeight = createMemo(() => Math.max(8, Math.floor(dimensions().height / 2) - 4)) const session = createMemo(() => { const provided = props.session?.() if (provided) return provided const id = props.sessionID() if (!id) return undefined return sync.data.session.find((s) => s.id === id) }) const status = createMemo(() => { const id = props.sessionID() if (!id) return undefined return sync.data.session_status?.[id]?.type }) onMount(() => { const top = sync.data.session .filter((s) => s.parentID === undefined) .slice() .sort((a, b) => b.time.updated - a.time.updated) .slice(0, 5) .map((s) => s.id) prefetchPreviews(sdk, sync, top) }) const syncedMessages = createMemo(() => { const id = props.sessionID() if (!id) return undefined return hydrateFromSync(sync, id) }) const syncedDiff = createMemo(() => { const id = props.sessionID() if (!id) return undefined const diff = sync.data.session_diff[id] return diff && diff.length > 0 ? (diff as SnapshotFileDiff[]) : undefined }) const [fetchedMessages] = createResource( () => { const id = props.sessionID() if (!id || syncedMessages()) return undefined return { sessionID: id, version: session()?.time.updated ?? 0 } }, async (input) => loadMessages(sdk, input.sessionID, input.version), ) const [fetchedDiff] = createResource( () => { const id = props.sessionID() if (!id || syncedDiff()) return undefined return { sessionID: id, version: session()?.time.updated ?? 0 } }, async (input) => loadDiff(sdk, input.sessionID, input.version), ) const messages = createMemo(() => syncedMessages() ?? fetchedMessages() ?? []) const diff = createMemo(() => syncedDiff() ?? fetchedDiff() ?? []) const diffSummary = createMemo(() => { const live = diff() if (live && live.length > 0) { let additions = 0 let deletions = 0 for (const file of live) { additions += file.additions ?? 0 deletions += file.deletions ?? 0 } return formatDiffSummary({ additions, deletions, files: live.length }) } return formatDiffSummary(session()?.summary) }) const exchange = createMemo(() => { const items = messages() if (!items || items.length === 0) return undefined const sorted = items.toSorted((a, b) => messageCreated(a) - messageCreated(b)) const user = sorted.findLast((item) => messageRole(item) === "user") const assistant = user ? sorted.findLast((item) => messageRole(item) === "assistant" && messageParentID(item) === user.info.id) : sorted.findLast((item) => messageRole(item) === "assistant") return { user, assistant } }) const loading = createMemo(() => (fetchedMessages.loading || fetchedDiff.loading) && !exchange()) const statusLabel = createMemo(() => { const s = status() if (s === "busy") return { text: "working", color: theme.warning } if (s === "retry") return { text: "retrying", color: theme.warning } return { text: "idle", color: theme.textMuted } }) return ( No session selected } > {(s) => ( <>

loading preview... No messages yet } > {(ex) => } )} ) } function messageRole(item: WithParts) { return (item.info as { role?: string }).role } function messageCreated(item: WithParts) { return (item.info.time as { created?: number }).created ?? 0 } function messageParentID(item: WithParts) { return (item.info as { parentID?: string }).parentID } const ROW_WIDTH = 40 function Header(props: { session: SdkSession statusLabel: { text: string; color: RGBA } diff: { additions: number; deletions: number; files: number } | undefined }) { const { theme } = useTheme() const title = createMemo(() => Locale.truncate(props.session.title, ROW_WIDTH)) const modelAgent = createMemo(() => { const m = shortModelLabel(props.session.model) const a = props.session.agent ?? "" if (m && a) return Locale.truncate(`${m} · ${a}`, ROW_WIDTH) if (m) return Locale.truncate(m, ROW_WIDTH) if (a) return Locale.truncate(a, ROW_WIDTH) return "" }) const statusRest = createMemo(() => { const joined = ` · ${relativeTime(props.session.time.updated)}` return Locale.truncate(joined, Math.max(0, ROW_WIDTH - props.statusLabel.text.length)) }) return ( {title()} {modelAgent()} {props.statusLabel.text} {statusRest()} {(d) => } ) } function Row(props: { height: number; children: JSX.Element }) { return ( {props.children} ) } function DiffRow(props: { diff: { additions: number; deletions: number; files: number } }) { const { theme } = useTheme() const showAdds = () => props.diff.additions > 0 const showDels = () => props.diff.deletions > 0 if (!showAdds() && !showDels()) return null return ( +{props.diff.additions} −{props.diff.deletions} ) } const PROMPT_MAX_CHARS = 240 const REPLY_MAX_LINES = 12 const REPLY_MAX_CHARS = 800 function Exchange(props: { exchange: { user?: WithParts; assistant?: WithParts } }) { const { theme, syntax } = useTheme() const userText = createMemo(() => props.exchange.user ? extractMessageText(props.exchange.user.parts, PROMPT_MAX_CHARS) : undefined, ) const assistantMarkdown = createMemo(() => props.exchange.assistant ? extractMessageMarkdown(props.exchange.assistant.parts, REPLY_MAX_LINES, REPLY_MAX_CHARS) : undefined, ) return ( › {userText()!} ) } function NonTextHint(props: { exchange: { user?: WithParts; assistant?: WithParts } }) { const { theme } = useTheme() const summary = createMemo(() => { const counts: Record = {} for (const item of [props.exchange.user, props.exchange.assistant]) { if (!item) continue for (const part of item.parts) { counts[part.type] = (counts[part.type] ?? 0) + 1 } } return Object.entries(counts) .map(([k, n]) => `${n} ${k}`) .join(", ") }) return ( Latest exchange has no text content ({summary()}) ) }