@opencode-ai/ui 0.0.0-dev-202607090806 → 0.0.0-dev-202607091125

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/icon.d.ts +1 -0
  2. package/package.json +1 -1
  3. package/src/components/icon.tsx +2 -1
  4. package/src/styles/theme.css +20 -16
  5. package/src/theme/v2/mapping.ts +20 -16
  6. package/src/v2/styles/theme.css +30 -24
package/dist/components/icon.d.ts CHANGED
@@ -47,6 +47,7 @@ declare const icons: {
47
47
  "magnifying-glass-menu": string;
48
48
  "window-cursor": string;
49
49
  task: string;
50
+ subagent: string;
50
51
  stop: string;
51
52
  status: string;
52
53
  "status-active": string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opencode-ai/ui",
3
- "version": "0.0.0-dev-202607090806",
3
+ "version": "0.0.0-dev-202607091125",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/components/icon.tsx CHANGED
@@ -52,6 +52,7 @@ const icons = {
52
52
  "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"/>`,
53
53
  "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"/>`,
54
54
  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"/>`,
55
+ 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"/>`,
55
56
  stop: `<rect x="5" y="5" width="10" height="10" fill="currentColor"/>`,
56
57
  status: `<path d="M2 10V18H18V10M2 10V2H18V10M2 10H18M5 6H9M5 14H9" stroke="currentColor"/>`,
57
58
  "status-active": `<path d="M18 2H2V10H18V2Z" fill="currentColor" fill-opacity="0.1"/>
@@ -110,7 +111,7 @@ const symbol = (name: keyof typeof icons) => `opencode-icon-${name}`
110
111
  let spriteInserted = false
111
112
 
112
113
  function viewBox(name: keyof typeof icons) {
113
- return name === "magnifying-glass" || name === "arrow-undo-down" ? "0 0 16 16" : "0 0 20 20"
114
+ return name === "magnifying-glass" || name === "arrow-undo-down" || name === "subagent" ? "0 0 16 16" : "0 0 20 20"
114
115
  }
115
116
 
116
117
  function ensureSprite() {
package/src/styles/theme.css CHANGED
@@ -281,15 +281,17 @@
281
281
  --icon-agent-docs-base: #fcb239;
282
282
  --icon-agent-ask-base: #2090f5;
283
283
  --icon-agent-build-base: #034cff;
284
- --v2-agent-plan-solid: var(--v2-pink-900);
285
- --v2-agent-plan-border: rgba(200, 61, 139, 0.5);
286
- --v2-agent-plan-background: rgba(253, 236, 243, 0.33);
287
- --v2-agent-build-solid: var(--v2-blue-900);
288
- --v2-agent-build-border: rgba(59, 92, 246, 0.5);
289
- --v2-agent-build-background: rgba(236, 241, 254, 0.33);
284
+ --v2-agent-plan-solid: var(--v2-pink-800);
285
+ --v2-agent-plan-border: rgba(200, 61, 139, 0.2);
286
+ --v2-agent-plan-background: rgba(253, 236, 243, 0.1);
287
+ --v2-agent-build-solid: var(--v2-blue-800);
288
+ --v2-agent-build-border: rgba(44, 71, 200, 0.1);
289
+ --v2-agent-build-background: rgba(236, 241, 254, 0.1);
290
290
  --v2-agent-explore-solid: var(--v2-yellow-900);
291
- --v2-agent-explore-border: rgba(142, 114, 49, 0.5);
292
- --v2-agent-explore-background: rgba(254, 250, 236, 0.33);
291
+ --v2-agent-explore-border: rgba(203, 159, 52, 0.2);
292
+ --v2-agent-explore-background: rgba(254, 250, 236, 0.1);
293
+ --v2-agent-review-solid: var(--v2-green-800);
294
+ --v2-agent-writer-solid: var(--v2-purple-700);
293
295
  --icon-on-success-base: rgba(18, 201, 5, 0.9);
294
296
  --icon-on-success-hover: rgba(45, 186, 38, 0.9);
295
297
  --icon-on-success-selected: rgba(7, 137, 1, 0.9);
@@ -551,14 +553,16 @@
551
553
  --icon-agent-ask-base: #2090f5;
552
554
  --icon-agent-build-base: #9dbefe;
553
555
  --v2-agent-plan-solid: var(--v2-pink-400);
554
- --v2-agent-plan-border: rgba(250, 188, 216, 0.5);
555
- --v2-agent-plan-background: rgba(247, 213, 228, 0.1);
556
- --v2-agent-build-solid: var(--v2-blue-400);
557
- --v2-agent-build-border: rgba(215, 226, 252, 0.5);
558
- --v2-agent-build-background: rgba(215, 226, 252, 0.1);
559
- --v2-agent-explore-solid: var(--v2-yellow-400);
560
- --v2-agent-explore-border: rgba(247, 229, 181, 0.5);
561
- --v2-agent-explore-background: rgba(252, 239, 208, 0.1);
556
+ --v2-agent-plan-border: rgba(247, 153, 198, 0.2);
557
+ --v2-agent-plan-background: rgba(170, 53, 118, 0.05);
558
+ --v2-agent-build-solid: var(--v2-blue-300);
559
+ --v2-agent-build-border: rgba(162, 188, 255, 0.2);
560
+ --v2-agent-build-background: rgba(38, 63, 169, 0.05);
561
+ --v2-agent-explore-solid: var(--v2-yellow-300);
562
+ --v2-agent-explore-border: rgba(243, 218, 155, 0.2);
563
+ --v2-agent-explore-background: rgba(172, 136, 51, 0.05);
564
+ --v2-agent-review-solid: var(--v2-green-300);
565
+ --v2-agent-writer-solid: var(--v2-purple-400);
562
566
  --icon-on-success-base: rgba(18, 201, 5, 0.9);
563
567
  --icon-on-success-hover: rgba(53, 192, 45, 0.9);
564
568
  --icon-on-success-selected: rgba(77, 225, 68, 0.9);
package/src/theme/v2/mapping.ts CHANGED
@@ -4,27 +4,31 @@ import { V2_AVATAR_DARK, V2_AVATAR_LIGHT } from "./avatar"
4
4
  const ref = (name: string): V2ColorValue => `var(--${name})`
5
5
 
6
6
  const lightAgentTokens: Record<string, V2ColorValue> = {
7
- "v2-agent-plan-solid": ref("v2-pink-900"),
8
- "v2-agent-plan-border": "rgba(200, 61, 139, 0.5)",
9
- "v2-agent-plan-background": "rgba(253, 236, 243, 0.33)",
10
- "v2-agent-build-solid": ref("v2-blue-900"),
11
- "v2-agent-build-border": "rgba(59, 92, 246, 0.5)",
12
- "v2-agent-build-background": "rgba(236, 241, 254, 0.33)",
7
+ "v2-agent-plan-solid": ref("v2-pink-800"),
8
+ "v2-agent-plan-border": "rgba(200, 61, 139, 0.20)",
9
+ "v2-agent-plan-background": "rgba(253, 236, 243, 0.10)",
10
+ "v2-agent-build-solid": ref("v2-blue-800"),
11
+ "v2-agent-build-border": "rgba(44, 71, 200, 0.20)",
12
+ "v2-agent-build-background": "rgba(236, 241, 254, 0.10)",
13
13
  "v2-agent-explore-solid": ref("v2-yellow-900"),
14
- "v2-agent-explore-border": "rgba(142, 114, 49, 0.5)",
15
- "v2-agent-explore-background": "rgba(254, 250, 236, 0.33)",
14
+ "v2-agent-explore-border": "rgba(203, 159, 52, 0.20)",
15
+ "v2-agent-explore-background": "rgba(254, 250, 236, 0.1)",
16
+ "v2-agent-review-solid": ref("v2-green-800"),
17
+ "v2-agent-writer-solid": ref("v2-purple-700"),
16
18
  }
17
19
 
18
20
  const darkAgentTokens: Record<string, V2ColorValue> = {
19
21
  "v2-agent-plan-solid": ref("v2-pink-400"),
20
- "v2-agent-plan-border": "rgba(250, 188, 216, 0.5)",
21
- "v2-agent-plan-background": "rgba(247, 213, 228, 0.1)",
22
- "v2-agent-build-solid": ref("v2-blue-400"),
23
- "v2-agent-build-border": "rgba(215, 226, 252, 0.5)",
24
- "v2-agent-build-background": "rgba(215, 226, 252, 0.1)",
25
- "v2-agent-explore-solid": ref("v2-yellow-400"),
26
- "v2-agent-explore-border": "rgba(247, 229, 181, 0.5)",
27
- "v2-agent-explore-background": "rgba(252, 239, 208, 0.1)",
22
+ "v2-agent-plan-border": "rgba(247, 153, 198, 0.20)",
23
+ "v2-agent-plan-background": "rgba(170, 53, 118, 0.05)",
24
+ "v2-agent-build-solid": ref("v2-blue-300"),
25
+ "v2-agent-build-border": "rgba(162, 188, 255, 0.20)",
26
+ "v2-agent-build-background": "rgba(38, 63, 169, 0.05)",
27
+ "v2-agent-explore-solid": ref("v2-yellow-300"),
28
+ "v2-agent-explore-border": "rgba(243, 218, 155, 0.20)",
29
+ "v2-agent-explore-background": "rgba(172, 136, 51, 0.05)",
30
+ "v2-agent-review-solid": ref("v2-green-300"),
31
+ "v2-agent-writer-solid": ref("v2-purple-400"),
28
32
  }
29
33
 
30
34
  const light: Record<string, V2ColorValue> = {
package/src/v2/styles/theme.css CHANGED
@@ -77,15 +77,17 @@
77
77
  --v2-state-fg-info: var(--v2-blue-800);
78
78
  --v2-state-border-info: var(--v2-blue-300);
79
79
 
80
- --v2-agent-plan-solid: var(--v2-pink-900);
81
- --v2-agent-plan-border: rgba(200, 61, 139, 0.5);
82
- --v2-agent-plan-background: rgba(253, 236, 243, 0.33);
83
- --v2-agent-build-solid: var(--v2-blue-900);
84
- --v2-agent-build-border: rgba(59, 92, 246, 0.5);
85
- --v2-agent-build-background: rgba(236, 241, 254, 0.33);
80
+ --v2-agent-plan-solid: var(--v2-pink-800);
81
+ --v2-agent-plan-border: rgba(200, 61, 139, 0.2);
82
+ --v2-agent-plan-background: rgba(253, 236, 243, 0.1);
83
+ --v2-agent-build-solid: var(--v2-blue-800);
84
+ --v2-agent-build-border: rgba(44, 71, 200, 0.1);
85
+ --v2-agent-build-background: rgba(236, 241, 254, 0.1);
86
86
  --v2-agent-explore-solid: var(--v2-yellow-900);
87
- --v2-agent-explore-border: rgba(142, 114, 49, 0.5);
88
- --v2-agent-explore-background: rgba(254, 250, 236, 0.33);
87
+ --v2-agent-explore-border: rgba(203, 159, 52, 0.2);
88
+ --v2-agent-explore-background: rgba(254, 250, 236, 0.1);
89
+ --v2-agent-review-solid: var(--v2-green-800);
90
+ --v2-agent-writer-solid: var(--v2-purple-700);
89
91
 
90
92
  /* ── Project avatar (fixed; theme-independent) ── */
91
93
  --v2-avatar-fg: #ffffffff;
@@ -316,15 +318,17 @@
316
318
  --v2-state-fg-info: var(--v2-blue-800);
317
319
  --v2-state-border-info: var(--v2-blue-300);
318
320
 
319
- --v2-agent-plan-solid: var(--v2-pink-900);
320
- --v2-agent-plan-border: rgba(200, 61, 139, 0.5);
321
- --v2-agent-plan-background: rgba(253, 236, 243, 0.33);
322
- --v2-agent-build-solid: var(--v2-blue-900);
323
- --v2-agent-build-border: rgba(59, 92, 246, 0.5);
324
- --v2-agent-build-background: rgba(236, 241, 254, 0.33);
321
+ --v2-agent-plan-solid: var(--v2-pink-800);
322
+ --v2-agent-plan-border: rgba(200, 61, 139, 0.2);
323
+ --v2-agent-plan-background: rgba(253, 236, 243, 0.1);
324
+ --v2-agent-build-solid: var(--v2-blue-800);
325
+ --v2-agent-build-border: rgba(44, 71, 200, 0.1);
326
+ --v2-agent-build-background: rgba(236, 241, 254, 0.1);
325
327
  --v2-agent-explore-solid: var(--v2-yellow-900);
326
- --v2-agent-explore-border: rgba(142, 114, 49, 0.5);
327
- --v2-agent-explore-background: rgba(254, 250, 236, 0.33);
328
+ --v2-agent-explore-border: rgba(203, 159, 52, 0.2);
329
+ --v2-agent-explore-background: rgba(254, 250, 236, 0.1);
330
+ --v2-agent-review-solid: var(--v2-green-800);
331
+ --v2-agent-writer-solid: var(--v2-purple-700);
328
332
 
329
333
  --v2-elevation-raised:
330
334
  0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8),
@@ -437,14 +441,16 @@
437
441
  --v2-state-border-info: var(--v2-blue-900);
438
442
 
439
443
  --v2-agent-plan-solid: var(--v2-pink-400);
440
- --v2-agent-plan-border: rgba(250, 188, 216, 0.5);
441
- --v2-agent-plan-background: rgba(247, 213, 228, 0.1);
442
- --v2-agent-build-solid: var(--v2-blue-400);
443
- --v2-agent-build-border: rgba(215, 226, 252, 0.5);
444
- --v2-agent-build-background: rgba(215, 226, 252, 0.1);
445
- --v2-agent-explore-solid: var(--v2-yellow-400);
446
- --v2-agent-explore-border: rgba(247, 229, 181, 0.5);
447
- --v2-agent-explore-background: rgba(252, 239, 208, 0.1);
444
+ --v2-agent-plan-border: rgba(247, 153, 198, 0.2);
445
+ --v2-agent-plan-background: rgba(170, 53, 118, 0.05);
446
+ --v2-agent-build-solid: var(--v2-blue-300);
447
+ --v2-agent-build-border: rgba(162, 188, 255, 0.2);
448
+ --v2-agent-build-background: rgba(38, 63, 169, 0.05);
449
+ --v2-agent-explore-solid: var(--v2-yellow-300);
450
+ --v2-agent-explore-border: rgba(243, 218, 155, 0.2);
451
+ --v2-agent-explore-background: rgba(172, 136, 51, 0.05);
452
+ --v2-agent-review-solid: var(--v2-green-300);
453
+ --v2-agent-writer-solid: var(--v2-purple-400);
448
454
 
449
455
  --v2-avatar-fg: #ffffffff;
450
456
  --v2-avatar-bg-orange: #723d22ff;