@opencode-ai/ui 1.17.16 → 1.17.17

package/dist/components/icon.d.ts

@@ -47,6 +47,7 @@ declare const icons: {
     "magnifying-glass-menu": string;
     "window-cursor": string;
     task: string;
+    subagent: string;
     stop: string;
     status: string;
     "status-active": string;

package/dist/v2/components/dialog-v2.d.ts

@@ -4,6 +4,7 @@ export interface DialogProps extends ParentProps {
     size?: "normal" | "large" | "x-large";
     variant?: "default" | "settings";
     class?: ComponentProps<"div">["class"];
+    containerClass?: ComponentProps<"div">["class"];
     classList?: ComponentProps<"div">["classList"];
     fit?: boolean;
 }

package/dist/v2/components/icon.d.ts

@@ -132,6 +132,10 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "outline-reset": {
+        viewBox: string;
+        body: string;
+    };
     archive: {
         viewBox: string;
         body: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "1.17.16",
+  "version": "1.17.17",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/components/icon.tsx

@@ -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,7 @@ 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() {

package/src/styles/theme.css

@@ -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.2);
+  --v2-agent-plan-background: rgba(253, 236, 243, 0.1);
+  --v2-agent-build-solid: var(--v2-blue-800);
+  --v2-agent-build-border: rgba(44, 71, 200, 0.1);
+  --v2-agent-build-background: rgba(236, 241, 254, 0.1);
   --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.2);
+  --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.2);
+    --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.2);
+    --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.2);
+    --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);

package/src/theme/v2/mapping.ts

@@ -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> = {

package/src/v2/components/button-v2.css

@@ -14,7 +14,7 @@
   font-style: normal;
   font-weight: 530;
   font-size: 13px;
-  line-height: 1;
+  line-height: 20px;
   color: var(--v2-text-text-base);
   text-shadow: none;
   font-variant-numeric: tabular-nums;

package/src/v2/components/dialog-v2.tsx

@@ -6,6 +6,7 @@ export interface DialogProps extends ParentProps {
   size?: "normal" | "large" | "x-large"
   variant?: "default" | "settings"
   class?: ComponentProps<"div">["class"]
+  containerClass?: ComponentProps<"div">["class"]
   classList?: ComponentProps<"div">["classList"]
   fit?: boolean
 }
@@ -79,7 +80,7 @@ export function DialogHeader(props: DialogHeaderProps) {
 }
 
 export function Dialog(props: DialogProps) {
-  const [local] = splitProps(props, ["size", "variant", "class", "classList", "fit", "children"])
+  const [local] = splitProps(props, ["size", "variant", "class", "containerClass", "classList", "fit", "children"])
 
   return (
     <div
@@ -88,7 +89,7 @@ export function Dialog(props: DialogProps) {
       data-fit={local.fit ? true : undefined}
       data-size={local.size || "normal"}
     >
-      <div data-slot="dialog-container">
+      <div data-slot="dialog-container" class={local.containerClass}>
         <Kobalte.Content
           data-slot="dialog-content"
           classList={{

package/src/v2/components/icon.tsx

@@ -133,6 +133,10 @@ const icons = {
     viewBox: "0 0 20 20",
     body: `<path d="M5.83333 4.16406L2.5 7.4974L5.83333 10.8307M3.33333 7.4974H17.9167V15.4141H10" stroke="currentColor" stroke-linecap="square"/>`,
   },
+  "outline-reset": {
+    viewBox: "0 0 20 20",
+    body: `<path d="M5.83333 4.16406L2.5 7.4974L5.83333 10.8307M3.33333 7.4974H17.9167V15.4141H10" stroke="currentColor" stroke-linecap="square"/>`,
+  },
   archive: {
     viewBox: "0 0 16 16",
     body: `<path d="M13.1112 13.5555V14.0555H13.6112V13.5555H13.1112ZM2.889 13.5555H2.389L2.389 14.0555H2.889V13.5555ZM3.38901 5.55546L3.38901 5.05546L2.38901 5.05546L2.38901 5.55546L2.88901 5.55546L3.38901 5.55546ZM14.4446 2.44434H14.9446V1.94434L14.4446 1.94434L14.4446 2.44434ZM14.4446 5.55545L14.4446 6.05545L14.9446 6.05545V5.55545H14.4446ZM1.55566 5.55546L1.05566 5.55545L1.05566 6.05546L1.55566 6.05546L1.55566 5.55546ZM1.5557 2.44436L1.5557 1.94436L1.05571 1.94436L1.0557 2.44435L1.5557 2.44436ZM13.1112 5.55546H12.6112V13.5555H13.1112H13.6112V5.55546H13.1112ZM2.889 13.5555H3.389L3.38901 5.55546L2.88901 5.55546L2.38901 5.55546L2.389 13.5555H2.889ZM14.4446 2.44434H13.9446V5.55545H14.4446H14.9446V2.44434H14.4446ZM1.55566 5.55546L2.05566 5.55547L2.0557 2.44436L1.5557 2.44436L1.0557 2.44435L1.05566 5.55545L1.55566 5.55546ZM6.22234 8.22213V8.72213H9.7779V8.22213V7.72213H6.22234V8.22213ZM13.1112 13.5555V13.0555H2.889V13.5555V14.0555H13.1112V13.5555ZM1.5557 2.44436L1.5557 2.94436L14.4446 2.94434L14.4446 2.44434L14.4446 1.94434L1.5557 1.94436L1.5557 2.44436ZM14.4446 5.55545L14.4446 5.05545L1.55566 5.05546L1.55566 5.55546L1.55566 6.05546L14.4446 6.05545L14.4446 5.55545Z" fill="currentColor"/>`,

package/src/v2/styles/theme.css

@@ -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.2);
+    --v2-agent-plan-background: rgba(253, 236, 243, 0.1);
+    --v2-agent-build-solid: var(--v2-blue-800);
+    --v2-agent-build-border: rgba(44, 71, 200, 0.1);
+    --v2-agent-build-background: rgba(236, 241, 254, 0.1);
     --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.2);
+    --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.2);
+    --v2-agent-plan-background: rgba(253, 236, 243, 0.1);
+    --v2-agent-build-solid: var(--v2-blue-800);
+    --v2-agent-build-border: rgba(44, 71, 200, 0.1);
+    --v2-agent-build-background: rgba(236, 241, 254, 0.1);
     --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.2);
+    --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.2);
+    --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.2);
+    --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.2);
+    --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;