anomalyco/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-08-24 06:33:01 -04:00
Code Issues 5.9k Packages Projects Releases 19 Wiki Activity

fix(session-ui): align status tool typography (#44330)

Browse Source
This commit is contained in:
Brendan Allan
2026-08-23 14:55:53 +08:00
committed by GitHub
parent 79d5359d11
commit 9692bcbc21
3 changed files with 72 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/session-ui/src/components/session-turn.css
+5 -1
View File
@@ -43,11 +43,15 @@
align-self: stretch;
}
[data-slot="session-turn-thinking-row"] {
width: 100%;
margin-top: 12px;
}
[data-slot="session-turn-thinking"] {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
width: 100%;
min-width: 0;
color: var(--text-weak);
packages/session-ui/src/timeline/session-timeline-row.tsx
+30 -10
View File
@@ -11,6 +11,7 @@ import { TextShimmer } from "@opencode-ai/ui/text-shimmer"
import { Tooltip } from "@opencode-ai/ui/tooltip"
import { For, Show, createMemo, type Accessor, type JSX } from "solid-js"
import type { SessionUserActions, SessionUserComment } from "../actions"
import { BasicTool } from "../components/basic-tool"
import {
MessageDivider,
SessionAssistantContent,
@@ -442,16 +443,35 @@ export function createSessionTimelineRowRenderer(input: {
return (
<Frame row={current()}>
<div data-slot="session-turn-message-container" class={`w-full ${padding()}`}>
<div data-slot="session-turn-thinking">
<TextShimmer text={i18n.t("ui.sessionTurn.status.thinking")} />
<Show when={!input.showReasoningSummaries()}>
<TextReveal
text={current().reasoningHeading}
class="session-turn-thinking-heading"
travel={25}
duration={700}
/>
</Show>
<div data-slot="session-turn-thinking-row">
<BasicTool
icon="mcp"
status="running"
compact
locked
hideDetails
trigger={
<div data-slot="session-turn-thinking">
<div data-slot="basic-tool-tool-info-structured">
<div data-slot="basic-tool-tool-info-main">
<span data-slot="basic-tool-tool-title">
<TextShimmer text={i18n.t("ui.sessionTurn.status.thinking")} />
</span>
<Show when={!input.showReasoningSummaries()}>
<span data-slot="basic-tool-tool-subtitle">
<TextReveal
text={current().reasoningHeading}
class="session-turn-thinking-heading"
travel={25}
duration={700}
/>
</span>
</Show>
</div>
</div>
</div>
}
/>
</div>
</div>
</Frame>
packages/session-ui/src/tools/tool-renderer.tsx
+37 -40
View File
@@ -487,45 +487,42 @@ export function CurrentContextToolGroup(props: {
}
return (
<Collapsible
open={props.open}
onOpenChange={change}
variant="ghost"
class="tool-collapsible"
data-timeline-part-ids={props.tools.map((tool) => tool.id).join(",")}
>
<Collapsible.Trigger>
<div data-component="context-tool-group-trigger">
<span
data-slot="context-tool-group-title"
class="min-w-0 flex items-center gap-2 text-14-medium text-text-strong"
>
<span data-slot="context-tool-group-label" class="shrink-0">
<ToolStatusTitle
active={pending()}
activeText={i18n.t("ui.sessionTurn.status.gatheringContext")}
doneText={i18n.t("ui.sessionTurn.status.gatheredContext")}
split={false}
/>
<div data-timeline-part-ids={props.tools.map((tool) => tool.id).join(",")}>
<BasicTool
icon="glasses"
status={pending() ? "running" : "completed"}
compact
allowOpenWhilePending
open={props.open}
onOpenChange={change}
trigger={
<div data-component="context-tool-group-trigger">
<span data-slot="context-tool-group-title" class="min-w-0 flex items-center gap-2">
<span data-slot="basic-tool-tool-title" class="shrink-0">
<ToolStatusTitle
active={pending()}
activeText={i18n.t("ui.sessionTurn.status.gatheringContext")}
doneText={i18n.t("ui.sessionTurn.status.gatheredContext")}
split={false}
/>
</span>
<span
data-slot="basic-tool-tool-subtitle"
class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
>
<AnimatedCountList
items={[
{ key: "ui.messagePart.context.read", count: summary().read },
{ key: "ui.messagePart.context.search", count: summary().search },
{ key: "ui.messagePart.context.list", count: summary().list },
]}
fallback=""
/>
</span>
</span>
<span
data-slot="context-tool-group-summary"
class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-normal text-text-base"
>
<AnimatedCountList
items={[
{ key: "ui.messagePart.context.read", count: summary().read },
{ key: "ui.messagePart.context.search", count: summary().search },
{ key: "ui.messagePart.context.list", count: summary().list },
]}
fallback=""
/>
</span>
</span>
<Collapsible.Arrow />
</div>
</Collapsible.Trigger>
<Collapsible.Content>
</div>
}
>
<div data-component="context-tool-group-list">
<Index each={props.tools}>
{(tool) => {
@@ -557,8 +554,8 @@ export function CurrentContextToolGroup(props: {
}}
</Index>
</div>
</Collapsible.Content>
</Collapsible>
</BasicTool>
</div>
)
}