|
|
@@ -1,7 +1,7 @@
|
|
|
import { useLocal, useSync } from "@/context"
|
|
|
-import { Icon } from "@opencode-ai/ui"
|
|
|
+import { Icon, Tooltip } from "@opencode-ai/ui"
|
|
|
import { Collapsible } from "@/ui"
|
|
|
-import type { Part, ToolPart } from "@opencode-ai/sdk"
|
|
|
+import type { AssistantMessage, Part, ToolPart } from "@opencode-ai/sdk"
|
|
|
import { DateTime } from "luxon"
|
|
|
import {
|
|
|
createSignal,
|
|
|
@@ -21,6 +21,8 @@ import { Markdown } from "./markdown"
|
|
|
import { Code } from "./code"
|
|
|
import { createElementSize } from "@solid-primitives/resize-observer"
|
|
|
import { createScrollPosition } from "@solid-primitives/scroll"
|
|
|
+import { ProgressCircle } from "./progress-circle"
|
|
|
+import { pipe, sumBy } from "remeda"
|
|
|
|
|
|
function Part(props: ParentProps & ComponentProps<"div">) {
|
|
|
const [local, others] = splitProps(props, ["class", "classList", "children"])
|
|
|
@@ -33,7 +35,7 @@ function Part(props: ParentProps & ComponentProps<"div">) {
|
|
|
}}
|
|
|
{...others}
|
|
|
>
|
|
|
- <p class="text-xs leading-4 text-left text-text-muted/60 font-medium">{local.children}</p>
|
|
|
+ <p class="text-12-medium text-left">{local.children}</p>
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
@@ -45,8 +47,8 @@ function CollapsiblePart(props: { title: ParentProps["children"] } & ParentProps
|
|
|
<Part>{props.title}</Part>
|
|
|
</Collapsible.Trigger>
|
|
|
<Collapsible.Content>
|
|
|
- <p class="flex-auto py-1 text-xs min-w-0 text-pretty">
|
|
|
- <span class="text-text-muted/60 break-words">{props.children}</span>
|
|
|
+ <p class="flex-auto min-w-0 text-pretty">
|
|
|
+ <span class="text-12-medium text-text-weak break-words">{props.children}</span>
|
|
|
</p>
|
|
|
</Collapsible.Content>
|
|
|
</Collapsible>
|
|
|
@@ -66,7 +68,7 @@ function ReadToolPart(props: { part: ToolPart }) {
|
|
|
const path = state().input["filePath"] as string
|
|
|
return (
|
|
|
<Part class="cursor-pointer" onClick={() => local.file.open(path)}>
|
|
|
- <span class="text-text-muted">Read</span> {getFilename(path)}
|
|
|
+ <span class="">Read</span> {getFilename(path)}
|
|
|
</Part>
|
|
|
)
|
|
|
}}
|
|
|
@@ -75,9 +77,9 @@ function ReadToolPart(props: { part: ToolPart }) {
|
|
|
{(state) => (
|
|
|
<div>
|
|
|
<Part>
|
|
|
- <span class="text-text-muted">Read</span> {getFilename(state().input["filePath"] as string)}
|
|
|
+ <span class="">Read</span> {getFilename(state().input["filePath"] as string)}
|
|
|
</Part>
|
|
|
- <div class="text-error">{sync.sanitize(state().error)}</div>
|
|
|
+ <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
|
|
|
</div>
|
|
|
)}
|
|
|
</Match>
|
|
|
@@ -95,10 +97,9 @@ function EditToolPart(props: { part: ToolPart }) {
|
|
|
<Match when={props.part.state.status === "completed" && props.part.state}>
|
|
|
{(state) => (
|
|
|
<CollapsiblePart
|
|
|
- defaultOpen
|
|
|
title={
|
|
|
<>
|
|
|
- <span class="text-text-muted">Edit</span> {getFilename(state().input["filePath"] as string)}
|
|
|
+ <span class="">Edit</span> {getFilename(state().input["filePath"] as string)}
|
|
|
</>
|
|
|
}
|
|
|
>
|
|
|
@@ -111,11 +112,11 @@ function EditToolPart(props: { part: ToolPart }) {
|
|
|
<CollapsiblePart
|
|
|
title={
|
|
|
<>
|
|
|
- <span class="text-text-muted">Edit</span> {getFilename(state().input["filePath"] as string)}
|
|
|
+ <span class="">Edit</span> {getFilename(state().input["filePath"] as string)}
|
|
|
</>
|
|
|
}
|
|
|
>
|
|
|
- <div class="text-error">{sync.sanitize(state().error)}</div>
|
|
|
+ <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
|
|
|
</CollapsiblePart>
|
|
|
)}
|
|
|
</Match>
|
|
|
@@ -135,7 +136,7 @@ function WriteToolPart(props: { part: ToolPart }) {
|
|
|
<CollapsiblePart
|
|
|
title={
|
|
|
<>
|
|
|
- <span class="text-text-muted">Write</span> {getFilename(state().input["filePath"] as string)}
|
|
|
+ <span class="">Write</span> {getFilename(state().input["filePath"] as string)}
|
|
|
</>
|
|
|
}
|
|
|
>
|
|
|
@@ -147,9 +148,9 @@ function WriteToolPart(props: { part: ToolPart }) {
|
|
|
{(state) => (
|
|
|
<div>
|
|
|
<Part>
|
|
|
- <span class="text-text-muted">Write</span> {getFilename(state().input["filePath"] as string)}
|
|
|
+ <span class="">Write</span> {getFilename(state().input["filePath"] as string)}
|
|
|
</Part>
|
|
|
- <div class="text-error">{sync.sanitize(state().error)}</div>
|
|
|
+ <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
|
|
|
</div>
|
|
|
)}
|
|
|
</Match>
|
|
|
@@ -170,7 +171,7 @@ function BashToolPart(props: { part: ToolPart }) {
|
|
|
defaultOpen
|
|
|
title={
|
|
|
<>
|
|
|
- <span class="text-text-muted">Run command:</span> {state().input["command"]}
|
|
|
+ <span class="">Run command:</span> {state().input["command"]}
|
|
|
</>
|
|
|
}
|
|
|
>
|
|
|
@@ -183,11 +184,11 @@ function BashToolPart(props: { part: ToolPart }) {
|
|
|
<CollapsiblePart
|
|
|
title={
|
|
|
<>
|
|
|
- <span class="text-text-muted">Shell</span> {state().input["command"]}
|
|
|
+ <span class="">Shell</span> {state().input["command"]}
|
|
|
</>
|
|
|
}
|
|
|
>
|
|
|
- <div class="text-error">{sync.sanitize(state().error)}</div>
|
|
|
+ <div class="text-icon-critical-active">{sync.sanitize(state().error)}</div>
|
|
|
</CollapsiblePart>
|
|
|
)}
|
|
|
</Match>
|
|
|
@@ -210,7 +211,7 @@ function ToolPart(props: { part: ToolPart }) {
|
|
|
// patch
|
|
|
// task
|
|
|
return (
|
|
|
- <div class="min-w-0 flex-auto text-xs">
|
|
|
+ <div class="min-w-0 flex-auto text-12-medium">
|
|
|
<Switch
|
|
|
fallback={
|
|
|
<span>
|
|
|
@@ -243,7 +244,32 @@ export default function SessionTimeline(props: { session: string; class?: string
|
|
|
const size = createElementSize(root)
|
|
|
const scroll = createScrollPosition(scrollElement)
|
|
|
|
|
|
- onMount(() => sync.session.sync(props.session))
|
|
|
+ const valid = (part: Part) => {
|
|
|
+ if (!part) return false
|
|
|
+ switch (part.type) {
|
|
|
+ case "step-start":
|
|
|
+ case "step-finish":
|
|
|
+ case "file":
|
|
|
+ case "patch":
|
|
|
+ return false
|
|
|
+ case "text":
|
|
|
+ return !part.synthetic
|
|
|
+ case "reasoning":
|
|
|
+ return part.text.trim()
|
|
|
+ case "tool":
|
|
|
+ switch (part.tool) {
|
|
|
+ case "todoread":
|
|
|
+ case "todowrite":
|
|
|
+ case "list":
|
|
|
+ case "grep":
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ default:
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
const session = createMemo(() => sync.session.get(props.session))
|
|
|
const messages = createMemo(() => sync.data.message[props.session] ?? [])
|
|
|
const working = createMemo(() => {
|
|
|
@@ -253,6 +279,45 @@ export default function SessionTimeline(props: { session: string; class?: string
|
|
|
return !last.time.completed
|
|
|
})
|
|
|
|
|
|
+ const cost = createMemo(() => {
|
|
|
+ const total = pipe(
|
|
|
+ messages(),
|
|
|
+ sumBy((x) => (x.role === "assistant" ? x.cost : 0)),
|
|
|
+ )
|
|
|
+ return new Intl.NumberFormat("en-US", {
|
|
|
+ style: "currency",
|
|
|
+ currency: "USD",
|
|
|
+ }).format(total)
|
|
|
+ })
|
|
|
+
|
|
|
+ const last = createMemo(() => {
|
|
|
+ return messages().findLast((x) => x.role === "assistant") as AssistantMessage
|
|
|
+ })
|
|
|
+
|
|
|
+ const model = createMemo(() => {
|
|
|
+ if (!last()) return
|
|
|
+ const model = sync.data.provider.find((x) => x.id === last().providerID)?.models[last().modelID]
|
|
|
+ return model
|
|
|
+ })
|
|
|
+
|
|
|
+ const tokens = createMemo(() => {
|
|
|
+ if (!last()) return
|
|
|
+ const tokens = last().tokens
|
|
|
+ const total = tokens.input + tokens.output + tokens.reasoning + tokens.cache.read + tokens.cache.write
|
|
|
+ return new Intl.NumberFormat("en-US", {
|
|
|
+ notation: "compact",
|
|
|
+ compactDisplay: "short",
|
|
|
+ }).format(total)
|
|
|
+ })
|
|
|
+
|
|
|
+ const context = createMemo(() => {
|
|
|
+ if (!last()) return
|
|
|
+ if (!model()?.limit.context) return 0
|
|
|
+ const tokens = last().tokens
|
|
|
+ const total = tokens.input + tokens.output + tokens.reasoning + tokens.cache.read + tokens.cache.write
|
|
|
+ return Math.round((total / model()!.limit.context) * 100)
|
|
|
+ })
|
|
|
+
|
|
|
const getScrollParent = (el: HTMLElement | null): HTMLElement | undefined => {
|
|
|
let p = el?.parentElement
|
|
|
while (p && p !== document.body) {
|
|
|
@@ -294,23 +359,6 @@ export default function SessionTimeline(props: { session: string; class?: string
|
|
|
lastScrollY = scroll.y
|
|
|
})
|
|
|
|
|
|
- const valid = (part: Part) => {
|
|
|
- if (!part) return false
|
|
|
- switch (part.type) {
|
|
|
- case "step-start":
|
|
|
- case "step-finish":
|
|
|
- case "file":
|
|
|
- case "patch":
|
|
|
- return false
|
|
|
- case "text":
|
|
|
- return !part.synthetic
|
|
|
- case "reasoning":
|
|
|
- return part.text.trim()
|
|
|
- default:
|
|
|
- return true
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
const duration = (part: Part) => {
|
|
|
switch (part.type) {
|
|
|
default:
|
|
|
@@ -334,57 +382,66 @@ export default function SessionTimeline(props: { session: string; class?: string
|
|
|
<div
|
|
|
ref={setRoot}
|
|
|
classList={{
|
|
|
- "p-4 select-text flex flex-col gap-y-1": true,
|
|
|
+ "select-text flex flex-col text-text-weak": true,
|
|
|
[props.class ?? ""]: !!props.class,
|
|
|
}}
|
|
|
>
|
|
|
- <ul role="list" class="flex flex-col gap-1">
|
|
|
+ <div class="py-1.5 px-10 flex justify-end items-center self-stretch">
|
|
|
+ <div class="flex items-center gap-6">
|
|
|
+ <Tooltip value={`${tokens()} Tokens`} class="flex items-center gap-1.5">
|
|
|
+ <Show when={context()}>
|
|
|
+ <ProgressCircle percentage={context()!} />
|
|
|
+ </Show>
|
|
|
+ <div class="text-14-regular text-text-weak text-right">{context()}%</div>
|
|
|
+ </Tooltip>
|
|
|
+ <div class="text-14-regular text-text-strong text-right">{cost()}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul role="list" class="flex flex-col gap-6 items-start self-stretch px-10 pt-2 pb-6">
|
|
|
<For each={messages()}>
|
|
|
{(message) => (
|
|
|
- <For each={sync.data.part[message.id]?.filter(valid)}>
|
|
|
- {(part) => (
|
|
|
- <li class="group/li">
|
|
|
- <Switch fallback={<div class="flex-auto min-w-0 text-xs mt-1 text-left">{part.type}</div>}>
|
|
|
- <Match when={part.type === "text" && part}>
|
|
|
- {(part) => (
|
|
|
- <Switch>
|
|
|
- <Match when={message.role === "user"}>
|
|
|
- <div class="w-full flex flex-col items-end justify-stretch gap-y-1.5 min-w-0 mt-5 group-first/li:mt-0">
|
|
|
- <p class="w-full rounded-md p-3 ring-1 ring-text/15 ring-inset text-xs bg-background-panel">
|
|
|
- <span class="font-medium text-text whitespace-pre-wrap break-words">{part().text}</span>
|
|
|
- </p>
|
|
|
- <p class="text-xs text-text-muted">
|
|
|
- {DateTime.fromMillis(message.time.created).toRelative()} ·{" "}
|
|
|
- {sync.data.config.username ?? "user"}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- </Match>
|
|
|
- <Match when={message.role === "assistant"}>
|
|
|
- <Markdown text={sync.sanitize(part().text)} class="text-text mt-1" />
|
|
|
- </Match>
|
|
|
- </Switch>
|
|
|
- )}
|
|
|
- </Match>
|
|
|
- <Match when={part.type === "reasoning" && part}>
|
|
|
- {(part) => (
|
|
|
- <CollapsiblePart
|
|
|
- title={
|
|
|
- <Switch fallback={<span class="text-text-muted">Thinking</span>}>
|
|
|
- <Match when={part().time.end}>
|
|
|
- <span class="text-text-muted">Thought</span> for {duration(part())}s
|
|
|
- </Match>
|
|
|
- </Switch>
|
|
|
- }
|
|
|
- >
|
|
|
- <Markdown text={part().text} />
|
|
|
- </CollapsiblePart>
|
|
|
- )}
|
|
|
- </Match>
|
|
|
- <Match when={part.type === "tool" && part}>{(part) => <ToolPart part={part()} />}</Match>
|
|
|
- </Switch>
|
|
|
- </li>
|
|
|
- )}
|
|
|
- </For>
|
|
|
+ <div class="flex flex-col gap-1 justify-center items-start self-stretch">
|
|
|
+ <For each={sync.data.part[message.id]?.filter(valid)}>
|
|
|
+ {(part) => (
|
|
|
+ <li class="group/li">
|
|
|
+ <Switch fallback={<div class="">{part.type}</div>}>
|
|
|
+ <Match when={part.type === "text" && part}>
|
|
|
+ {(part) => (
|
|
|
+ <Switch>
|
|
|
+ <Match when={message.role === "user"}>
|
|
|
+ <div class="w-fit flex items-center px-3 py-1 rounded-md bg-surface-weak">
|
|
|
+ <span class="text-14-regular text-text-strong whitespace-pre-wrap break-words">
|
|
|
+ {part().text}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </Match>
|
|
|
+ <Match when={message.role === "assistant"}>
|
|
|
+ <Markdown text={sync.sanitize(part().text)} />
|
|
|
+ </Match>
|
|
|
+ </Switch>
|
|
|
+ )}
|
|
|
+ </Match>
|
|
|
+ <Match when={part.type === "reasoning" && part}>
|
|
|
+ {(part) => (
|
|
|
+ <CollapsiblePart
|
|
|
+ title={
|
|
|
+ <Switch fallback={<span class="text-text-weak">Thinking</span>}>
|
|
|
+ <Match when={part().time.end}>
|
|
|
+ <span class="text-12-medium text-text-weak">Thought</span> for {duration(part())}s
|
|
|
+ </Match>
|
|
|
+ </Switch>
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <Markdown text={part().text} />
|
|
|
+ </CollapsiblePart>
|
|
|
+ )}
|
|
|
+ </Match>
|
|
|
+ <Match when={part.type === "tool" && part}>{(part) => <ToolPart part={part()} />}</Match>
|
|
|
+ </Switch>
|
|
|
+ </li>
|
|
|
+ )}
|
|
|
+ </For>
|
|
|
+ </div>
|
|
|
)}
|
|
|
</For>
|
|
|
</ul>
|
Adam