wip(desktop): layout improvements

author: Adam <[email protected]> 2025-11-13 14:47:25 -0600
committer: Adam <[email protected]> 2025-11-13 14:47:29 -0600
commit: a8836c5615f620321cc7aa2670767e0c9586d27b (patch)
tree: 4af1b0f7397d2dceac6e0c9ba734049f41d7c326
parent: 779a27693a9d37ae212c27af353414ff4de07ea4 (diff)
download: opencode-a8836c5615f620321cc7aa2670767e0c9586d27b.tar.gz
opencode-a8836c5615f620321cc7aa2670767e0c9586d27b.zip
27 files changed, 880 insertions, 316 deletions
diff --git a/packages/desktop/index.html b/packages/desktop/index.html
index e88b49ac8..961ae814a 100644
--- a/packages/desktop/index.html
+++ b/packages/desktop/index.html
@@ -8,14 +8,12 @@
     <title>OpenCode</title>
   </head>
   <body class="antialiased overscroll-none select-none text-12-regular">
-    <!-- <script> -->
-    <!--   ;(function () { -->
-    <!--     const savedTheme = localStorage.getItem("theme") || "opencode" -->
-    <!--     const savedDarkMode = localStorage.getItem("darkMode") !== "false" -->
-    <!--     document.documentElement.setAttribute("data-theme", savedTheme) -->
-    <!--     document.documentElement.setAttribute("data-dark", savedDarkMode.toString()) -->
-    <!--   })() -->
-    <!-- </script> -->
+    <script>
+      ;(function () {
+        const savedTheme = localStorage.getItem("theme") || "oc-2-paper"
+        document.documentElement.setAttribute("data-theme", savedTheme)
+      })()
+    </script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script src="/src/index.tsx" type="module"></script>
diff --git a/packages/desktop/src/components/prompt-input.tsx b/packages/desktop/src/components/prompt-input.tsx
index b2022cf30..2ae5f87fc 100644
--- a/packages/desktop/src/components/prompt-input.tsx
+++ b/packages/desktop/src/components/prompt-input.tsx
@@ -347,7 +347,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       <Show when={store.popoverIsOpen}>
         <div
           class="absolute inset-x-0 -top-3 -translate-y-full origin-bottom-left max-h-[252px] min-h-10
-                 overflow-auto no-scrollbar flex flex-col p-2 pb-0 rounded-2xl 
+                 overflow-auto no-scrollbar flex flex-col p-2 pb-0 rounded-md
                  border border-border-base bg-surface-raised-stronger-non-alpha shadow-md"
         >
           <Show when={flat().length > 0} fallback={<div class="text-text-weak px-2">No matching files</div>}>
@@ -382,7 +382,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         onSubmit={handleSubmit}
         classList={{
           "bg-surface-raised-stronger-non-alpha border border-border-strong-base": true,
-          "rounded-2xl overflow-clip focus-within:border-transparent focus-within:shadow-xs-border-select": true,
+          "rounded-md overflow-clip focus-within:border-transparent focus-within:shadow-xs-border-select": true,
           [props.class ?? ""]: !!props.class,
         }}
       >
@@ -396,17 +396,17 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             onInput={handleInput}
             onKeyDown={handleKeyDown}
             classList={{
-              "w-full p-3 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
+              "w-full px-5 py-3 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
               "[&>[data-type=file]]:text-icon-info-active": true,
             }}
           />
           <Show when={!session.prompt.dirty()}>
-            <div class="absolute top-0 left-0 p-3 text-14-regular text-text-weak pointer-events-none">
+            <div class="absolute top-0 left-0 px-5 py-3 text-14-regular text-text-weak pointer-events-none">
               Plan and build anything
             </div>
           </Show>
         </div>
-        <div class="p-3 flex items-center justify-between">
+        <div class="relative p-3 flex items-center justify-between">
           <div class="flex items-center justify-start gap-1">
             <Select
               options={local.agent.list().map((agent) => agent.name)}
@@ -489,7 +489,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               disabled={!session.prompt.dirty() && !session.working()}
               icon={session.working() ? "stop" : "arrow-up"}
               variant="primary"
-              class="rounded-full"
+              class="h-10 w-8 absolute right-2 bottom-2"
             />
           </Tooltip>
         </div>
diff --git a/packages/desktop/src/components/session-review.tsx b/packages/desktop/src/components/session-review.tsx
new file mode 100644
index 000000000..8aefbbd46
--- /dev/null
+++ b/packages/desktop/src/components/session-review.tsx
@@ -0,0 +1,104 @@
+import { useLocal } from "@/context/local"
+import { useSession } from "@/context/session"
+import { FileIcon } from "@/ui"
+import { getDirectory, getFilename } from "@/utils"
+import { Accordion, Button, Diff, DiffChanges, Icon, IconButton, Tooltip } from "@opencode-ai/ui"
+import { For, Match, Show, Switch } from "solid-js"
+import { StickyAccordionHeader } from "./sticky-accordion-header"
+import { createStore } from "solid-js/store"
+
+export const SessionReview = (props: { split?: boolean; class?: string; hideExpand?: boolean }) => {
+  const local = useLocal()
+  const session = useSession()
+  const [store, setStore] = createStore({
+    open: session.diffs().map((d) => d.file),
+  })
+
+  const handleChange = (open: string[]) => {
+    setStore("open", open)
+  }
+
+  const handleExpandOrCollapseAll = () => {
+    if (store.open.length > 0) {
+      setStore("open", [])
+    } else {
+      setStore(
+        "open",
+        session.diffs().map((d) => d.file),
+      )
+    }
+  }
+
+  return (
+    <div
+      classList={{
+        "flex flex-col gap-3 h-full overflow-y-auto no-scrollbar": true,
+        [props.class ?? ""]: !!props.class,
+      }}
+    >
+      <div class="sticky top-0 z-20 bg-background-stronger h-8 shrink-0 flex justify-between items-center self-stretch">
+        <div class="text-14-medium text-text-strong">Session changes</div>
+        <div class="flex items-center gap-x-4 pr-px">
+          <Button size="normal" icon="chevron-grabber-vertical" onClick={handleExpandOrCollapseAll}>
+            <Switch>
+              <Match when={store.open.length > 0}>Collapse all</Match>
+              <Match when={true}>Expand all</Match>
+            </Switch>
+          </Button>
+          <Show when={!props.hideExpand}>
+            <Tooltip value="Open in tab">
+              <IconButton
+                icon="expand"
+                variant="ghost"
+                onClick={() => {
+                  local.layout.review.tab()
+                  session.layout.setActiveTab("review")
+                }}
+              />
+            </Tooltip>
+          </Show>
+        </div>
+      </div>
+      <Accordion multiple value={store.open} onChange={handleChange}>
+        <For each={session.diffs()}>
+          {(diff) => (
+            <Accordion.Item value={diff.file}>
+              <StickyAccordionHeader class="top-11 data-expanded:before:-top-11">
+                <Accordion.Trigger class="bg-background-stronger">
+                  <div class="flex items-center justify-between w-full gap-5">
+                    <div class="grow flex items-center gap-5 min-w-0">
+                      <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
+                      <div class="flex grow min-w-0">
+                        <Show when={diff.file.includes("/")}>
+                          <span class="text-text-base truncate-start">{getDirectory(diff.file)}&lrm;</span>
+                        </Show>
+                        <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
+                      </div>
+                    </div>
+                    <div class="shrink-0 flex gap-4 items-center justify-end">
+                      <DiffChanges changes={diff} />
+                      <Icon name="chevron-grabber-vertical" size="small" />
+                    </div>
+                  </div>
+                </Accordion.Trigger>
+              </StickyAccordionHeader>
+              <Accordion.Content>
+                <Diff
+                  diffStyle={props.split ? "split" : "unified"}
+                  before={{
+                    name: diff.file!,
+                    contents: diff.before!,
+                  }}
+                  after={{
+                    name: diff.file!,
+                    contents: diff.after!,
+                  }}
+                />
+              </Accordion.Content>
+            </Accordion.Item>
+          )}
+        </For>
+      </Accordion>
+    </div>
+  )
+}
diff --git a/packages/desktop/src/components/sticky-accordion-header.tsx b/packages/desktop/src/components/sticky-accordion-header.tsx
new file mode 100644
index 000000000..cb3f0d5eb
--- /dev/null
+++ b/packages/desktop/src/components/sticky-accordion-header.tsx
@@ -0,0 +1,17 @@
+import { Accordion } from "@opencode-ai/ui"
+import { ParentProps } from "solid-js"
+
+export function StickyAccordionHeader(props: ParentProps<{ class?: string }>) {
+  return (
+    <Accordion.Header
+      classList={{
+        "sticky top-0 data-expanded:z-10": true,
+        "data-expanded:before:content-[''] data-expanded:before:z-[-10]": true,
+        "data-expanded:before:absolute data-expanded:before:inset-0 data-expanded:before:bg-background-stronger": true,
+        [props.class ?? ""]: !!props.class,
+      }}
+    >
+      {props.children}
+    </Accordion.Header>
+  )
+}
diff --git a/packages/desktop/src/context/local.tsx b/packages/desktop/src/context/local.tsx
index 1785bdf0c..1cef1c9f1 100644
--- a/packages/desktop/src/context/local.tsx
+++ b/packages/desktop/src/context/local.tsx
@@ -465,11 +465,11 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
             width: 240,
           },
           review: {
-            state: "closed" as "open" | "closed" | "tab",
+            state: "pane" as "pane" | "tab",
           },
         }),
         {
-          name: "default-layout",
+          name: "_default-layout",
         },
       )
 
@@ -492,11 +492,8 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
         },
         review: {
           state: createMemo(() => store.review?.state ?? "closed"),
-          open() {
-            setStore("review", "state", "open")
-          },
-          close() {
-            setStore("review", "state", "closed")
+          pane() {
+            setStore("review", "state", "pane")
           },
           tab() {
             setStore("review", "state", "tab")
diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx
index f16729cc2..0e5eb1f3d 100644
--- a/packages/desktop/src/pages/session.tsx
+++ b/packages/desktop/src/pages/session.tsx
@@ -44,12 +44,14 @@ import {
   useDragDropContext,
 } from "@thisbeyond/solid-dnd"
 import type { DragEvent, Transformer } from "@thisbeyond/solid-dnd"
-import type { JSX, ParentProps } from "solid-js"
+import type { JSX } from "solid-js"
 import { useSync } from "@/context/sync"
 import { type AssistantMessage as AssistantMessageType } from "@opencode-ai/sdk"
 import { Markdown } from "@opencode-ai/ui"
 import { Spinner } from "@/components/spinner"
 import { useSession } from "@/context/session"
+import { StickyAccordionHeader } from "@/components/sticky-accordion-header"
+import { SessionReview } from "@/components/session-review"
 
 export default function Page() {
   const local = useLocal()
@@ -83,6 +85,15 @@ export default function Page() {
       setStore("fileSelectOpen", true)
       return
     }
+    if (event.ctrlKey && event.key.toLowerCase() === "t") {
+      event.preventDefault()
+      const currentTheme = localStorage.getItem("theme") ?? "oc-1"
+      const themes = ["oc-1", "oc-2-paper"]
+      const nextTheme = themes[(themes.indexOf(currentTheme) + 1) % themes.length]
+      localStorage.setItem("theme", nextTheme)
+      document.documentElement.setAttribute("data-theme", nextTheme)
+      return
+    }
 
     const focused = document.activeElement === inputRef
     if (focused) {
@@ -216,18 +227,15 @@ export default function Page() {
       // @ts-ignore
       <div use:sortable classList={{ "h-full": true, "opacity-0": sortable.isActiveDraggable }}>
         <div class="relative h-full">
-          <Tabs.Trigger value={props.tab} class="group/tab pl-3 pr-1" onClick={() => props.onTabClick(props.tab)}>
+          <Tabs.Trigger
+            value={props.tab}
+            closeButton={<IconButton icon="close" variant="ghost" onClick={() => props.onTabClose(props.tab)} />}
+            hideCloseButton
+            onClick={() => props.onTabClick(props.tab)}
+          >
             <Switch>
               <Match when={file()}>{(f) => <FileVisual file={f()} />}</Match>
             </Switch>
-            <IconButton
-              icon="close"
-              class="mt-0.5 opacity-0 group-data-[selected]/tab:opacity-100
-                     hover:bg-transparent
-                     hover:opacity-100 group-hover/tab:opacity-100"
-              variant="ghost"
-              onClick={() => props.onTabClose(props.tab)}
-            />
           </Tabs.Trigger>
         </div>
       </div>
@@ -277,38 +285,40 @@ export default function Page() {
         <Tabs value={session.layout.tabs.active ?? "chat"} onChange={session.layout.openTab}>
           <div class="sticky top-0 shrink-0 flex">
             <Tabs.List>
-              <Tabs.Trigger value="chat" class="flex gap-x-4 items-center">
-                <div>Chat</div>
-                <Tooltip
-                  value={`${new Intl.NumberFormat("en-US", {
-                    notation: "compact",
-                    compactDisplay: "short",
-                  }).format(session.usage.tokens() ?? 0)} Tokens`}
-                  class="flex items-center gap-1.5"
-                >
-                  <ProgressCircle percentage={session.usage.context() ?? 0} />
-                  <div class="text-14-regular text-text-weak text-left w-7">{session.usage.context() ?? 0}%</div>
-                </Tooltip>
+              <Tabs.Trigger value="chat">
+                <div class="flex gap-x-[17px] items-center">
+                  <div>Chat</div>
+                  <Tooltip
+                    value={`${new Intl.NumberFormat("en-US", {
+                      notation: "compact",
+                      compactDisplay: "short",
+                    }).format(session.usage.tokens() ?? 0)} Tokens`}
+                    class="flex items-center gap-1.5"
+                  >
+                    <ProgressCircle percentage={session.usage.context() ?? 0} />
+                    <div class="text-14-regular text-text-weak text-left w-7">{session.usage.context() ?? 0}%</div>
+                  </Tooltip>
+                </div>
               </Tabs.Trigger>
               <Show when={local.layout.review.state() === "tab" && session.diffs().length}>
-                <Tabs.Trigger value="review" class="flex gap-3 items-center group/tab pr-1">
-                  <Show when={session.diffs()}>
-                    <DiffChanges changes={session.diffs()} variant="bars" />
-                  </Show>
-                  <div class="flex items-center gap-1.5">
-                    <div>Review</div>
-                    <Show when={session.info()?.summary?.files}>
-                      <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
-                        {session.info()?.summary?.files ?? 0}
-                      </div>
+                <Tabs.Trigger
+                  value="review"
+                  closeButton={
+                    <IconButton icon="collapse" size="normal" variant="ghost" onClick={local.layout.review.pane} />
+                  }
+                >
+                  <div class="flex items-center gap-3">
+                    <Show when={session.diffs()}>
+                      <DiffChanges changes={session.diffs()} variant="bars" />
                     </Show>
-                    <IconButton
-                      icon="close"
-                      class="mt-0.5 -ml-1 opacity-0 group-data-[selected]/tab:opacity-100
-                             hover:bg-transparent hover:opacity-100 group-hover/tab:opacity-100"
-                      variant="ghost"
-                      onClick={local.layout.review.close}
-                    />
+                    <div class="flex items-center gap-1.5">
+                      <div>Review</div>
+                      <Show when={session.info()?.summary?.files}>
+                        <div class="text-12-medium text-text-strong h-4 px-2 flex flex-col items-center justify-center rounded-full bg-surface-base">
+                          {session.info()?.summary?.files ?? 0}
+                        </div>
+                      </Show>
+                    </div>
                   </div>
                 </Tabs.Trigger>
               </Show>
@@ -333,24 +343,17 @@ export default function Page() {
             <div
               classList={{
                 "w-full flex-1 min-h-0": true,
-                grid: local.layout.review.state() !== "open",
-                flex: local.layout.review.state() === "open",
+                grid: local.layout.review.state() === "tab",
+                flex: local.layout.review.state() === "pane",
               }}
             >
-              <div class="relative shrink-0 px-6 py-2 flex flex-col gap-6 flex-1 min-h-0 w-full max-w-xl mx-auto">
+              <div class="relative shrink-0 px-6 py-3 flex flex-col gap-6 flex-1 min-h-0 w-full max-w-xl mx-auto">
                 <Switch>
                   <Match when={session.id}>
-                    <div class="h-8 flex shrink-0 self-stretch items-center justify-end">
-                      <Show when={local.layout.review.state() === "closed" && session.diffs().length}>
-                        <Button icon="layout-right" onClick={local.layout.review.open}>
-                          Review
-                        </Button>
-                      </Show>
-                    </div>
                     <div
                       classList={{
                         "flex-1 min-h-0 pb-20": true,
-                        "flex items-start justify-start": local.layout.review.state() === "open",
+                        "flex items-start justify-start": local.layout.review.state() === "pane",
                       }}
                     >
                       <Show when={session.messages.user().length > 1}>
@@ -358,8 +361,8 @@ export default function Page() {
                           role="list"
                           classList={{
                             "mr-8 shrink-0 flex flex-col items-start": true,
-                            "absolute right-full w-60 @7xl:gap-2": local.layout.review.state() !== "open",
-                            "mt-1": local.layout.review.state() === "open",
+                            "absolute right-full w-60 mt-3 @7xl:gap-2 @7xl:mt-1": local.layout.review.state() === "tab",
+                            "mt-3": local.layout.review.state() === "pane",
                           }}
                         >
                           <For each={session.messages.user()}>
@@ -379,7 +382,7 @@ export default function Page() {
                                 <li
                                   classList={{
                                     "group/li flex items-center self-stretch justify-end": true,
-                                    "@7xl:justify-start": local.layout.review.state() !== "open",
+                                    "@7xl:justify-start": local.layout.review.state() === "tab",
                                   }}
                                 >
                                   <Tooltip
@@ -398,7 +401,7 @@ export default function Page() {
                                       classList={{
                                         "group/tick flex items-center justify-start h-2 w-8 -mr-3": true,
                                         "data-[active=true]:[&>div]:bg-icon-strong-base data-[active=true]:[&>div]:w-full": true,
-                                        "@7xl:hidden": local.layout.review.state() !== "open",
+                                        "@7xl:hidden": local.layout.review.state() === "tab",
                                       }}
                                     >
                                       <div class="h-px w-5 bg-icon-base group-hover/tick:w-full group-hover/tick:bg-icon-strong-base" />
@@ -407,7 +410,7 @@ export default function Page() {
                                   <button
                                     classList={{
                                       "hidden items-center self-stretch w-full gap-x-2 cursor-default": true,
-                                      "@7xl:flex": local.layout.review.state() !== "open",
+                                      "@7xl:flex": local.layout.review.state() === "tab",
                                     }}
                                     onClick={handleClick}
                                   >
@@ -477,7 +480,7 @@ export default function Page() {
                                   class="flex flex-col items-start self-stretch gap-8 pb-20"
                                 >
                                   {/* Title */}
-                                  <div class="flex flex-col items-start gap-2 self-stretch sticky top-0 bg-background-stronger z-20 pb-1">
+                                  <div class="flex items-center gap-2 self-stretch sticky top-0 bg-background-stronger z-20 h-8">
                                     <div class="w-full text-14-medium text-text-strong">
                                       <Show
                                         when={titled()}
@@ -495,9 +498,7 @@ export default function Page() {
                                       </Show>
                                     </div>
                                   </div>
-                                  <div class="-mt-9">
-                                    <Message message={message} parts={parts()} />
-                                  </div>
+                                  <Message message={message} parts={parts()} />
                                   {/* Summary */}
                                   <Show when={completed()}>
                                     <div class="w-full flex flex-col gap-6 items-start self-stretch">
@@ -524,7 +525,7 @@ export default function Page() {
                                         <For each={message.summary?.diffs ?? []}>
                                           {(diff) => (
                                             <Accordion.Item value={diff.file}>
-                                              <StickyAccordionHeader class="top-10 data-expanded:before:-top-10 ">
+                                              <StickyAccordionHeader class="top-10 data-expanded:before:-top-10">
                                                 <Accordion.Trigger>
                                                   <div class="flex items-center justify-between w-full gap-5">
                                                     <div class="grow flex items-center gap-5 min-w-0">
@@ -653,127 +654,25 @@ export default function Page() {
                   />
                 </div>
               </div>
-              <Show when={local.layout.review.state() === "open"}>
+              <Show when={local.layout.review.state() === "pane" && session.diffs().length}>
                 <div
                   classList={{
-                    "relative grow px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0 border-l border-border-weak-base": true,
+                    "relative grow px-6 py-3 flex-1 min-h-0 border-l border-border-weak-base": true,
                   }}
                 >
-                  <div class="h-8 w-full flex items-center justify-between shrink-0 self-stretch">
-                    <div class="flex items-center gap-x-3">
-                      <Tooltip value="Close">
-                        <IconButton icon="align-right" variant="ghost" onClick={local.layout.review.close} />
-                      </Tooltip>
-                      <Tooltip value="Open in tab">
-                        <IconButton
-                          icon="expand"
-                          variant="ghost"
-                          onClick={() => {
-                            local.layout.review.tab()
-                            session.layout.setActiveTab("review")
-                          }}
-                        />
-                      </Tooltip>
-                    </div>
-                  </div>
-                  <div class="text-14-medium text-text-strong">All changes</div>
-                  <div class="h-full pb-40 overflow-y-auto no-scrollbar">
-                    <Accordion class="w-full" multiple>
-                      <For each={session.diffs()}>
-                        {(diff) => (
-                          <Accordion.Item value={diff.file} defaultOpen>
-                            <StickyAccordionHeader>
-                              <Accordion.Trigger>
-                                <div class="flex items-center justify-between w-full gap-5">
-                                  <div class="grow flex items-center gap-5 min-w-0">
-                                    <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
-                                    <div class="flex grow min-w-0">
-                                      <Show when={diff.file.includes("/")}>
-                                        <span class="text-text-base truncate-start">
-                                          {getDirectory(diff.file)}&lrm;
-                                        </span>
-                                      </Show>
-                                      <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
-                                    </div>
-                                  </div>
-                                  <div class="shrink-0 flex gap-4 items-center justify-end">
-                                    <DiffChanges changes={diff} />
-                                    <Icon name="chevron-grabber-vertical" size="small" />
-                                  </div>
-                                </div>
-                              </Accordion.Trigger>
-                            </StickyAccordionHeader>
-                            <Accordion.Content>
-                              <Diff
-                                before={{
-                                  name: diff.file!,
-                                  contents: diff.before!,
-                                }}
-                                after={{
-                                  name: diff.file!,
-                                  contents: diff.after!,
-                                }}
-                              />
-                            </Accordion.Content>
-                          </Accordion.Item>
-                        )}
-                      </For>
-                    </Accordion>
-                  </div>
+                  <SessionReview />
                 </div>
               </Show>
             </div>
           </Tabs.Content>
           <Show when={local.layout.review.state() === "tab" && session.diffs().length}>
-            <Tabs.Content value="review" class="select-text flex flex-col h-full overflow-hidden mt-8">
+            <Tabs.Content value="review" class="select-text flex flex-col h-full overflow-hidden">
               <div
                 classList={{
-                  "relative px-6 py-2 w-full flex flex-col gap-6 flex-1 min-h-0 overflow-hidden": true,
+                  "relative px-6 py-3 flex-1 min-h-0 overflow-hidden": true,
                 }}
               >
-                <div class="text-14-medium text-text-strong shrink-0">All changes</div>
-                <div class="flex-1 min-h-0 pb-40 overflow-y-auto no-scrollbar">
-                  <Accordion class="w-full" multiple>
-                    <For each={session.diffs()}>
-                      {(diff) => (
-                        <Accordion.Item value={diff.file} defaultOpen>
-                          <StickyAccordionHeader>
-                            <Accordion.Trigger>
-                              <div class="flex items-center justify-between w-full gap-5">
-                                <div class="grow flex items-center gap-5 min-w-0">
-                                  <FileIcon node={{ path: diff.file, type: "file" }} class="shrink-0 size-4" />
-                                  <div class="flex grow min-w-0">
-                                    <Show when={diff.file.includes("/")}>
-                                      <span class="text-text-base truncate-start">{getDirectory(diff.file)}&lrm;</span>
-                                    </Show>
-                                    <span class="text-text-strong shrink-0">{getFilename(diff.file)}</span>
-                                  </div>
-                                </div>
-                                <div class="shrink-0 flex gap-4 items-center justify-end">
-                                  <DiffChanges changes={diff} />
-                                  <Icon name="chevron-grabber-vertical" size="small" />
-                                </div>
-                              </div>
-                            </Accordion.Trigger>
-                          </StickyAccordionHeader>
-                          <Accordion.Content>
-                            <Diff
-                              diffStyle="split"
-                              before={{
-                                name: diff.file!,
-                                contents: diff.before!,
-                              }}
-                              after={{
-                                name: diff.file!,
-                                contents: diff.after!,
-                              }}
-                            />
-                          </Accordion.Content>
-                        </Accordion.Item>
-                      )}
-                    </For>
-                  </Accordion>
-                </div>
+                <SessionReview split hideExpand class="pb-40" />
               </div>
             </Tabs.Content>
           </Show>
@@ -828,7 +727,7 @@ export default function Page() {
         </DragOverlay>
       </DragDropProvider>
       <Show when={session.layout.tabs.active}>
-        <div class="absolute inset-x-0 px-6 max-w-2xl flex flex-col justify-center items-center z-50 mx-auto bottom-8">
+        <div class="absolute inset-x-0 px-6 max-w-2xl flex flex-col justify-center items-center z-50 mx-auto bottom-6">
           <PromptInput
             ref={(el) => {
               inputRef = el
@@ -895,18 +794,3 @@ export default function Page() {
     </div>
   )
 }
-
-function StickyAccordionHeader(props: ParentProps<{ class?: string }>) {
-  return (
-    <Accordion.Header
-      classList={{
-        "sticky top-0 data-expanded:z-10": true,
-        "data-expanded:before:content-[''] data-expanded:before:z-[-10]": true,
-        "data-expanded:before:absolute data-expanded:before:inset-0 data-expanded:before:bg-background-stronger": true,
-        [props.class ?? ""]: !!props.class,
-      }}
-    >
-      {props.children}
-    </Accordion.Header>
-  )
-}
diff --git a/packages/ui/script/colors.txt b/packages/ui/script/colors.txt
index 5b5cfa73a..f84966853 100644
--- a/packages/ui/script/colors.txt
+++ b/packages/ui/script/colors.txt
@@ -44,9 +44,9 @@
 --surface-info-base: var(--lilac-light-3);
 --surface-info-weak: var(--lilac-light-2);
 --surface-info-strong: var(--lilac-light-9);
+--surface-diff-unchanged-base: #FFFFFF00;
 --surface-diff-skip-base: var(--smoke-light-2);
 --surface-diff-hidden-base: var(--blue-light-3);
---surface-diff-unchanged-base: #FFFFFF00;
 --surface-diff-hidden-weak: var(--blue-light-2);
 --surface-diff-hidden-weaker: var(--blue-light-1);
 --surface-diff-hidden-strong: var(--blue-light-5);
@@ -95,7 +95,7 @@
 --text-on-brand-weaker: var(--smoke-light-alpha-8);
 --text-on-brand-strong: var(--smoke-light-alpha-12);
 --button-secondary-base: #FDFCFC;
---button-secondary-base-hover: #FAF9F9;
+--button-secondary-hover: #FAF9F9;
 --border-base: var(--smoke-light-alpha-7);
 --border-hover: var(--smoke-light-alpha-8);
 --border-active: var(--smoke-light-alpha-9);
@@ -190,20 +190,25 @@
 --icon-diff-add-active: var(--mint-light-12);
 --icon-diff-delete-base: var(--ember-light-10);
 --icon-diff-delete-hover: var(--ember-light-11);
---syntax-comment: #8A8A8A;
---syntax-string: #D68C27;
---syntax-keyword: #3B7DD8;
---syntax-function: #D1383D;
---syntax-number: #3D9A57;
---syntax-operator: #D68C27;
---syntax-variable: #B0851F;
---syntax-type: #318795;
---syntax-constant: #953170;
---syntax-punctuation: #1A1A1A;
---syntax-success: var(--apple-dark-10);
+--syntax-comment: var(--text-weaker);
+--syntax-regexp: var(--text-base);
+--syntax-string: #007663;
+--syntax-keyword: var(--text-weak);
+--syntax-primitive: #FB7F51;
+--syntax-operator: var(--text-weak);
+--syntax-variable: var(--text-strong);
+--syntax-property: #EC6CC8;
+--syntax-type: #738400;
+--syntax-constant: #00B2B9;
+--syntax-punctuation: var(--text-weaker);
+--syntax-object: var(--text-strong);
+--syntax-success: var(--apple-light-10);
 --syntax-warning: var(--amber-light-10);
---syntax-critical: var(--ember-dark-9);
---syntax-info: var(--lilac-dark-11);
+--syntax-critical: var(--ember-light-9);
+--syntax-info: #0091A7;
+--syntax-diff-add: var(--mint-light-11);
+--syntax-diff-delete: var(--ember-light-11);
+--syntax-diff-unknown: #FF0000;
 --markdown-heading: #D68C27;
 --markdown-text: #1A1A1A;
 --markdown-link: #3B7DD8;
diff --git a/packages/ui/script/tailwind.ts b/packages/ui/script/tailwind.ts
index 1c7064690..6e558a8fa 100644
--- a/packages/ui/script/tailwind.ts
+++ b/packages/ui/script/tailwind.ts
@@ -11,7 +11,7 @@ for (const line of colors.split("\n")) {
 }
 
 const output = `
-/* Generated by script/colors.ts */
+/* Generated by script/tailwind.ts */
 /* Do not edit this file manually */
 
 @theme {
diff --git a/packages/ui/src/components/accordion.css b/packages/ui/src/components/accordion.css
index f949dc948..8cfac06b0 100644
--- a/packages/ui/src/components/accordion.css
+++ b/packages/ui/src/components/accordion.css
@@ -24,7 +24,7 @@
       [data-slot="accordion-trigger"] {
         width: 100%;
         display: flex;
-        height: 40px;
+        height: 32px;
         padding: 8px 12px;
         justify-content: space-between;
         align-items: center;
@@ -63,23 +63,24 @@
       margin-bottom: 8px;
 
       [data-slot="accordion-trigger"] {
-        border-radius: 8px 8px 0 0;
+        border-top-left-radius: var(--radius-md);
+        border-top-right-radius: var(--radius-md);
       }
 
       [data-slot="accordion-content"] {
         border: 1px solid var(--border-weak-base);
         border-top: none;
-        border-bottom-left-radius: 8px;
-        border-bottom-right-radius: 8px;
+        border-bottom-left-radius: var(--radius-md);
+        border-bottom-right-radius: var(--radius-md);
       }
 
       [data-slot="accordion-item"]:has(+ &) {
         &[data-closed] {
-          border-bottom-left-radius: 8px;
-          border-bottom-right-radius: 8px;
+          border-bottom-left-radius: var(--radius-md);
+          border-bottom-right-radius: var(--radius-md);
           [data-slot="accordion-trigger"] {
-            border-bottom-left-radius: 8px;
-            border-bottom-right-radius: 8px;
+            border-bottom-left-radius: var(--radius-md);
+            border-bottom-right-radius: var(--radius-md);
           }
         }
         margin-bottom: 8px;
@@ -89,8 +90,8 @@
         margin-top: 8px;
 
         [data-slot="accordion-trigger"] {
-          border-top-left-radius: 8px;
-          border-top-right-radius: 8px;
+          border-top-left-radius: var(--radius-md);
+          border-top-right-radius: var(--radius-md);
         }
       }
     }
@@ -106,8 +107,8 @@
 
       &[data-closed] {
         [data-slot="accordion-trigger"] {
-          border-top-left-radius: 8px;
-          border-top-right-radius: 8px;
+          border-top-left-radius: var(--radius-md);
+          border-top-right-radius: var(--radius-md);
         }
       }
     }
@@ -117,8 +118,8 @@
 
       &[data-closed] {
         [data-slot="accordion-trigger"] {
-          border-bottom-left-radius: 8px;
-          border-bottom-right-radius: 8px;
+          border-bottom-left-radius: var(--radius-md);
+          border-bottom-right-radius: var(--radius-md);
         }
       }
     }
diff --git a/packages/ui/src/components/accordion.tsx b/packages/ui/src/components/accordion.tsx
index 02f00b7be..535d38e3d 100644
--- a/packages/ui/src/components/accordion.tsx
+++ b/packages/ui/src/components/accordion.tsx
@@ -1,11 +1,9 @@
 import { Accordion as Kobalte } from "@kobalte/core/accordion"
-import { createSignal, splitProps } from "solid-js"
+import { splitProps } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
 export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
-export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {
-  defaultOpen?: boolean
-}
+export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
 export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {}
 export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
 export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
@@ -25,14 +23,11 @@ function AccordionRoot(props: AccordionProps) {
 }
 
 function AccordionItem(props: AccordionItemProps) {
-  const [split, rest] = splitProps(props, ["class", "classList", "defaultOpen"])
-  const [open, setOpen] = createSignal(split.defaultOpen ?? false)
+  const [split, rest] = splitProps(props, ["class", "classList"])
   return (
     <Kobalte.Item
       {...rest}
       data-slot="accordion-item"
-      onOpenChange={setOpen}
-      open={open()}
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index 80ded60fd..0fdb49cdc 100644
--- a/packages/ui/src/components/button.css
+++ b/packages/ui/src/components/button.css
@@ -4,7 +4,7 @@
   justify-content: center;
   border-style: solid;
   border-width: 1px;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   text-decoration: none;
   user-select: none;
   cursor: default;
diff --git a/packages/ui/src/components/card.css b/packages/ui/src/components/card.css
index a9b7c8784..6dae47223 100644
--- a/packages/ui/src/components/card.css
+++ b/packages/ui/src/components/card.css
@@ -5,7 +5,7 @@
   background-color: var(--surface-inset-base);
   border: 1px solid var(--border-weaker-base);
   transition: background-color 0.15s ease;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   padding: 6px 12px;
   overflow: clip;
 
diff --git a/packages/ui/src/components/checkbox.css b/packages/ui/src/components/checkbox.css
index 6e1e5ddd5..358391bd1 100644
--- a/packages/ui/src/components/checkbox.css
+++ b/packages/ui/src/components/checkbox.css
@@ -25,7 +25,7 @@
     padding: 2px;
     aspect-ratio: 1;
     flex-shrink: 0;
-    border-radius: 4px;
+    border-radius: var(--radius-sm);
     border: 1px solid var(--border-weak-base);
     /* background-color: var(--surface-weak); */
   }
diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index 4b2c14d4d..edd9952d7 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -5,7 +5,7 @@
   background-color: var(--surface-inset-base);
   border: 1px solid var(--border-weaker-base);
   transition: background-color 0.15s ease;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   overflow: clip;
 
   [data-slot="collapsible-trigger"] {
diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css
index 750596308..7cf15bb23 100644
--- a/packages/ui/src/components/dialog.css
+++ b/packages/ui/src/components/dialog.css
@@ -43,7 +43,7 @@
       /* padding: 8px; */
       padding: 8px 8px 0 8px;
       border: 1px solid var(--border-base);
-      border-radius: 16px;
+      border-radius: var(--radius-md);
       background: var(--surface-raised-stronger-non-alpha);
       box-shadow:
         0 15px 45px 0 rgba(19, 16, 16, 0.22),
diff --git a/packages/ui/src/components/icon-button.css b/packages/ui/src/components/icon-button.css
index a491074fe..9e1c51cb2 100644
--- a/packages/ui/src/components/icon-button.css
+++ b/packages/ui/src/components/icon-button.css
@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   text-decoration: none;
   user-select: none;
   aspect-ratio: 1;
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 27a43e51e..c69d04f7a 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -157,6 +157,7 @@ const newIcons = {
   "speech-bubble": `<path d="M18.3334 10.0003C18.3334 5.57324 15.0927 2.91699 10.0001 2.91699C4.90749 2.91699 1.66675 5.57324 1.66675 10.0003C1.66675 11.1497 2.45578 13.1016 2.5771 13.3949C2.5878 13.4207 2.59839 13.4444 2.60802 13.4706C2.69194 13.6996 3.04282 14.9364 1.66675 16.7684C3.5186 17.6538 5.48526 16.1982 5.48526 16.1982C6.84592 16.9202 8.46491 17.0837 10.0001 17.0837C15.0927 17.0837 18.3334 14.4274 18.3334 10.0003Z" stroke="currentColor" stroke-linecap="square"/>`,
   "align-right": `<path d="M12.292 6.04167L16.2503 9.99998L12.292 13.9583M2.91699 9.99998H15.6253M17.0837 3.75V16.25" stroke="currentColor" stroke-linecap="square"/>`,
   expand: `<path d="M4.58301 10.4163V15.4163H9.58301M10.4163 4.58301H15.4163V9.58301" stroke="currentColor" stroke-linecap="square"/>`,
+  collapse: `<path d="M16.666 8.33398H11.666V3.33398" stroke="currentColor" stroke-linecap="square"/><path d="M8.33398 16.666V11.666H3.33398" stroke="currentColor" stroke-linecap="square"/>`,
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
diff --git a/packages/ui/src/components/list.css b/packages/ui/src/components/list.css
index 67db2c619..2136c4f92 100644
--- a/packages/ui/src/components/list.css
+++ b/packages/ui/src/components/list.css
@@ -14,7 +14,7 @@
     padding: 4px 12px;
     text-align: left;
 
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     transition: background-color 0.2s ease-in-out;
 
     &[data-active="true"] {
diff --git a/packages/ui/src/components/select-dialog.css b/packages/ui/src/components/select-dialog.css
index 41d8f3921..6ca8fa0f3 100644
--- a/packages/ui/src/components/select-dialog.css
+++ b/packages/ui/src/components/select-dialog.css
@@ -7,7 +7,7 @@
   gap: 12px;
   align-self: stretch;
 
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   background: var(--surface-base);
 
   [data-slot="input-container"] {
@@ -100,7 +100,7 @@
         align-items: center;
 
         &[data-active="true"] {
-          border-radius: 8px;
+          border-radius: var(--radius-md);
           background: var(--surface-raised-base-hover);
         }
       }
diff --git a/packages/ui/src/components/select.css b/packages/ui/src/components/select.css
index 79445420a..7bafa39f7 100644
--- a/packages/ui/src/components/select.css
+++ b/packages/ui/src/components/select.css
@@ -21,7 +21,7 @@
 [data-component="select-content"] {
   min-width: 4rem;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   border-width: 1px;
   border-style: solid;
   border-color: var(--border-weak-base);
@@ -60,7 +60,7 @@
     display: flex;
     align-items: center;
     padding: 0 6px 0 6px;
-    border-radius: 6px;
+    border-radius: var(--radius-sm);
 
     /* text-12-medium */
     font-family: var(--font-family-sans);
diff --git a/packages/ui/src/components/tabs.css b/packages/ui/src/components/tabs.css
index 67f289283..91efbe50d 100644
--- a/packages/ui/src/components/tabs.css
+++ b/packages/ui/src/components/tabs.css
@@ -6,7 +6,7 @@
   background-color: var(--background-stronger);
   overflow: clip;
 
-  [data-slot="list"] {
+  [data-slot="tabs-list"] {
     height: 48px;
     width: 100%;
     position: relative;
@@ -36,12 +36,12 @@
     }
   }
 
-  [data-slot="trigger"] {
+  [data-slot="tabs-trigger-wrapper"] {
     position: relative;
     height: 100%;
-    padding: 14px 24px;
     display: flex;
     align-items: center;
+    gap: 12px;
     color: var(--text-base);
 
     /* text-14-medium */
@@ -58,6 +58,23 @@
     border-right: 1px solid var(--border-weak-base);
     background-color: var(--background-base);
 
+    [data-slot="tabs-trigger"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 14px 24px;
+    }
+
+    [data-slot="tabs-trigger-close-button"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    [data-component="icon-button"] {
+      margin: -0.25rem;
+    }
+
     &:disabled {
       pointer-events: none;
       color: var(--text-weaker);
@@ -66,17 +83,38 @@
       outline: none;
       box-shadow: 0 0 0 2px var(--border-focus);
     }
-    &[data-selected] {
+    &:has([data-hidden]) {
+      [data-slot="tabs-trigger-close-button"] {
+        opacity: 0;
+      }
+
+      &:hover {
+        [data-slot="tabs-trigger-close-button"] {
+          opacity: 1;
+        }
+      }
+    }
+    &:has([data-selected]) {
       color: var(--text-strong);
       background-color: transparent;
       border-bottom-color: transparent;
+      [data-slot="tabs-trigger-close-button"] {
+        opacity: 1;
+      }
     }
     &:hover:not(:disabled):not([data-selected]) {
       color: var(--text-strong);
     }
+    &:has([data-slot="tabs-trigger-close-button"]) {
+      padding-right: 12px;
+
+      [data-slot="tabs-trigger"] {
+        padding-right: 0;
+      }
+    }
   }
 
-  [data-slot="content"] {
+  [data-slot="tabs-content"] {
     overflow-y: auto;
     flex: 1;
 
diff --git a/packages/ui/src/components/tabs.tsx b/packages/ui/src/components/tabs.tsx
index 5e047a7ca..e2f72f158 100644
--- a/packages/ui/src/components/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -1,10 +1,13 @@
 import { Tabs as Kobalte } from "@kobalte/core/tabs"
-import { splitProps } from "solid-js"
+import { Show, splitProps, type JSX } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
 
 export interface TabsProps extends ComponentProps<typeof Kobalte> {}
 export interface TabsListProps extends ComponentProps<typeof Kobalte.List> {}
-export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
+export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+  hideCloseButton?: boolean
+  closeButton?: JSX.Element
+}
 export interface TabsContentProps extends ComponentProps<typeof Kobalte.Content> {}
 
 function TabsRoot(props: TabsProps) {
@@ -26,7 +29,7 @@ function TabsList(props: TabsListProps) {
   return (
     <Kobalte.List
       {...rest}
-      data-slot="list"
+      data-slot="tabs-list"
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
@@ -36,18 +39,26 @@ function TabsList(props: TabsListProps) {
 }
 
 function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "closeButton", "hideCloseButton"])
   return (
-    <Kobalte.Trigger
-      {...rest}
-      data-slot="trigger"
+    <div
+      data-slot="tabs-trigger-wrapper"
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
       }}
     >
-      {split.children}
-    </Kobalte.Trigger>
+      <Kobalte.Trigger {...rest} data-slot="tabs-trigger" class="group/tab">
+        {split.children}
+      </Kobalte.Trigger>
+      <Show when={split.closeButton}>
+        {(closeButton) => (
+          <div data-slot="tabs-trigger-close-button" data-hidden={split.hideCloseButton}>
+            {closeButton()}
+          </div>
+        )}
+      </Show>
+    </div>
   )
 }
 
@@ -56,7 +67,7 @@ function TabsContent(props: ParentProps<TabsContentProps>) {
   return (
     <Kobalte.Content
       {...rest}
-      data-slot="content"
+      data-slot="tabs-content"
       classList={{
         ...(split.classList ?? {}),
         [split.class ?? ""]: !!split.class,
diff --git a/packages/ui/src/components/tooltip.css b/packages/ui/src/components/tooltip.css
index 92825aca1..bde2a97dd 100644
--- a/packages/ui/src/components/tooltip.css
+++ b/packages/ui/src/components/tooltip.css
@@ -6,7 +6,7 @@
 [data-component="tooltip"] {
   z-index: 1000;
   max-width: 320px;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   background-color: var(--surface-float-base);
   color: rgba(253, 252, 252, 0.94);
   padding: 2px 8px;
diff --git a/packages/ui/src/styles/colors.css b/packages/ui/src/styles/colors.css
index c5599686f..d64fa925b 100644
--- a/packages/ui/src/styles/colors.css
+++ b/packages/ui/src/styles/colors.css
@@ -493,4 +493,52 @@
   --blue-light-alpha-10: #007feff9;
   --blue-light-alpha-11: #0066dbf9;
   --blue-light-alpha-12: #002047f9;
+  --ink-dark-1: #101313;
+  --ink-dark-2: #181b1b;
+  --ink-dark-3: #212525;
+  --ink-dark-4: #282d2d;
+  --ink-dark-5: #303434;
+  --ink-dark-6: #393e3e;
+  --ink-dark-7: #464b4b;
+  --ink-dark-8: #5f6464;
+  --ink-dark-9: #6b7171;
+  --ink-dark-10: #797f7f;
+  --ink-dark-11: #b1b7b7;
+  --ink-dark-12: #ecf1f1;
+  --ink-light-1: #fcfdfd;
+  --ink-light-2: #f8f9f9;
+  --ink-light-3: #f0f1f1;
+  --ink-light-4: #e8e9e9;
+  --ink-light-5: #e0e2e2;
+  --ink-light-6: #d9dada;
+  --ink-light-7: #cdcfcf;
+  --ink-light-8: #bbbcbc;
+  --ink-light-9: #8b8e8e;
+  --ink-light-10: #818484;
+  --ink-light-11: #636565;
+  --ink-light-12: #1e2121;
+  --ink-dark-alpha-1: #38828203;
+  --ink-dark-alpha-2: #c6e6e60b;
+  --ink-dark-alpha-3: #d5eded16;
+  --ink-dark-alpha-4: #e1f2f21e;
+  --ink-dark-alpha-5: #e8f5f526;
+  --ink-dark-alpha-6: #e8f5f531;
+  --ink-dark-alpha-7: #ecf7f73f;
+  --ink-dark-alpha-8: #f5fafa59;
+  --ink-dark-alpha-9: #f4fafa67;
+  --ink-dark-alpha-10: #f5fbfb76;
+  --ink-dark-alpha-11: #f9fcfcb2;
+  --ink-dark-alpha-12: #fbfdfdf0;
+  --ink-light-alpha-1: #00555503;
+  --ink-light-alpha-2: #00252507;
+  --ink-light-alpha-3: #0011110f;
+  --ink-light-alpha-4: #000c0c17;
+  --ink-light-alpha-5: #0011111f;
+  --ink-light-alpha-6: #00070726;
+  --ink-light-alpha-7: #000b0b32;
+  --ink-light-alpha-8: #00040444;
+  --ink-light-alpha-9: #00070774;
+  --ink-light-alpha-10: #0004049c;
+  --ink-light-alpha-11: #0007077e;
+  --ink-light-alpha-12: #000202df;
 }
diff --git a/packages/ui/src/styles/tailwind/colors.css b/packages/ui/src/styles/tailwind/colors.css
index 95a497ba9..888105da6 100644
--- a/packages/ui/src/styles/tailwind/colors.css
+++ b/packages/ui/src/styles/tailwind/colors.css
@@ -49,9 +49,9 @@
   --color-surface-info-base: var(--surface-info-base);
   --color-surface-info-weak: var(--surface-info-weak);
   --color-surface-info-strong: var(--surface-info-strong);
+  --color-surface-diff-unchanged-base: var(--surface-diff-unchanged-base);
   --color-surface-diff-skip-base: var(--surface-diff-skip-base);
   --color-surface-diff-hidden-base: var(--surface-diff-hidden-base);
-  --color-surface-diff-unchanged-base: var(--surface-diff-unchanged-base);
   --color-surface-diff-hidden-weak: var(--surface-diff-hidden-weak);
   --color-surface-diff-hidden-weaker: var(--surface-diff-hidden-weaker);
   --color-surface-diff-hidden-strong: var(--surface-diff-hidden-strong);
@@ -100,7 +100,7 @@
   --color-text-on-brand-weaker: var(--text-on-brand-weaker);
   --color-text-on-brand-strong: var(--text-on-brand-strong);
   --color-button-secondary-base: var(--button-secondary-base);
-  --color-button-secondary-base-hover: var(--button-secondary-base-hover);
+  --color-button-secondary-hover: var(--button-secondary-hover);
   --color-border-base: var(--border-base);
   --color-border-hover: var(--border-hover);
   --color-border-active: var(--border-active);
@@ -199,21 +199,21 @@
   --color-syntax-regexp: var(--syntax-regexp);
   --color-syntax-string: var(--syntax-string);
   --color-syntax-keyword: var(--syntax-keyword);
-  --color-syntax-function: var(--syntax-function);
-  --color-syntax-number: var(--syntax-number);
+  --color-syntax-primitive: var(--syntax-primitive);
   --color-syntax-operator: var(--syntax-operator);
   --color-syntax-variable: var(--syntax-variable);
   --color-syntax-property: var(--syntax-property);
-  --color-syntax-parameter: var(--syntax-parameter);
   --color-syntax-type: var(--syntax-type);
   --color-syntax-constant: var(--syntax-constant);
   --color-syntax-punctuation: var(--syntax-punctuation);
-  --color-syntax-namespace: var(--syntax-namespace);
-  --color-syntax-enum: var(--syntax-enum);
+  --color-syntax-object: var(--syntax-object);
   --color-syntax-success: var(--syntax-success);
   --color-syntax-warning: var(--syntax-warning);
   --color-syntax-critical: var(--syntax-critical);
   --color-syntax-info: var(--syntax-info);
+  --color-syntax-diff-add: var(--syntax-diff-add);
+  --color-syntax-diff-delete: var(--syntax-diff-delete);
+  --color-syntax-diff-unknown: var(--syntax-diff-unknown);
   --color-markdown-heading: var(--markdown-heading);
   --color-markdown-text: var(--markdown-text);
   --color-markdown-link: var(--markdown-link);
@@ -237,4 +237,4 @@
   --color-border-weaker-focus: var(--border-weaker-focus);
   --color-button-ghost-hover: var(--button-ghost-hover);
   --color-button-ghost-hover2: var(--button-ghost-hover2);
-}
+}
+\ No newline at end of file
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 05164092e..c65acc207 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -40,14 +40,8 @@
   --container-6xl: 72rem;
   --container-7xl: 80rem;
 
-  --radius-xs: 0.125rem;
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-3xl: 1.5rem;
-  --radius-4xl: 2rem;
 
   --shadow-xs:
     0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
@@ -65,19 +59,15 @@
     0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0),
     0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99));
 
-  --text-mix-blend-mode: multiply;
-}
-
-:root {
-  /* OC-1-Light */
+  color-scheme: light;
   --text-mix-blend-mode: multiply;
 
-  color-scheme: light;
+  /* OC-1-light */
   --background-base: #f8f7f7;
   --background-weak: var(--smoke-light-3);
   --background-strong: var(--smoke-light-1);
   --background-stronger: #fcfcfc;
-  --surface-base: var(--smoke-light-3);
+  --surface-base: var(--smoke-light-alpha-2);
   --base: var(--smoke-light-alpha-2);
   --surface-base-hover: #0500000f;
   --surface-base-active: var(--smoke-light-alpha-3);
@@ -119,9 +109,9 @@
   --surface-info-base: var(--lilac-light-3);
   --surface-info-weak: var(--lilac-light-2);
   --surface-info-strong: var(--lilac-light-9);
+  --surface-diff-unchanged-base: #ffffff00;
   --surface-diff-skip-base: var(--smoke-light-2);
   --surface-diff-hidden-base: var(--blue-light-3);
-  --surface-diff-unchanged-base: #ffffff00;
   --surface-diff-hidden-weak: var(--blue-light-2);
   --surface-diff-hidden-weaker: var(--blue-light-1);
   --surface-diff-hidden-strong: var(--blue-light-5);
@@ -170,7 +160,7 @@
   --text-on-brand-weaker: var(--smoke-light-alpha-8);
   --text-on-brand-strong: var(--smoke-light-alpha-12);
   --button-secondary-base: #fdfcfc;
-  --button-secondary-hover: #fafafa;
+  --button-secondary-hover: #faf9f9;
   --border-base: var(--smoke-light-alpha-7);
   --border-hover: var(--smoke-light-alpha-8);
   --border-active: var(--smoke-light-alpha-9);
@@ -269,21 +259,21 @@
   --syntax-regexp: var(--text-base);
   --syntax-string: #007663;
   --syntax-keyword: var(--text-weak);
-  --syntax-primitive: #f6916b;
+  --syntax-primitive: #fb7f51;
   --syntax-operator: var(--text-weak);
   --syntax-variable: var(--text-strong);
-  --syntax-property: #ed6dc8;
-  --syntax-type: #b2cc00;
-  --syntax-constant: #0092a8;
+  --syntax-property: #ec6cc8;
+  --syntax-type: #738400;
+  --syntax-constant: #00b2b9;
   --syntax-punctuation: var(--text-weaker);
   --syntax-object: var(--text-strong);
-  --syntax-success: var(--apple-dark-10);
-  --syntax-warning: var(--amber-dark-10);
-  --syntax-critical: var(--ember-dark-9);
-  --syntax-info: #0092a8;
-  --syntax-diff-add: var(--mint-light-alpha-8);
-  --syntax-diff-delete: var(--ember-light-alpha-8);
-  --syntax-unknown: var(--text-weak);
+  --syntax-success: var(--apple-light-10);
+  --syntax-warning: var(--amber-light-10);
+  --syntax-critical: var(--ember-light-9);
+  --syntax-info: #0091a7;
+  --syntax-diff-add: var(--mint-light-11);
+  --syntax-diff-delete: var(--ember-light-11);
+  --syntax-diff-unknown: #ff0000;
   --markdown-heading: #d68c27;
   --markdown-text: #1a1a1a;
   --markdown-link: #3b7dd8;
@@ -309,15 +299,15 @@
   --button-ghost-hover2: var(--smoke-light-alpha-3);
 
   @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
     --text-mix-blend-mode: plus-lighter;
 
-    /* OC-1-Dark */
-    color-scheme: dark;
+    /* OC-1-dark */
     --background-base: var(--smoke-dark-1);
-    --background-weak: #1b1818;
+    --background-weak: #1c1717;
     --background-strong: #151313;
     --background-stronger: #191515;
-    --surface-base: var(--smoke-dark-3);
+    --surface-base: var(--smoke-dark-alpha-2);
     --base: var(--smoke-dark-alpha-2);
     --surface-base-hover: #e0b7b716;
     --surface-base-active: var(--smoke-dark-alpha-3);
@@ -359,9 +349,9 @@
     --surface-info-base: var(--lilac-light-3);
     --surface-info-weak: var(--lilac-light-2);
     --surface-info-strong: var(--lilac-light-9);
+    --surface-diff-unchanged-base: var(--smoke-dark-1);
     --surface-diff-skip-base: var(--smoke-dark-alpha-1);
     --surface-diff-hidden-base: var(--blue-dark-2);
-    --surface-diff-unchanged-base: var(--smoke-dark-1);
     --surface-diff-hidden-weak: var(--blue-dark-1);
     --surface-diff-hidden-weaker: var(--blue-dark-3);
     --surface-diff-hidden-strong: var(--blue-dark-5);
@@ -417,7 +407,7 @@
     --border-selected: var(--cobalt-dark-alpha-11);
     --border-disabled: var(--smoke-dark-alpha-8);
     --border-focus: var(--smoke-dark-alpha-9);
-    --border-weak-base: var(--smoke-dark-alpha-4);
+    --border-weak-base: var(--smoke-dark-alpha-6);
     --border-strong-base: var(--smoke-dark-alpha-8);
     --border-strong-hover: var(--smoke-dark-alpha-7);
     --border-strong-active: var(--smoke-dark-alpha-8);
@@ -519,11 +509,11 @@
     --syntax-object: var(--text-strong);
     --syntax-success: var(--apple-dark-10);
     --syntax-warning: var(--amber-dark-10);
-    --syntax-critical: var(--ember-dark-9);
-    --syntax-info: #ff9ae2;
-    --syntax-diff-add: var(--mint-dark-alpha-6);
-    --syntax-diff-delete: var(--ember-dark-alpha-4);
-    --syntax-unknown: var(--text-weak);
+    --syntax-critical: var(--ember-dark-10);
+    --syntax-info: #93e9f6;
+    --syntax-diff-add: var(--mint-dark-11);
+    --syntax-diff-delete: var(--ember-dark-11);
+    --syntax-diff-unknown: #ff0000;
     --markdown-heading: #9d7cd8;
     --markdown-text: #eeeeee;
     --markdown-link: #fab283;
@@ -549,3 +539,478 @@
     --button-ghost-hover2: var(--smoke-dark-alpha-3);
   }
 }
+
+html[data-theme="oc-2-paper"] {
+  /* OC-2-paper */
+  --background-base: #f7f8f8;
+  --background-weak: var(--ink-light-3);
+  --background-strong: var(--ink-light-1);
+  --background-stronger: #fcfcfc;
+  --surface-base: var(--ink-light-alpha-2);
+  --base: var(--ink-light-alpha-2);
+  --surface-base-hover: #0005050f;
+  --surface-base-active: var(--ink-light-alpha-3);
+  --surface-base-interactive-active: var(--cobalt-light-alpha-3);
+  --base2: var(--ink-light-alpha-2);
+  --base3: var(--ink-light-alpha-2);
+  --surface-inset-base: var(--ink-light-alpha-2);
+  --surface-inset-base-hover: var(--ink-light-alpha-3);
+  --surface-inset-strong: #001f1f17;
+  --surface-inset-strong-hover: #001f1f17;
+  --surface-raised-base: var(--ink-light-alpha-1);
+  --surface-float-base: var(--ink-dark-1);
+  --surface-float-base-hover: var(--ink-dark-2);
+  --surface-raised-base-hover: var(--ink-light-alpha-2);
+  --surface-raised-base-active: var(--ink-light-alpha-3);
+  --surface-raised-strong: var(--ink-light-1);
+  --surface-raised-strong-hover: var(--white);
+  --surface-raised-stronger: var(--white);
+  --surface-raised-stronger-hover: var(--white);
+  --surface-weak: var(--ink-light-alpha-3);
+  --surface-weaker: var(--ink-light-alpha-4);
+  --surface-strong: #ffffff;
+  --surface-raised-stronger-non-alpha: var(--white);
+  --surface-brand-base: var(--yuzu-light-9);
+  --surface-brand-hover: var(--yuzu-light-10);
+  --surface-interactive-base: var(--cobalt-light-3);
+  --surface-interactive-hover: var(--cobalt-light-4);
+  --surface-interactive-weak: var(--cobalt-light-2);
+  --surface-interactive-weak-hover: var(--cobalt-light-3);
+  --surface-success-base: var(--apple-light-3);
+  --surface-success-weak: var(--apple-light-2);
+  --surface-success-strong: var(--apple-light-9);
+  --surface-warning-base: var(--solaris-light-3);
+  --surface-warning-weak: var(--solaris-light-2);
+  --surface-warning-strong: var(--solaris-light-9);
+  --surface-critical-base: var(--ember-light-3);
+  --surface-critical-weak: var(--ember-light-2);
+  --surface-critical-strong: var(--ember-light-9);
+  --surface-info-base: var(--lilac-light-3);
+  --surface-info-weak: var(--lilac-light-2);
+  --surface-info-strong: var(--lilac-light-9);
+  --surface-diff-unchanged-base: #ffffff00;
+  --surface-diff-skip-base: var(--ink-light-2);
+  --surface-diff-hidden-base: var(--blue-light-3);
+  --surface-diff-hidden-weak: var(--blue-light-2);
+  --surface-diff-hidden-weaker: var(--blue-light-1);
+  --surface-diff-hidden-strong: var(--blue-light-5);
+  --surface-diff-hidden-stronger: var(--blue-light-9);
+  --surface-diff-add-base: var(--mint-light-3);
+  --surface-diff-add-weak: var(--mint-light-2);
+  --surface-diff-add-weaker: var(--mint-light-1);
+  --surface-diff-add-strong: var(--mint-light-5);
+  --surface-diff-add-stronger: var(--mint-light-9);
+  --surface-diff-delete-base: var(--ember-light-3);
+  --surface-diff-delete-weak: var(--ember-light-2);
+  --surface-diff-delete-weaker: var(--ember-light-1);
+  --surface-diff-delete-strong: var(--ember-light-6);
+  --surface-diff-delete-stronger: var(--ember-light-9);
+  --text-base: var(--ink-light-11);
+  --input-base: var(--ink-light-1);
+  --input-hover: var(--ink-light-2);
+  --input-active: var(--cobalt-light-1);
+  --input-selected: var(--cobalt-light-4);
+  --input-focus: var(--cobalt-light-1);
+  --input-disabled: var(--ink-light-4);
+  --text-weak: var(--ink-light-9);
+  --text-weaker: var(--ink-light-8);
+  --text-strong: var(--ink-light-12);
+  --text-interactive-base: var(--cobalt-light-9);
+  --text-on-brand-base: var(--ink-light-alpha-11);
+  --text-on-interactive-base: var(--ink-light-1);
+  --text-on-interactive-weak: var(--ink-light-alpha-11);
+  --text-on-success-base: var(--apple-light-10);
+  --text-on-critical-base: var(--ember-light-10);
+  --text-on-critical-weak: var(--ember-light-8);
+  --text-on-critical-strong: var(--ember-light-12);
+  --text-on-warning-base: var(--ink-dark-alpha-11);
+  --text-on-info-base: var(--ink-dark-alpha-11);
+  --text-diff-add-base: var(--mint-light-11);
+  --text-diff-delete-base: var(--ember-light-10);
+  --text-diff-delete-strong: var(--ember-light-12);
+  --text-diff-add-strong: var(--mint-light-12);
+  --text-on-info-weak: var(--ink-dark-alpha-9);
+  --text-on-info-strong: var(--ink-dark-alpha-12);
+  --text-on-warning-weak: var(--ink-dark-alpha-9);
+  --text-on-warning-strong: var(--ink-dark-alpha-12);
+  --text-on-success-weak: var(--apple-light-6);
+  --text-on-success-strong: var(--apple-light-12);
+  --text-on-brand-weak: var(--ink-light-alpha-9);
+  --text-on-brand-weaker: var(--ink-light-alpha-8);
+  --text-on-brand-strong: var(--ink-light-alpha-12);
+  --button-secondary-base: #fcfdfd;
+  --button-secondary-hover: #f9fafa;
+  --border-base: var(--ink-light-alpha-7);
+  --border-hover: var(--ink-light-alpha-8);
+  --border-active: var(--ink-light-alpha-9);
+  --border-selected: var(--cobalt-light-alpha-9);
+  --border-disabled: var(--ink-light-alpha-8);
+  --border-focus: var(--ink-light-alpha-9);
+  --border-weak-base: var(--ink-light-alpha-5);
+  --border-strong-base: var(--ink-light-alpha-7);
+  --border-strong-hover: var(--ink-light-alpha-8);
+  --border-strong-active: var(--ink-light-alpha-7);
+  --border-strong-selected: var(--cobalt-light-alpha-6);
+  --border-strong-disabled: var(--ink-light-alpha-6);
+  --border-strong-focus: var(--ink-light-alpha-7);
+  --border-weak-hover: var(--ink-light-alpha-6);
+  --border-weak-active: var(--ink-light-alpha-7);
+  --border-weak-selected: var(--cobalt-light-alpha-5);
+  --border-weak-disabled: var(--ink-light-alpha-6);
+  --border-weak-focus: var(--ink-light-alpha-7);
+  --border-interactive-base: var(--cobalt-light-7);
+  --border-interactive-hover: var(--cobalt-light-8);
+  --border-interactive-active: var(--cobalt-light-9);
+  --border-interactive-selected: var(--cobalt-light-9);
+  --border-interactive-disabled: var(--ink-light-8);
+  --border-interactive-focus: var(--cobalt-light-9);
+  --border-success-base: var(--apple-light-6);
+  --border-success-hover: var(--apple-light-7);
+  --border-success-selected: var(--apple-light-9);
+  --border-warning-base: var(--solaris-light-6);
+  --border-warning-hover: var(--solaris-light-7);
+  --border-warning-selected: var(--solaris-light-9);
+  --border-critical-base: var(--ember-light-6);
+  --border-critical-hover: var(--ember-light-7);
+  --border-critical-selected: var(--ember-light-9);
+  --border-info-base: var(--lilac-light-6);
+  --border-info-hover: var(--lilac-light-7);
+  --border-info-selected: var(--lilac-light-9);
+  --icon-base: var(--ink-light-9);
+  --icon-hover: var(--ink-light-11);
+  --icon-active: var(--ink-light-12);
+  --icon-selected: var(--ink-light-12);
+  --icon-disabled: var(--ink-light-8);
+  --icon-focus: var(--ink-light-12);
+  --icon-invert-base: #ffffff;
+  --icon-weak-base: var(--ink-light-7);
+  --icon-weak-hover: var(--ink-light-8);
+  --icon-weak-active: var(--ink-light-9);
+  --icon-weak-selected: var(--ink-light-10);
+  --icon-weak-disabled: var(--ink-light-6);
+  --icon-weak-focus: var(--ink-light-9);
+  --icon-strong-base: var(--ink-light-12);
+  --icon-strong-hover: #131515;
+  --icon-strong-active: #020202;
+  --icon-strong-selected: #020202;
+  --icon-strong-disabled: var(--ink-light-8);
+  --icon-strong-focus: #020202;
+  --icon-brand-base: var(--ink-light-12);
+  --icon-interactive-base: var(--cobalt-light-9);
+  --icon-success-base: var(--apple-light-7);
+  --icon-success-hover: var(--apple-light-8);
+  --icon-success-active: var(--apple-light-11);
+  --icon-warning-base: var(--amber-light-7);
+  --icon-warning-hover: var(--amber-light-8);
+  --icon-warning-active: var(--amber-light-11);
+  --icon-critical-base: var(--ember-light-10);
+  --icon-critical-hover: var(--ember-light-11);
+  --icon-critical-active: var(--ember-light-12);
+  --icon-info-base: var(--lilac-light-7);
+  --icon-info-hover: var(--lilac-light-8);
+  --icon-info-active: var(--lilac-light-11);
+  --icon-on-brand-base: var(--ink-light-alpha-11);
+  --icon-on-brand-hover: var(--ink-light-alpha-12);
+  --icon-on-brand-selected: var(--ink-light-alpha-12);
+  --icon-on-interactive-base: var(--ink-light-1);
+  --icon-agent-plan-base: var(--purple-light-9);
+  --icon-agent-docs-base: var(--amber-light-9);
+  --icon-agent-ask-base: var(--cyan-light-9);
+  --icon-agent-build-base: var(--cobalt-light-9);
+  --icon-on-success-base: var(--apple-light-alpha-9);
+  --icon-on-success-hover: var(--apple-light-alpha-10);
+  --icon-on-success-selected: var(--apple-light-alpha-11);
+  --icon-on-warning-base: var(--amber-lightalpha-9);
+  --icon-on-warning-hover: var(--amber-lightalpha-10);
+  --icon-on-warning-selected: var(--amber-lightalpha-11);
+  --icon-on-critical-base: var(--ember-light-alpha-9);
+  --icon-on-critical-hover: var(--ember-light-alpha-10);
+  --icon-on-critical-selected: var(--ember-light-alpha-11);
+  --icon-on-info-base: var(--lilac-light-9);
+  --icon-on-info-hover: var(--lilac-light-alpha-10);
+  --icon-on-info-selected: var(--lilac-light-alpha-11);
+  --icon-diff-add-base: var(--mint-light-11);
+  --icon-diff-add-hover: var(--mint-light-12);
+  --icon-diff-add-active: var(--mint-light-12);
+  --icon-diff-delete-base: var(--ember-light-10);
+  --icon-diff-delete-hover: var(--ember-light-11);
+  --syntax-comment: var(--text-weaker);
+  --syntax-regexp: var(--text-base);
+  --syntax-string: #007663;
+  --syntax-keyword: var(--text-weak);
+  --syntax-primitive: #fb7f51;
+  --syntax-operator: var(--text-weak);
+  --syntax-variable: var(--text-strong);
+  --syntax-property: #ec6cc8;
+  --syntax-type: #738400;
+  --syntax-constant: #00b2b9;
+  --syntax-punctuation: var(--text-weaker);
+  --syntax-object: var(--text-strong);
+  --syntax-success: var(--apple-light-10);
+  --syntax-warning: var(--amber-light-10);
+  --syntax-critical: var(--ember-light-9);
+  --syntax-info: #0091a7;
+  --syntax-diff-add: var(--mint-light-11);
+  --syntax-diff-delete: var(--ember-light-11);
+  --syntax-diff-unknown: #ff0000;
+  --markdown-heading: #d68c27;
+  --markdown-text: #1a1a1a;
+  --markdown-link: #3b7dd8;
+  --markdown-link-text: #318795;
+  --markdown-code: #3d9a57;
+  --markdown-block-quote: #b0851f;
+  --markdown-emph: #b0851f;
+  --markdown-strong: #d68c27;
+  --markdown-horizontal-rule: #8a8a8a;
+  --markdown-list-item: #3b7dd8;
+  --markdown-list-enumeration: #318795;
+  --markdown-image: #3b7dd8;
+  --markdown-image-text: #318795;
+  --markdown-code-block: #1a1a1a;
+  --border-color: #ffffff;
+  --border-weaker-base: var(--ink-light-alpha-3);
+  --border-weaker-hover: var(--ink-light-alpha-4);
+  --border-weaker-active: var(--ink-light-alpha-6);
+  --border-weaker-selected: var(--cobalt-light-alpha-4);
+  --border-weaker-disabled: var(--ink-light-alpha-2);
+  --border-weaker-focus: var(--ink-light-alpha-6);
+  --button-ghost-hover: var(--ink-light-alpha-2);
+  --button-ghost-hover2: var(--ink-light-alpha-3);
+
+  @media (prefers-color-scheme: dark) {
+    --background-base: var(--ink-dark-1);
+    --background-weak: #171c1c;
+    --background-strong: #131515;
+    --background-stronger: #151919;
+    --surface-base: var(--ink-dark-alpha-2);
+    --base: var(--ink-dark-alpha-2);
+    --surface-base-hover: #b8e0e00f;
+    --surface-base-active: var(--ink-dark-alpha-3);
+    --surface-base-interactive-active: var(--cobalt-light-alpha-3);
+    --base2: var(--ink-dark-alpha-2);
+    --base3: var(--ink-dark-alpha-2);
+    --surface-inset-base: #0b0e0e7f;
+    --surface-inset-base-hover: #0b0e0e7f;
+    --surface-inset-strong: #050606cc;
+    --surface-inset-strong-hover: #050606cc;
+    --surface-raised-base: var(--ink-light-alpha-1);
+    --surface-float-base: var(--ink-dark-1);
+    --surface-float-base-hover: var(--ink-dark-2);
+    --surface-raised-base-hover: var(--ink-light-alpha-2);
+    --surface-raised-base-active: var(--ink-light-alpha-3);
+    --surface-raised-strong: var(--ink-light-1);
+    --surface-raised-strong-hover: var(--white);
+    --surface-raised-stronger: var(--white);
+    --surface-raised-stronger-hover: var(--white);
+    --surface-weak: var(--ink-dark-alpha-4);
+    --surface-weaker: var(--ink-dark-alpha-5);
+    --surface-strong: var(--ink-dark-alpha-7);
+    --surface-raised-stronger-non-alpha: var(--white);
+    --surface-brand-base: var(--yuzu-light-9);
+    --surface-brand-hover: var(--yuzu-light-10);
+    --surface-interactive-base: var(--cobalt-light-3);
+    --surface-interactive-hover: var(--cobalt-light-4);
+    --surface-interactive-weak: var(--cobalt-light-2);
+    --surface-interactive-weak-hover: var(--cobalt-light-3);
+    --surface-success-base: var(--apple-light-3);
+    --surface-success-weak: var(--apple-light-2);
+    --surface-success-strong: var(--apple-light-9);
+    --surface-warning-base: var(--solaris-light-3);
+    --surface-warning-weak: var(--solaris-light-2);
+    --surface-warning-strong: var(--solaris-light-9);
+    --surface-critical-base: var(--ember-light-3);
+    --surface-critical-weak: var(--ember-light-2);
+    --surface-critical-strong: var(--ember-light-9);
+    --surface-info-base: var(--lilac-light-3);
+    --surface-info-weak: var(--lilac-light-2);
+    --surface-info-strong: var(--lilac-light-9);
+    --surface-diff-unchanged-base: #ffffff00;
+    --surface-diff-skip-base: var(--ink-light-2);
+    --surface-diff-hidden-base: var(--blue-light-3);
+    --surface-diff-hidden-weak: var(--blue-light-2);
+    --surface-diff-hidden-weaker: var(--blue-light-1);
+    --surface-diff-hidden-strong: var(--blue-light-5);
+    --surface-diff-hidden-stronger: var(--blue-light-9);
+    --surface-diff-add-base: var(--mint-light-3);
+    --surface-diff-add-weak: var(--mint-light-2);
+    --surface-diff-add-weaker: var(--mint-light-1);
+    --surface-diff-add-strong: var(--mint-light-5);
+    --surface-diff-add-stronger: var(--mint-light-9);
+    --surface-diff-delete-base: var(--ember-light-3);
+    --surface-diff-delete-weak: var(--ember-light-2);
+    --surface-diff-delete-weaker: var(--ember-light-1);
+    --surface-diff-delete-strong: var(--ember-light-6);
+    --surface-diff-delete-stronger: var(--ember-light-9);
+    --text-base: var(--ink-light-11);
+    --input-base: var(--ink-light-1);
+    --input-hover: var(--ink-light-2);
+    --input-active: var(--cobalt-light-1);
+    --input-selected: var(--cobalt-light-4);
+    --input-focus: var(--cobalt-light-1);
+    --input-disabled: var(--ink-light-4);
+    --text-weak: var(--ink-light-9);
+    --text-weaker: var(--ink-light-8);
+    --text-strong: var(--ink-light-12);
+    --text-interactive-base: var(--cobalt-light-9);
+    --text-on-brand-base: var(--ink-light-alpha-11);
+    --text-on-interactive-base: var(--ink-light-1);
+    --text-on-interactive-weak: var(--ink-light-alpha-11);
+    --text-on-success-base: var(--apple-light-10);
+    --text-on-critical-base: var(--ember-light-10);
+    --text-on-critical-weak: var(--ember-light-8);
+    --text-on-critical-strong: var(--ember-light-12);
+    --text-on-warning-base: var(--ink-dark-alpha-11);
+    --text-on-info-base: var(--ink-dark-alpha-11);
+    --text-diff-add-base: var(--mint-light-11);
+    --text-diff-delete-base: var(--ember-light-10);
+    --text-diff-delete-strong: var(--ember-light-12);
+    --text-diff-add-strong: var(--mint-light-12);
+    --text-on-info-weak: var(--ink-dark-alpha-9);
+    --text-on-info-strong: var(--ink-dark-alpha-12);
+    --text-on-warning-weak: var(--ink-dark-alpha-9);
+    --text-on-warning-strong: var(--ink-dark-alpha-12);
+    --text-on-success-weak: var(--apple-light-6);
+    --text-on-success-strong: var(--apple-light-12);
+    --text-on-brand-weak: var(--ink-light-alpha-9);
+    --text-on-brand-weaker: var(--ink-light-alpha-8);
+    --text-on-brand-strong: var(--ink-light-alpha-12);
+    --button-secondary-base: #fcfdfd;
+    --button-secondary-hover: #f9fafa;
+    --border-base: var(--ink-light-alpha-7);
+    --border-hover: var(--ink-light-alpha-8);
+    --border-active: var(--ink-light-alpha-9);
+    --border-selected: var(--cobalt-light-alpha-9);
+    --border-disabled: var(--ink-light-alpha-8);
+    --border-focus: var(--ink-light-alpha-9);
+    --border-weak-base: var(--ink-light-alpha-5);
+    --border-strong-base: var(--ink-light-alpha-7);
+    --border-strong-hover: var(--ink-light-alpha-8);
+    --border-strong-active: var(--ink-light-alpha-7);
+    --border-strong-selected: var(--cobalt-light-alpha-6);
+    --border-strong-disabled: var(--ink-light-alpha-6);
+    --border-strong-focus: var(--ink-light-alpha-7);
+    --border-weak-hover: var(--ink-light-alpha-6);
+    --border-weak-active: var(--ink-light-alpha-7);
+    --border-weak-selected: var(--cobalt-light-alpha-5);
+    --border-weak-disabled: var(--ink-light-alpha-6);
+    --border-weak-focus: var(--ink-light-alpha-7);
+    --border-interactive-base: var(--cobalt-light-7);
+    --border-interactive-hover: var(--cobalt-light-8);
+    --border-interactive-active: var(--cobalt-light-9);
+    --border-interactive-selected: var(--cobalt-light-9);
+    --border-interactive-disabled: var(--ink-light-8);
+    --border-interactive-focus: var(--cobalt-light-9);
+    --border-success-base: var(--apple-light-6);
+    --border-success-hover: var(--apple-light-7);
+    --border-success-selected: var(--apple-light-9);
+    --border-warning-base: var(--solaris-light-6);
+    --border-warning-hover: var(--solaris-light-7);
+    --border-warning-selected: var(--solaris-light-9);
+    --border-critical-base: var(--ember-light-6);
+    --border-critical-hover: var(--ember-light-7);
+    --border-critical-selected: var(--ember-light-9);
+    --border-info-base: var(--lilac-light-6);
+    --border-info-hover: var(--lilac-light-7);
+    --border-info-selected: var(--lilac-light-9);
+    --icon-base: var(--ink-light-9);
+    --icon-hover: var(--ink-light-11);
+    --icon-active: var(--ink-light-12);
+    --icon-selected: var(--ink-light-12);
+    --icon-disabled: var(--ink-light-8);
+    --icon-focus: var(--ink-light-12);
+    --icon-invert-base: #ffffff;
+    --icon-weak-base: var(--ink-light-7);
+    --icon-weak-hover: var(--ink-light-8);
+    --icon-weak-active: var(--ink-light-9);
+    --icon-weak-selected: var(--ink-light-10);
+    --icon-weak-disabled: var(--ink-light-6);
+    --icon-weak-focus: var(--ink-light-9);
+    --icon-strong-base: var(--ink-light-12);
+    --icon-strong-hover: #131515;
+    --icon-strong-active: #020202;
+    --icon-strong-selected: #020202;
+    --icon-strong-disabled: var(--ink-light-8);
+    --icon-strong-focus: #020202;
+    --icon-brand-base: var(--ink-light-12);
+    --icon-interactive-base: var(--cobalt-light-9);
+    --icon-success-base: var(--apple-light-7);
+    --icon-success-hover: var(--apple-light-8);
+    --icon-success-active: var(--apple-light-11);
+    --icon-warning-base: var(--amber-light-7);
+    --icon-warning-hover: var(--amber-light-8);
+    --icon-warning-active: var(--amber-light-11);
+    --icon-critical-base: var(--ember-light-10);
+    --icon-critical-hover: var(--ember-light-11);
+    --icon-critical-active: var(--ember-light-12);
+    --icon-info-base: var(--lilac-light-7);
+    --icon-info-hover: var(--lilac-light-8);
+    --icon-info-active: var(--lilac-light-11);
+    --icon-on-brand-base: var(--ink-light-alpha-11);
+    --icon-on-brand-hover: var(--ink-light-alpha-12);
+    --icon-on-brand-selected: var(--ink-light-alpha-12);
+    --icon-on-interactive-base: var(--ink-light-1);
+    --icon-agent-plan-base: var(--purple-light-9);
+    --icon-agent-docs-base: var(--amber-light-9);
+    --icon-agent-ask-base: var(--cyan-light-9);
+    --icon-agent-build-base: var(--cobalt-light-9);
+    --icon-on-success-base: var(--apple-light-alpha-9);
+    --icon-on-success-hover: var(--apple-light-alpha-10);
+    --icon-on-success-selected: var(--apple-light-alpha-11);
+    --icon-on-warning-base: var(--amber-lightalpha-9);
+    --icon-on-warning-hover: var(--amber-lightalpha-10);
+    --icon-on-warning-selected: var(--amber-lightalpha-11);
+    --icon-on-critical-base: var(--ember-light-alpha-9);
+    --icon-on-critical-hover: var(--ember-light-alpha-10);
+    --icon-on-critical-selected: var(--ember-light-alpha-11);
+    --icon-on-info-base: var(--lilac-light-9);
+    --icon-on-info-hover: var(--lilac-light-alpha-10);
+    --icon-on-info-selected: var(--lilac-light-alpha-11);
+    --icon-diff-add-base: var(--mint-light-11);
+    --icon-diff-add-hover: var(--mint-light-12);
+    --icon-diff-add-active: var(--mint-light-12);
+    --icon-diff-delete-base: var(--ember-light-10);
+    --icon-diff-delete-hover: var(--ember-light-11);
+    --syntax-comment: var(--text-weaker);
+    --syntax-regexp: var(--text-base);
+    --syntax-string: #007663;
+    --syntax-keyword: var(--text-weak);
+    --syntax-primitive: #fb7f51;
+    --syntax-operator: var(--text-weak);
+    --syntax-variable: var(--text-strong);
+    --syntax-property: #ec6cc8;
+    --syntax-type: #738400;
+    --syntax-constant: #00b2b9;
+    --syntax-punctuation: var(--text-weaker);
+    --syntax-object: var(--text-strong);
+    --syntax-success: var(--apple-light-10);
+    --syntax-warning: var(--amber-light-10);
+    --syntax-critical: var(--ember-light-9);
+    --syntax-info: #0091a7;
+    --syntax-diff-add: var(--mint-light-11);
+    --syntax-diff-delete: var(--ember-light-11);
+    --syntax-diff-unknown: #ff0000;
+    --markdown-heading: #d68c27;
+    --markdown-text: #1a1a1a;
+    --markdown-link: #3b7dd8;
+    --markdown-link-text: #318795;
+    --markdown-code: #3d9a57;
+    --markdown-block-quote: #b0851f;
+    --markdown-emph: #b0851f;
+    --markdown-strong: #d68c27;
+    --markdown-horizontal-rule: #8a8a8a;
+    --markdown-list-item: #3b7dd8;
+    --markdown-list-enumeration: #318795;
+    --markdown-image: #3b7dd8;
+    --markdown-image-text: #318795;
+    --markdown-code-block: #1a1a1a;
+    --border-color: #ffffff;
+    --border-weaker-base: var(--ink-light-alpha-3);
+    --border-weaker-hover: var(--ink-light-alpha-4);
+    --border-weaker-active: var(--ink-light-alpha-6);
+    --border-weaker-selected: var(--cobalt-light-alpha-4);
+    --border-weaker-disabled: var(--ink-light-alpha-2);
+    --border-weaker-focus: var(--ink-light-alpha-6);
+    --button-ghost-hover: var(--ink-light-alpha-2);
+    --button-ghost-hover2: var(--ink-light-alpha-3);
+  }
+}
diff --git a/packages/ui/src/styles/utilities.css b/packages/ui/src/styles/utilities.css
index 99b7760a0..935119af1 100644
--- a/packages/ui/src/styles/utilities.css
+++ b/packages/ui/src/styles/utilities.css
@@ -17,7 +17,7 @@
 
   ::-webkit-scrollbar-thumb {
     background-color: var(--theme-border-subtle);
-    border-radius: 6px;
+    border-radius: var(--radius-md);
   }
 
   * {
author	Adam <[email protected]>	2025-11-13 14:47:25 -0600
committer	Adam <[email protected]>	2025-11-13 14:47:29 -0600
commit	a8836c5615f620321cc7aa2670767e0c9586d27b (patch)
tree	4af1b0f7397d2dceac6e0c9ba734049f41d7c326
parent	779a27693a9d37ae212c27af353414ff4de07ea4 (diff)
download	opencode-a8836c5615f620321cc7aa2670767e0c9586d27b.tar.gz opencode-a8836c5615f620321cc7aa2670767e0c9586d27b.zip