429 lines
15 KiB
TypeScript
429 lines
15 KiB
TypeScript
import { createMemo, createEffect, on, onCleanup, For, Show } from "solid-js"
|
|
import type { JSX } from "solid-js"
|
|
import { useParams } from "@solidjs/router"
|
|
import { DateTime } from "luxon"
|
|
import { useSync } from "@/context/sync"
|
|
import { useLayout } from "@/context/layout"
|
|
import { checksum } from "@opencode-ai/util/encode"
|
|
import { Icon } from "@opencode-ai/ui/icon"
|
|
import { Accordion } from "@opencode-ai/ui/accordion"
|
|
import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
|
|
import { Code } from "@opencode-ai/ui/code"
|
|
import { Markdown } from "@opencode-ai/ui/markdown"
|
|
import type { AssistantMessage, Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
|
|
import { useLanguage } from "@/context/language"
|
|
|
|
interface SessionContextTabProps {
|
|
messages: () => Message[]
|
|
visibleUserMessages: () => UserMessage[]
|
|
view: () => ReturnType<ReturnType<typeof useLayout>["view"]>
|
|
info: () => ReturnType<ReturnType<typeof useSync>["session"]["get"]>
|
|
}
|
|
|
|
export function SessionContextTab(props: SessionContextTabProps) {
|
|
const params = useParams()
|
|
const sync = useSync()
|
|
const language = useLanguage()
|
|
|
|
const ctx = createMemo(() => {
|
|
const last = props.messages().findLast((x) => {
|
|
if (x.role !== "assistant") return false
|
|
const total = x.tokens.input + x.tokens.output + x.tokens.reasoning + x.tokens.cache.read + x.tokens.cache.write
|
|
return total > 0
|
|
}) as AssistantMessage
|
|
if (!last) return
|
|
|
|
const provider = sync.data.provider.all.find((x) => x.id === last.providerID)
|
|
const model = provider?.models[last.modelID]
|
|
const limit = model?.limit.context
|
|
|
|
const input = last.tokens.input
|
|
const output = last.tokens.output
|
|
const reasoning = last.tokens.reasoning
|
|
const cacheRead = last.tokens.cache.read
|
|
const cacheWrite = last.tokens.cache.write
|
|
const total = input + output + reasoning + cacheRead + cacheWrite
|
|
const usage = limit ? Math.round((total / limit) * 100) : null
|
|
|
|
return {
|
|
message: last,
|
|
provider,
|
|
model,
|
|
limit,
|
|
input,
|
|
output,
|
|
reasoning,
|
|
cacheRead,
|
|
cacheWrite,
|
|
total,
|
|
usage,
|
|
}
|
|
})
|
|
|
|
const cost = createMemo(() => {
|
|
const locale = language.locale()
|
|
const total = props.messages().reduce((sum, x) => sum + (x.role === "assistant" ? x.cost : 0), 0)
|
|
return new Intl.NumberFormat(locale, {
|
|
style: "currency",
|
|
currency: "USD",
|
|
}).format(total)
|
|
})
|
|
|
|
const counts = createMemo(() => {
|
|
const all = props.messages()
|
|
const user = all.reduce((count, x) => count + (x.role === "user" ? 1 : 0), 0)
|
|
const assistant = all.reduce((count, x) => count + (x.role === "assistant" ? 1 : 0), 0)
|
|
return {
|
|
all: all.length,
|
|
user,
|
|
assistant,
|
|
}
|
|
})
|
|
|
|
const systemPrompt = createMemo(() => {
|
|
const msg = props.visibleUserMessages().findLast((m) => !!m.system)
|
|
const system = msg?.system
|
|
if (!system) return
|
|
const trimmed = system.trim()
|
|
if (!trimmed) return
|
|
return trimmed
|
|
})
|
|
|
|
const number = (value: number | null | undefined) => {
|
|
if (value === undefined) return "—"
|
|
if (value === null) return "—"
|
|
return value.toLocaleString(language.locale())
|
|
}
|
|
|
|
const percent = (value: number | null | undefined) => {
|
|
if (value === undefined) return "—"
|
|
if (value === null) return "—"
|
|
return value.toLocaleString(language.locale()) + "%"
|
|
}
|
|
|
|
const time = (value: number | undefined) => {
|
|
if (!value) return "—"
|
|
return DateTime.fromMillis(value).setLocale(language.locale()).toLocaleString(DateTime.DATETIME_MED)
|
|
}
|
|
|
|
const providerLabel = createMemo(() => {
|
|
const c = ctx()
|
|
if (!c) return "—"
|
|
return c.provider?.name ?? c.message.providerID
|
|
})
|
|
|
|
const modelLabel = createMemo(() => {
|
|
const c = ctx()
|
|
if (!c) return "—"
|
|
if (c.model?.name) return c.model.name
|
|
return c.message.modelID
|
|
})
|
|
|
|
const breakdown = createMemo(
|
|
on(
|
|
() => [ctx()?.message.id, ctx()?.input, props.messages().length, systemPrompt()],
|
|
() => {
|
|
const c = ctx()
|
|
if (!c) return []
|
|
const input = c.input
|
|
if (!input) return []
|
|
|
|
const out = {
|
|
system: systemPrompt()?.length ?? 0,
|
|
user: 0,
|
|
assistant: 0,
|
|
tool: 0,
|
|
}
|
|
|
|
for (const msg of props.messages()) {
|
|
const parts = (sync.data.part[msg.id] ?? []) as Part[]
|
|
|
|
if (msg.role === "user") {
|
|
for (const part of parts) {
|
|
if (part.type === "text") out.user += part.text.length
|
|
if (part.type === "file") out.user += part.source?.text.value.length ?? 0
|
|
if (part.type === "agent") out.user += part.source?.value.length ?? 0
|
|
}
|
|
continue
|
|
}
|
|
|
|
if (msg.role === "assistant") {
|
|
for (const part of parts) {
|
|
if (part.type === "text") out.assistant += part.text.length
|
|
if (part.type === "reasoning") out.assistant += part.text.length
|
|
if (part.type === "tool") {
|
|
out.tool += Object.keys(part.state.input).length * 16
|
|
if (part.state.status === "pending") out.tool += part.state.raw.length
|
|
if (part.state.status === "completed") out.tool += part.state.output.length
|
|
if (part.state.status === "error") out.tool += part.state.error.length
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const estimateTokens = (chars: number) => Math.ceil(chars / 4)
|
|
const system = estimateTokens(out.system)
|
|
const user = estimateTokens(out.user)
|
|
const assistant = estimateTokens(out.assistant)
|
|
const tool = estimateTokens(out.tool)
|
|
const estimated = system + user + assistant + tool
|
|
|
|
const pct = (tokens: number) => (tokens / input) * 100
|
|
const pctLabel = (tokens: number) => (Math.round(pct(tokens) * 10) / 10).toString() + "%"
|
|
|
|
const build = (tokens: { system: number; user: number; assistant: number; tool: number; other: number }) => {
|
|
return [
|
|
{
|
|
key: "system",
|
|
label: language.t("context.breakdown.system"),
|
|
tokens: tokens.system,
|
|
width: pct(tokens.system),
|
|
percent: pctLabel(tokens.system),
|
|
color: "var(--syntax-info)",
|
|
},
|
|
{
|
|
key: "user",
|
|
label: language.t("context.breakdown.user"),
|
|
tokens: tokens.user,
|
|
width: pct(tokens.user),
|
|
percent: pctLabel(tokens.user),
|
|
color: "var(--syntax-success)",
|
|
},
|
|
{
|
|
key: "assistant",
|
|
label: language.t("context.breakdown.assistant"),
|
|
tokens: tokens.assistant,
|
|
width: pct(tokens.assistant),
|
|
percent: pctLabel(tokens.assistant),
|
|
color: "var(--syntax-property)",
|
|
},
|
|
{
|
|
key: "tool",
|
|
label: language.t("context.breakdown.tool"),
|
|
tokens: tokens.tool,
|
|
width: pct(tokens.tool),
|
|
percent: pctLabel(tokens.tool),
|
|
color: "var(--syntax-warning)",
|
|
},
|
|
{
|
|
key: "other",
|
|
label: language.t("context.breakdown.other"),
|
|
tokens: tokens.other,
|
|
width: pct(tokens.other),
|
|
percent: pctLabel(tokens.other),
|
|
color: "var(--syntax-comment)",
|
|
},
|
|
].filter((x) => x.tokens > 0)
|
|
}
|
|
|
|
if (estimated <= input) {
|
|
return build({ system, user, assistant, tool, other: input - estimated })
|
|
}
|
|
|
|
const scale = input / estimated
|
|
const scaled = {
|
|
system: Math.floor(system * scale),
|
|
user: Math.floor(user * scale),
|
|
assistant: Math.floor(assistant * scale),
|
|
tool: Math.floor(tool * scale),
|
|
}
|
|
const scaledTotal = scaled.system + scaled.user + scaled.assistant + scaled.tool
|
|
return build({ ...scaled, other: Math.max(0, input - scaledTotal) })
|
|
},
|
|
),
|
|
)
|
|
|
|
function Stat(statProps: { label: string; value: JSX.Element }) {
|
|
return (
|
|
<div class="flex flex-col gap-1">
|
|
<div class="text-12-regular text-text-weak">{statProps.label}</div>
|
|
<div class="text-12-medium text-text-strong">{statProps.value}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const stats = createMemo(() => {
|
|
const c = ctx()
|
|
const count = counts()
|
|
return [
|
|
{ label: language.t("context.stats.session"), value: props.info()?.title ?? params.id ?? "—" },
|
|
{ label: language.t("context.stats.messages"), value: count.all.toLocaleString(language.locale()) },
|
|
{ label: language.t("context.stats.provider"), value: providerLabel() },
|
|
{ label: language.t("context.stats.model"), value: modelLabel() },
|
|
{ label: language.t("context.stats.limit"), value: number(c?.limit) },
|
|
{ label: language.t("context.stats.totalTokens"), value: number(c?.total) },
|
|
{ label: language.t("context.stats.usage"), value: percent(c?.usage) },
|
|
{ label: language.t("context.stats.inputTokens"), value: number(c?.input) },
|
|
{ label: language.t("context.stats.outputTokens"), value: number(c?.output) },
|
|
{ label: language.t("context.stats.reasoningTokens"), value: number(c?.reasoning) },
|
|
{
|
|
label: language.t("context.stats.cacheTokens"),
|
|
value: `${number(c?.cacheRead)} / ${number(c?.cacheWrite)}`,
|
|
},
|
|
{ label: language.t("context.stats.userMessages"), value: count.user.toLocaleString(language.locale()) },
|
|
{
|
|
label: language.t("context.stats.assistantMessages"),
|
|
value: count.assistant.toLocaleString(language.locale()),
|
|
},
|
|
{ label: language.t("context.stats.totalCost"), value: cost() },
|
|
{ label: language.t("context.stats.sessionCreated"), value: time(props.info()?.time.created) },
|
|
{ label: language.t("context.stats.lastActivity"), value: time(c?.message.time.created) },
|
|
] satisfies { label: string; value: JSX.Element }[]
|
|
})
|
|
|
|
function RawMessageContent(msgProps: { message: Message }) {
|
|
const file = createMemo(() => {
|
|
const parts = (sync.data.part[msgProps.message.id] ?? []) as Part[]
|
|
const contents = JSON.stringify({ message: msgProps.message, parts }, null, 2)
|
|
return {
|
|
name: `${msgProps.message.role}-${msgProps.message.id}.json`,
|
|
contents,
|
|
cacheKey: checksum(contents),
|
|
}
|
|
})
|
|
|
|
return (
|
|
<Code file={file()} overflow="wrap" class="select-text" onRendered={() => requestAnimationFrame(restoreScroll)} />
|
|
)
|
|
}
|
|
|
|
function RawMessage(msgProps: { message: Message }) {
|
|
return (
|
|
<Accordion.Item value={msgProps.message.id}>
|
|
<StickyAccordionHeader>
|
|
<Accordion.Trigger>
|
|
<div class="flex items-center justify-between gap-2 w-full">
|
|
<div class="min-w-0 truncate">
|
|
{msgProps.message.role} <span class="text-text-base">• {msgProps.message.id}</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="shrink-0 text-12-regular text-text-weak">{time(msgProps.message.time.created)}</div>
|
|
<Icon name="chevron-grabber-vertical" size="small" class="shrink-0 text-text-weak" />
|
|
</div>
|
|
</div>
|
|
</Accordion.Trigger>
|
|
</StickyAccordionHeader>
|
|
<Accordion.Content class="bg-background-base">
|
|
<div class="p-3">
|
|
<RawMessageContent message={msgProps.message} />
|
|
</div>
|
|
</Accordion.Content>
|
|
</Accordion.Item>
|
|
)
|
|
}
|
|
|
|
let scroll: HTMLDivElement | undefined
|
|
let frame: number | undefined
|
|
let pending: { x: number; y: number } | undefined
|
|
|
|
const restoreScroll = () => {
|
|
const el = scroll
|
|
if (!el) return
|
|
|
|
const s = props.view()?.scroll("context")
|
|
if (!s) return
|
|
|
|
if (el.scrollTop !== s.y) el.scrollTop = s.y
|
|
if (el.scrollLeft !== s.x) el.scrollLeft = s.x
|
|
}
|
|
|
|
const handleScroll = (event: Event & { currentTarget: HTMLDivElement }) => {
|
|
pending = {
|
|
x: event.currentTarget.scrollLeft,
|
|
y: event.currentTarget.scrollTop,
|
|
}
|
|
if (frame !== undefined) return
|
|
|
|
frame = requestAnimationFrame(() => {
|
|
frame = undefined
|
|
|
|
const next = pending
|
|
pending = undefined
|
|
if (!next) return
|
|
|
|
props.view().setScroll("context", next)
|
|
})
|
|
}
|
|
|
|
createEffect(
|
|
on(
|
|
() => props.messages().length,
|
|
() => {
|
|
requestAnimationFrame(restoreScroll)
|
|
},
|
|
{ defer: true },
|
|
),
|
|
)
|
|
|
|
onCleanup(() => {
|
|
if (frame === undefined) return
|
|
cancelAnimationFrame(frame)
|
|
})
|
|
|
|
return (
|
|
<div
|
|
class="@container h-full overflow-y-auto no-scrollbar pb-10"
|
|
ref={(el) => {
|
|
scroll = el
|
|
restoreScroll()
|
|
}}
|
|
onScroll={handleScroll}
|
|
>
|
|
<div class="px-6 pt-4 flex flex-col gap-10">
|
|
<div class="grid grid-cols-1 @[32rem]:grid-cols-2 gap-4">
|
|
<For each={stats()}>{(stat) => <Stat label={stat.label} value={stat.value} />}</For>
|
|
</div>
|
|
|
|
<Show when={breakdown().length > 0}>
|
|
<div class="flex flex-col gap-2">
|
|
<div class="text-12-regular text-text-weak">{language.t("context.breakdown.title")}</div>
|
|
<div class="h-2 w-full rounded-full bg-surface-base overflow-hidden flex">
|
|
<For each={breakdown()}>
|
|
{(segment) => (
|
|
<div
|
|
class="h-full"
|
|
style={{
|
|
width: `${segment.width}%`,
|
|
"background-color": segment.color,
|
|
}}
|
|
/>
|
|
)}
|
|
</For>
|
|
</div>
|
|
<div class="flex flex-wrap gap-x-3 gap-y-1">
|
|
<For each={breakdown()}>
|
|
{(segment) => (
|
|
<div class="flex items-center gap-1 text-11-regular text-text-weak">
|
|
<div class="size-2 rounded-sm" style={{ "background-color": segment.color }} />
|
|
<div>{segment.label}</div>
|
|
<div class="text-text-weaker">{segment.percent}</div>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</div>
|
|
<div class="hidden text-11-regular text-text-weaker">{language.t("context.breakdown.note")}</div>
|
|
</div>
|
|
</Show>
|
|
|
|
<Show when={systemPrompt()}>
|
|
{(prompt) => (
|
|
<div class="flex flex-col gap-2">
|
|
<div class="text-12-regular text-text-weak">{language.t("context.systemPrompt.title")}</div>
|
|
<div class="border border-border-base rounded-md bg-surface-base px-3 py-2">
|
|
<Markdown text={prompt()} class="text-12-regular" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Show>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div class="text-12-regular text-text-weak">{language.t("context.rawMessages.title")}</div>
|
|
<Accordion multiple>
|
|
<For each={props.messages()}>{(message) => <RawMessage message={message} />}</For>
|
|
</Accordion>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|