Skip to content

feat(app): align subagent UI with v2 #34931

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Brendonovich merged 3 commits into from
Jul 3, 2026
Merged

feat(app): align subagent UI with v2 #34931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1fdf073
align sub agent ui
arvsrn Jul 2, 2026
0478a4c
gate new spinner to v2 only
arvsrn Jul 2, 2026
918442e
Merge branch 'dev' into sub-agent-ui
Hona Jul 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions packages/session-ui/src/components/basic-tool.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,7 @@
line-height: var(--line-height-large);
letter-spacing: var(--letter-spacing-normal);
text-transform: capitalize;
color: var(--task-agent-legacy-color, var(--text-strong));
}

[data-slot="basic-tool-tool-subtitle"] {
Expand All @@ -247,6 +248,57 @@
}
}

body[data-new-layout] {
[data-component="task-tool-card"] {
padding: 8px 12px 8px 10px;
border-radius: 8px;
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));

[data-component="task-tool-spinner"],
[data-component="task-tool-title"] {
color: var(--task-agent-color, var(--text-strong));
}

[data-component="task-tool-title"] {
height: 20px;
font-family: var(--v2-font-family-sans, "Inter", sans-serif);
font-style: normal;
font-weight: 530;
font-size: 13px;
line-height: 20px;
letter-spacing: -0.04px;
flex: none;
flex-grow: 0;
}

[data-slot="basic-tool-tool-subtitle"] {
font-family: var(--v2-font-family-sans, "Inter", sans-serif);
font-style: normal;
font-weight: 440;
font-size: 13px;
line-height: 20px;
letter-spacing: -0.04px;
color: light-dark(var(--v2-text-text-base), #fafafa);
font-variation-settings: "slnt" 0;
flex: none;
flex-grow: 0;
}

[data-component="session-progress-indicator-v2"] {
color: var(--task-agent-color, light-dark(var(--v2-text-text-base), #ffffff));
}

&:hover,
&:focus-visible {
border-color: transparent;
background: var(--task-agent-background, light-dark(#fafafa, rgba(250, 250, 250, 0.15)));
}
}
}

body:not([data-new-layout]) {
[data-component="tool-trigger"] {
[data-slot="basic-tool-tool-spinner"] {
Expand Down
79 changes: 72 additions & 7 deletions packages/session-ui/src/components/message-part.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ import { animate } from "motion"
import { useLocation } from "@solidjs/router"
import { attached, inline, kind } from "./message-file"
import { readPartText } from "./message-part-text"
import { SessionProgressIndicatorV2 } from "../v2/components/session-progress-indicator-v2"

async function writeClipboard(text: string): Promise<boolean> {
const body = typeof document === "undefined" ? undefined : document.body
Expand Down Expand Up @@ -370,6 +371,44 @@ 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 agentThemeColors: Record<string, string> = {
primary: "var(--text-interactive-base)",
secondary: "var(--text-base)",
accent: "var(--icon-info-base)",
success: "var(--icon-success-base)",
warning: "var(--icon-warning-base)",
error: "var(--icon-critical-base)",
info: "var(--icon-info-base)",
}

const v2AgentThemeColors: Record<string, string> = {
primary: "var(--v2-text-text-accent)",
secondary: "var(--v2-text-text-muted)",
accent: "var(--v2-icon-icon-accent)",
success: "var(--v2-state-fg-success)",
warning: "var(--v2-state-fg-warning)",
error: "var(--v2-state-fg-danger)",
info: "var(--v2-state-fg-info)",
}

const agentPalette = [
"var(--icon-agent-ask-base)",
"var(--icon-agent-build-base)",
Expand All @@ -394,16 +433,31 @@ function tone(name: string) {
function taskAgent(
raw: unknown,
list?: readonly { name: string; color?: string }[],
): { name?: string; color?: string } {
): { name?: string; color?: string; v2Color?: string; border?: string; background?: 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
return {
name: item?.name ?? `${raw[0]!.toUpperCase()}${raw.slice(1)}`,
color: item?.color ?? agentTones[key] ?? tone(key),
color,
v2Color,
border: v2Tone?.border ?? `color-mix(in srgb, ${v2Color} 48%, transparent)`,
background: v2Tone?.background ?? `color-mix(in srgb, ${v2Color} 12%, transparent)`,
}
}

function agentColor(value: string | undefined, themeColors: Record<string, string>) {
if (!value) return
return themeColors[value] ?? value
}

function newLayout() {
return typeof document !== "undefined" && document.body.hasAttribute("data-new-layout")
}

function webSearchProviderLabel(provider: unknown) {
if (provider === "parallel") return "Parallel Web Search"
if (provider === "exa") return "Exa Web Search"
Expand Down Expand Up @@ -1882,6 +1936,9 @@ ToolRegistry.register({
const agent = createMemo(() => taskAgent(props.input.subagent_type, data.store.agent))
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
Expand Down Expand Up @@ -1921,17 +1978,25 @@ ToolRegistry.register({
}

const trigger = () => (
<div data-component="task-tool-card">
<div
data-component="task-tool-card"
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)" }}>
<Spinner />
<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" style={{ color: tone() ?? "var(--text-strong)" }}>
{title()}
</span>
<span data-component="task-tool-title">{title()}</span>
<Show when={subtitle()}>
<span data-slot="basic-tool-tool-subtitle">{subtitle()}</span>
</Show>
Expand Down
18 changes: 18 additions & 0 deletions packages/ui/src/styles/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,15 @@
--icon-agent-docs-base: #fcb239;
--icon-agent-ask-base: #2090f5;
--icon-agent-build-base: #034cff;
--v2-agent-plan-solid: var(--v2-pink-900);
--v2-agent-plan-border: rgba(200, 61, 139, 0.5);
--v2-agent-plan-background: rgba(253, 236, 243, 0.33);
--v2-agent-build-solid: var(--v2-blue-900);
--v2-agent-build-border: rgba(59, 92, 246, 0.5);
--v2-agent-build-background: rgba(236, 241, 254, 0.33);
--v2-agent-explore-solid: var(--v2-yellow-900);
--v2-agent-explore-border: rgba(142, 114, 49, 0.5);
--v2-agent-explore-background: rgba(254, 250, 236, 0.33);
--icon-on-success-base: rgba(18, 201, 5, 0.9);
--icon-on-success-hover: rgba(45, 186, 38, 0.9);
--icon-on-success-selected: rgba(7, 137, 1, 0.9);
Expand Down Expand Up @@ -541,6 +550,15 @@
--icon-agent-docs-base: #fbb73c;
--icon-agent-ask-base: #2090f5;
--icon-agent-build-base: #9dbefe;
--v2-agent-plan-solid: var(--v2-pink-400);
--v2-agent-plan-border: rgba(250, 188, 216, 0.5);
--v2-agent-plan-background: rgba(247, 213, 228, 0.1);
--v2-agent-build-solid: var(--v2-blue-400);
--v2-agent-build-border: rgba(215, 226, 252, 0.5);
--v2-agent-build-background: rgba(215, 226, 252, 0.1);
--v2-agent-explore-solid: var(--v2-yellow-400);
--v2-agent-explore-border: rgba(247, 229, 181, 0.5);
--v2-agent-explore-background: rgba(252, 239, 208, 0.1);
--icon-on-success-base: rgba(18, 201, 5, 0.9);
--icon-on-success-hover: rgba(53, 192, 45, 0.9);
--icon-on-success-selected: rgba(77, 225, 68, 0.9);
Expand Down
26 changes: 26 additions & 0 deletions packages/ui/src/theme/v2/mapping.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,30 @@ import { V2_AVATAR_DARK, V2_AVATAR_LIGHT } from "./avatar"

const ref = (name: string): V2ColorValue => `var(--${name})`

const lightAgentTokens: Record<string, V2ColorValue> = {
"v2-agent-plan-solid": ref("v2-pink-900"),
"v2-agent-plan-border": "rgba(200, 61, 139, 0.5)",
"v2-agent-plan-background": "rgba(253, 236, 243, 0.33)",
"v2-agent-build-solid": ref("v2-blue-900"),
"v2-agent-build-border": "rgba(59, 92, 246, 0.5)",
"v2-agent-build-background": "rgba(236, 241, 254, 0.33)",
"v2-agent-explore-solid": ref("v2-yellow-900"),
"v2-agent-explore-border": "rgba(142, 114, 49, 0.5)",
"v2-agent-explore-background": "rgba(254, 250, 236, 0.33)",
}

const darkAgentTokens: Record<string, V2ColorValue> = {
"v2-agent-plan-solid": ref("v2-pink-400"),
"v2-agent-plan-border": "rgba(250, 188, 216, 0.5)",
"v2-agent-plan-background": "rgba(247, 213, 228, 0.1)",
"v2-agent-build-solid": ref("v2-blue-400"),
"v2-agent-build-border": "rgba(215, 226, 252, 0.5)",
"v2-agent-build-background": "rgba(215, 226, 252, 0.1)",
"v2-agent-explore-solid": ref("v2-yellow-400"),
"v2-agent-explore-border": "rgba(247, 229, 181, 0.5)",
"v2-agent-explore-background": "rgba(252, 239, 208, 0.1)",
}

const light: Record<string, V2ColorValue> = {
"v2-background-bg-base": ref("v2-grey-100"),
"v2-background-bg-deep": ref("v2-grey-200"),
Expand Down Expand Up @@ -46,6 +70,7 @@ const light: Record<string, V2ColorValue> = {
"v2-state-bg-info": ref("v2-blue-100"),
"v2-state-fg-info": ref("v2-blue-800"),
"v2-state-border-info": ref("v2-blue-300"),
...lightAgentTokens,
...V2_AVATAR_LIGHT,
"v2-elevation-raised":
"0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8), 0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
Expand Down Expand Up @@ -110,6 +135,7 @@ const dark: Record<string, V2ColorValue> = {
"v2-state-bg-info": ref("v2-blue-1200"),
"v2-state-fg-info": ref("v2-blue-500"),
"v2-state-border-info": ref("v2-blue-900"),
...darkAgentTokens,
...V2_AVATAR_DARK,
"v2-elevation-raised":
"0px 2px 4px 0px var(--v2-alpha-dark-30), 0px 1px 2px 0px var(--v2-alpha-dark-30), 0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6)",
Expand Down
40 changes: 40 additions & 0 deletions packages/ui/src/v2/styles/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,16 @@
--v2-state-fg-info: var(--v2-blue-800);
--v2-state-border-info: var(--v2-blue-300);

--v2-agent-plan-solid: var(--v2-pink-900);
--v2-agent-plan-border: rgba(200, 61, 139, 0.5);
--v2-agent-plan-background: rgba(253, 236, 243, 0.33);
--v2-agent-build-solid: var(--v2-blue-900);
--v2-agent-build-border: rgba(59, 92, 246, 0.5);
--v2-agent-build-background: rgba(236, 241, 254, 0.33);
--v2-agent-explore-solid: var(--v2-yellow-900);
--v2-agent-explore-border: rgba(142, 114, 49, 0.5);
--v2-agent-explore-background: rgba(254, 250, 236, 0.33);

/* ── Project avatar (fixed; theme-independent) ── */
--v2-avatar-fg: #ffffffff;
--v2-avatar-bg-orange: #ee7330ff;
Expand Down Expand Up @@ -193,6 +203,16 @@
--v2-state-fg-info: var(--v2-blue-500);
--v2-state-border-info: var(--v2-blue-900);

--v2-agent-plan-solid: var(--v2-pink-400);
--v2-agent-plan-border: rgba(250, 188, 216, 0.5);
--v2-agent-plan-background: rgba(247, 213, 228, 0.1);
--v2-agent-build-solid: var(--v2-blue-400);
--v2-agent-build-border: rgba(215, 226, 252, 0.5);
--v2-agent-build-background: rgba(215, 226, 252, 0.1);
--v2-agent-explore-solid: var(--v2-yellow-400);
--v2-agent-explore-border: rgba(247, 229, 181, 0.5);
--v2-agent-explore-background: rgba(252, 239, 208, 0.1);

--v2-elevation-raised:
0px 2px 4px 0px var(--v2-alpha-dark-30),
0px 1px 2px 0px var(--v2-alpha-dark-30),
Expand Down Expand Up @@ -296,6 +316,16 @@
--v2-state-fg-info: var(--v2-blue-800);
--v2-state-border-info: var(--v2-blue-300);

--v2-agent-plan-solid: var(--v2-pink-900);
--v2-agent-plan-border: rgba(200, 61, 139, 0.5);
--v2-agent-plan-background: rgba(253, 236, 243, 0.33);
--v2-agent-build-solid: var(--v2-blue-900);
--v2-agent-build-border: rgba(59, 92, 246, 0.5);
--v2-agent-build-background: rgba(236, 241, 254, 0.33);
--v2-agent-explore-solid: var(--v2-yellow-900);
--v2-agent-explore-border: rgba(142, 114, 49, 0.5);
--v2-agent-explore-background: rgba(254, 250, 236, 0.33);

--v2-elevation-raised:
0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8),
0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
Expand Down Expand Up @@ -406,6 +436,16 @@
--v2-state-fg-info: var(--v2-blue-500);
--v2-state-border-info: var(--v2-blue-900);

--v2-agent-plan-solid: var(--v2-pink-400);
--v2-agent-plan-border: rgba(250, 188, 216, 0.5);
--v2-agent-plan-background: rgba(247, 213, 228, 0.1);
--v2-agent-build-solid: var(--v2-blue-400);
--v2-agent-build-border: rgba(215, 226, 252, 0.5);
--v2-agent-build-background: rgba(215, 226, 252, 0.1);
--v2-agent-explore-solid: var(--v2-yellow-400);
--v2-agent-explore-border: rgba(247, 229, 181, 0.5);
--v2-agent-explore-background: rgba(252, 239, 208, 0.1);

--v2-avatar-fg: #ffffffff;
--v2-avatar-bg-orange: #723d22ff;
--v2-avatar-border-orange: #ff8648ff;
Expand Down
Loading