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

1
packages/ui/src/components/icon.stories.tsx
View file

@ -68,6 +68,7 @@ const names = [
"magnifying-glass-menu",
"window-cursor",
"task",
"subagent",
"stop",
"layout-left",
"layout-left-partial",

5
packages/ui/src/components/icon.tsx
View file

@ -52,6 +52,7 @@ const icons = {
"magnifying-glass-menu": `<path d="M2.08325 10.0002H4.58325M2.08325 5.41683H5.41659M2.08325 14.5835H5.41659M16.4583 13.9585L18.7499 16.2502M17.9166 10.0002C17.9166 12.9917 15.4915 15.4168 12.4999 15.4168C9.50838 15.4168 7.08325 12.9917 7.08325 10.0002C7.08325 7.00862 9.50838 4.5835 12.4999 4.5835C15.4915 4.5835 17.9166 7.00862 17.9166 10.0002Z" stroke="currentColor" stroke-linecap="square"/>`,
"window-cursor": `<path d="M17.9166 10.4167V3.75H2.08325V17.0833H10.4166M17.9166 13.5897L11.6666 11.6667L13.5897 17.9167L15.032 15.0321L17.9166 13.5897Z" stroke="currentColor" stroke-width="1.07143" stroke-linecap="square"/><path d="M5.00024 6.125C5.29925 6.12518 5.54126 6.36795 5.54126 6.66699C5.54108 6.96589 5.29914 7.20783 5.00024 7.20801C4.7012 7.20801 4.45843 6.966 4.45825 6.66699C4.45825 6.36784 4.70109 6.125 5.00024 6.125ZM7.91626 6.125C8.21541 6.125 8.45825 6.36784 8.45825 6.66699C8.45808 6.966 8.21531 7.20801 7.91626 7.20801C7.61736 7.20783 7.37542 6.96589 7.37524 6.66699C7.37524 6.36795 7.61726 6.12518 7.91626 6.125ZM10.8333 6.125C11.1324 6.125 11.3752 6.36784 11.3752 6.66699C11.3751 6.966 11.1323 7.20801 10.8333 7.20801C10.5342 7.20801 10.2914 6.966 10.2913 6.66699C10.2913 6.36784 10.5341 6.125 10.8333 6.125Z" fill="currentColor" stroke="currentColor" stroke-width="0.25" stroke-linecap="square"/>`,
task: `<path d="M9.99992 2.0835V17.9168M7.08325 3.75016H2.08325V16.2502H7.08325M12.9166 16.2502H17.9166V3.75016H12.9166" stroke="currentColor" stroke-linecap="square"/>`,
subagent: `<path d="M4.5 5C4.5 4.72386 4.72386 4.5 5 4.5H11C11.2761 4.5 11.5 4.72386 11.5 5V11C11.5 11.2761 11.2761 11.5 11 11.5H5C4.72386 11.5 4.5 11.2761 4.5 11V5Z" fill="currentColor"/><path d="M13.5 2C13.7761 2 14 2.22386 14 2.5V13.5C14 13.7761 13.7761 14 13.5 14H2.5C2.22386 14 2 13.7761 2 13.5V2.5C2 2.22386 2.22386 2 2.5 2H13.5ZM3 13H13V3H3V13Z" fill="currentColor"/>`,
stop: `<rect x="5" y="5" width="10" height="10" fill="currentColor"/>`,
status: `<path d="M2 10V18H18V10M2 10V2H18V10M2 10H18M5 6H9M5 14H9" stroke="currentColor"/>`,
"status-active": `<path d="M18 2H2V10H18V2Z" fill="currentColor" fill-opacity="0.1"/>
@ -110,7 +111,9 @@ const symbol = (name: keyof typeof icons) => `opencode-icon-${name}`
let spriteInserted = false
function viewBox(name: keyof typeof icons) {
return name === "magnifying-glass" || name === "arrow-undo-down" ? "0 0 16 16" : "0 0 20 20"
return name === "magnifying-glass" || name === "arrow-undo-down" || name === "subagent"
? "0 0 16 16"
: "0 0 20 20"
}
function ensureSprite() {

36
packages/ui/src/styles/theme.css
View file

@ -281,15 +281,17 @@
--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-plan-solid: var(--v2-pink-800);
--v2-agent-plan-border: rgba(200, 61, 139, 0.20);
--v2-agent-plan-background: rgba(253, 236, 243, 0.10);
--v2-agent-build-solid: var(--v2-blue-800);
--v2-agent-build-border: rgba(44, 71, 200, 0.10);
--v2-agent-build-background: rgba(236, 241, 254, 0.10);
--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-agent-explore-border: rgba(203, 159, 52, 0.20);
--v2-agent-explore-background: rgba(254, 250, 236, 0.1);
--v2-agent-review-solid: var(--v2-green-800);
--v2-agent-writer-solid: var(--v2-purple-700);
--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);
@ -551,14 +553,16 @@
--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);
--v2-agent-plan-border: rgba(247, 153, 198, 0.20);
--v2-agent-plan-background: rgba(170, 53, 118, 0.05);
--v2-agent-build-solid: var(--v2-blue-300);
--v2-agent-build-border: rgba(162, 188, 255, 0.20);
--v2-agent-build-background: rgba(38, 63, 169, 0.05);
--v2-agent-explore-solid: var(--v2-yellow-300);
--v2-agent-explore-border: rgba(243, 218, 155, 0.20);
--v2-agent-explore-background: rgba(172, 136, 51, 0.05);
--v2-agent-review-solid: var(--v2-green-300);
--v2-agent-writer-solid: var(--v2-purple-400);
--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);

36
packages/ui/src/theme/v2/mapping.ts
View file

@ -4,27 +4,31 @@ 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-plan-solid": ref("v2-pink-800"),
"v2-agent-plan-border": "rgba(200, 61, 139, 0.20)",
"v2-agent-plan-background": "rgba(253, 236, 243, 0.10)",
"v2-agent-build-solid": ref("v2-blue-800"),
"v2-agent-build-border": "rgba(44, 71, 200, 0.20)",
"v2-agent-build-background": "rgba(236, 241, 254, 0.10)",
"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)",
"v2-agent-explore-border": "rgba(203, 159, 52, 0.20)",
"v2-agent-explore-background": "rgba(254, 250, 236, 0.1)",
"v2-agent-review-solid": ref("v2-green-800"),
"v2-agent-writer-solid": ref("v2-purple-700"),
}
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)",
"v2-agent-plan-border": "rgba(247, 153, 198, 0.20)",
"v2-agent-plan-background": "rgba(170, 53, 118, 0.05)",
"v2-agent-build-solid": ref("v2-blue-300"),
"v2-agent-build-border": "rgba(162, 188, 255, 0.20)",
"v2-agent-build-background": "rgba(38, 63, 169, 0.05)",
"v2-agent-explore-solid": ref("v2-yellow-300"),
"v2-agent-explore-border": "rgba(243, 218, 155, 0.20)",
"v2-agent-explore-background": "rgba(172, 136, 51, 0.05)",
"v2-agent-review-solid": ref("v2-green-300"),
"v2-agent-writer-solid": ref("v2-purple-400"),
}
const light: Record<string, V2ColorValue> = {

54
packages/ui/src/v2/styles/theme.css
View file

@ -77,15 +77,17 @@
--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-plan-solid: var(--v2-pink-800);
--v2-agent-plan-border: rgba(200, 61, 139, 0.20);
--v2-agent-plan-background: rgba(253, 236, 243, 0.10);
--v2-agent-build-solid: var(--v2-blue-800);
--v2-agent-build-border: rgba(44, 71, 200, 0.10);
--v2-agent-build-background: rgba(236, 241, 254, 0.10);
--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-agent-explore-border: rgba(203, 159, 52, 0.20);
--v2-agent-explore-background: rgba(254, 250, 236, 0.1);
--v2-agent-review-solid: var(--v2-green-800);
--v2-agent-writer-solid: var(--v2-purple-700);
/* ── Project avatar (fixed; theme-independent) ── */
--v2-avatar-fg: #ffffffff;
@ -316,15 +318,17 @@
--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-plan-solid: var(--v2-pink-800);
--v2-agent-plan-border: rgba(200, 61, 139, 0.20);
--v2-agent-plan-background: rgba(253, 236, 243, 0.10);
--v2-agent-build-solid: var(--v2-blue-800);
--v2-agent-build-border: rgba(44, 71, 200, 0.10);
--v2-agent-build-background: rgba(236, 241, 254, 0.10);
--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-agent-explore-border: rgba(203, 159, 52, 0.20);
--v2-agent-explore-background: rgba(254, 250, 236, 0.1);
--v2-agent-review-solid: var(--v2-green-800);
--v2-agent-writer-solid: var(--v2-purple-700);
--v2-elevation-raised:
0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8),
@ -437,14 +441,16 @@
--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-agent-plan-border: rgba(247, 153, 198, 0.20);
--v2-agent-plan-background: rgba(170, 53, 118, 0.05);
--v2-agent-build-solid: var(--v2-blue-300);
--v2-agent-build-border: rgba(162, 188, 255, 0.20);
--v2-agent-build-background: rgba(38, 63, 169, 0.05);
--v2-agent-explore-solid: var(--v2-yellow-300);
--v2-agent-explore-border: rgba(243, 218, 155, 0.20);
--v2-agent-explore-background: rgba(172, 136, 51, 0.05);
--v2-agent-review-solid: var(--v2-green-300);
--v2-agent-writer-solid: var(--v2-purple-400);
--v2-avatar-fg: #ffffffff;
--v2-avatar-bg-orange: #723d22ff;