@opencode-ai/ui 1.17.13 → 1.17.14

package/dist/components/scroll-view.d.ts

@@ -1,9 +1,14 @@
 import { type ComponentProps } from "solid-js";
+export type ScrollViewThumbVisibility = "hover" | "scroll";
 export interface ScrollViewProps extends ComponentProps<"div"> {
     viewportRef?: (el: HTMLDivElement) => void;
     orientation?: "vertical" | "horizontal";
+    thumbVisibility?: ScrollViewThumbVisibility;
 }
 export declare const scrollKey: (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => "end" | "home" | "page-down" | "page-up" | "up" | "down" | undefined;
+export declare function canScrollKey(element: HTMLElement, key: NonNullable<ReturnType<typeof scrollKey>>): boolean;
+export declare function scrollKeyOwner(root: HTMLElement, target: EventTarget | null, key: NonNullable<ReturnType<typeof scrollKey>>): HTMLElement;
+export declare function isScrollKeyTarget(target: EventTarget | null, key: NonNullable<ReturnType<typeof scrollKey>>): boolean;
 export declare function scrollTopFromThumbPointer(input: {
     pointer: number;
     viewportTop: number;

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

@@ -56,6 +56,10 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    collapse: {
+        viewBox: string;
+        body: string;
+    };
     check: {
         viewBox: string;
         body: string;
@@ -92,6 +96,26 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    expand: {
+        viewBox: string;
+        body: string;
+    };
+    filetree: {
+        viewBox: string;
+        body: string;
+    };
+    split: {
+        viewBox: string;
+        body: string;
+    };
+    unified: {
+        viewBox: string;
+        body: string;
+    };
+    review: {
+        viewBox: string;
+        body: string;
+    };
     "outline-sliders": {
         viewBox: string;
         body: string;

package/dist/v2/components/project-avatar-v2.d.ts

@@ -2,10 +2,11 @@ import { type ComponentProps } from "solid-js";
 import "./project-avatar-v2.css";
 export declare const PROJECT_AVATAR_VARIANTS: readonly ["orange", "yellow", "cyan", "green", "red", "pink", "blue", "purple", "gray"];
 export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number];
+export type ProjectAvatarStyle = ProjectAvatarVariant | "outline";
 export interface ProjectAvatarProps extends ComponentProps<"div"> {
     fallback: string;
     src?: string;
-    variant?: ProjectAvatarVariant;
+    variant?: ProjectAvatarStyle;
     unread?: boolean;
 }
 export declare function ProjectAvatar(props: ProjectAvatarProps): import("solid-js").JSX.Element;

package/dist/v2/components/text-input-v2.d.ts

@@ -1,11 +1,18 @@
-import { type ComponentProps } from "solid-js";
+import { type ComponentProps, type JSX } from "solid-js";
 import "./text-input-v2.css";
 export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
+    /** Icon or adornment shown before the field value. */
+    leadingIcon?: JSX.Element;
     /** Show the trailing copy action. */
     showCopyButton?: boolean;
+    /** Show the trailing clear action. */
+    showClearButton?: boolean;
     /** Accessible label for the copy button. */
     copyLabel?: string;
+    /** Accessible label for the clear button. */
+    clearLabel?: string;
     onCopyClick?: (event: MouseEvent) => void;
+    onClearClick?: (event: MouseEvent) => void;
     /** Apply tabular numerals to the field value. */
     numeric?: boolean;
     /** Error styling for the field and value text. */
@@ -14,4 +21,4 @@ export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type">
     appearance?: "base" | "large";
     type?: ComponentProps<"input">["type"];
 }
-export declare function TextInputV2(props: TextInputV2Props): import("solid-js").JSX.Element;
+export declare function TextInputV2(props: TextInputV2Props): JSX.Element;

package/package.json

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

package/src/components/collapsible.css

@@ -127,6 +127,12 @@
       height: 24px;
     }
   }
+
+  &[data-variant="ghost"][data-scope="file-tree-v2"] {
+    > [data-slot="collapsible-trigger"] {
+      height: 28px;
+    }
+  }
 }
 
 @keyframes slideDown {

package/src/components/scroll-view.tsx

@@ -1,15 +1,19 @@
-import { onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js"
+import { onCleanup, onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createStore } from "solid-js/store"
 import { useI18n } from "../context/i18n"
 
+export type ScrollViewThumbVisibility = "hover" | "scroll"
+
 export interface ScrollViewProps extends ComponentProps<"div"> {
   viewportRef?: (el: HTMLDivElement) => void
   orientation?: "vertical" | "horizontal" // currently only vertical is fully implemented for thumb
+  thumbVisibility?: ScrollViewThumbVisibility
 }
 
 export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
-  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+  if (event.altKey || event.ctrlKey || event.metaKey) return
+  if (event.shiftKey && event.key !== " ") return
 
   switch (event.key) {
     case "PageDown":
@@ -24,9 +28,36 @@ export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey
       return "up"
     case "ArrowDown":
       return "down"
+    case " ":
+      return event.shiftKey ? "page-up" : "page-down"
   }
 }
 
+export function canScrollKey(element: HTMLElement, key: NonNullable<ReturnType<typeof scrollKey>>) {
+  const up = key === "up" || key === "page-up" || key === "home"
+  return up ? element.scrollTop > 0 : element.scrollTop + element.clientHeight < element.scrollHeight
+}
+
+export function scrollKeyOwner(
+  root: HTMLElement,
+  target: EventTarget | null,
+  key: NonNullable<ReturnType<typeof scrollKey>>,
+) {
+  const element = target instanceof Element ? target : undefined
+  const owner = element?.closest<HTMLElement>("[data-scrollable]")
+  if (!owner || owner === root) return root
+  if (!root.contains(owner)) return owner
+  return canScrollKey(owner, key) ? owner : root
+}
+
+export function isScrollKeyTarget(target: EventTarget | null, key: NonNullable<ReturnType<typeof scrollKey>>) {
+  const element = target instanceof HTMLElement ? target : undefined
+  if (!element) return true
+  if (["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName) || element.isContentEditable) return false
+  if ((key === "page-up" || key === "page-down") && element.closest('button, a[href], [role="button"]')) return false
+  return true
+}
+
 export function scrollTopFromThumbPointer(input: {
   pointer: number
   viewportTop: number
@@ -44,10 +75,10 @@ export function scrollTopFromThumbPointer(input: {
 
 export function ScrollView(props: ScrollViewProps) {
   const i18n = useI18n()
-  const merged = mergeProps({ orientation: "vertical" }, props)
+  const merged = mergeProps({ orientation: "vertical", thumbVisibility: "hover" }, props)
   const [local, events, rest] = splitProps(
     merged,
-    ["class", "children", "viewportRef", "orientation", "style"],
+    ["class", "children", "viewportRef", "orientation", "thumbVisibility", "style"],
     [
       "onScroll",
       "onWheel",
@@ -68,16 +99,37 @@ export function ScrollView(props: ScrollViewProps) {
   const [state, setState] = createStore({
     isHovered: false,
     isDragging: false,
+    isScrolling: false,
     thumbHeight: 0,
     thumbTop: 0,
     showThumb: false,
   })
   const isHovered = () => state.isHovered
   const isDragging = () => state.isDragging
+  const isScrolling = () => state.isScrolling
   const thumbHeight = () => state.thumbHeight
   const thumbTop = () => state.thumbTop
   const showThumb = () => state.showThumb
 
+  let scrollIdleTimer: ReturnType<typeof setTimeout> | undefined
+
+  const markScrolling = () => {
+    if (local.thumbVisibility !== "scroll") return
+    setState("isScrolling", true)
+    if (scrollIdleTimer !== undefined) clearTimeout(scrollIdleTimer)
+    scrollIdleTimer = setTimeout(() => setState("isScrolling", false), 800)
+  }
+
+  const thumbVisible = () => {
+    if (isDragging()) return true
+    if (local.thumbVisibility === "scroll") return isScrolling()
+    return isHovered()
+  }
+
+  onCleanup(() => {
+    if (scrollIdleTimer !== undefined) clearTimeout(scrollIdleTimer)
+  })
+
   const updateThumb = () => {
     if (!viewportRef) return
     const { scrollTop, scrollHeight, clientHeight } = viewportRef
@@ -160,9 +212,10 @@ export function ScrollView(props: ScrollViewProps) {
     if (document.activeElement && ["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement.tagName)) {
       return
     }
-
     const next = scrollKey(e)
     if (!next) return
+    if (!isScrollKeyTarget(e.target, next)) return
+    if (scrollKeyOwner(viewportRef, e.target, next) !== viewportRef) return
 
     const scrollAmount = viewportRef.clientHeight * 0.8
     const lineAmount = 40
@@ -208,11 +261,18 @@ export function ScrollView(props: ScrollViewProps) {
       <div
         ref={viewportRef}
         class="scroll-view__viewport"
+        data-scrollable
         onScroll={(e) => {
           updateThumb()
+          markScrolling()
           if (typeof events.onScroll === "function") events.onScroll(e as any)
         }}
-        onWheel={events.onWheel as any}
+        onWheel={(e) => {
+          markScrolling()
+          const handler = events.onWheel
+          if (typeof handler === "function") handler(e as any)
+          if (Array.isArray(handler)) handler[0](handler[1], e as any)
+        }}
         onTouchStart={events.onTouchStart as any}
         onTouchMove={events.onTouchMove as any}
         onTouchEnd={events.onTouchEnd as any}
@@ -236,7 +296,7 @@ export function ScrollView(props: ScrollViewProps) {
           ref={thumbRef}
           onPointerDown={onThumbPointerDown}
           class="scroll-view__thumb"
-          data-visible={isHovered() || isDragging()}
+          data-visible={thumbVisible()}
           data-dragging={isDragging()}
           style={{
             height: `${thumbHeight()}px`,

package/src/components/tabs.css

@@ -135,7 +135,8 @@
     }
   }
 
-  #review-panel &[data-variant="normal"][data-orientation="horizontal"] {
+  #review-panel &[data-variant="normal"][data-orientation="horizontal"],
+  #terminal-panel &[data-variant="normal"][data-orientation="horizontal"] {
     background-color: var(--background-stronger);
 
     [data-slot="tabs-list"] {
@@ -267,6 +268,51 @@
     }
   }
 
+  #terminal-panel &[data-variant="normal"][data-orientation="horizontal"] {
+    [data-slot="tabs-list"] {
+      height: 52px;
+      padding-right: 12px;
+      gap: 8px;
+    }
+
+    [data-slot="tabs-trigger-wrapper"] {
+      height: 28px;
+      padding-inline: 8px;
+      border: 0;
+      background-color: transparent;
+      box-shadow: none;
+
+      &::after {
+        display: none;
+      }
+
+      [data-slot="tabs-trigger"] {
+        padding: 0 !important;
+      }
+
+      &:has([data-slot="tabs-trigger-close-button"]) {
+        padding-right: 8px;
+      }
+
+      &:has([data-selected]) {
+        background-color: var(--v2-background-bg-layer-01);
+        box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
+      }
+    }
+
+    [data-slot="terminal-tab-title"] {
+      font-family: Inter, sans-serif;
+      font-style: normal;
+      font-weight: 440;
+      font-size: 13px;
+      line-height: 16px;
+      letter-spacing: -0.04px;
+      color: var(--v2-text-text-base);
+      font-variation-settings: "slnt" 0;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+
   &[data-variant="alt"] {
     [data-slot="tabs-list"] {
       padding-left: 24px;

package/src/context/marked.tsx

@@ -1,5 +1,4 @@
-import { marked } from "marked"
-import markedKatex from "marked-katex-extension"
+import { marked, type MarkedExtension, type Tokens } from "marked"
 import markedShiki from "marked-shiki"
 import katex from "katex"
 import { bundledLanguages, type BundledLanguage } from "shiki"
@@ -395,8 +394,8 @@ function renderMathInText(text: string): string {
     }
   })
 
-  // Inline math: $...$
-  const inlineMathRegex = /(?<!\$)\$(?!\$)((?:[^$\\]|\\.)+?)\$(?!\$)/g
+  // Inline math: \(...\)
+  const inlineMathRegex = /\\\(((?:\\.|[^\\\n])*?)\\\)/g
   result = result.replace(inlineMathRegex, (_, math) => {
     try {
       return katex.renderToString(math, {
@@ -404,13 +403,63 @@ function renderMathInText(text: string): string {
         throwOnError: false,
       })
     } catch {
-      return `$${math}$`
+      return `\\(${math}\\)`
     }
   })
 
   return result
 }
 
+const inlineMathRegex = /^\\\(((?:\\.|[^\\\n])*?)\\\)/
+const blockMathRegex = /^\$\$\n([\s\S]+?)\n\$\$(?:\n|$)/
+
+const katexExtension: MarkedExtension = {
+  extensions: [
+    {
+      name: "inlineKatex",
+      level: "inline",
+      start(src) {
+        const index = src.indexOf("\\(")
+        if (index === -1) return
+        return index
+      },
+      tokenizer(src) {
+        const match = src.match(inlineMathRegex)
+        if (!match) return
+        return {
+          type: "inlineKatex",
+          raw: match[0],
+          text: match[1].trim(),
+          displayMode: false,
+        }
+      },
+      renderer: renderKatexToken,
+    },
+    {
+      name: "blockKatex",
+      level: "block",
+      tokenizer(src) {
+        const match = src.match(blockMathRegex)
+        if (!match) return
+        return {
+          type: "blockKatex",
+          raw: match[0],
+          text: match[1].trim(),
+          displayMode: true,
+        }
+      },
+      renderer: renderKatexToken,
+    },
+  ],
+}
+
+function renderKatexToken(token: Tokens.Generic) {
+  return katex.renderToString(typeof token.text === "string" ? token.text : "", {
+    displayMode: token.displayMode === true,
+    throwOnError: false,
+  })
+}
+
 function renderMathExpressions(html: string): string {
   // Split on code/pre/kbd tags to avoid processing their contents
   const codeBlockPattern = /(<(?:pre|code|kbd)[^>]*>[\s\S]*?<\/(?:pre|code|kbd)>)/gi
@@ -480,10 +529,7 @@ export const { use: useMarked, provider: MarkedProvider } = createSimpleContext(
           },
         },
       },
-      markedKatex({
-        throwOnError: false,
-        nonStandard: true,
-      }),
+      katexExtension,
       markedShiki({
         async highlight(code, lang) {
           const highlighter = await getSharedHighlighter({

package/src/i18n/en.ts

@@ -15,6 +15,23 @@ export const dict: Record<string, string> = {
   "ui.sessionReview.largeDiff.title": "Diff too large to render",
   "ui.sessionReview.largeDiff.meta": "Limit: {{limit}} changed lines. Current: {{current}} changed lines.",
   "ui.sessionReview.largeDiff.renderAnyway": "Render anyway",
+  "ui.sessionReviewV2.expandMode": "Expand or collapse diff",
+  "ui.sessionReviewV2.filterFiles": "Filter files",
+  "ui.sessionReviewV2.toggleSidebar": "Toggle file tree",
+  "ui.sessionReviewV2.showAllLines": "Show all lines",
+  "ui.sessionReviewV2.hideNonDiffLines": "Hide non-diff lines",
+  "ui.sessionReviewV2.unifiedDiff": "Unified diff",
+  "ui.sessionReviewV2.splitDiff": "Split diff",
+  "ui.sessionReviewV2.previousFile": "Previous file",
+  "ui.sessionReviewV2.nextFile": "Next file",
+  "ui.sessionReviewV2.diffView": "Diff view",
+  "ui.sessionReviewV2.empty.noGit.title": "No tracked changes",
+  "ui.sessionReviewV2.empty.noGit.description": "Track, review, and undo changes in this project",
+  "ui.sessionReviewV2.empty.noGit.action": "Create Git repository",
+  "ui.sessionReviewV2.empty.noGit.actionLoading": "Creating Git repository...",
+  "ui.sessionReviewV2.empty.changes.title": "No file changes yet",
+  "ui.sessionReviewV2.empty.changes.description": "Project changes will appear here",
+
   "ui.sessionReview.openFile": "Open file",
   "ui.sessionReview.selection.line": "line {{line}}",
   "ui.sessionReview.selection.lines": "lines {{start}}-{{end}}",
@@ -35,6 +52,7 @@ export const dict: Record<string, string> = {
   "ui.lineComment.editorLabel.suffix": "",
   "ui.lineComment.placeholder": "Add comment",
   "ui.lineComment.submit": "Comment",
+  "ui.lineComment.cancel": "Cancel",
 
   "ui.sessionTurn.steps.show": "Show steps",
   "ui.sessionTurn.steps.hide": "Hide steps",

package/src/styles/theme.css

@@ -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);
@@ -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);

package/src/theme/v2/mapping.ts

@@ -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"),
@@ -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)",
@@ -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)",

package/src/v2/components/file-tree-v2.css

@@ -0,0 +1,120 @@
+[data-component="file-tree-v2"] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"] {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  padding-right: 8px;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: var(--v2-text-text-muted);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-ignored] {
+  color: var(--v2-text-text-faint);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"]:hover {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] {
+  color: var(--v2-text-text-base);
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected]:hover {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="file-tree-v2"] .filetree-icon--mono {
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-component="file-tree-v2"] .filetree-iconpair .filetree-icon--color {
+  opacity: 0;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] .filetree-iconpair .filetree-icon--color {
+  opacity: 1;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] .filetree-iconpair .filetree-icon--mono {
+  opacity: 0;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-chevron"] {
+  color: var(--v2-text-text-muted);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-chevron"] svg {
+  transition: transform 120ms ease;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-chevron"]:not([data-expanded]) svg {
+  transform: rotate(-90deg);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] [data-slot="file-tree-v2-chevron"] {
+  color: var(--v2-text-text-base);
+}
+
+[data-component="file-tree-v2"] .filetree-iconpair {
+  position: relative;
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+}
+
+[data-component="file-tree-v2"] .filetree-iconpair [data-component="file-icon"] {
+  position: absolute;
+  inset: 0;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"] {
+  box-sizing: border-box;
+  flex: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: 11px;
+  font-weight: 530;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  text-align: center;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums lining-nums;
+  font-feature-settings:
+    "tnum" on,
+    "lnum" on;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"][data-change="modified"] {
+  opacity: 0;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"][data-change="added"] {
+  color: var(--v2-state-fg-success);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"][data-change="deleted"] {
+  color: var(--v2-state-fg-danger);
+}

package/src/v2/components/icon.tsx

@@ -57,6 +57,10 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M5 6.5L8 9.5L11 6.5" stroke="currentColor"/>`,
   },
+  collapse: {
+    viewBox: "0 0 16 16",
+    body: `<path d="M8 1V6M11 3L8 6L5 3" stroke="currentColor"/><path d="M8 15V10M11 13L8 10L5 13" stroke="currentColor"/><path d="M4 8H6" stroke="currentColor"/><path d="M7 8H9" stroke="currentColor"/><path d="M10 8H12" stroke="currentColor"/>`,
+  },
   check: {
     viewBox: "0 0 16 16",
     body: `<path d="M3.53613 8.17857L6.39328 11.75L12.4647 4.25" stroke="currentColor"/>`,
@@ -93,6 +97,26 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M2.5 7.5H3.5V8.5H2.5V7.5Z" stroke="currentColor"/><path d="M7.5 7.5H8.5V8.5H7.5V7.5Z" stroke="currentColor"/><path d="M12.5 7.5H13.5V8.5H12.5V7.5Z" stroke="currentColor"/>`,
   },
+  expand: {
+    viewBox: "0 0 16 16",
+    body: `<path d="M8.25 6.17773V1.17773M11.25 4.17773L8.25 1.17773L5.25 4.17773" stroke="currentColor"/><path d="M8.25 9.17773V14.1777M11.25 11.1777L8.25 14.1777L5.25 11.1777" stroke="currentColor"/><path d="M4.25 7.67773H12.25" stroke="currentColor"/>`,
+  },
+  filetree: {
+    viewBox: "0 0 16 16",
+    body: `<path d="M2.5 1.5V12.2484H6.75M2.5 4.74838H6.75" stroke="currentColor"/><rect x="8.5" y="3.2168" width="6" height="3" fill="none" stroke="currentColor"/><rect x="8.5" y="10.75" width="6" height="3" fill="none" stroke="currentColor"/>`,
+  },
+  split: {
+    viewBox: "0 0 16 16",
+    body: `<path d="M1 14H15L15 2H1V14Z" stroke="currentColor"/><rect x="3" y="4" width="4" height="8" fill="currentColor" fill-opacity="0.5"/><rect x="9" y="4" width="4" height="8" fill="currentColor" fill-opacity="0.5"/>`,
+  },
+  unified: {
+    viewBox: "0 0 16 16",
+    body: `<path d="M3.00001 4.00045L12.9998 4L13 6.99955L3 7L3.00001 4.00045Z" fill="currentColor" fill-opacity="0.5"/><path d="M3.0001 9H13L12.9999 12H3L3.0001 9Z" fill="currentColor" fill-opacity="0.5"/><path d="M1 14H15L15 2H1V14Z" stroke="currentColor"/>`,
+  },
+  review: {
+    viewBox: "0 0 20 20",
+    body: `<path d="M7 14.5H13M7 7.99512H10.0049M10.0049 7.99512H13M10.0049 7.99512V5M10.0049 7.99512V11M18 18V2L2 2L2 18H18Z" stroke="currentColor"/>`,
+  },
   "outline-sliders": {
     viewBox: "0 0 16 16",
     body: `<path d="M11.7779 4.66675H14.4446M11.7779 4.66675C11.7779 5.77132 10.8825 6.66675 9.77789 6.66675C8.67332 6.66675 7.77789 5.77132 7.77789 4.66675M11.7779 4.66675C11.7779 3.56218 10.8825 2.66675 9.77789 2.66675C8.67332 2.66675 7.77789 3.56218 7.77789 4.66675M1.55566 4.66675H7.77789M4.22233 11.3334H1.55566M4.22233 11.3334C4.22233 12.438 5.11776 13.3334 6.22233 13.3334C7.3269 13.3334 8.22233 12.438 8.22233 11.3334M4.22233 11.3334C4.22233 10.2288 5.11776 9.33341 6.22233 9.33341C7.3269 9.33341 8.22233 10.2288 8.22233 11.3334M14.4446 11.3334H8.22233" stroke="currentColor"/>`,

package/src/v2/components/project-avatar-v2.css

@@ -81,6 +81,13 @@
   --project-avatar-border: var(--v2-avatar-border-gray);
 }
 
+[data-slot="project-avatar-surface"][data-variant="outline"] {
+  --project-avatar-bg: var(--v2-background-bg-base);
+  --project-avatar-border: var(--v2-border-border-strong);
+  color: var(--v2-text-text-muted);
+  text-shadow: none;
+}
+
 [data-slot="project-avatar-surface"][data-has-image] {
   background: var(--project-avatar-bg);
 }

package/src/v2/components/project-avatar-v2.tsx

@@ -26,10 +26,13 @@ export const PROJECT_AVATAR_VARIANTS = [
 
 export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number]
 
+// "outline" is a neutral, muted style (e.g. recently closed projects) and is not part of the color rotation.
+export type ProjectAvatarStyle = ProjectAvatarVariant | "outline"
+
 export interface ProjectAvatarProps extends ComponentProps<"div"> {
   fallback: string
   src?: string
-  variant?: ProjectAvatarVariant
+  variant?: ProjectAvatarStyle
   unread?: boolean
 }
 

package/src/v2/components/text-input-v2.css

@@ -53,11 +53,30 @@
   align-items: center;
   align-self: stretch;
   padding: 0;
+  gap: 6px;
   min-width: 0;
   flex: 1 1 auto;
   min-height: 0;
 }
 
+[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding-left: 8px;
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] :is(svg, [data-slot="icon-svg"]) {
+  display: block;
+  flex: none;
+}
+
+[data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
+  padding-left: 0;
+}
+
 [data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
   display: block;
   width: 100%;
@@ -81,6 +100,12 @@
   color: var(--v2-text-text-faint);
 }
 
+[data-component="text-input-v2"] [data-slot="text-input-v2-input"][type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+
 [data-component="text-input-v2"][data-numeric] [data-slot="text-input-v2-input"] {
   font-variant-numeric: tabular-nums;
 }
@@ -134,6 +159,14 @@
   color: currentColor;
 }
 
+[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"][data-variant="clear"] {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 6px;
+  margin-right: -8px;
+}
+
 [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {
   color: var(--v2-state-fg-danger);
   caret-color: var(--v2-state-fg-danger);

package/src/v2/components/text-input-v2.tsx

@@ -1,13 +1,20 @@
-import { type ComponentProps, Show, splitProps } from "solid-js"
+import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
 import { Icon } from "./icon"
 import "./text-input-v2.css"
 
 export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
+  /** Icon or adornment shown before the field value. */
+  leadingIcon?: JSX.Element
   /** Show the trailing copy action. */
   showCopyButton?: boolean
+  /** Show the trailing clear action. */
+  showClearButton?: boolean
   /** Accessible label for the copy button. */
   copyLabel?: string
+  /** Accessible label for the clear button. */
+  clearLabel?: string
   onCopyClick?: (event: MouseEvent) => void
+  onClearClick?: (event: MouseEvent) => void
   /** Apply tabular numerals to the field value. */
   numeric?: boolean
   /** Error styling for the field and value text. */
@@ -21,9 +28,13 @@ export function TextInputV2(props: TextInputV2Props) {
   const [local, inputProps] = splitProps(props, [
     "class",
     "classList",
+    "leadingIcon",
     "showCopyButton",
+    "showClearButton",
     "copyLabel",
+    "clearLabel",
     "onCopyClick",
+    "onClearClick",
     "numeric",
     "invalid",
     "appearance",
@@ -37,12 +48,16 @@ export function TextInputV2(props: TextInputV2Props) {
       data-invalid={local.invalid ? "" : undefined}
       data-numeric={local.numeric ? "" : undefined}
       data-appearance={local.appearance ?? "base"}
+      data-leading-icon={local.leadingIcon ? "" : undefined}
       classList={{
         ...local.classList,
         [local.class ?? ""]: !!local.class,
       }}
     >
       <div data-slot="text-input-v2-value">
+        <Show when={local.leadingIcon}>
+          <span data-slot="text-input-v2-leading-icon">{local.leadingIcon}</span>
+        </Show>
         <input
           {...inputProps}
           type={inputProps.type ?? "text"}
@@ -51,15 +66,26 @@ export function TextInputV2(props: TextInputV2Props) {
           data-slot="text-input-v2-input"
         />
       </div>
-      <Show when={local.showCopyButton}>
+      <Show when={local.showClearButton || local.showCopyButton}>
         <button
           type="button"
           data-slot="text-input-v2-icon-button"
-          aria-label={local.copyLabel ?? "Copy"}
+          data-variant={local.showClearButton ? "clear" : "copy"}
+          aria-label={local.showClearButton ? (local.clearLabel ?? "Clear") : (local.copyLabel ?? "Copy")}
           disabled={local.disabled}
-          onClick={local.onCopyClick}
+          onMouseDown={(event) => {
+            if (!local.showClearButton) return
+            event.preventDefault()
+          }}
+          onClick={(event) => {
+            if (local.showClearButton) {
+              local.onClearClick?.(event)
+              return
+            }
+            local.onCopyClick?.(event)
+          }}
         >
-          <Icon name="copy" />
+          <Icon name={local.showClearButton ? "xmark-small" : "copy"} />
         </button>
       </Show>
     </div>

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

@@ -97,44 +97,46 @@ export interface ToastV2Options {
 
 export function showToastV2(options: ToastV2Options | string) {
   const opts = typeof options === "string" ? { description: options } : options
-  const resolvedIcon = children(() => opts.icon)
-  return toaster.show((props) => (
-    <ToastV2 toastId={props.toastId} duration={opts.duration} persistent={opts.persistent}>
-      <div data-slot="toast-v2-header">
-        <Show when={resolvedIcon()}>
-          <ToastV2.Icon>{resolvedIcon()}</ToastV2.Icon>
-        </Show>
-        <ToastV2.Content>
-          <Show when={opts.title}>
-            <ToastV2.Title>{opts.title}</ToastV2.Title>
-          </Show>
-          <Show when={opts.description}>
-            <ToastV2.Description>{opts.description}</ToastV2.Description>
+  return toaster.show((props) => {
+    const resolvedIcon = children(() => opts.icon)
+    return (
+      <ToastV2 toastId={props.toastId} duration={opts.duration} persistent={opts.persistent}>
+        <div data-slot="toast-v2-header">
+          <Show when={resolvedIcon()}>
+            <ToastV2.Icon>{resolvedIcon()}</ToastV2.Icon>
           </Show>
-        </ToastV2.Content>
-        <ToastV2.CloseButton />
-      </div>
-      <Show when={opts.actions?.length}>
-        <ToastV2.Actions>
-          {opts.actions!.map((action) => (
-            <ButtonV2
-              variant={action.variant === "secondary" ? "ghost" : "neutral"}
-              size="small"
-              data-action-variant={action.variant ?? "primary"}
-              onClick={() => {
-                if (typeof action.onClick === "function") {
-                  action.onClick()
-                }
-                toaster.dismiss(props.toastId)
-              }}
-            >
-              {action.label}
-            </ButtonV2>
-          ))}
-        </ToastV2.Actions>
-      </Show>
-    </ToastV2>
-  ))
+          <ToastV2.Content>
+            <Show when={opts.title}>
+              <ToastV2.Title>{opts.title}</ToastV2.Title>
+            </Show>
+            <Show when={opts.description}>
+              <ToastV2.Description>{opts.description}</ToastV2.Description>
+            </Show>
+          </ToastV2.Content>
+          <ToastV2.CloseButton />
+        </div>
+        <Show when={opts.actions?.length}>
+          <ToastV2.Actions>
+            {opts.actions!.map((action) => (
+              <ButtonV2
+                variant={action.variant === "secondary" ? "ghost" : "neutral"}
+                size="small"
+                data-action-variant={action.variant ?? "primary"}
+                onClick={() => {
+                  if (typeof action.onClick === "function") {
+                    action.onClick()
+                  }
+                  toaster.dismiss(props.toastId)
+                }}
+              >
+                {action.label}
+              </ButtonV2>
+            ))}
+          </ToastV2.Actions>
+        </Show>
+      </ToastV2>
+    )
+  })
 }
 
 export interface ToastV2PromiseOptions<T, U = unknown> {

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

@@ -2,7 +2,12 @@
   display: flex;
 }
 
+[data-popper-positioner]:has([data-component="tooltip-v2"]) {
+  z-index: 1000;
+}
+
 [data-component="tooltip-v2"] {
+  z-index: 1000;
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: row;

package/src/v2/styles/theme.css

@@ -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;
@@ -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),
@@ -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);
@@ -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;