ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(feat): align sub-agent task rows with v2 design (#35167)

Browse source
This commit is contained in:
usrnk1 2026-07-09 10:07:02 +02:00 • committed by GitHub
commit 5c860d4142
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 191 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

43
packages/session-ui/src/components/basic-tool.css
View file

@ -185,6 +185,14 @@
background-color 0.15s ease,
color 0.15s ease;
[data-component="task-tool-surface"] {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1 1 auto;
}
[data-slot="basic-tool-tool-info-structured"] {
flex: 1 1 auto;
min-width: 0;
@ -250,16 +258,30 @@
body[data-new-layout] {
[data-component="task-tool-card"] {
padding: 8px 12px 8px 10px;
border-radius: 8px;
gap: 8px;
padding: 0;
border-radius: 0;
border: 0;
border-color: transparent;
background: var(--task-agent-background, light-dark(#fafafa, rgba(250, 250, 250, 0.15)));
box-shadow: inset 0 0 0 0.5px var(--task-agent-border, var(--v2-border-border-base));
background: transparent;
box-shadow: none;
[data-component="task-tool-surface"] {
padding: 8px 12px;
border-radius: 8px;
background: var(--v2-background-bg-layer-01);
}
[data-component="task-tool-spinner"],
[data-component="task-tool-title"] {
color: var(--task-agent-color, var(--text-strong));
[data-component="task-tool-icon"] {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
[data-component="icon"] {
color: var(--task-agent-color, var(--v2-icon-icon-base));
}
}
[data-component="task-tool-title"] {
@ -270,6 +292,7 @@ body[data-new-layout] {
font-size: 13px;
line-height: 20px;
letter-spacing: -0.04px;
color: var(--v2-text-text-base);
flex: none;
flex-grow: 0;
}
@ -281,7 +304,7 @@ body[data-new-layout] {
font-size: 13px;
line-height: 20px;
letter-spacing: -0.04px;
color: light-dark(var(--v2-text-text-base), #fafafa);
color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0;
flex: none;
flex-grow: 0;
@ -294,7 +317,11 @@ body[data-new-layout] {
&:hover,
&:focus-visible {
border-color: transparent;
background: var(--task-agent-background, light-dark(#fafafa, rgba(250, 250, 250, 0.15)));
background: transparent;
[data-component="task-tool-surface"] {
background: var(--v2-background-bg-layer-01);
}
}
}
}

73
packages/session-ui/src/components/message-part.tsx
View file

@ -371,22 +371,12 @@ const agentTones: Record<string, string> = {
plan: "var(--icon-agent-plan-base)",
}
const v2AgentTones: Record<string, { color: string; border: string; background: string }> = {
build: {
color: "var(--v2-agent-build-solid)",
border: "var(--v2-agent-build-border)",
background: "var(--v2-agent-build-background)",
},
explore: {
color: "var(--v2-agent-explore-solid)",
border: "var(--v2-agent-explore-border)",
background: "var(--v2-agent-explore-background)",
},
plan: {
color: "var(--v2-agent-plan-solid)",
border: "var(--v2-agent-plan-border)",
background: "var(--v2-agent-plan-background)",
},
const v2AgentTones: Record<string, string> = {
build: "var(--v2-agent-build-solid)",
explore: "var(--v2-agent-explore-solid)",
plan: "var(--v2-agent-plan-solid)",
review: "var(--v2-agent-review-solid)",
writer: "var(--v2-agent-writer-solid)",
}
const agentThemeColors: Record<string, string> = {
@ -433,19 +423,17 @@ function tone(name: string) {
function taskAgent(
raw: unknown,
list?: readonly { name: string; color?: string }[],
): { name?: string; color?: string; v2Color?: string; border?: string; background?: string } {
): { name?: string; color?: string; v2Color?: string } {
if (typeof raw !== "string" || !raw) return {}
const key = raw.toLowerCase()
const item = list?.find((entry) => entry.name === raw || entry.name.toLowerCase() === key)
const v2Tone = item?.color ? undefined : v2AgentTones[key]
const color = agentColor(item?.color, agentThemeColors) ?? agentTones[key] ?? tone(key)
const v2Color = agentColor(item?.color, v2AgentThemeColors) ?? v2Tone?.color ?? color
const v2Color = agentColor(item?.color, v2AgentThemeColors) ?? v2Tone ?? color
return {
name: item?.name ?? `${raw[0]!.toUpperCase()}${raw.slice(1)}`,
color,
v2Color,
border: v2Tone?.border ?? `color-mix(in srgb, ${v2Color} 48%, transparent)`,
background: v2Tone?.background ?? `color-mix(in srgb, ${v2Color} 12%, transparent)`,
}
}
@ -1937,8 +1925,6 @@ ToolRegistry.register({
const title = createMemo(() => agent().name ?? i18n.t("ui.tool.agent.default"))
const tone = createMemo(() => agent().color)
const v2Tone = createMemo(() => agent().v2Color)
const border = createMemo(() => agent().border)
const background = createMemo(() => agent().background)
const subtitle = createMemo(() => {
const value =
typeof props.input.description === "string" && props.input.description
@ -1983,25 +1969,34 @@ ToolRegistry.register({
style={{
"--task-agent-color": v2Tone(),
"--task-agent-legacy-color": tone(),
"--task-agent-border": border(),
"--task-agent-background": background(),
}}
>
<div data-slot="basic-tool-tool-info-structured">
<div data-slot="basic-tool-tool-info-main">
<Show when={running()}>
<span data-component="task-tool-spinner" style={{ color: tone() ?? "var(--icon-interactive-base)" }}>
<Show when={newLayout()} fallback={<Spinner />}>
<SessionProgressIndicatorV2
style={{ color: v2Tone() ?? "light-dark(var(--v2-text-text-base), #ffffff)" }}
/>
</Show>
</span>
</Show>
<span data-component="task-tool-title">{title()}</span>
<Show when={subtitle()}>
<span data-slot="basic-tool-tool-subtitle">{subtitle()}</span>
</Show>
<div data-component="task-tool-surface">
<div data-slot="basic-tool-tool-info-structured">
<div data-slot="basic-tool-tool-info-main">
<Show
when={running()}
fallback={
<Show when={newLayout()}>
<span data-component="task-tool-icon">
<Icon name="subagent" size="small" />
</span>
</Show>
}
>
<span data-component="task-tool-spinner" style={{ color: tone() ?? "var(--icon-interactive-base)" }}>
<Show when={newLayout()} fallback={<Spinner />}>
<SessionProgressIndicatorV2
style={{ color: v2Tone() ?? "light-dark(var(--v2-text-text-base), #ffffff)" }}
/>
</Show>
</span>
</Show>
<span data-component="task-tool-title">{title()}</span>
<Show when={subtitle()}>
<span data-slot="basic-tool-tool-subtitle">{subtitle()}</span>
</Show>
</div>
</div>
</div>
<Show when={clickable()}>

47
packages/session-ui/src/components/timeline-playground.stories.tsx
View file

@ -359,6 +359,34 @@ const TOOL_SAMPLES = {
title: "Agent (Explore)",
metadata: { sessionId: "sub-session-1" },
},
"task build": {
tool: "task",
input: { description: "Implement the settings page", subagent_type: "build", prompt: "Build it" },
output: "Implemented the settings page.",
title: "Agent (Build)",
metadata: { sessionId: "sub-session-2" },
},
"task plan": {
tool: "task",
input: { description: "Plan the migration strategy", subagent_type: "plan", prompt: "Plan it" },
output: "Drafted a 4-step migration plan.",
title: "Agent (Plan)",
metadata: { sessionId: "sub-session-3" },
},
"task themed": {
tool: "task",
input: { description: "Review the diff for regressions", subagent_type: "review", prompt: "Review it" },
output: "No regressions found.",
title: "Agent (Review)",
metadata: { sessionId: "sub-session-4" },
},
"task fallback": {
tool: "task",
input: { description: "Write release notes", subagent_type: "writer", prompt: "Write them" },
output: "Release notes drafted.",
title: "Agent (Writer)",
metadata: { sessionId: "sub-session-5" },
},
webfetch: {
tool: "webfetch",
input: { url: "https://solidjs.com/docs/latest/api" },
@ -1216,6 +1244,7 @@ function Playground() {
const data = createMemo(() => ({
session: [session()],
agent: [{ name: "build" }, { name: "plan" }, { name: "explore" }, { name: "review" }],
session_status: {},
session_diff: {},
message: { [session().id]: state.messages },
@ -1342,6 +1371,19 @@ function Playground() {
])
}
const addAgentTasksTurn = () => {
addFullTurn("Run subagents with every agent type", [
toolPart(TOOL_SAMPLES.task),
toolPart(TOOL_SAMPLES["task build"]),
toolPart(TOOL_SAMPLES["task plan"]),
toolPart(TOOL_SAMPLES["task themed"]),
toolPart(TOOL_SAMPLES["task fallback"]),
toolPart(TOOL_SAMPLES.task, "running"),
toolPart(TOOL_SAMPLES["task build"], "running"),
toolPart(TOOL_SAMPLES["task plan"], "running"),
])
}
const addKitchenSink = () => {
// User message variants
addUser("short")
@ -1727,6 +1769,9 @@ function Playground() {
<button style={btnStyle} onClick={addReasoningFullTurn}>
full turn
</button>
<button style={btnStyle} onClick={addAgentTasksTurn}>
agent tasks
</button>
<button style={btnAccent} onClick={addKitchenSink}>
kitchen sink
</button>
@ -1966,7 +2011,7 @@ function Playground() {
{/* Main area: timeline preview */}
<div
ref={previewRef!}
style={{ flex: "1", overflow: "auto", "min-width": "0", "background-color": "var(--background-stronger)" }}
style={{ flex: "1", overflow: "auto", "min-width": "0", "background-color": "var(--v2-background-bg-base)" }}
>
<DataProvider data={data()} directory="/project">
<FileComponentProvider component={FileStub}>