sidepanel interaction fix

Co-authored-by: Brendan Allan <git@brendonovich.dev>
Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>

packages/app/src/components/prompt-input.tsx

@@ -791,8 +791,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
   }
 
-  // Auto-scroll active command into view when navigating with keyboard
-  createEffect(() => {
+  const scrollSlashActiveIntoView = () => {
     const activeId = slashActive()
     if (!activeId || !slashPopoverRef) return
 
@@ -800,7 +799,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       const element = slashPopoverRef.querySelector(`[data-slash-id="${activeId}"]`)
       element?.scrollIntoView({ block: "nearest", behavior: "smooth" })
     })
-  })
+  }
   const selectPopoverActive = () => {
     if (store.popover === "at") {
       const items = atFlat()
@@ -1287,6 +1286,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         }
         if (store.popover === "slash") {
           slashOnKeyDown(event)
+          if (event.key === "ArrowUp" || event.key === "ArrowDown" || ctrlNav) {
+            scrollSlashActiveIntoView()
+          }
         }
         event.preventDefault()
         return
@@ -1406,6 +1408,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         setSlashActive={setSlashActive}
         onSlashSelect={handleSlashSelect}
         commandKeybind={command.keybind}
+        commandKeybindParts={command.keybindParts}
+        newLayoutDesigns={props.controls.newLayoutDesigns}
         t={(key) => language.t(key as Parameters<typeof language.t>[0])}
       />
       <Switch>

packages/app/src/components/prompt-input/slash-popover.tsx

@@ -1,6 +1,8 @@
 import { Component, For, Match, Show, Switch } from "solid-js"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
+import { Tag } from "@opencode-ai/ui/v2/badge-v2"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
 import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
 
 export type AtOption =
@@ -30,6 +32,8 @@ type PromptPopoverProps = {
   setSlashActive: (id: string) => void
   onSlashSelect: (item: SlashCommand) => void
   commandKeybind: (id: string) => string | undefined
+  commandKeybindParts: (id: string) => string[]
+  newLayoutDesigns: boolean
   t: (key: string) => string
 }
 
@@ -41,15 +45,29 @@ export const PromptPopover: Component<PromptPopoverProps> = (props) => {
           if (props.popover === "slash") props.setSlashPopoverRef(el)
         }}
         class="absolute inset-x-0 -top-2 -translate-y-full origin-bottom-left max-h-80 min-h-10
-                 overflow-auto no-scrollbar flex flex-col p-2 rounded-[12px]
-                 bg-surface-raised-stronger-non-alpha shadow-[var(--shadow-lg-border-base)]"
+                 overflow-auto no-scrollbar flex flex-col p-2"
+        classList={{
+          "z-[70] rounded-[10px] bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]": props.newLayoutDesigns,
+          "rounded-[12px] bg-surface-raised-stronger-non-alpha shadow-[var(--shadow-lg-border-base)]":
+            !props.newLayoutDesigns,
+        }}
         onMouseDown={(e) => e.preventDefault()}
       >
         <Switch>
           <Match when={props.popover === "at"}>
             <Show
               when={props.atFlat.length > 0}
-              fallback={<div class="text-text-weak px-2 py-1">{props.t("prompt.popover.emptyResults")}</div>}
+              fallback={
+                <div
+                  class="px-2 py-1"
+                  classList={{
+                    "text-v2-text-text-muted": props.newLayoutDesigns,
+                    "text-text-weak": !props.newLayoutDesigns,
+                  }}
+                >
+                  {props.t("prompt.popover.emptyResults")}
+                </div>
+              }
             >
               <For each={props.atFlat.slice(0, 10)}>
                 {(item) => {
@@ -58,13 +76,29 @@ export const PromptPopover: Component<PromptPopoverProps> = (props) => {
                   if (item.type === "agent") {
                     return (
                       <button
-                        class="w-full flex items-center gap-x-2 rounded-md px-2 py-0.5"
-                        classList={{ "bg-surface-raised-base-hover": props.atActive === key }}
+                        class="w-full flex items-center gap-x-2 px-2 py-0.5"
+                        classList={{
+                          "rounded-[4px]": props.newLayoutDesigns,
+                          "rounded-md": !props.newLayoutDesigns,
+                          "bg-v2-overlay-simple-overlay-hover": props.newLayoutDesigns && props.atActive === key,
+                          "bg-surface-raised-base-hover": !props.newLayoutDesigns && props.atActive === key,
+                        }}
                         onClick={() => props.onAtSelect(item)}
-                        onMouseEnter={() => props.setAtActive(key)}
+                        onPointerMove={() => props.setAtActive(key)}
                       >
                         <Icon name="brain" size="small" class="text-icon-info-active shrink-0" />
-                        <span class="text-14-regular text-text-strong whitespace-nowrap">@{item.name}</span>
+                        <span
+                          class="whitespace-nowrap"
+                          classList={{
+                            "text-[13px] leading-[calc(var(--font-size-base)*1.8)] tracking-[-0.04px] [font-weight:440]":
+                              props.newLayoutDesigns,
+                            "text-v2-text-text-base": props.newLayoutDesigns,
+                            "text-14-regular": !props.newLayoutDesigns,
+                            "text-text-strong": !props.newLayoutDesigns,
+                          }}
+                        >
+                          @{item.name}
+                        </span>
                       </button>
                     )
                   }
@@ -75,16 +109,44 @@ export const PromptPopover: Component<PromptPopoverProps> = (props) => {
 
                   return (
                     <button
-                      class="w-full flex items-center gap-x-2 rounded-md px-2 py-0.5"
-                      classList={{ "bg-surface-raised-base-hover": props.atActive === key }}
+                      class="w-full flex items-center gap-x-2 px-2 py-0.5"
+                      classList={{
+                        "rounded-[4px]": props.newLayoutDesigns,
+                        "rounded-md": !props.newLayoutDesigns,
+                        "bg-v2-overlay-simple-overlay-hover": props.newLayoutDesigns && props.atActive === key,
+                        "bg-surface-raised-base-hover": !props.newLayoutDesigns && props.atActive === key,
+                      }}
                       onClick={() => props.onAtSelect(item)}
-                      onMouseEnter={() => props.setAtActive(key)}
+                      onPointerMove={() => props.setAtActive(key)}
                     >
                       <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-4" />
-                      <div class="flex items-center text-14-regular min-w-0">
-                        <span class="text-text-weak whitespace-nowrap truncate min-w-0">{directory}</span>
+                      <div
+                        class="flex items-center min-w-0"
+                        classList={{
+                          "text-[13px] leading-[calc(var(--font-size-base)*1.8)] tracking-[-0.04px] [font-weight:440]":
+                            props.newLayoutDesigns,
+                          "text-14-regular": !props.newLayoutDesigns,
+                        }}
+                      >
+                        <span
+                          class="whitespace-nowrap truncate min-w-0"
+                          classList={{
+                            "text-v2-text-text-muted": props.newLayoutDesigns,
+                            "text-text-weak": !props.newLayoutDesigns,
+                          }}
+                        >
+                          {directory}
+                        </span>
                         <Show when={!isDirectory}>
-                          <span class="text-text-strong whitespace-nowrap">{filename}</span>
+                          <span
+                            class="whitespace-nowrap"
+                            classList={{
+                              "text-v2-text-text-base": props.newLayoutDesigns,
+                              "text-text-strong": !props.newLayoutDesigns,
+                            }}
+                          >
+                            {filename}
+                          </span>
                         </Show>
                       </div>
                     </button>
@@ -96,41 +158,98 @@ export const PromptPopover: Component<PromptPopoverProps> = (props) => {
           <Match when={props.popover === "slash"}>
             <Show
               when={props.slashFlat.length > 0}
-              fallback={<div class="text-text-weak px-2 py-1">{props.t("prompt.popover.emptyCommands")}</div>}
+              fallback={
+                <div
+                  class="px-2 py-1"
+                  classList={{
+                    "text-v2-text-text-muted": props.newLayoutDesigns,
+                    "text-text-weak": !props.newLayoutDesigns,
+                  }}
+                >
+                  {props.t("prompt.popover.emptyCommands")}
+                </div>
+              }
             >
               <For each={props.slashFlat}>
-                {(cmd) => (
-                  <button
-                    data-slash-id={cmd.id}
-                    classList={{
-                      "w-full flex items-center justify-between gap-4 rounded-md px-2 py-1": true,
-                      "bg-surface-raised-base-hover": props.slashActive === cmd.id,
-                    }}
-                    onClick={() => props.onSlashSelect(cmd)}
-                    onMouseEnter={() => props.setSlashActive(cmd.id)}
-                  >
-                    <div class="flex items-center gap-2 min-w-0">
-                      <span class="text-14-regular text-text-strong whitespace-nowrap">/{cmd.trigger}</span>
-                      <Show when={cmd.description}>
-                        <span class="text-14-regular text-text-weak truncate">{cmd.description}</span>
-                      </Show>
-                    </div>
-                    <div class="flex items-center gap-2 shrink-0">
-                      <Show when={cmd.type === "custom" && cmd.source !== "command"}>
-                        <span class="text-11-regular text-text-subtle px-1.5 py-0.5 bg-surface-base rounded">
-                          {cmd.source === "skill"
-                            ? props.t("prompt.slash.badge.skill")
-                            : cmd.source === "mcp"
-                              ? props.t("prompt.slash.badge.mcp")
-                              : props.t("prompt.slash.badge.custom")}
+                {(cmd) => {
+                  const keybind = () => props.commandKeybind(cmd.id)
+                  const keybindParts = () => props.commandKeybindParts(cmd.id)
+                  return (
+                    <button
+                      data-slash-id={cmd.id}
+                      classList={{
+                        "w-full flex items-center justify-between gap-4 px-2 py-1": true,
+                        "rounded-[4px] scroll-my-2": props.newLayoutDesigns,
+                        "rounded-md": !props.newLayoutDesigns,
+                        "bg-v2-overlay-simple-overlay-hover": props.newLayoutDesigns && props.slashActive === cmd.id,
+                        "bg-surface-raised-base-hover": !props.newLayoutDesigns && props.slashActive === cmd.id,
+                      }}
+                      onClick={() => props.onSlashSelect(cmd)}
+                      onPointerMove={() => props.setSlashActive(cmd.id)}
+                    >
+                      <div class="flex items-center gap-2 min-w-0">
+                        <span
+                          class="whitespace-nowrap"
+                          classList={{
+                            "text-[13px] leading-[calc(var(--font-size-base)*1.8)] tracking-[-0.04px] [font-weight:440]":
+                              props.newLayoutDesigns,
+                            "text-v2-text-text-base": props.newLayoutDesigns,
+                            "text-14-regular": !props.newLayoutDesigns,
+                            "text-text-strong": !props.newLayoutDesigns,
+                          }}
+                        >
+                          /{cmd.trigger}
                         </span>
-                      </Show>
-                      <Show when={props.commandKeybind(cmd.id)}>
-                        <span class="text-12-regular text-text-subtle">{props.commandKeybind(cmd.id)}</span>
-                      </Show>
-                    </div>
-                  </button>
-                )}
+                        <Show when={cmd.description}>
+                          <span
+                            class="truncate"
+                            classList={{
+                              "text-[13px] leading-[calc(var(--font-size-base)*1.8)] tracking-[-0.04px] [font-weight:440]":
+                                props.newLayoutDesigns,
+                              "text-v2-text-text-muted": props.newLayoutDesigns,
+                              "text-14-regular": !props.newLayoutDesigns,
+                              "text-text-weak": !props.newLayoutDesigns,
+                            }}
+                          >
+                            {cmd.description}
+                          </span>
+                        </Show>
+                      </div>
+                      <div class="flex items-center gap-2 shrink-0">
+                        <Show when={cmd.type === "custom" && cmd.source !== "command"}>
+                          <Show
+                            when={props.newLayoutDesigns}
+                            fallback={
+                              <span class="text-11-regular px-1.5 py-0.5 rounded bg-surface-base text-text-subtle">
+                                {cmd.source === "skill"
+                                  ? props.t("prompt.slash.badge.skill")
+                                  : cmd.source === "mcp"
+                                    ? props.t("prompt.slash.badge.mcp")
+                                    : props.t("prompt.slash.badge.custom")}
+                              </span>
+                            }
+                          >
+                            <Tag>
+                              {cmd.source === "skill"
+                                ? props.t("prompt.slash.badge.skill")
+                                : cmd.source === "mcp"
+                                  ? props.t("prompt.slash.badge.mcp")
+                                  : props.t("prompt.slash.badge.custom")}
+                            </Tag>
+                          </Show>
+                        </Show>
+                        <Show when={props.newLayoutDesigns ? keybindParts().length > 0 : keybind()}>
+                          <Show
+                            when={props.newLayoutDesigns}
+                            fallback={<span class="text-12-regular text-text-subtle">{keybind()}</span>}
+                          >
+                            <KeybindV2 keys={keybindParts()} variant="neutral" />
+                          </Show>
+                        </Show>
+                      </div>
+                    </button>
+                  )
+                }}
               </For>
             </Show>
           </Match>

packages/app/src/components/session-context-usage.tsx

@@ -1,9 +1,10 @@
-import { Match, Show, Switch, createMemo } from "solid-js"
+import { Match, Show, Switch, createEffect, createMemo } from "solid-js"
 import { Tooltip, type TooltipProps } from "@opencode-ai/ui/tooltip"
 import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
+import { ProgressCircleV2 } from "@opencode-ai/ui/v2/progress-circle-v2"
 import { Button } from "@opencode-ai/ui/button"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 
-import { useFile } from "@/context/file"
 import { useLayout } from "@/context/layout"
 import { useSync } from "@/context/sync"
 import { useLanguage } from "@/context/language"
@@ -11,10 +12,10 @@ import { useProviders } from "@/hooks/use-providers"
 import { useSDK } from "@/context/sdk"
 import { getSessionContext, getSessionTokenTotal } from "@/components/session/session-context-metrics"
 import { useSessionLayout } from "@/pages/session/session-layout"
-import { createSessionTabs } from "@/pages/session/helpers"
 
 interface SessionContextUsageProps {
   variant?: "button" | "indicator"
+  buttonAppearance?: "default" | "v2"
   placement?: TooltipProps["placement"]
 }
 
@@ -31,7 +32,6 @@ function openSessionContext(args: {
 
 export function SessionContextUsage(props: SessionContextUsageProps) {
   const sync = useSync()
-  const file = useFile()
   const layout = useLayout()
   const language = useLanguage()
   const sdk = useSDK()
@@ -39,11 +39,7 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
   const { params, tabs, view } = useSessionLayout()
 
   const variant = createMemo(() => props.variant ?? "button")
-  const tabState = createSessionTabs({
-    tabs,
-    pathFromTab: file.pathFromTab,
-    normalizeTab: (tab) => (tab.startsWith("file://") ? file.tab(tab) : tab),
-  })
+  const buttonAppearance = createMemo(() => props.buttonAppearance ?? "default")
   const messages = createMemo(() => (params.id ? (sync().data.message[params.id] ?? []) : []))
   const info = createMemo(() => (params.id ? sync().session.get(params.id) : undefined))
 
@@ -61,15 +57,27 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
     return usd().format(info()?.cost ?? 0)
   })
 
+  let openedPanelWithContext = false
+
+  createEffect(() => {
+    if (!view().reviewPanel.opened()) openedPanelWithContext = false
+  })
+
   const openContext = () => {
     if (!params.id) return
 
-    if (tabState.activeTab() === "context") {
+    const sessionView = view()
+    if (sessionView.reviewPanel.opened() && tabs().active() === "context") {
+      const hasOtherTabs = tabs().all().some((tab) => tab !== "context" && tab !== "review")
       tabs().close("context")
+      if (openedPanelWithContext && !hasOtherTabs) sessionView.reviewPanel.close()
+      openedPanelWithContext = false
       return
     }
+
+    openedPanelWithContext = !sessionView.reviewPanel.opened()
     openSessionContext({
-      view: view(),
+      view: sessionView,
       layout,
       tabs: tabs(),
     })
@@ -77,7 +85,25 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
 
   const circle = () => (
     <div class="flex items-center justify-center">
-      <ProgressCircle size={16} strokeWidth={2} percentage={context()?.usage ?? 0} />
+      <ProgressCircle
+        size={16}
+        strokeWidth={2}
+        percentage={context()?.usage ?? 0}
+        style={
+          variant() === "indicator"
+            ? {
+                "--progress-circle-background": "var(--v2-background-bg-layer-04, var(--border-weak-base))",
+                "--progress-circle-background-overlay": "var(--v2-overlay-simple-overlay-pressed, transparent)",
+                "--progress-circle-progress": "var(--v2-icon-icon-base, var(--icon-base))",
+              }
+            : undefined
+        }
+      />
+    </div>
+  )
+  const circleV2 = () => (
+    <div class="flex items-center justify-center">
+      <ProgressCircleV2 percentage={context()?.usage ?? 0} />
     </div>
   )
 
@@ -110,10 +136,22 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
 
   return (
     <Show when={params.id}>
-      <Tooltip value={tooltipValue()} placement={props.placement ?? "top"}>
-        <Switch>
-          <Match when={variant() === "indicator"}>{circle()}</Match>
-          <Match when={true}>
+      <Switch>
+        <Match when={variant() === "indicator"}>{circle()}</Match>
+        <Match when={buttonAppearance() === "v2"}>
+          <Tooltip value={tooltipValue()} placement={props.placement ?? "top"}>
+            <IconButtonV2
+              type="button"
+              variant="ghost-muted"
+              size="large"
+              icon={circleV2()}
+              onClick={openContext}
+              aria-label={language.t("context.usage.view")}
+            />
+          </Tooltip>
+        </Match>
+        <Match when={true}>
+          <Tooltip value={tooltipValue()} placement={props.placement ?? "top"}>
             <Button
               type="button"
               variant="ghost"
@@ -123,9 +161,9 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
             >
               {circle()}
             </Button>
-          </Match>
-        </Switch>
-      </Tooltip>
+          </Tooltip>
+        </Match>
+      </Switch>
     </Show>
   )
 }

packages/app/src/index.css

@@ -108,6 +108,45 @@
     }
   }
 
+  .home-session-group-header::before {
+    content: "";
+    position: absolute;
+    top: -12px;
+    left: 0;
+    width: 100%;
+    height: 12px;
+    background: var(--v2-background-bg-base);
+  }
+
+  .home-session-group-header::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: 16px;
+    pointer-events: none;
+    background: linear-gradient(
+      180deg,
+      var(--v2-background-bg-base) 0%,
+      color-mix(in srgb, var(--v2-background-bg-base) 92.0456%, transparent) 7.93%,
+      color-mix(in srgb, var(--v2-background-bg-base) 84.9947%, transparent) 14.14%,
+      color-mix(in srgb, var(--v2-background-bg-base) 78.6813%, transparent) 19%,
+      color-mix(in srgb, var(--v2-background-bg-base) 72.9394%, transparent) 22.85%,
+      color-mix(in srgb, var(--v2-background-bg-base) 67.6028%, transparent) 26.05%,
+      color-mix(in srgb, var(--v2-background-bg-base) 62.5055%, transparent) 28.95%,
+      color-mix(in srgb, var(--v2-background-bg-base) 57.4815%, transparent) 31.91%,
+      color-mix(in srgb, var(--v2-background-bg-base) 52.3647%, transparent) 35.27%,
+      color-mix(in srgb, var(--v2-background-bg-base) 46.989%, transparent) 39.4%,
+      color-mix(in srgb, var(--v2-background-bg-base) 41.1884%, transparent) 44.65%,
+      color-mix(in srgb, var(--v2-background-bg-base) 34.7969%, transparent) 51.36%,
+      color-mix(in srgb, var(--v2-background-bg-base) 27.6484%, transparent) 59.9%,
+      color-mix(in srgb, var(--v2-background-bg-base) 19.5767%, transparent) 70.62%,
+      color-mix(in srgb, var(--v2-background-bg-base) 10.416%, transparent) 83.87%,
+      transparent 100%
+    );
+  }
+
   [data-slot="titlebar-update-loader"] {
     display: block;
     flex-shrink: 0;
@@ -132,4 +171,66 @@
       transform: rotate(360deg);
     }
   }
+
+  @keyframes home-projects-fade-top {
+    from {
+      visibility: hidden;
+    }
+    to {
+      visibility: visible;
+    }
+  }
+
+  @keyframes home-projects-fade-bottom {
+    from {
+      visibility: visible;
+    }
+    to {
+      visibility: hidden;
+    }
+  }
+
+  [data-slot="home-projects-scroll"] {
+    timeline-scope: --home-projects-scroll;
+  }
+
+  [data-slot="home-projects-scroll"]::before,
+  [data-slot="home-projects-scroll"]::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    height: 16px;
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  [data-slot="home-projects-scroll"]::before {
+    top: 0;
+    background: linear-gradient(to bottom, var(--v2-background-bg-base), transparent);
+  }
+
+  [data-slot="home-projects-scroll"]::after {
+    bottom: 0;
+    background: linear-gradient(to top, var(--v2-background-bg-base), transparent);
+  }
+
+  @supports (animation-timeline: --home-projects-scroll) and (timeline-scope: --home-projects-scroll) {
+    [data-slot="home-projects-scroll"] .scroll-view__viewport {
+      scroll-timeline: --home-projects-scroll y;
+    }
+
+    [data-slot="home-projects-scroll"]::before {
+      animation: home-projects-fade-top linear both;
+      animation-timeline: --home-projects-scroll;
+      animation-range: 0 0.1px;
+    }
+
+    [data-slot="home-projects-scroll"]::after {
+      animation: home-projects-fade-bottom linear both;
+      animation-timeline: --home-projects-scroll;
+      animation-range: calc(100% - 1.1px) calc(100% - 1px);
+    }
+  }
 }

packages/app/src/pages/home.tsx

@@ -1,5 +1,6 @@
 import type { Session } from "@opencode-ai/sdk/v2/client"
 import {
+  type ComponentProps,
   createEffect,
   createMemo,
   createResource,
@@ -68,6 +69,9 @@ import { archiveHomeSession } from "./home-session-archive"
 import { showToast } from "@/utils/toast"
 
 const HOME_SESSION_LIMIT = 64
+const HOME_SESSION_HEADER_STICKY_TOP = 12
+const HOME_SESSION_HEADER_TEXT_HEIGHT = 16
+const HOME_SESSION_HEADER_FADE_DISTANCE = 16
 const SHOW_HOME_SESSION_ARCHIVE = false
 const HOME_ROW_LAYOUT =
   "flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] bg-transparent text-left transition-[background-color,color,box-shadow] duration-[120ms] ease-in-out focus-visible:outline-none"
@@ -133,6 +137,107 @@ function homeSessionSearchKey(record: HomeSessionRecord) {
   return `${pathKey(record.session.directory)}:${record.session.id}`
 }
 
+function useHomeSessionHeaderOpacity(groups: () => HomeSessionGroup[]) {
+  let viewport: HTMLDivElement | undefined
+  let content: HTMLDivElement | undefined
+  let positionFrame: number | undefined
+  let resizeObserver: ResizeObserver | undefined
+  const headerRefs = new Map<HomeSessionGroup["id"], HTMLDivElement>()
+  const headerOffsets = new Map<HomeSessionGroup["id"], number>()
+  const [state, setState] = createStore({
+    titleOpacity: {} as Partial<Record<HomeSessionGroup["id"], number>>,
+  })
+
+  createEffect(() => {
+    const items = groups()
+    const ids = new Set(items.map((group) => group.id))
+    headerRefs.forEach((_, id) => {
+      if (!ids.has(id)) headerRefs.delete(id)
+    })
+    headerOffsets.forEach((_, id) => {
+      if (!ids.has(id)) headerOffsets.delete(id)
+    })
+    if (items.length === 0) {
+      content = undefined
+      bindResizeObserver()
+    }
+    queuePositionUpdate()
+  })
+
+  onCleanup(() => {
+    if (positionFrame !== undefined) cancelAnimationFrame(positionFrame)
+    resizeObserver?.disconnect()
+  })
+
+  function setViewport(el: HTMLDivElement) {
+    viewport = el
+    bindResizeObserver()
+    queuePositionUpdate()
+  }
+
+  function setContentRef(el: HTMLDivElement) {
+    content = el
+    bindResizeObserver()
+    queuePositionUpdate()
+  }
+
+  function setHeaderRef(id: HomeSessionGroup["id"], el: HTMLDivElement) {
+    headerRefs.set(id, el)
+    queuePositionUpdate()
+  }
+
+  function queuePositionUpdate() {
+    if (typeof requestAnimationFrame === "undefined") {
+      updatePositionCache()
+      return
+    }
+    if (positionFrame !== undefined) return
+    positionFrame = requestAnimationFrame(() => {
+      positionFrame = undefined
+      updatePositionCache()
+    })
+  }
+
+  function updatePositionCache() {
+    if (!viewport) return
+    groups().forEach((group) => {
+      const el = headerRefs.get(group.id)
+      if (!el) return
+      headerOffsets.set(group.id, el.offsetTop)
+    })
+    update(viewport.scrollTop)
+  }
+
+  function update(scrollTop: number) {
+    const items = groups()
+    items.forEach((group, index) => {
+      const nextOffset = items
+        .slice(index + 1)
+        .map((item) => headerOffsets.get(item.id))
+        .find((offset) => offset !== undefined)
+      const fadeEnd = HOME_SESSION_HEADER_STICKY_TOP + HOME_SESSION_HEADER_TEXT_HEIGHT
+      const nextTop = nextOffset === undefined ? undefined : nextOffset - scrollTop
+      const opacity =
+        nextTop === undefined ? 1 : Math.max(0, Math.min(1, (nextTop - fadeEnd) / HOME_SESSION_HEADER_FADE_DISTANCE))
+      setState("titleOpacity", group.id, Math.round(opacity * 1000) / 1000)
+    })
+  }
+
+  function titleOpacity(id: HomeSessionGroup["id"]) {
+    return state.titleOpacity[id] ?? 1
+  }
+
+  function bindResizeObserver() {
+    resizeObserver?.disconnect()
+    if (typeof ResizeObserver === "undefined") return
+    resizeObserver = new ResizeObserver(() => queuePositionUpdate())
+    if (viewport) resizeObserver.observe(viewport)
+    if (content) resizeObserver.observe(content)
+  }
+
+  return { setViewport, setContentRef, setHeaderRef, update, titleOpacity }
+}
+
 export function NewHome() {
   const sync = useServerSync()
   const layout = useLayout()
@@ -223,6 +328,7 @@ export function NewHome() {
   })
   const searchOpen = createMemo(() => state.searchFocused && search().length > 0)
   const groups = createMemo(() => groupSessions(records(), language))
+  const sessionHeaderOpacity = useHomeSessionHeaderOpacity(groups)
   const prefetched = new Set<string>()
 
   createEffect(() => {
@@ -435,7 +541,7 @@ export function NewHome() {
         />
 
         <section
-          class="min-h-0 min-w-0 flex-1 flex flex-col pt-6 lg:pt-12"
+          class="min-h-0 min-w-0 flex-1 flex flex-col pt-6 lg:pt-12 relative"
           aria-label={language.t("sidebar.project.recentSessions")}
         >
           <HomeSessionSearch
@@ -456,7 +562,25 @@ export function NewHome() {
             onClose={closeSearch}
             onSelect={selectSearchSession}
           />
-          <ScrollView class="mt-3 -mr-3 min-h-0 flex-1">
+          <ScrollView
+            class="mt-3 -mr-3 min-h-0 flex-1 relative"
+            viewportRef={sessionHeaderOpacity.setViewport}
+            onScroll={(event) => sessionHeaderOpacity.update(event.currentTarget.scrollTop)}
+          >
+            <Show when={groups().length > 0 && newSessionProject()}>
+              <div class="pointer-events-none absolute top-3 right-3 z-20 flex">
+                <ButtonV2
+                  data-action="home-new-session"
+                  variant="ghost-muted"
+                  size="normal"
+                  icon="edit"
+                  class="pointer-events-auto h-7 px-2 [font-weight:530]"
+                  onClick={openNewSession}
+                >
+                  {language.t("command.session.new")}
+                </ButtonV2>
+              </div>
+            </Show>
             <Show
               when={!sessionLoad.isLoading}
               fallback={
@@ -469,15 +593,19 @@ export function NewHome() {
                 when={groups().length > 0}
                 fallback={<HomeSessionsEmpty onNewSession={newSessionProject() ? openNewSession : undefined} />}
               >
-                <div class="flex flex-col gap-6 pt-3 pr-3 pb-16">
+                <div ref={sessionHeaderOpacity.setContentRef} class="flex flex-col pt-3 pr-3 pb-16">
                   <For each={groups()}>
                     {(group, index) => (
-                      <div class="flex min-w-0 flex-col gap-4">
+                      <>
                         <HomeSessionGroupHeader
                           title={group.title}
-                          onNewSession={index() === 0 && newSessionProject() ? openNewSession : undefined}
+                          titleOpacity={sessionHeaderOpacity.titleOpacity(group.id)}
+                          ref={(el) => sessionHeaderOpacity.setHeaderRef(group.id, el)}
+                          elevated={index() === 0}
                         />
-                        <div class="flex min-w-0 flex-col gap-px">
+                        <div
+                          class={`flex min-w-0 flex-col gap-px pt-4 ${index() === groups().length - 1 ? "" : "mb-6"}`}
+                        >
                           <For each={group.sessions}>
                             {(record) => (
                               <HomeSessionRow
@@ -491,7 +619,7 @@ export function NewHome() {
                             )}
                           </For>
                         </div>
-                      </div>
+                      </>
                     )}
                   </For>
                 </div>
@@ -540,10 +668,10 @@ function HomeProjectColumn(props: {
 
   return (
     <aside
-      class="mt-6 flex min-w-0 flex-col gap-4 lg:mt-14 lg:pt-[52px]"
+      class="mt-6 flex min-h-0 min-w-0 flex-col gap-4 overflow-hidden lg:mt-14 lg:pt-[52px]"
       aria-label={props.language.t("home.projects")}
     >
-      <div class="flex h-7 min-w-0 items-center justify-between pl-1.5">
+      <div class="flex h-7 min-w-0 shrink-0 items-center justify-between pl-1.5">
         <div class={HOME_SECTION_LABEL}>{props.language.t("home.projects")}</div>
         <Show when={global.servers.list().length === 1}>
           <TooltipV2 placement="bottom" value={props.language.t("home.project.add")}>
@@ -560,42 +688,51 @@ function HomeProjectColumn(props: {
           </TooltipV2>
         </Show>
       </div>
-      <Show
-        when={global.servers.list().length > 1}
-        fallback={<HomeProjectList {...props} server={global.servers.list()[0]!} />}
-      >
-        <For each={global.servers.list()}>
-          {(item) => {
-            const key = ServerConnection.key(item)
-            const healthy = () => !!global.servers.health[key]?.healthy
-            const serverCtx = global.ensureServerCtx(item)
-            const collapsed = () => !!state().collapsed[key]
-            return (
-              <div class="flex max-h-[min(572px,calc(100vh_-_300px))] min-w-0 flex-col gap-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-                <HomeServerRow
-                  server={item}
-                  selected={props.selected.server === key && !props.selected.directory}
-                  healthy={healthy()}
-                  collapsed={collapsed()}
-                  health={global.servers.health[key]}
-                  controller={controller}
-                  focusServer={props.focusServer}
-                  chooseProject={props.chooseProject}
-                  openEdit={(server) => dialog.show(() => <DialogServerV2 mode="edit" server={server} />)}
-                  toggleCollapsed={() => setState("collapsed", key, !state().collapsed[key])}
-                  language={props.language}
-                />
-                <Show when={healthy() && !collapsed()}>
-                  <div class="mx-3 h-px bg-v2-border-border-base" />
-                  <HomeProjectList {...props} server={item} projects={serverCtx.projects.list()} />
-                </Show>
-              </div>
-            )
-          }}
-        </For>
-      </Show>
+      <ScrollView data-slot="home-projects-scroll" class="min-h-0 min-w-0 shrink">
+        <Show
+          when={global.servers.list().length > 1}
+          fallback={
+            <div class="pr-3">
+              <HomeProjectList {...props} server={global.servers.list()[0]!} />
+            </div>
+          }
+        >
+          <div class="flex min-w-0 flex-col gap-1 pr-3">
+            <For each={global.servers.list()}>
+              {(item) => {
+                const key = ServerConnection.key(item)
+                const healthy = () => !!global.servers.health[key]?.healthy
+                const serverCtx = global.ensureServerCtx(item)
+                const projects = () => serverCtx.projects.list()
+                const hasProjects = () => projects().length > 0
+                const collapsed = () => !!state().collapsed[key]
+                return (
+                  <div class="flex min-w-0 flex-col gap-1">
+                    <HomeServerRow
+                      server={item}
+                      selected={props.selected.server === key && !props.selected.directory}
+                      collapsed={collapsed()}
+                      health={global.servers.health[key]}
+                      controller={controller}
+                      focusServer={props.focusServer}
+                      chooseProject={props.chooseProject}
+                      openEdit={(server) => dialog.show(() => <DialogServerV2 mode="edit" server={server} />)}
+                      toggleCollapsed={() => setState("collapsed", key, !state().collapsed[key])}
+                      language={props.language}
+                    />
+                    <Show when={healthy() && hasProjects() && !collapsed()}>
+                      <div class="mx-3 h-px bg-v2-border-border-base" />
+                      <HomeProjectList {...props} server={item} projects={projects()} />
+                    </Show>
+                  </div>
+                )
+              }}
+            </For>
+          </div>
+        </Show>
+      </ScrollView>
       <HomeUtilityNav
-        class="mt-4 hidden lg:flex"
+        class="mb-8 mt-4 hidden shrink-0 lg:flex"
         openSettings={props.openSettings}
         openHelp={props.openHelp}
         language={props.language}
@@ -635,7 +772,6 @@ function HomeUtilityNav(props: {
 function HomeServerRow(props: {
   server: ServerConnection.Any
   selected: boolean
-  healthy: boolean
   collapsed: boolean
   health: ServerHealth | undefined
   controller: ReturnType<typeof useServerManagementController>
@@ -645,39 +781,46 @@ function HomeServerRow(props: {
   toggleCollapsed: () => void
   language: ReturnType<typeof useLanguage>
 }) {
+  const global = useGlobal()
   const [state, setState] = createStore({ menuOpen: false })
+  const healthy = () => !!props.health?.healthy
+  const canToggle = () => healthy() && global.ensureServerCtx(props.server).projects.list().length > 0
   return (
     <div class="group/server relative flex h-7 min-w-0 items-center rounded-[6px]">
       <button
         type="button"
         class={`${HOME_PROJECT_NAV_ROW} pr-16 disabled:opacity-60`}
         data-selected={props.selected ? "" : undefined}
-        disabled={!props.healthy}
+        disabled={!healthy()}
         onClick={() => props.focusServer(props.server)}
       >
-        <Show when={props.healthy}>
-          <span
-            data-action="home-server-collapse"
-            class="inline-flex -ml-0.5 -mr-1.5 size-5 shrink-0 items-center justify-center rounded-[4px] text-v2-icon-icon-muted hover:bg-v2-overlay-simple-overlay-hover"
-            aria-label={
-              props.collapsed ? props.language.t("home.server.expand") : props.language.t("home.server.collapse")
-            }
-            aria-expanded={!props.collapsed}
-            onClick={(event) => {
-              event.preventDefault()
-              event.stopPropagation()
-              props.toggleCollapsed()
-            }}
-            onPointerDown={(event) => event.preventDefault()}
-          >
-            <IconV2
-              name="chevron-down"
-              size="small"
-              class="transition-transform duration-150 ease-in-out"
-              style={{ transform: `rotate(${props.collapsed ? -90 : 0}deg)` }}
-            />
-          </span>
-        </Show>
+        <span
+          data-action="home-server-collapse"
+          class="inline-flex -ml-0.5 -mr-1.5 size-5 shrink-0 items-center justify-center rounded-[4px] text-v2-icon-icon-muted"
+          classList={{
+            "hover:bg-v2-overlay-simple-overlay-hover": canToggle(),
+            "cursor-default opacity-40": !canToggle(),
+          }}
+          aria-label={
+            props.collapsed ? props.language.t("home.server.expand") : props.language.t("home.server.collapse")
+          }
+          aria-disabled={!canToggle()}
+          aria-expanded={canToggle() ? !props.collapsed : undefined}
+          onClick={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            if (!canToggle()) return
+            props.toggleCollapsed()
+          }}
+          onPointerDown={(event) => event.preventDefault()}
+        >
+          <IconV2
+            name="chevron-down"
+            size="small"
+            class="transition-transform duration-150 ease-in-out"
+            style={{ transform: `rotate(${props.collapsed ? -90 : 0}deg)` }}
+          />
+        </span>
         <div class="flex size-4 shrink-0 items-center justify-center -mr-0.5">
           <ServerHealthIndicator health={props.health} />
         </div>
@@ -854,6 +997,7 @@ function HomeSessionLeading(props: {
   session: Session
   server: ServerConnection.Key
   activeServer: boolean
+  revealProjectOnHover: boolean
 }) {
   const tabs = useTabs()
   const hasOpenTab = createMemo(() => sessionHasOpenTab(tabs.store, props.server, props.session))
@@ -871,6 +1015,7 @@ function HomeSessionLeading(props: {
         directory={props.session.directory}
         sessionId={props.session.id}
         activeServer={props.activeServer}
+        revealProjectOnHover={props.revealProjectOnHover}
       />
     </div>
   )
@@ -961,7 +1106,7 @@ function HomeSessionSearch(props: {
 
   return (
     <div class="w-full">
-      <div ref={root} data-component="home-session-search" class="relative z-10 w-full">
+      <div ref={root} data-component="home-session-search" class="relative z-30 w-full">
         <Show when={props.open}>
           <div
             data-component="home-session-search-panel"
@@ -1110,6 +1255,7 @@ function HomeSessionSearchResultRow(props: {
       classList={{
         [HOME_SEARCH_RESULT_ROW]: true,
         "bg-v2-overlay-simple-overlay-hover": props.selected,
+        group: !!showProjectName(),
       }}
       onMouseEnter={() => props.onHighlight()}
       onClick={() => props.onSelect(props.record.session)}
@@ -1119,6 +1265,7 @@ function HomeSessionSearchResultRow(props: {
         session={props.record.session}
         server={props.server}
         activeServer={props.activeServer}
+        revealProjectOnHover={!!showProjectName()}
       />
       <div class="flex min-w-0 flex-1 items-center gap-1.5">
         <span
@@ -1134,25 +1281,20 @@ function HomeSessionSearchResultRow(props: {
   )
 }
 
-function HomeSessionGroupHeader(props: { title: string; onNewSession?: () => void }) {
-  const language = useLanguage()
+function HomeSessionGroupHeader(props: {
+  title: string
+  titleOpacity: number
+  ref: ComponentProps<"div">["ref"]
+  elevated?: boolean
+}) {
   return (
-    <div class="flex h-7 min-w-0 items-center justify-between pl-3">
-      <div class={HOME_SECTION_LABEL}>{props.title}</div>
-      <Show when={props.onNewSession}>
-        {(onNewSession) => (
-          <ButtonV2
-            data-action="home-new-session"
-            variant="ghost-muted"
-            size="normal"
-            icon="edit"
-            class="h-7 px-2 [font-weight:530]"
-            onClick={onNewSession()}
-          >
-            {language.t("command.session.new")}
-          </ButtonV2>
-        )}
-      </Show>
+    <div
+      ref={props.ref}
+      class={`pointer-events-none sticky top-3 flex h-7 min-w-0 items-center justify-between pl-3 bg-v2-background-bg-base ${props.elevated ? "home-session-group-header z-[5]" : "z-10"}`}
+    >
+      <div class={HOME_SECTION_LABEL} style={{ opacity: props.titleOpacity }}>
+        {props.title}
+      </div>
     </div>
   )
 }
@@ -1170,7 +1312,10 @@ function HomeSessionRow(props: {
   const showProjectName = () => props.showProjectName && props.record.projectName
 
   return (
-    <div class="group/session relative flex h-10 min-w-0 items-center rounded-[6px]">
+    <div
+      class="group/session relative flex h-10 min-w-0 items-center rounded-[6px]"
+      classList={{ group: !!showProjectName() }}
+    >
       <button
         type="button"
         data-component="home-session-row"
@@ -1182,6 +1327,7 @@ function HomeSessionRow(props: {
           session={props.record.session}
           server={props.server}
           activeServer={props.activeServer}
+          revealProjectOnHover={!!showProjectName()}
         />
         <span
           class={`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-v2-text-text-base [font-weight:530] ${showProjectName() ? "max-w-[min(70%,480px)] flex-[0_1_auto]" : "flex-[1_1_auto]"}`}

packages/app/src/pages/layout/session-tab-avatar.tsx

@@ -11,32 +11,28 @@ export function SessionTabAvatar(props: {
   directory: string
   sessionId: string
   activeServer: boolean
+  revealProjectOnHover?: boolean
 }) {
   const directory = () => props.directory
   const sessionId = () => props.sessionId
   const state = useSessionTabAvatarState(directory, sessionId, () => props.activeServer)
+  const projectAvatar = () => (
+    <ProjectAvatar
+      fallback={displayName(props.project ?? { worktree: props.directory })}
+      src={getProjectAvatarSource(props.project?.id, props.project?.icon)}
+      variant={getProjectAvatarVariant(props.project?.icon?.color)}
+      unread={state.unread()}
+    />
+  )
   return (
-    <Show
-      when={state.loading()}
-      fallback={
-        <ProjectAvatar
-          fallback={displayName(props.project ?? { worktree: props.directory })}
-          src={getProjectAvatarSource(props.project?.id, props.project?.icon)}
-          variant={getProjectAvatarVariant(props.project?.icon?.color)}
-          unread={state.unread()}
-        />
-      }
-    >
+    <Show when={state.loading()} fallback={projectAvatar()}>
       <span class="relative block size-4 shrink-0">
-        <SessionProgressIndicatorV2 class="absolute inset-0 group-hover:invisible" />
-        <span class="invisible absolute inset-0 group-hover:visible">
-          <ProjectAvatar
-            fallback={displayName(props.project ?? { worktree: props.directory })}
-            src={getProjectAvatarSource(props.project?.id, props.project?.icon)}
-            variant={getProjectAvatarVariant(props.project?.icon?.color)}
-            unread={state.unread()}
-          />
-        </span>
+        <SessionProgressIndicatorV2
+          class={`absolute inset-0 ${props.revealProjectOnHover === false ? "" : "group-hover:invisible"}`}
+        />
+        <Show when={props.revealProjectOnHover !== false}>
+          <span class="invisible absolute inset-0 group-hover:visible">{projectAvatar()}</span>
+        </Show>
       </span>
     </Show>
   )

packages/app/src/pages/session/composer/session-composer-region.tsx

@@ -125,7 +125,7 @@ export function SessionComposerRegion(props: {
             </Show>
             <div
               classList={{
-                "relative z-30": true,
+                "relative z-[70]": true,
               }}
               style={{
                 "margin-top": `${-controller.lift()}px`,

packages/app/src/pages/session/timeline/message-timeline.tsx

@@ -31,9 +31,14 @@ import { DiffChanges } from "@opencode-ai/ui/diff-changes"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { Dialog } from "@opencode-ai/ui/dialog"
+import { DialogFooter, DialogHeader, DialogTitleGroup, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
 import { InlineInput } from "@opencode-ai/ui/inline-input"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { SessionRetry } from "@opencode-ai/session-ui/session-retry"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
@@ -671,6 +676,34 @@ export function MessageTimeline(props: {
     if (!shareEnabled()) return
     unshareMutation.mutate(id)
   }
+  const copyShareUrl = () => {
+    const url = shareUrl()
+    if (!url) return
+    void navigator.clipboard
+      .writeText(url)
+      .then(() =>
+        showToast({
+          variant: "success",
+          icon: "circle-check",
+          title: language.t("session.share.copy.copied"),
+          description: url,
+        }),
+      )
+      .catch((err: unknown) =>
+        showToast({
+          title: language.t("common.requestFailed"),
+          description: errorMessage(err),
+        }),
+      )
+  }
+  const selectShareUrlText: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {
+    const selection = window.getSelection()
+    if (!selection) return
+    const range = document.createRange()
+    range.selectNodeContents(event.currentTarget)
+    selection.removeAllRanges()
+    selection.addRange(range)
+  }
 
   createEffect(
     on(
@@ -856,6 +889,26 @@ export function MessageTimeline(props: {
       dialog.close()
     }
 
+    if (settings.general.newLayoutDesigns())
+      return (
+        <DialogV2 fit>
+          <DialogHeader hideClose>
+            <DialogTitleGroup
+              title={language.t("session.delete.title")}
+              description={language.t("session.delete.confirm", { name: name() })}
+            />
+          </DialogHeader>
+          <DialogFooter>
+            <ButtonV2 variant="ghost" onClick={() => dialog.close()}>
+              {language.t("common.cancel")}
+            </ButtonV2>
+            <ButtonV2 variant="danger" onClick={handleDelete}>
+              {language.t("session.delete.button")}
+            </ButtonV2>
+          </DialogFooter>
+        </DialogV2>
+      )
+
     return (
       <Dialog title={language.t("session.delete.title")} fit>
         <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
@@ -960,6 +1013,7 @@ export function MessageTimeline(props: {
                 message={message()}
                 showAssistantCopyPartID={assistantCopyPartID(row().userMessageID)}
                 turnDurationMs={turnDurationMs(row().userMessageID)}
+                useV2Actions={settings.general.newLayoutDesigns()}
                 defaultOpen={defaultOpen()}
                 toolOpen={toolOpen[part().id] ?? defaultOpen()}
                 onToolOpenChange={(open) => setToolOpen(part().id, open)}
@@ -1067,6 +1121,7 @@ export function MessageTimeline(props: {
                       message={message()}
                       parts={getMsgParts(userMessageRow().userMessageID)}
                       actions={props.actions}
+                      useV2Actions={settings.general.newLayoutDesigns()}
                     />
                   </div>
                 </div>
@@ -1304,11 +1359,16 @@ export function MessageTimeline(props: {
               "pr-3": true,
               "pl-4": settings.general.newLayoutDesigns(),
               "pl-2 md:pl-4": !settings.general.newLayoutDesigns(),
-              "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
+              "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered && !settings.general.newLayoutDesigns(),
             }}
           >
             <div class="h-12 w-full flex items-center justify-between gap-2">
-              <div class="flex items-center gap-1 min-w-0 flex-1 pr-3">
+              <div
+                classList={{
+                  "flex items-center gap-1 min-w-0 flex-1": true,
+                  "pr-3": !settings.general.newLayoutDesigns(),
+                }}
+              >
                 <div class="flex items-center min-w-0 grow-1">
                   <Show when={parentID()}>
                     <button
@@ -1347,8 +1407,17 @@ export function MessageTimeline(props: {
                         data-slot="session-title-child"
                         value={title.draft}
                         disabled={titleMutation.isPending}
-                        class="text-14-medium text-text-strong grow-1 min-w-0 rounded-[6px] pl-1 -ml-1"
-                        style={{ "--inline-input-shadow": "var(--shadow-xs-border-select)" }}
+                        classList={{
+                          "text-14-medium text-text-strong grow-1 min-w-0 pl-1 -ml-1": true,
+                          "h-6 leading-4 rounded-[3px] focus:shadow-none focus:outline focus:outline-1 focus:outline-offset-[-1px] focus:outline-v2-border-border-focus":
+                            settings.general.newLayoutDesigns(),
+                          "rounded-[6px]": !settings.general.newLayoutDesigns(),
+                        }}
+                        style={{
+                          "--inline-input-shadow": settings.general.newLayoutDesigns()
+                            ? "none"
+                            : "var(--shadow-xs-border-select)",
+                        }}
                         onInput={(event) => setTitle("draft", event.currentTarget.value)}
                         onKeyDown={(event) => {
                           event.stopPropagation()
@@ -1370,88 +1439,170 @@ export function MessageTimeline(props: {
               </div>
               <Show when={sessionID()} keyed>
                 {(id) => (
-                  <div class="shrink-0 flex items-center gap-3">
-                    <SessionContextUsage placement="bottom" />
+                  <div
+                    classList={{
+                      "shrink-0 flex items-center": true,
+                      "gap-2": settings.general.newLayoutDesigns(),
+                      "gap-3": !settings.general.newLayoutDesigns(),
+                    }}
+                  >
+                    <SessionContextUsage
+                      placement="bottom"
+                      buttonAppearance={settings.general.newLayoutDesigns() ? "v2" : "default"}
+                    />
                     <Show when={!parentID()}>
-                      <DropdownMenu
-                        gutter={4}
-                        placement="bottom-end"
-                        open={title.menuOpen}
-                        onOpenChange={(open) => {
-                          setTitle("menuOpen", open)
-                          if (open) return
-                        }}
-                      >
-                        <DropdownMenu.Trigger
-                          as={IconButton}
-                          icon="dot-grid"
-                          variant="ghost"
-                          class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
-                          classList={{
-                            "bg-surface-base-active": share.open || title.pendingShare,
-                          }}
-                          aria-label={language.t("common.moreOptions")}
-                          aria-expanded={title.menuOpen || share.open || title.pendingShare}
-                          ref={(el: HTMLButtonElement) => {
-                            more = el
-                          }}
-                        />
-                        <DropdownMenu.Portal>
-                          <DropdownMenu.Content
-                            style={{ "min-width": "104px" }}
-                            onCloseAutoFocus={(event) => {
-                              if (title.pendingRename) {
-                                event.preventDefault()
-                                setTitle("pendingRename", false)
-                                openTitleEditor()
-                                return
-                              }
-                              if (title.pendingShare) {
-                                event.preventDefault()
-                                requestAnimationFrame(() => {
-                                  setShare({ open: true, dismiss: null })
-                                  setTitle("pendingShare", false)
-                                })
-                              }
+                      <Show
+                        when={settings.general.newLayoutDesigns()}
+                        fallback={
+                          <DropdownMenu
+                            gutter={4}
+                            placement="bottom-end"
+                            open={title.menuOpen}
+                            onOpenChange={(open) => {
+                              setTitle("menuOpen", open)
+                              if (open) return
                             }}
                           >
-                            <DropdownMenu.Item
-                              onSelect={() => {
-                                setTitle("pendingRename", true)
-                                setTitle("menuOpen", false)
+                            <DropdownMenu.Trigger
+                              as={IconButton}
+                              icon="dot-grid"
+                              variant="ghost"
+                              class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
+                              classList={{
+                                "bg-surface-base-active": share.open || title.pendingShare,
                               }}
-                            >
-                              <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
-                            </DropdownMenu.Item>
-                            <Show when={shareEnabled()}>
-                              <DropdownMenu.Item
-                                onSelect={() => {
-                                  setTitle({ pendingShare: true, menuOpen: false })
+                              aria-label={language.t("common.moreOptions")}
+                              aria-expanded={title.menuOpen || share.open || title.pendingShare}
+                              ref={(el: HTMLButtonElement) => {
+                                more = el
+                              }}
+                            />
+                            <DropdownMenu.Portal>
+                              <DropdownMenu.Content
+                                style={{ "min-width": "104px" }}
+                                onCloseAutoFocus={(event) => {
+                                  if (title.pendingRename) {
+                                    event.preventDefault()
+                                    setTitle("pendingRename", false)
+                                    openTitleEditor()
+                                    return
+                                  }
+                                  if (title.pendingShare) {
+                                    event.preventDefault()
+                                    requestAnimationFrame(() => {
+                                      setShare({ open: true, dismiss: null })
+                                      setTitle("pendingShare", false)
+                                    })
+                                  }
                                 }}
                               >
-                                <DropdownMenu.ItemLabel>
-                                  {language.t("session.share.action.share")}
-                                </DropdownMenu.ItemLabel>
-                              </DropdownMenu.Item>
-                            </Show>
-                            <DropdownMenu.Item onSelect={() => void archiveSession(id)}>
-                              <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
-                            </DropdownMenu.Item>
-                            <DropdownMenu.Separator />
-                            <DropdownMenu.Item
-                              onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}
+                                <DropdownMenu.Item
+                                  onSelect={() => {
+                                    setTitle("pendingRename", true)
+                                    setTitle("menuOpen", false)
+                                  }}
+                                >
+                                  <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
+                                </DropdownMenu.Item>
+                                <Show when={shareEnabled()}>
+                                  <DropdownMenu.Item
+                                    onSelect={() => {
+                                      setTitle({ pendingShare: true, menuOpen: false })
+                                    }}
+                                  >
+                                    <DropdownMenu.ItemLabel>
+                                      {language.t("session.share.action.share")}
+                                    </DropdownMenu.ItemLabel>
+                                  </DropdownMenu.Item>
+                                </Show>
+                                <DropdownMenu.Item onSelect={() => void archiveSession(id)}>
+                                  <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
+                                </DropdownMenu.Item>
+                                <DropdownMenu.Separator />
+                                <DropdownMenu.Item
+                                  onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}
+                                >
+                                  <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
+                                </DropdownMenu.Item>
+                              </DropdownMenu.Content>
+                            </DropdownMenu.Portal>
+                          </DropdownMenu>
+                        }
+                      >
+                        <MenuV2
+                          gutter={6}
+                          placement="bottom-end"
+                          open={title.menuOpen}
+                          onOpenChange={(open) => {
+                            setTitle("menuOpen", open)
+                            if (open) return
+                          }}
+                        >
+                          <MenuV2.Trigger
+                            as={IconButtonV2}
+                            icon={<IconV2 name="outline-dots" />}
+                            variant="ghost-muted"
+                            size="large"
+                            state={share.open || title.pendingShare ? "pressed" : undefined}
+                            aria-label={language.t("common.moreOptions")}
+                            aria-expanded={title.menuOpen || share.open || title.pendingShare}
+                            ref={(el: HTMLButtonElement) => {
+                              more = el
+                            }}
+                          />
+                          <MenuV2.Portal>
+                            <MenuV2.Content
+                              style={{ width: "120px", "min-width": "120px" }}
+                              onCloseAutoFocus={(event) => {
+                                if (title.pendingRename) {
+                                  event.preventDefault()
+                                  setTitle("pendingRename", false)
+                                  openTitleEditor()
+                                  return
+                                }
+                                if (title.pendingShare) {
+                                  event.preventDefault()
+                                  requestAnimationFrame(() => {
+                                    setShare({ open: true, dismiss: null })
+                                    setTitle("pendingShare", false)
+                                  })
+                                }
+                              }}
                             >
-                              <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
-                            </DropdownMenu.Item>
-                          </DropdownMenu.Content>
-                        </DropdownMenu.Portal>
-                      </DropdownMenu>
+                              <MenuV2.Item
+                                onSelect={() => {
+                                  setTitle("pendingRename", true)
+                                  setTitle("menuOpen", false)
+                                }}
+                              >
+                                {language.t("common.rename")}
+                              </MenuV2.Item>
+                              <Show when={shareEnabled()}>
+                                <MenuV2.Item
+                                  onSelect={() => {
+                                    setTitle({ pendingShare: true, menuOpen: false })
+                                  }}
+                                >
+                                  {language.t("session.share.action.share")}...
+                                </MenuV2.Item>
+                              </Show>
+                              <MenuV2.Item onSelect={() => void archiveSession(id)}>
+                                {language.t("common.archive")}
+                              </MenuV2.Item>
+                              <MenuV2.Separator />
+                              <MenuV2.Item onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}>
+                                {language.t("common.delete")}...
+                              </MenuV2.Item>
+                            </MenuV2.Content>
+                          </MenuV2.Portal>
+                        </MenuV2>
+                      </Show>
 
                       <KobaltePopover
                         open={share.open}
                         anchorRef={() => more}
                         placement="bottom-end"
-                        gutter={4}
+                        gutter={settings.general.newLayoutDesigns() ? 6 : 4}
                         modal={false}
                         onOpenChange={(open) => {
                           if (open) setShare("dismiss", null)
@@ -1461,6 +1612,10 @@ export function MessageTimeline(props: {
                         <KobaltePopover.Portal>
                           <KobaltePopover.Content
                             data-component="popover-content"
+                            classList={{
+                              "flex w-80 max-w-none flex-col items-start gap-3 rounded-[10px] border-0 bg-v2-background-bg-layer-01 p-3 shadow-[var(--v2-elevation-floating)]":
+                                settings.general.newLayoutDesigns(),
+                            }}
                             style={{ "min-width": "320px" }}
                             onEscapeKeyDown={(event) => {
                               setShare({ dismiss: "escape", open: false })
@@ -1478,24 +1633,90 @@ export function MessageTimeline(props: {
                               setShare("dismiss", null)
                             }}
                           >
-                            <div class="flex flex-col p-3">
-                              <div class="flex flex-col gap-1">
-                                <div class="text-13-medium text-text-strong">
+                            <Show
+                              when={settings.general.newLayoutDesigns()}
+                              fallback={
+                                <div class="flex flex-col p-3">
+                                  <div class="flex flex-col gap-1">
+                                    <div class="text-13-medium text-text-strong">
+                                      {language.t("session.share.popover.title")}
+                                    </div>
+                                    <div class="text-12-regular text-text-weak">
+                                      {shareUrl()
+                                        ? language.t("session.share.popover.description.shared")
+                                        : language.t("session.share.popover.description.unshared")}
+                                    </div>
+                                  </div>
+                                  <div class="mt-3 flex flex-col gap-2">
+                                    <Show
+                                      when={shareUrl()}
+                                      fallback={
+                                        <Button
+                                          size="large"
+                                          variant="primary"
+                                          class="w-full"
+                                          onClick={shareSession}
+                                          disabled={shareMutation.isPending}
+                                        >
+                                          {shareMutation.isPending
+                                            ? language.t("session.share.action.publishing")
+                                            : language.t("session.share.action.publish")}
+                                        </Button>
+                                      }
+                                    >
+                                      <div class="flex flex-col gap-2">
+                                        <TextField
+                                          value={shareUrl() ?? ""}
+                                          readOnly
+                                          copyable
+                                          copyKind="link"
+                                          tabIndex={-1}
+                                          class="w-full"
+                                        />
+                                        <div class="grid grid-cols-2 gap-2">
+                                          <Button
+                                            size="large"
+                                            variant="secondary"
+                                            class="w-full shadow-none border border-border-weak-base"
+                                            onClick={unshareSession}
+                                            disabled={unshareMutation.isPending}
+                                          >
+                                            {unshareMutation.isPending
+                                              ? language.t("session.share.action.unpublishing")
+                                              : language.t("session.share.action.unpublish")}
+                                          </Button>
+                                          <Button
+                                            size="large"
+                                            variant="primary"
+                                            class="w-full"
+                                            onClick={viewShare}
+                                            disabled={unshareMutation.isPending}
+                                          >
+                                            {language.t("session.share.action.view")}
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    </Show>
+                                  </div>
+                                </div>
+                              }
+                            >
+                              <div class="flex w-full flex-col gap-1.5 px-0.5 pt-0.5">
+                                <div class="select-none text-[13px] font-[530] leading-none tracking-[-0.04px] text-v2-text-text-base [font-variation-settings:'slnt'_0]">
                                   {language.t("session.share.popover.title")}
                                 </div>
-                                <div class="text-12-regular text-text-weak">
+                                <div class="select-none text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted [font-variation-settings:'slnt'_0]">
                                   {shareUrl()
                                     ? language.t("session.share.popover.description.shared")
                                     : language.t("session.share.popover.description.unshared")}
                                 </div>
                               </div>
-                              <div class="mt-3 flex flex-col gap-2">
+                              <div class="flex w-full flex-col gap-2">
                                 <Show
                                   when={shareUrl()}
                                   fallback={
-                                    <Button
-                                      size="large"
-                                      variant="primary"
+                                    <ButtonV2
+                                      variant="contrast"
                                       class="w-full"
                                       onClick={shareSession}
                                       disabled={shareMutation.isPending}
@@ -1503,48 +1724,57 @@ export function MessageTimeline(props: {
                                       {shareMutation.isPending
                                         ? language.t("session.share.action.publishing")
                                         : language.t("session.share.action.publish")}
-                                    </Button>
+                                    </ButtonV2>
                                   }
                                 >
                                   <div class="flex flex-col gap-2">
-                                    <TextField
-                                      value={shareUrl() ?? ""}
-                                      readOnly
-                                      copyable
-                                      copyKind="link"
-                                      tabIndex={-1}
-                                      class="w-full"
-                                    />
-                                    <div class="grid grid-cols-2 gap-2">
-                                      <Button
-                                        size="large"
-                                        variant="secondary"
-                                        class={
-                                          settings.general.newLayoutDesigns()
-                                            ? "w-full shadow-none border-[0.5px] border-border-weak-base"
-                                            : "w-full shadow-none border border-border-weak-base"
-                                        }
+                                    <div
+                                      class="flex h-8 w-full items-center gap-1.5 rounded-[6px] py-1 pl-2.5 pr-1.5 shadow-[var(--v2-elevation-button-neutral)]"
+                                      style={{
+                                        background:
+                                          "linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-button-neutral)",
+                                      }}
+                                    >
+                                      <div
+                                        class="min-w-0 flex-1 truncate select-text cursor-text text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base [font-variation-settings:'slnt'_0]"
+                                        onClick={selectShareUrlText}
+                                      >
+                                        {shareUrl()}
+                                      </div>
+                                      <IconButtonV2
+                                        type="button"
+                                        size="small"
+                                        variant="ghost-muted"
+                                        icon={<IconV2 name="outline-copy" />}
+                                        aria-label={language.t("session.share.copy.copyLink")}
+                                        onClick={copyShareUrl}
+                                      />
+                                      <IconButtonV2
+                                        type="button"
+                                        size="small"
+                                        variant="ghost-muted"
+                                        icon={<IconV2 name="outline-square-arrow" />}
+                                        aria-label={language.t("session.share.action.view")}
+                                        onClick={viewShare}
+                                        disabled={unshareMutation.isPending}
+                                      />
+                                    </div>
+                                    <div class="flex w-full">
+                                      <ButtonV2
+                                        variant="outline"
+                                        class="w-full"
                                         onClick={unshareSession}
                                         disabled={unshareMutation.isPending}
                                       >
                                         {unshareMutation.isPending
                                           ? language.t("session.share.action.unpublishing")
                                           : language.t("session.share.action.unpublish")}
-                                      </Button>
-                                      <Button
-                                        size="large"
-                                        variant="primary"
-                                        class="w-full"
-                                        onClick={viewShare}
-                                        disabled={unshareMutation.isPending}
-                                      >
-                                        {language.t("session.share.action.view")}
-                                      </Button>
+                                      </ButtonV2>
                                     </div>
                                   </div>
                                 </Show>
                               </div>
-                            </div>
+                            </Show>
                           </KobaltePopover.Content>
                         </KobaltePopover.Portal>
                       </KobaltePopover>

packages/console/app/src/routes/zen/util/handler.ts

@@ -137,7 +137,7 @@ export async function handler(
     const providerBudgetTracker = createProviderBudgetTracker(
       modelInfo.providers.map((provider) => ({ ...zenData.providers[provider.id], ...provider })),
     )
-    const providerBudgetUsage = await providerBudgetTracker?.check()
+    const providerBudget = await providerBudgetTracker?.check()
 
     const retriableRequest = async (retry: RetryOptions = { excludeProviders: [], retryCount: 0 }) => {
       const providerInfo = selectProvider(
@@ -151,7 +151,7 @@ export async function handler(
         stickyProvider,
         modelTpmLimits,
         modelTpsLimits,
-        providerBudgetUsage,
+        providerBudget,
       )
       validateModelSettings(billingSource, authInfo)
       updateProviderKey(authInfo, providerInfo)
@@ -284,7 +284,7 @@ export async function handler(
         const costInfo = calculateCost(modelInfo, usageInfo)
         await trialLimiter?.track(usageInfo)
         await modelTpmLimiter?.track(providerInfo.id, providerInfo.model, usageInfo)
-        await providerBudgetTracker?.track(providerInfo.id, costInfo.totalCostInCent)
+        await providerBudgetTracker?.track(providerInfo.id, providerInfo.budgetPriority, costInfo.totalCostInCent)
         await trackUsage(sessionId, billingSource, authInfo, modelInfo, providerInfo, usageInfo, costInfo)
         await reload(billingSource, authInfo, costInfo)
         json.cost = calculateOccurredCost(billingSource, costInfo)
@@ -345,7 +345,11 @@ export async function handler(
                     timestampLastByte,
                     usageInfo,
                   )
-                  await providerBudgetTracker?.track(providerInfo.id, costInfo.totalCostInCent)
+                  await providerBudgetTracker?.track(
+                    providerInfo.id,
+                    providerInfo.budgetPriority,
+                    costInfo.totalCostInCent,
+                  )
                   await trackUsage(sessionId, billingSource, authInfo, modelInfo, providerInfo, usageInfo, costInfo)
                   await reload(billingSource, authInfo, costInfo)
                   const cost = calculateOccurredCost(billingSource, costInfo)
@@ -512,7 +516,12 @@ export async function handler(
     stickyProviderId: string | undefined,
     modelTpmLimits: Record<string, number> | undefined,
     modelTpsLimits: Record<string, { qualify: number; unqualify: number }> | undefined,
-    providerBudgetUsage: Record<string, number> | undefined,
+    providerBudget:
+      | {
+          qualify: (providerId: string, priority: number) => boolean
+          prefer: (providerId: string, priority: number) => boolean
+        }
+      | undefined,
   ) {
     const modelProvider = (() => {
       // Byok is top priority b/c if user set their own API key, we should use it
@@ -536,10 +545,9 @@ export async function handler(
           .filter((provider) => provider.weight !== 0)
           .filter((provider) => !retry.excludeProviders.includes(provider.id))
           .filter((provider) => {
-            if (provider.budgetMode !== "fill") return true
-            const budget = zenData.providers[provider.id]?.budget
-            if (budget === undefined) return false
-            return (providerBudgetUsage?.[provider.id] ?? 0) < centsToMicroCents(budget * 100)
+            if (provider.budgetPriority === undefined) return true
+            if (!providerBudget) return true
+            return providerBudget.qualify(provider.id, provider.budgetPriority)
           })
           .filter((provider) => {
             if (!provider.tpmLimit) return true
@@ -576,15 +584,19 @@ export async function handler(
         const stickProvider = allProviders.find((provider) => provider.id === stickyProviderId)
         if (!stickProvider) return provider
 
-        // stick provider exists + selected provider is API type => use sticky provider
-        if (!provider.tpsGoal) return stickProvider
+        const preferBudgetProvider =
+          provider.budgetPriority !== undefined && providerBudget?.prefer(provider.id, provider.budgetPriority)
 
-        // stick provier exists + selected provider is GPU type + GPU not idle => use selected provider
-        const tps = modelTpsLimits?.[`${provider.id}/${provider.model}/${provider.tpsGoal}`] ?? {
-          qualify: 0,
-          unqualify: 0,
-        }
-        if (tps.qualify <= tps.unqualify * 3) return stickProvider
+        const preferTpsProvider = (() => {
+          if (!provider.tpsGoal) return false
+          const tps = modelTpsLimits?.[`${provider.id}/${provider.model}/${provider.tpsGoal}`] ?? {
+            qualify: 0,
+            unqualify: 0,
+          }
+          return tps.qualify > tps.unqualify * 3
+        })()
+
+        if (!preferBudgetProvider && !preferTpsProvider) return stickProvider
 
         return provider
       }

packages/console/app/src/routes/zen/util/modelTpsLimiter.ts

@@ -20,7 +20,7 @@ export function createModelTpsLimiter(providers: { id: string; model: string; tp
     )
   const now = Date.now()
   const currInterval = toInterval(new Date(now))
-  const prevInterval = toInterval(new Date(now - 60 * 1000))
+  const prevInterval = toInterval(new Date(now - 60_000))
 
   return {
     check: async () => {

packages/console/app/src/routes/zen/util/providerBudgetTracker.ts

@@ -2,50 +2,148 @@ import { centsToMicroCents } from "@opencode-ai/console-core/util/price.js"
 import { buildRateLimitKey, getRedis } from "./redis"
 import { logger } from "./logger"
 
+// Per-provider, per-minute budget with priorities. The budget belongs to a
+// provider and is shared across every model that routes to it. Each model's
+// provider entry carries a `budgetPriority`: priority 1 ("always") routes
+// unconditionally, while higher priorities ("fill") only route while the provider's
+// current-minute spend through that priority is still under budget.
+//
+// Spend is tracked per (provider, priority, minute) so a fill priority can yield its
+// leftover headroom to the next priority down. The previous minute is also read so
+// higher priorities can reserve the next minute's budget first.
 export function createProviderBudgetTracker(
   providers: {
     id: string
     budget?: number
     budgetContribution?: number
-    budgetMode?: "always" | "fill"
+    budgetPriority?: number
   }[],
 ) {
   const tracked = providers.filter(
-    (provider) => provider.budget !== undefined && provider.budgetContribution !== undefined,
+    (provider) =>
+      provider.budget !== undefined &&
+      provider.budgetContribution !== undefined &&
+      provider.budgetPriority !== undefined,
   )
   if (tracked.length === 0) return undefined
 
-  const interval = new Date()
-    .toISOString()
-    .replace(/[^0-9]/g, "")
-    .substring(0, 12)
+  const intervalAt = (date: Date) =>
+    date
+      .toISOString()
+      .replace(/[^0-9]/g, "")
+      .substring(0, 12)
+  const now = new Date()
+  const currInterval = intervalAt(now)
+  const prevInterval = intervalAt(new Date(now.getTime() - 60_000))
+
   const redis = getRedis()
-  const keys = Object.fromEntries(
-    tracked.map((provider) => [provider.id, buildRateLimitKey("provider-budget", provider.id, interval)]),
-  )
-  let budgetUsage: Record<string, number> = {}
+  const key = (providerId: string, priority: number, withInterval: string) =>
+    buildRateLimitKey("provider-budget", `${providerId}:${priority}`, withInterval)
+
+  const budgetByProvider = tracked.reduce<Record<string, number>>((acc, provider) => {
+    acc[provider.id] = provider.budget!
+    return acc
+  }, {})
+
+  const maxPriorityByProvider = tracked.reduce<Record<string, number>>((acc, provider) => {
+    acc[provider.id] = Math.max(acc[provider.id] ?? 0, provider.budgetPriority!)
+    return acc
+  }, {})
+
+  // Effective budget in micro-cents per provider/priority, computed in check()
+  // from the configured budget minus previous-minute usage from higher priorities.
+  let effectiveBudget: Record<string, Record<number, number>> = {}
+  // Cumulative current-minute spend through each priority, per provider.
+  let spentThroughPriority: Record<string, Record<number, number>> = {}
+  let previousSpentThroughPriority: Record<string, Record<number, number>> = {}
 
   return {
+    // Returns whether a provider at a given priority still has budget headroom.
+    // Priority 1 always qualifies; higher priorities qualify only while everything through
+    // the current priority hasn't already filled the previous-minute adjusted
+    // budget.
     check: async () => {
-      const ids = tracked.map((provider) => provider.id)
-      if (ids.length === 0) return {}
-      const values = await redis.mget<(string | number | null)[]>(ids.map((id) => keys[id]))
-      budgetUsage = Object.fromEntries(ids.map((id, index) => [id, Number(values[index] ?? 0)]))
-      return budgetUsage
+      const reads = Object.entries(maxPriorityByProvider).flatMap(([providerId, maxPriority]) =>
+        Array.from({ length: maxPriority }, (_, index) => index + 1).flatMap((priority) => [
+          { providerId, priority, interval: currInterval, prev: false },
+          { providerId, priority, interval: prevInterval, prev: true },
+        ]),
+      )
+      const values = await redis.mget<(string | number | null)[]>(
+        reads.map((r) => key(r.providerId, r.priority, r.interval)),
+      )
+
+      const current: Record<string, Record<number, number>> = {}
+      const previous: Record<string, Record<number, number>> = {}
+      reads.forEach((r, index) => {
+        const amount = Number(values[index] ?? 0)
+        if (r.prev) {
+          previous[r.providerId] ??= {}
+          previous[r.providerId][r.priority] = amount
+          return
+        }
+        current[r.providerId] ??= {}
+        current[r.providerId][r.priority] = amount
+      })
+
+      effectiveBudget = {}
+      spentThroughPriority = {}
+      previousSpentThroughPriority = {}
+      Object.entries(maxPriorityByProvider).forEach(([providerId, maxPriority]) => {
+        const providerBudget = budgetByProvider[providerId]
+        if (providerBudget === undefined) return
+        const budget = centsToMicroCents(providerBudget * 100)
+
+        let currentRunning = 0
+        let previousRunning = 0
+        effectiveBudget[providerId] = {}
+        spentThroughPriority[providerId] = {}
+        previousSpentThroughPriority[providerId] = {}
+        Array.from({ length: maxPriority }, (_, index) => index + 1).forEach((priority) => {
+          currentRunning += current[providerId]?.[priority] ?? 0
+          effectiveBudget[providerId][priority] = Math.max(0, budget - previousRunning)
+          previousRunning += previous[providerId]?.[priority] ?? 0
+          spentThroughPriority[providerId][priority] = currentRunning
+          previousSpentThroughPriority[providerId][priority] = previousRunning
+        })
+      })
+
+      return {
+        // Priority 1 is unconditional. Higher priorities gate on the spend through
+        // the current priority against the effective budget.
+        qualify: (providerId: string, priority: number) => {
+          if (priority <= 1) return true
+          const budget = effectiveBudget[providerId]?.[priority]
+          if (budget === undefined) return false
+          const spentThroughCurrentPriority = spentThroughPriority[providerId]?.[priority] ?? 0
+          return spentThroughCurrentPriority < budget
+        },
+        prefer: (providerId: string, priority: number) => {
+          const providerBudget = budgetByProvider[providerId]
+          if (providerBudget === undefined) return false
+          const budget = centsToMicroCents(providerBudget * 100)
+          const previousUsage = previousSpentThroughPriority[providerId]?.[priority]
+          if (previousUsage === undefined) return false
+          return previousUsage < budget * 0.8
+        },
+      }
     },
-    track: async (provider: string, costInCent: number) => {
-      const config = tracked.find((item) => item.id === provider)
+    track: async (provider: string, priority: number | undefined, costInCent: number) => {
+      if (priority === undefined) return
+      const config = tracked.find((item) => item.id === provider && item.budgetPriority === priority)
       if (!config) return
       if (config.budgetContribution === undefined) return
       const cost = centsToMicroCents(costInCent * config.budgetContribution)
       if (cost <= 0) return
+      const redisKey = key(provider, priority, currInterval)
       const pipeline = redis.pipeline()
-      pipeline.incrby(keys[provider], cost)
-      pipeline.expire(keys[provider], 120)
+      pipeline.incrby(redisKey, cost)
+      // Keep two minutes so the previous interval is readable for budget adjustment.
+      pipeline.expire(redisKey, 120)
       await pipeline.exec()
       logger.metric({
-        "provider.budget_usage": budgetUsage[provider] + cost,
-        "model.budget_usage": cost,
+        "provider.budget_usage": cost,
+        "provider.budget_priority": priority,
       })
     },
   }

packages/console/core/src/model.ts

@@ -37,7 +37,7 @@ export namespace ZenData {
         priority: z.number().optional(),
         tpmLimit: z.number().optional(),
         tpsGoal: z.number().optional(),
-        budgetMode: z.enum(["always", "fill"]).optional(),
+        budgetPriority: z.number().optional(),
         budgetContribution: z.number().optional(),
         weight: z.number().optional(),
         disabled: z.boolean().optional(),

packages/core/test/effect/layer-node/layer-node-types.test.ts

@@ -69,10 +69,10 @@ void invalidNodeReplacement
 // @ts-expect-error Replacement cannot introduce a new error
 LayerNode.compile(a, [[a, Layer.effect(A, Effect.fail(new OtherError()))]])
 
+const nodeReplacementWithError = make({ service: A, layer: Layer.effect(A, Effect.fail(new OtherError())), deps: [] })
+
 // @ts-expect-error Node replacement cannot introduce a new error
-const invalidNodeErrorReplacement = () =>
-  LayerNode.compile(a, [[a, make({ service: A, layer: Layer.effect(A, Effect.fail(new OtherError())), deps: [] })]])
-void invalidNodeErrorReplacement
+LayerNode.compile(a, [[a, nodeReplacementWithError]])
 
 class TagA extends Context.Service<TagA, {}>()("test/TagA") {}
 class TagB extends Context.Service<TagB, {}>()("test/TagB") {}

packages/llm/src/route/client.ts

@@ -374,17 +374,12 @@ const streamRequestWith = (runtime: TransportRuntime) => (request: LLMRequest) =
 
 const generateWith = (stream: Interface["stream"]) =>
   Effect.fn("LLM.generate")(function* (request: LLMRequest) {
-    return new LLMResponse(
-      yield* stream(request).pipe(
-        Stream.runFold(
-          () => ({ events: [] as LLMEvent[], usage: undefined as LLMResponse["usage"] }),
-          (acc, event) => {
-            acc.events.push(event)
-            if ("usage" in event && event.usage !== undefined) acc.usage = event.usage
-            return acc
-          },
-        ),
-      ),
+    const state = yield* stream(request).pipe(Stream.runFold(LLMResponse.empty, LLMResponse.reduce))
+    const response = LLMResponse.complete(state)
+    if (response) return response
+    return yield* ProviderShared.eventError(
+      `${request.model.provider}/${request.model.route.id}`,
+      "Provider stream ended without a terminal finish event",
     )
   })
 

packages/llm/src/schema/events.ts

@@ -1,7 +1,7 @@
 import { Schema } from "effect"
 import { ContentBlockID, FinishReason, ProtocolID, ProviderMetadata, RouteID, ToolCallID } from "./ids"
 import { ModelSchema } from "./options"
-import { ToolOutput, ToolResultValue } from "./messages"
+import { Message, ToolCallPart, ToolOutput, ToolResultPart, ToolResultValue, type ContentPart } from "./messages"
 import { ProviderFailureClassification } from "./errors"
 
 /**
@@ -335,9 +335,234 @@ const responseUsage = (events: ReadonlyArray<LLMEvent>) =>
     undefined,
   )
 
+interface ContentAssembly {
+  readonly contentIndex: number
+  readonly text: string
+  readonly providerMetadata?: ProviderMetadata
+}
+
+interface ToolInputAssembly {
+  readonly name: string
+  readonly text: string
+  readonly providerMetadata?: ProviderMetadata
+}
+
+interface ResponseState {
+  readonly events: ReadonlyArray<LLMEvent>
+  readonly message: Message
+  readonly usage?: Usage
+  readonly finishReason?: FinishReason
+  readonly textParts: Readonly<Record<string, ContentAssembly>>
+  readonly reasoningParts: Readonly<Record<string, ContentAssembly>>
+  readonly toolInputs: Readonly<Record<string, ToolInputAssembly>>
+}
+
+const emptyResponseState = (): ResponseState => ({
+  events: [],
+  message: Message.assistant([]),
+  textParts: {},
+  reasoningParts: {},
+  toolInputs: {},
+})
+
+const appendEvent = (state: ResponseState, event: LLMEvent): ResponseState => {
+  const events = [...state.events, event]
+  if (LLMEvent.is.finish(event)) {
+    return {
+      ...state,
+      events,
+      usage: event.usage ?? state.usage,
+      finishReason: event.reason,
+    }
+  }
+  if (LLMEvent.is.providerError(event)) {
+    return {
+      ...state,
+      events,
+      finishReason: state.finishReason ?? "error",
+    }
+  }
+  return {
+    ...state,
+    events,
+    usage: "usage" in event && event.usage !== undefined ? event.usage : state.usage,
+  }
+}
+
+const textContent = (text: string, providerMetadata: ProviderMetadata | undefined): ContentPart =>
+  providerMetadata === undefined ? { type: "text", text } : { type: "text", text, providerMetadata }
+
+const reasoningContent = (text: string, providerMetadata: ProviderMetadata | undefined): ContentPart =>
+  providerMetadata === undefined ? { type: "reasoning", text } : { type: "reasoning", text, providerMetadata }
+
+const contentWith = (state: ResponseState, content: ReadonlyArray<ContentPart>): ResponseState => ({
+  ...state,
+  message: Message.assistant(content),
+})
+
+const appendContent = (state: ResponseState, part: ContentPart) => contentWith(state, [...state.message.content, part])
+
+const replaceContent = (state: ResponseState, index: number, part: ContentPart) =>
+  contentWith(
+    state,
+    state.message.content.map((item, itemIndex) => (itemIndex === index ? part : item)),
+  )
+
+const ensureText = (state: ResponseState, id: string, providerMetadata?: ProviderMetadata): ResponseState => {
+  if (state.textParts[id]) return state
+  return {
+    ...appendContent(state, textContent("", providerMetadata)),
+    textParts: {
+      ...state.textParts,
+      [id]: { contentIndex: state.message.content.length, text: "", providerMetadata },
+    },
+  }
+}
+
+const reduceTextDelta = (state: ResponseState, event: TextDelta): ResponseState => {
+  const started = ensureText(state, event.id, event.providerMetadata)
+  const current = started.textParts[event.id]
+  if (!current) return started
+  const text = current.text + event.text
+  const providerMetadata = event.providerMetadata ?? current.providerMetadata
+  return {
+    ...replaceContent(started, current.contentIndex, textContent(text, providerMetadata)),
+    textParts: { ...started.textParts, [event.id]: { ...current, text, providerMetadata } },
+  }
+}
+
+const reduceTextEnd = (state: ResponseState, event: TextEnd): ResponseState => {
+  const current = state.textParts[event.id]
+  if (!current) return state
+  const providerMetadata = event.providerMetadata ?? current.providerMetadata
+  return {
+    ...replaceContent(state, current.contentIndex, textContent(current.text, providerMetadata)),
+    textParts: { ...state.textParts, [event.id]: { ...current, providerMetadata } },
+  }
+}
+
+const ensureReasoning = (state: ResponseState, id: string, providerMetadata?: ProviderMetadata): ResponseState => {
+  if (state.reasoningParts[id]) return state
+  return {
+    ...appendContent(state, reasoningContent("", providerMetadata)),
+    reasoningParts: {
+      ...state.reasoningParts,
+      [id]: { contentIndex: state.message.content.length, text: "", providerMetadata },
+    },
+  }
+}
+
+const reduceReasoningDelta = (state: ResponseState, event: ReasoningDelta): ResponseState => {
+  const started = ensureReasoning(state, event.id, event.providerMetadata)
+  const current = started.reasoningParts[event.id]
+  if (!current) return started
+  const text = current.text + event.text
+  const providerMetadata = event.providerMetadata ?? current.providerMetadata
+  return {
+    ...replaceContent(started, current.contentIndex, reasoningContent(text, providerMetadata)),
+    reasoningParts: { ...started.reasoningParts, [event.id]: { ...current, text, providerMetadata } },
+  }
+}
+
+const reduceReasoningEnd = (state: ResponseState, event: ReasoningEnd): ResponseState => {
+  const current = state.reasoningParts[event.id]
+  if (!current) return state
+  const providerMetadata = event.providerMetadata ?? current.providerMetadata
+  return {
+    ...replaceContent(state, current.contentIndex, reasoningContent(current.text, providerMetadata)),
+    reasoningParts: { ...state.reasoningParts, [event.id]: { ...current, providerMetadata } },
+  }
+}
+
+const reduceToolInputStart = (state: ResponseState, event: ToolInputStart): ResponseState => ({
+  ...state,
+  toolInputs: {
+    ...state.toolInputs,
+    [event.id]: { name: event.name, text: "", providerMetadata: event.providerMetadata },
+  },
+})
+
+const reduceToolInputDelta = (state: ResponseState, event: ToolInputDelta): ResponseState => {
+  const current = state.toolInputs[event.id] ?? { name: event.name, text: "" }
+  return {
+    ...state,
+    toolInputs: { ...state.toolInputs, [event.id]: { ...current, text: current.text + event.text } },
+  }
+}
+
+const reduceToolInputEnd = (state: ResponseState, event: ToolInputEnd): ResponseState => {
+  const current = state.toolInputs[event.id] ?? { name: event.name, text: "" }
+  return {
+    ...state,
+    toolInputs: {
+      ...state.toolInputs,
+      [event.id]: {
+        ...current,
+        name: event.name,
+        providerMetadata: event.providerMetadata ?? current.providerMetadata,
+      },
+    },
+  }
+}
+
+const toolCallContent = (event: ToolCall): ContentPart =>
+  ToolCallPart.make({
+    id: event.id,
+    name: event.name,
+    input: event.input,
+    ...(event.providerExecuted === undefined ? {} : { providerExecuted: event.providerExecuted }),
+    ...(event.providerMetadata === undefined ? {} : { providerMetadata: event.providerMetadata }),
+  })
+
+const toolResultContent = (event: ToolResult): ContentPart =>
+  ToolResultPart.make({
+    id: event.id,
+    name: event.name,
+    result: event.result,
+    ...(event.providerExecuted === undefined ? {} : { providerExecuted: event.providerExecuted }),
+    ...(event.providerMetadata === undefined ? {} : { providerMetadata: event.providerMetadata }),
+  })
+
+const reduceToolCall = (state: ResponseState, event: ToolCall): ResponseState => {
+  const { [event.id]: _finished, ...toolInputs } = state.toolInputs
+  return { ...appendContent(state, toolCallContent(event)), toolInputs }
+}
+
+const reduceResponseState = (state: ResponseState, event: LLMEvent): ResponseState => {
+  const next = appendEvent(state, event)
+  switch (event.type) {
+    case "text-start":
+      return ensureText(next, event.id, event.providerMetadata)
+    case "text-delta":
+      return reduceTextDelta(next, event)
+    case "text-end":
+      return reduceTextEnd(next, event)
+    case "reasoning-start":
+      return ensureReasoning(next, event.id, event.providerMetadata)
+    case "reasoning-delta":
+      return reduceReasoningDelta(next, event)
+    case "reasoning-end":
+      return reduceReasoningEnd(next, event)
+    case "tool-input-start":
+      return reduceToolInputStart(next, event)
+    case "tool-input-delta":
+      return reduceToolInputDelta(next, event)
+    case "tool-input-end":
+      return reduceToolInputEnd(next, event)
+    case "tool-call":
+      return reduceToolCall(next, event)
+    case "tool-result":
+      return appendContent(next, toolResultContent(event))
+    default:
+      return next
+  }
+}
+
 export class LLMResponse extends Schema.Class<LLMResponse>("LLM.Response")({
+  message: Message,
   events: Schema.Array(LLMEvent),
   usage: Schema.optional(Usage),
+  finishReason: FinishReason,
 }) {
   /** Concatenated assistant text assembled from streamed `text-delta` events. */
   get text() {
@@ -356,8 +581,29 @@ export class LLMResponse extends Schema.Class<LLMResponse>("LLM.Response")({
 }
 
 export namespace LLMResponse {
+  export type State = ResponseState
   export type Output = LLMResponse | { readonly events: ReadonlyArray<LLMEvent>; readonly usage?: Usage }
 
+  /** Initial reducer state for assembling one provider attempt. */
+  export const empty = emptyResponseState
+
+  /** Purely fold one provider-neutral event into the attempt assembly state. */
+  export const reduce = reduceResponseState
+
+  /** Return a completed response only after a terminal finish or provider error. */
+  export const complete = (state: State): LLMResponse | undefined =>
+    state.finishReason === undefined
+      ? undefined
+      : new LLMResponse({
+          message: state.message,
+          events: [...state.events],
+          usage: state.usage,
+          finishReason: state.finishReason,
+        })
+
+  /** Convenience reducer for callers that already have a collected event list. */
+  export const fromEvents = (events: ReadonlyArray<LLMEvent>) => complete(events.reduce(reduce, empty()))
+
   /** Concatenate assistant text from a response or collected event list. */
   export const text = (response: Output) => responseText(response.events)
 

packages/llm/test/adapter.test.ts

@@ -115,6 +115,7 @@ describe("llm route", () => {
 
       expect(events.map((event) => event.type)).toEqual(["text-delta", "finish"])
       expect(response.events.map((event) => event.type)).toEqual(["text-delta", "finish"])
+      expect(response.message.content).toEqual([{ type: "text", text: 'echo:{"body":"hello"}' }])
     }),
   )
 

packages/llm/test/fixtures/recordings/gemini-cache/reports-cachedcontenttokencount-on-identical-second-call.json

@@ -21,7 +21,7 @@
         "headers": {
           "content-type": "text/event-stream"
         },
-        "body": ""
+        "body": "data: {\"candidates\":[{\"content\":{\"role\":\"model\",\"parts\":[{\"text\":\"Hi.\"}]},\"finishReason\":\"STOP\"}],\"usageMetadata\":{\"promptTokenCount\":1200,\"candidatesTokenCount\":2,\"totalTokenCount\":1202}}\n\n"
       }
     },
     {
@@ -39,7 +39,7 @@
         "headers": {
           "content-type": "text/event-stream"
         },
-        "body": ""
+        "body": "data: {\"candidates\":[{\"content\":{\"role\":\"model\",\"parts\":[{\"text\":\"Hi.\"}]},\"finishReason\":\"STOP\"}],\"usageMetadata\":{\"cachedContentTokenCount\":1100,\"promptTokenCount\":1200,\"candidatesTokenCount\":2,\"totalTokenCount\":1202}}\n\n"
       }
     }
   ]

packages/llm/test/provider/openai-chat.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect } from "bun:test"
 import { Effect, Schema, Stream } from "effect"
 import { HttpClientRequest } from "effect/unstable/http"
-import { LLM, LLMError, Message, Model, ToolCallPart, Usage } from "../../src"
+import { LLM, LLMError, LLMEvent, Message, Model, ToolCallPart, Usage } from "../../src"
 import * as Azure from "../../src/providers/azure"
 import * as OpenAI from "../../src/providers/openai"
 import * as OpenAIChat from "../../src/protocols/openai-chat"
@@ -597,19 +597,22 @@ describe("OpenAI Chat route", () => {
         }),
         deltaChunk({ tool_calls: [{ index: 0, function: { arguments: ':"weather"}' } }] }),
       )
-      const response = yield* LLMClient.generate(
-        LLM.updateRequest(request, {
-          tools: [{ name: "lookup", description: "Lookup data", inputSchema: { type: "object" } }],
-        }),
-      ).pipe(Effect.provide(fixedResponse(body)))
+      const input = LLM.updateRequest(request, {
+        tools: [{ name: "lookup", description: "Lookup data", inputSchema: { type: "object" } }],
+      })
+      const events = Array.from(
+        yield* LLMClient.stream(input).pipe(Stream.runCollect, Effect.provide(fixedResponse(body))),
+      )
+      const error = yield* LLMClient.generate(input).pipe(Effect.provide(fixedResponse(body)), Effect.flip)
 
-      expect(response.events).toEqual([
+      expect(events).toEqual([
         { type: "step-start", index: 0 },
         { type: "tool-input-start", id: "call_1", name: "lookup", providerMetadata: undefined },
         { type: "tool-input-delta", id: "call_1", name: "lookup", text: '{"query"' },
         { type: "tool-input-delta", id: "call_1", name: "lookup", text: ':"weather"}' },
       ])
-      expect(response.toolCalls).toEqual([])
+      expect(events.filter(LLMEvent.is.toolCall)).toEqual([])
+      expect(error.message).toContain("Provider stream ended without a terminal finish event")
     }),
   )
 

packages/llm/test/response.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, test } from "bun:test"
+import { LLMEvent, LLMResponse } from "../src"
+
+const reduce = (events: ReadonlyArray<LLMEvent>) => events.reduce(LLMResponse.reduce, LLMResponse.empty())
+
+describe("LLMResponse reducer", () => {
+  test("assembles interleaved reasoning and text with end metadata", () => {
+    const response = LLMResponse.fromEvents([
+      LLMEvent.reasoningStart({ id: "r1" }),
+      LLMEvent.reasoningDelta({ id: "r1", text: "I should " }),
+      LLMEvent.textStart({ id: "t1" }),
+      LLMEvent.reasoningDelta({ id: "r1", text: "compare..." }),
+      LLMEvent.reasoningEnd({ id: "r1", providerMetadata: { anthropic: { signature: "sig" } } }),
+      LLMEvent.textDelta({ id: "t1", text: "Answer" }),
+      LLMEvent.textEnd({ id: "t1" }),
+      LLMEvent.finish({ reason: "stop", usage: { outputTokens: 5 } }),
+    ])
+
+    expect(response?.finishReason).toBe("stop")
+    expect(response?.usage).toMatchObject({ outputTokens: 5 })
+    expect(response?.message.content).toEqual([
+      {
+        type: "reasoning",
+        text: "I should compare...",
+        providerMetadata: { anthropic: { signature: "sig" } },
+      },
+      { type: "text", text: "Answer" },
+    ])
+    expect(response?.events).toHaveLength(8)
+  })
+
+  test("preserves partial content without completing a failed stream", () => {
+    const state = reduce([LLMEvent.textStart({ id: "t1" }), LLMEvent.textDelta({ id: "t1", text: "partial" })])
+
+    expect(LLMResponse.complete(state)).toBeUndefined()
+    expect(state.message.content).toEqual([{ type: "text", text: "partial" }])
+  })
+
+  test("assembles tool-call content only after the completed tool call event", () => {
+    const pending = reduce([
+      LLMEvent.toolInputStart({ id: "call_1", name: "lookup" }),
+      LLMEvent.toolInputDelta({ id: "call_1", name: "lookup", text: '{"query"' }),
+    ])
+
+    expect(pending.message.content).toEqual([])
+    expect(pending.toolInputs.call_1?.text).toBe('{"query"')
+
+    const response = LLMResponse.fromEvents([
+      ...pending.events,
+      LLMEvent.toolInputDelta({ id: "call_1", name: "lookup", text: ':"weather"}' }),
+      LLMEvent.toolInputEnd({ id: "call_1", name: "lookup" }),
+      LLMEvent.toolCall({ id: "call_1", name: "lookup", input: { query: "weather" } }),
+      LLMEvent.finish({ reason: "tool-calls" }),
+    ])
+
+    expect(response?.message.content).toEqual([
+      { type: "tool-call", id: "call_1", name: "lookup", input: { query: "weather" } },
+    ])
+  })
+})

packages/session-ui/src/components/message-part.tsx

@@ -11,6 +11,7 @@ import {
   onCleanup,
   Index,
   type JSX,
+  type ComponentProps,
 } from "solid-js"
 import { createStore } from "solid-js/store"
 import stripAnsi from "strip-ansi"
@@ -49,6 +50,8 @@ import { getDirectory as _getDirectory, getFilename } from "@opencode-ai/core/ut
 import { checksum } from "@opencode-ai/core/util/encode"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { IconButton } from "@opencode-ai/ui/icon-button"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { TextShimmer } from "@opencode-ai/ui/text-shimmer"
 import { AnimatedCountList } from "./tool-count-summary"
@@ -161,6 +164,7 @@ export interface MessageProps {
   actions?: UserActions
   showAssistantCopyPartID?: string | null
   showReasoningSummaries?: boolean
+  useV2Actions?: boolean
 }
 
 export type SessionAction = (input: { sessionID: string; messageID: string }) => Promise<void> | void
@@ -182,6 +186,46 @@ export interface MessagePartProps {
   onContentRendered?: () => void
   showAssistantCopyPartID?: string | null
   turnDurationMs?: number
+  useV2Actions?: boolean
+}
+
+function MessageActionButton(
+  props: Pick<ComponentProps<"button">, "disabled" | "onMouseDown" | "onClick" | "aria-label"> & {
+    icon: "check" | "copy" | "reset"
+    label: JSX.Element
+    useV2?: boolean
+  },
+) {
+  return (
+    <Show
+      when={props.useV2}
+      fallback={
+        <Tooltip value={props.label} placement="top" gutter={4}>
+          <IconButton
+            icon={props.icon}
+            size="normal"
+            variant="ghost"
+            disabled={props.disabled}
+            onMouseDown={props.onMouseDown}
+            onClick={props.onClick}
+            aria-label={props["aria-label"]}
+          />
+        </Tooltip>
+      }
+    >
+      <TooltipV2 value={props.label} placement="top" gutter={4}>
+        <IconButtonV2
+          icon={<Icon name={props.icon} size="small" />}
+          size="normal"
+          variant="ghost-muted"
+          disabled={props.disabled}
+          onMouseDown={props.onMouseDown}
+          onClick={props.onClick}
+          aria-label={props["aria-label"]}
+        />
+      </TooltipV2>
+    </Show>
+  )
 }
 
 export type PartComponent = Component<MessagePartProps>
@@ -640,6 +684,7 @@ export function AssistantParts(props: {
   messages: AssistantMessage[]
   showAssistantCopyPartID?: string | null
   turnDurationMs?: number
+  useV2Actions?: boolean
   working?: boolean
   showReasoningSummaries?: boolean
   shellToolDefaultOpen?: boolean
@@ -724,6 +769,7 @@ export function AssistantParts(props: {
                         message={message()!}
                         showAssistantCopyPartID={props.showAssistantCopyPartID}
                         turnDurationMs={props.turnDurationMs}
+                        useV2Actions={props.useV2Actions}
                         defaultOpen={partDefaultOpen(item()!, props.shellToolDefaultOpen, props.editToolDefaultOpen)}
                       />
                     </Show>
@@ -851,7 +897,12 @@ export function Message(props: MessageProps) {
     <Switch>
       <Match when={props.message.role === "user" && props.message}>
         {(userMessage) => (
-          <UserMessageDisplay message={userMessage() as UserMessage} parts={props.parts} actions={props.actions} />
+          <UserMessageDisplay
+            message={userMessage() as UserMessage}
+            parts={props.parts}
+            actions={props.actions}
+            useV2Actions={props.useV2Actions}
+          />
         )}
       </Match>
       <Match when={props.message.role === "assistant" && props.message}>
@@ -861,6 +912,7 @@ export function Message(props: MessageProps) {
             parts={props.parts}
             showAssistantCopyPartID={props.showAssistantCopyPartID}
             showReasoningSummaries={props.showReasoningSummaries}
+            useV2Actions={props.useV2Actions}
           />
         )}
       </Match>
@@ -873,6 +925,7 @@ export function AssistantMessageDisplay(props: {
   parts: PartType[]
   showAssistantCopyPartID?: string | null
   showReasoningSummaries?: boolean
+  useV2Actions?: boolean
 }) {
   const emptyTools: ToolPart[] = []
   const part = createMemo(() => index(props.parts))
@@ -932,6 +985,7 @@ export function AssistantMessageDisplay(props: {
                       part={item()!}
                       message={props.message}
                       showAssistantCopyPartID={props.showAssistantCopyPartID}
+                      useV2Actions={props.useV2Actions}
                     />
                   </Show>
                 )
@@ -1052,7 +1106,12 @@ export function ContextToolGroup(props: { parts: ToolPart[]; busy?: boolean; onS
   )
 }
 
-export function UserMessageDisplay(props: { message: UserMessage; parts: PartType[]; actions?: UserActions }) {
+export function UserMessageDisplay(props: {
+  message: UserMessage
+  parts: PartType[]
+  actions?: UserActions
+  useV2Actions?: boolean
+}) {
   const data = useData()
   const dialog = useDialog()
   const i18n = useI18n()
@@ -1191,38 +1250,30 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
               </span>
             </Show>
             <Show when={props.actions?.revert}>
-              <Tooltip value={i18n.t("ui.message.revertMessage")} placement="top" gutter={4}>
-                <IconButton
-                  icon="reset"
-                  size="normal"
-                  variant="ghost"
-                  disabled={!!busy()}
-                  onMouseDown={(e) => e.preventDefault()}
-                  onClick={(event) => {
-                    event.stopPropagation()
-                    revert()
-                  }}
-                  aria-label={i18n.t("ui.message.revertMessage")}
-                />
-              </Tooltip>
-            </Show>
-            <Tooltip
-              value={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copyMessage")}
-              placement="top"
-              gutter={4}
-            >
-              <IconButton
-                icon={copied() ? "check" : "copy"}
-                size="normal"
-                variant="ghost"
-                onMouseDown={(e) => e.preventDefault()}
+              <MessageActionButton
+                icon="reset"
+                label={i18n.t("ui.message.revertMessage")}
+                useV2={props.useV2Actions}
+                disabled={!!busy()}
+                onMouseDown={(event) => event.preventDefault()}
                 onClick={(event) => {
                   event.stopPropagation()
-                  void handleCopy()
+                  revert()
                 }}
-                aria-label={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copyMessage")}
+                aria-label={i18n.t("ui.message.revertMessage")}
               />
-            </Tooltip>
+            </Show>
+            <MessageActionButton
+              icon={copied() ? "check" : "copy"}
+              label={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copyMessage")}
+              useV2={props.useV2Actions}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={(event) => {
+                event.stopPropagation()
+                void handleCopy()
+              }}
+              aria-label={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copyMessage")}
+            />
           </div>
         </>
       </Show>
@@ -1286,6 +1337,7 @@ export function Part(props: MessagePartProps) {
         onContentRendered={props.onContentRendered}
         showAssistantCopyPartID={props.showAssistantCopyPartID}
         turnDurationMs={props.turnDurationMs}
+        useV2Actions={props.useV2Actions}
       />
     </Show>
   )
@@ -1566,20 +1618,14 @@ PART_MAPPING["text"] = function TextPartDisplay(props) {
         </div>
         <Show when={showCopy()}>
           <div data-slot="text-part-copy-wrapper" data-interrupted={interrupted() ? "" : undefined}>
-            <Tooltip
-              value={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copyResponse")}
-              placement="top"
-              gutter={4}
-            >
-              <IconButton
-                icon={copied() ? "check" : "copy"}
-                size="normal"
-                variant="ghost"
-                onMouseDown={(e) => e.preventDefault()}
-                onClick={handleCopy}
-                aria-label={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copyResponse")}
-              />
-            </Tooltip>
+            <MessageActionButton
+              icon={copied() ? "check" : "copy"}
+              label={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copyResponse")}
+              useV2={props.useV2Actions}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={handleCopy}
+              aria-label={copied() ? i18n.t("ui.message.copied") : i18n.t("ui.message.copyResponse")}
+            />
             <Show when={meta()}>
               <span data-slot="text-part-meta" class="text-12-regular text-text-weak cursor-default">
                 {meta()}

packages/ui/src/components/progress-circle.css

@@ -2,11 +2,15 @@
   transform: rotate(-90deg);
 
   [data-slot="progress-circle-background"] {
-    stroke: var(--border-weak-base);
+    stroke: var(--progress-circle-background, var(--border-weak-base));
+  }
+
+  [data-slot="progress-circle-background-overlay"] {
+    stroke: var(--progress-circle-background-overlay, transparent);
   }
 
   [data-slot="progress-circle-progress"] {
-    stroke: var(--border-active);
+    stroke: var(--progress-circle-progress, var(--border-active));
     transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
   }
 }

packages/ui/src/components/progress-circle.tsx

@@ -1,6 +1,6 @@
 import { type ComponentProps, createMemo, splitProps } from "solid-js"
 
-export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList"> {
+export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class" | "classList" | "style"> {
   percentage: number
   size?: number
   strokeWidth?: number
@@ -43,6 +43,13 @@ export function ProgressCircle(props: ProgressCircleProps) {
         data-slot="progress-circle-background"
         stroke-width={strokeWidth()}
       />
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        data-slot="progress-circle-background-overlay"
+        stroke-width={strokeWidth()}
+      />
       <circle
         cx={center}
         cy={center}

packages/ui/src/v2/components/button-v2.css

@@ -113,6 +113,26 @@
   cursor: not-allowed;
 }
 
+/* Outline */
+[data-component="button-v2"][data-variant="outline"] {
+  background-color: transparent;
+  color: var(--v2-text-text-base);
+  box-shadow: inset 0 0 0 1px var(--v2-border-border-muted);
+}
+
+[data-component="button-v2"][data-variant="outline"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="button-v2"][data-variant="outline"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="button-v2"][data-variant="outline"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 /* Contrast */
 [data-component="button-v2"][data-variant="contrast"] {
   background-image:

packages/ui/src/v2/components/button-v2.tsx

@@ -7,7 +7,7 @@ export interface ButtonV2Props
   extends ComponentProps<typeof Kobalte>,
     Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
   size?: "small" | "normal" | "large"
-  variant?: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted"
+  variant?: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted" | "outline"
   icon?: IconProps["name"]
 }
 

packages/ui/src/v2/components/dialog-v2.css

@@ -59,6 +59,7 @@
           margin: 0;
           flex: 1;
           min-width: 0;
+          user-select: none;
           font-weight: 530;
           font-size: 13px;
           line-height: 16px;
@@ -80,6 +81,7 @@
           margin: 0;
           flex: none;
           flex-grow: 0;
+          user-select: none;
           font-weight: 530;
           font-size: 15px;
           line-height: 20px;
@@ -91,6 +93,7 @@
         [data-slot="dialog-description"] {
           flex: none;
           flex-grow: 0;
+          user-select: none;
           font-weight: 440;
           font-size: 13px;
           line-height: 20px;

packages/ui/src/v2/components/dialog-v2.tsx

@@ -110,3 +110,5 @@ export function Dialog(props: DialogProps) {
     </div>
   )
 }
+
+export const DialogV2 = Dialog

packages/ui/src/v2/components/icon.tsx

@@ -85,6 +85,14 @@ 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"/>`,
   },
+  "outline-copy": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M4.14908 11.0081H1.76282V1.51758H9.1038V2.55588M14.2225 4.99681H6.75397V14.4873H14.2225V4.99681Z" stroke="currentColor"/>`,
+  },
+  "outline-square-arrow": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M13.5555 6.66656V2.44434H9.33326M13.5555 2.44434L7.99993 7.99989M13.5555 9.33324V13.5555C13.5555 13.5555 12.7599 13.5555 11.7777 13.5555H2.44438C2.44438 13.5555 2.44438 12.7599 2.44438 11.7777V4.22213C2.44438 3.2399 2.44434 2.44435 2.44434 2.44435H6.66661" stroke="currentColor"/>`,
+  },
   archive: {
     viewBox: "0 0 16 16",
     body: `<path d="M13.1112 13.5555V14.0555H13.6112V13.5555H13.1112ZM2.889 13.5555H2.389L2.389 14.0555H2.889V13.5555ZM3.38901 5.55546L3.38901 5.05546L2.38901 5.05546L2.38901 5.55546L2.88901 5.55546L3.38901 5.55546ZM14.4446 2.44434H14.9446V1.94434L14.4446 1.94434L14.4446 2.44434ZM14.4446 5.55545L14.4446 6.05545L14.9446 6.05545V5.55545H14.4446ZM1.55566 5.55546L1.05566 5.55545L1.05566 6.05546L1.55566 6.05546L1.55566 5.55546ZM1.5557 2.44436L1.5557 1.94436L1.05571 1.94436L1.0557 2.44435L1.5557 2.44436ZM13.1112 5.55546H12.6112V13.5555H13.1112H13.6112V5.55546H13.1112ZM2.889 13.5555H3.389L3.38901 5.55546L2.88901 5.55546L2.38901 5.55546L2.389 13.5555H2.889ZM14.4446 2.44434H13.9446V5.55545H14.4446H14.9446V2.44434H14.4446ZM1.55566 5.55546L2.05566 5.55547L2.0557 2.44436L1.5557 2.44436L1.0557 2.44435L1.05566 5.55545L1.55566 5.55546ZM6.22234 8.22213V8.72213H9.7779V8.22213V7.72213H6.22234V8.22213ZM13.1112 13.5555V13.0555H2.889V13.5555V14.0555H13.1112V13.5555ZM1.5557 2.44436L1.5557 2.94436L14.4446 2.94434L14.4446 2.44434L14.4446 1.94434L1.5557 1.94436L1.5557 2.44436ZM14.4446 5.55545L14.4446 5.05545L1.55566 5.05546L1.55566 5.55546L1.55566 6.05546L14.4446 6.05545L14.4446 5.55545Z" fill="currentColor"/>`,

packages/ui/src/v2/components/progress-circle-v2.css

@@ -0,0 +1,13 @@
+[data-component="progress-circle-v2"] {
+  display: block;
+  transform: rotate(-90deg);
+}
+
+[data-component="progress-circle-v2"] [data-slot="progress-circle-v2-background"] {
+  stroke: var(--v2-background-bg-layer-04);
+}
+
+[data-component="progress-circle-v2"] [data-slot="progress-circle-v2-progress"] {
+  stroke: var(--v2-icon-icon-muted);
+  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
+}

packages/ui/src/v2/components/progress-circle-v2.tsx

@@ -0,0 +1,52 @@
+import { type ComponentProps, createMemo, splitProps } from "solid-js"
+import "./progress-circle-v2.css"
+
+export interface ProgressCircleV2Props extends Pick<ComponentProps<"svg">, "class" | "classList"> {
+  percentage: number
+  size?: number
+  strokeWidth?: number
+}
+
+export function ProgressCircleV2(props: ProgressCircleV2Props) {
+  const [split, rest] = splitProps(props, ["percentage", "size", "strokeWidth", "class", "classList"])
+
+  const size = () => split.size ?? 14
+  const strokeWidth = () => split.strokeWidth ?? 1.5
+  const viewBoxSize = 14
+  const center = viewBoxSize / 2
+  const radius = () => center - strokeWidth() / 2
+  const circumference = createMemo(() => 2 * Math.PI * radius())
+  const offset = createMemo(() => circumference() * (1 - Math.max(0, Math.min(100, split.percentage || 0)) / 100))
+
+  return (
+    <svg
+      {...rest}
+      width={size()}
+      height={size()}
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      fill="none"
+      data-component="progress-circle-v2"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        data-slot="progress-circle-v2-background"
+        stroke-width={strokeWidth()}
+      />
+      <circle
+        cx={center}
+        cy={center}
+        r={radius()}
+        data-slot="progress-circle-v2-progress"
+        stroke-width={strokeWidth()}
+        stroke-dasharray={circumference().toString()}
+        stroke-dashoffset={offset()}
+      />
+    </svg>
+  )
+}

packages/web/src/content/docs/ar/go.mdx

@@ -98,7 +98,7 @@ OpenCode Go هو اشتراك منخفض التكلفة — **$5 للشهر ال
 تستند التقديرات إلى متوسط أنماط الطلبات المرصودة:
 
 - GLM-5.2/5.1 — ‏700 input، و52,000 cached، و150 output tokens لكل طلب
-- Kimi K2.7/K2.6 — ‏870 input، و55,000 cached، و200 output tokens لكل طلب
+- Kimi K2.7 Code/K2.6 — ‏870 input، و55,000 cached، و200 output tokens لكل طلب
 - DeepSeek V4 Pro — ‏750 input، و82,000 cached، و290 output tokens لكل طلب
 - DeepSeek V4 Flash — ‏790 input، و68,000 cached، و280 output tokens لكل طلب
 - MiniMax M3 — ‏510 input، و56,000 cached، و190 output tokens لكل طلب
@@ -154,7 +154,7 @@ OpenCode Go هو اشتراك منخفض التكلفة — **$5 للشهر ال
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/bs/go.mdx

@@ -108,7 +108,7 @@ Tabela ispod pruža procijenjeni broj zahtjeva na osnovu tipičnih obrazaca kori
 Procjene se zasnivaju na zapaženim prosječnim obrascima zahtjeva:
 
 - GLM-5.2/5.1 — 700 ulaznih (input), 52,000 keširanih, 150 izlaznih (output) tokena po zahtjevu
-- Kimi K2.7/K2.6 — 870 ulaznih, 55,000 keširanih, 200 izlaznih tokena po zahtjevu
+- Kimi K2.7 Code/K2.6 — 870 ulaznih, 55,000 keširanih, 200 izlaznih tokena po zahtjevu
 - DeepSeek V4 Pro — 750 ulaznih, 82,000 keširanih, 290 izlaznih tokena po zahtjevu
 - DeepSeek V4 Flash — 790 ulaznih, 68,000 keširanih, 280 izlaznih tokena po zahtjevu
 - MiniMax M3 — 510 ulaznih, 56,000 keširanih, 190 izlaznih tokena po zahtjevu
@@ -166,7 +166,7 @@ Također možete pristupiti Go modelima putem sljedećih API endpointa.
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/da/go.mdx

@@ -108,7 +108,7 @@ Tabellen nedenfor giver et estimeret antal anmodninger baseret på typiske Go-fo
 Estimaterne er baseret på observerede gennemsnitlige anmodningsmønstre:
 
 - GLM-5.2/5.1 — 700 input, 52.000 cachelagrede, 150 output-tokens pr. anmodning
-- Kimi K2.7/K2.6 — 870 input, 55.000 cachelagrede, 200 output-tokens pr. anmodning
+- Kimi K2.7 Code/K2.6 — 870 input, 55.000 cachelagrede, 200 output-tokens pr. anmodning
 - DeepSeek V4 Pro — 750 input, 82.000 cachelagrede, 290 output-tokens pr. anmodning
 - DeepSeek V4 Flash — 790 input, 68.000 cachelagrede, 280 output-tokens pr. anmodning
 - MiniMax M3 — 510 input, 56.000 cachelagrede, 190 output-tokens pr. anmodning
@@ -166,7 +166,7 @@ Du kan også få adgang til Go-modeller gennem følgende API-endpoints.
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/de/go.mdx

@@ -100,7 +100,7 @@ Die folgende Tabelle zeigt eine geschätzte Anzahl von Anfragen basierend auf ty
 Die Schätzungen basieren auf beobachteten durchschnittlichen Anfragemustern:
 
 - GLM-5.2/5.1 — 700 Input-, 52.000 Cached-, 150 Output-Tokens pro Anfrage
-- Kimi K2.7/K2.6 — 870 Input-, 55.000 Cached-, 200 Output-Tokens pro Anfrage
+- Kimi K2.7 Code/K2.6 — 870 Input-, 55.000 Cached-, 200 Output-Tokens pro Anfrage
 - DeepSeek V4 Pro — 750 Input-, 82.000 Cached-, 290 Output-Tokens pro Anfrage
 - DeepSeek V4 Flash — 790 Input-, 68.000 Cached-, 280 Output-Tokens pro Anfrage
 - MiniMax M3 — 510 Input-, 56.000 Cached-, 190 Output-Tokens pro Anfrage
@@ -156,7 +156,7 @@ Du kannst auf die Go-Modelle auch über die folgenden API-Endpunkte zugreifen.
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/es/go.mdx

@@ -108,7 +108,7 @@ La siguiente tabla proporciona una cantidad estimada de peticiones basada en los
 Las estimaciones se basan en los patrones de peticiones promedio observados:
 
 - GLM-5.2/5.1 — 700 tokens de entrada, 52,000 en caché, 150 tokens de salida por petición
-- Kimi K2.7/K2.6 — 870 tokens de entrada, 55,000 en caché, 200 tokens de salida por petición
+- Kimi K2.7 Code/K2.6 — 870 tokens de entrada, 55,000 en caché, 200 tokens de salida por petición
 - DeepSeek V4 Pro — 750 tokens de entrada, 82,000 en caché, 290 tokens de salida por petición
 - DeepSeek V4 Flash — 790 tokens de entrada, 68,000 en caché, 280 tokens de salida por petición
 - MiniMax M3 — 510 tokens de entrada, 56,000 en caché, 190 tokens de salida por petición
@@ -166,7 +166,7 @@ También puedes acceder a los modelos de Go a través de los siguientes endpoint
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/fr/go.mdx

@@ -98,7 +98,7 @@ Le tableau ci-dessous fournit une estimation du nombre de requêtes basée sur d
 Les estimations sont basées sur les schémas de requêtes moyens observés :
 
 - GLM-5.2/5.1 — 700 tokens en entrée, 52,000 en cache, 150 tokens en sortie par requête
-- Kimi K2.7/K2.6 — 870 tokens en entrée, 55,000 en cache, 200 tokens en sortie par requête
+- Kimi K2.7 Code/K2.6 — 870 tokens en entrée, 55,000 en cache, 200 tokens en sortie par requête
 - DeepSeek V4 Pro — 750 tokens en entrée, 82,000 en cache, 290 tokens en sortie par requête
 - DeepSeek V4 Flash — 790 tokens en entrée, 68,000 en cache, 280 tokens en sortie par requête
 - MiniMax M3 — 510 tokens en entrée, 56,000 en cache, 190 tokens en sortie par requête
@@ -154,7 +154,7 @@ Vous pouvez également accéder aux modèles Go via les points de terminaison d'
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/go.mdx

@@ -108,7 +108,7 @@ The table below provides an estimated request count based on typical Go usage pa
 The estimates are based on observed average request patterns:
 
 - GLM-5.2/5.1 — 700 input, 52,000 cached, 150 output tokens per request
-- Kimi K2.7/K2.6 — 870 input, 55,000 cached, 200 output tokens per request
+- Kimi K2.7 Code/K2.6 — 870 input, 55,000 cached, 200 output tokens per request
 - DeepSeek V4 Pro — 750 input, 82,000 cached, 290 output tokens per request
 - DeepSeek V4 Flash — 790 input, 68,000 cached, 280 output tokens per request
 - MiniMax M3 — 510 input, 56,000 cached, 190 output tokens per request
@@ -166,7 +166,7 @@ You can also access Go models through the following API endpoints.
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/it/go.mdx

@@ -106,7 +106,7 @@ La tabella seguente fornisce una stima del conteggio delle richieste in base a p
 Le stime si basano sui pattern medi di richieste osservati:
 
 - GLM-5.2/5.1 — 700 di input, 52.000 in cache, 150 token di output per richiesta
-- Kimi K2.7/K2.6 — 870 di input, 55.000 in cache, 200 token di output per richiesta
+- Kimi K2.7 Code/K2.6 — 870 di input, 55.000 in cache, 200 token di output per richiesta
 - DeepSeek V4 Pro — 750 di input, 82.000 in cache, 290 token di output per richiesta
 - DeepSeek V4 Flash — 790 di input, 68.000 in cache, 280 token di output per richiesta
 - MiniMax M3 — 510 di input, 56.000 in cache, 190 token di output per richiesta
@@ -164,7 +164,7 @@ Puoi anche accedere ai modelli Go tramite i seguenti endpoint API.
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/ja/go.mdx

@@ -98,7 +98,7 @@ OpenCode Goには以下の制限が含まれています：
 推定値は、観測された平均的なリクエストパターンに基づいています：
 
 - GLM-5.2/5.1 — リクエストあたり 入力 700トークン、キャッシュ 52,000トークン、出力 150トークン
-- Kimi K2.7/K2.6 — リクエストあたり 入力 870トークン、キャッシュ 55,000トークン、出力 200トークン
+- Kimi K2.7 Code/K2.6 — リクエストあたり 入力 870トークン、キャッシュ 55,000トークン、出力 200トークン
 - DeepSeek V4 Pro — リクエストあたり 入力 750トークン、キャッシュ 82,000トークン、出力 290トークン
 - DeepSeek V4 Flash — リクエストあたり 入力 790トークン、キャッシュ 68,000トークン、出力 280トークン
 - MiniMax M3 — リクエストあたり 入力 510トークン、キャッシュ 56,000トークン、出力 190トークン
@@ -154,7 +154,7 @@ Zen残高にクレジットがある場合は、コンソールで**Use balance*
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/ko/go.mdx

@@ -98,7 +98,7 @@ OpenCode Go에는 다음과 같은 한도가 포함됩니다.
 이 예상치는 관찰된 평균 요청 패턴을 기준으로 합니다.
 
 - GLM-5.2/5.1 — 요청당 입력 700, 캐시 52,000, 출력 토큰 150
-- Kimi K2.7/K2.6 — 요청당 입력 870, 캐시 55,000, 출력 토큰 200
+- Kimi K2.7 Code/K2.6 — 요청당 입력 870, 캐시 55,000, 출력 토큰 200
 - DeepSeek V4 Pro — 요청당 입력 750, 캐시 82,000, 출력 토큰 290
 - DeepSeek V4 Flash — 요청당 입력 790, 캐시 68,000, 출력 토큰 280
 - MiniMax M3 — 요청당 입력 510, 캐시 56,000, 출력 토큰 190
@@ -154,7 +154,7 @@ Zen 잔액에 크레딧도 있다면, console에서 **Use balance** 옵션을
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/nb/go.mdx

@@ -108,7 +108,7 @@ Tabellen nedenfor gir et estimert antall forespørsler basert på typiske bruksm
 Estimatene er basert på observerte gjennomsnittlige forespørselsmønstre:
 
 - GLM-5.2/5.1 — 700 input, 52 000 bufret, 150 output-tokens per forespørsel
-- Kimi K2.7/K2.6 — 870 input, 55 000 bufret, 200 output-tokens per forespørsel
+- Kimi K2.7 Code/K2.6 — 870 input, 55 000 bufret, 200 output-tokens per forespørsel
 - DeepSeek V4 Pro — 750 input, 82 000 bufret, 290 output-tokens per forespørsel
 - DeepSeek V4 Flash — 790 input, 68 000 bufret, 280 output-tokens per forespørsel
 - MiniMax M3 — 510 input, 56 000 bufret, 190 output-tokens per forespørsel
@@ -166,7 +166,7 @@ Du kan også få tilgang til Go-modeller gjennom følgende API-endepunkter.
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/pl/go.mdx

@@ -102,7 +102,7 @@ Poniższa tabela przedstawia szacunkową liczbę żądań na podstawie typowych
 Szacunki te opierają się na zaobserwowanych średnich wzorcach żądań:
 
 - GLM-5.2/5.1 — 700 tokenów wejściowych, 52 000 w pamięci podręcznej, 150 tokenów wyjściowych na żądanie
-- Kimi K2.7/K2.6 — 870 tokenów wejściowych, 55 000 w pamięci podręcznej, 200 tokenów wyjściowych na żądanie
+- Kimi K2.7 Code/K2.6 — 870 tokenów wejściowych, 55 000 w pamięci podręcznej, 200 tokenów wyjściowych na żądanie
 - DeepSeek V4 Pro — 750 tokenów wejściowych, 82 000 w pamięci podręcznej, 290 tokenów wyjściowych na żądanie
 - DeepSeek V4 Flash — 790 tokenów wejściowych, 68 000 w pamięci podręcznej, 280 tokenów wyjściowych na żądanie
 - MiniMax M3 — 510 tokenów wejściowych, 56 000 w pamięci podręcznej, 190 tokenów wyjściowych na żądanie
@@ -158,7 +158,7 @@ Możesz również uzyskać dostęp do modeli Go za pośrednictwem następującyc
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/pt-br/go.mdx

@@ -108,7 +108,7 @@ A tabela abaixo fornece uma contagem estimada de requisições com base nos padr
 As estimativas se baseiam nos padrões médios de requisições observados:
 
 - GLM-5.2/5.1 — 700 tokens de entrada, 52.000 em cache, 150 tokens de saída por requisição
-- Kimi K2.7/K2.6 — 870 tokens de entrada, 55.000 em cache, 200 tokens de saída por requisição
+- Kimi K2.7 Code/K2.6 — 870 tokens de entrada, 55.000 em cache, 200 tokens de saída por requisição
 - DeepSeek V4 Pro — 750 tokens de entrada, 82.000 em cache, 290 tokens de saída por requisição
 - DeepSeek V4 Flash — 790 tokens de entrada, 68.000 em cache, 280 tokens de saída por requisição
 - MiniMax M3 — 510 tokens de entrada, 56.000 em cache, 190 tokens de saída por requisição
@@ -166,7 +166,7 @@ Você também pode acessar os modelos do Go através dos seguintes endpoints de
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/ru/go.mdx

@@ -108,7 +108,7 @@ OpenCode Go включает следующие лимиты:
 Эти оценки основаны на наблюдаемых средних показателях запросов:
 
 - GLM-5.2/5.1 — 700 входных, 52,000 кешированных, 150 выходных токенов на запрос
-- Kimi K2.7/K2.6 — 870 входных, 55,000 кешированных, 200 выходных токенов на запрос
+- Kimi K2.7 Code/K2.6 — 870 входных, 55,000 кешированных, 200 выходных токенов на запрос
 - DeepSeek V4 Pro — 750 входных, 82,000 кешированных, 290 выходных токенов на запрос
 - DeepSeek V4 Flash — 790 входных, 68,000 кешированных, 280 выходных токенов на запрос
 - MiniMax M3 — 510 входных, 56,000 кешированных, 190 выходных токенов на запрос
@@ -166,7 +166,7 @@ OpenCode Go включает следующие лимиты:
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/th/go.mdx

@@ -98,7 +98,7 @@ OpenCode Go มีขีดจำกัดดังต่อไปนี้:
 การประมาณการนี้อ้างอิงจากรูปแบบการใช้งาน request โดยเฉลี่ยที่สังเกตพบ:
 
 - GLM-5.2/5.1 — 700 input, 52,000 cached, 150 output tokens ต่อ request
-- Kimi K2.7/K2.6 — 870 input, 55,000 cached, 200 output tokens ต่อ request
+- Kimi K2.7 Code/K2.6 — 870 input, 55,000 cached, 200 output tokens ต่อ request
 - DeepSeek V4 Pro — 750 input, 82,000 cached, 290 output tokens ต่อ request
 - DeepSeek V4 Flash — 790 input, 68,000 cached, 280 output tokens ต่อ request
 - MiniMax M3 — 510 input, 56,000 cached, 190 output tokens ต่อ request
@@ -154,7 +154,7 @@ OpenCode Go มีขีดจำกัดดังต่อไปนี้:
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/tr/go.mdx

@@ -98,7 +98,7 @@ Aşağıdaki tablo, tipik Go kullanım modellerine dayalı tahmini bir istek say
 Tahminler, gözlemlenen ortalama istek modellerine dayanır:
 
 - GLM-5.2/5.1 — İstek başına 700 girdi, 52.000 önbelleğe alınmış, 150 çıktı token'ı
-- Kimi K2.7/K2.6 — İstek başına 870 girdi, 55.000 önbelleğe alınmış, 200 çıktı token'ı
+- Kimi K2.7 Code/K2.6 — İstek başına 870 girdi, 55.000 önbelleğe alınmış, 200 çıktı token'ı
 - DeepSeek V4 Pro — İstek başına 750 girdi, 82.000 önbelleğe alınmış, 290 çıktı token'ı
 - DeepSeek V4 Flash — İstek başına 790 girdi, 68.000 önbelleğe alınmış, 280 çıktı token'ı
 - MiniMax M3 — İstek başına 510 girdi, 56.000 önbelleğe alınmış, 190 çıktı token'ı
@@ -154,7 +154,7 @@ Go modellerine aşağıdaki API uç noktaları aracılığıyla da erişebilirsi
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/zh-cn/go.mdx

@@ -98,7 +98,7 @@ OpenCode Go 包含以下限制：
 预估值基于观察到的平均请求模式：
 
 - GLM-5.2/5.1 — 每次请求 700 个输入 token，52,000 个缓存 token，150 个输出 token
-- Kimi K2.7/K2.6 — 每次请求 870 个输入 token，55,000 个缓存 token，200 个输出 token
+- Kimi K2.7 Code/K2.6 — 每次请求 870 个输入 token，55,000 个缓存 token，200 个输出 token
 - DeepSeek V4 Pro — 每次请求 750 个输入 token，82,000 个缓存 token，290 个输出 token
 - DeepSeek V4 Flash — 每次请求 790 个输入 token，68,000 个缓存 token，280 个输出 token
 - MiMo-V2.5 — 每次请求 830 个输入 token，71,500 个缓存 token，295 个输出 token
@@ -154,7 +154,7 @@ OpenCode Go 包含以下限制：
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |

packages/web/src/content/docs/zh-tw/go.mdx

@@ -98,7 +98,7 @@ OpenCode Go 包含以下限制：
 這些預估值是基於觀察到的平均請求模式：
 
 - GLM-5.2/5.1 — 每次請求 700 個輸入 token、52,000 個快取 token、150 個輸出 token
-- Kimi K2.7/K2.6 — 每次請求 870 個輸入 token、55,000 個快取 token、200 個輸出 token
+- Kimi K2.7 Code/K2.6 — 每次請求 870 個輸入 token、55,000 個快取 token、200 個輸出 token
 - DeepSeek V4 Pro — 每次請求 750 個輸入 token、82,000 個快取 token、290 個輸出 token
 - DeepSeek V4 Flash — 每次請求 790 個輸入 token、68,000 個快取 token、280 個輸出 token
 - MiniMax M3 — 每次請求 510 個輸入 token、56,000 個快取 token、190 個輸出 token
@@ -154,7 +154,7 @@ OpenCode Go 包含以下限制：
 | ----------------- | ----------------- | ------------------------------------------------ | --------------------------- |
 | GLM-5.2           | glm-5.2           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | GLM-5.1           | glm-5.1           | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
-| Kimi K2.7         | kimi-k2.7         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
+| Kimi K2.7 Code    | kimi-k2.7-code    | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | Kimi K2.6         | kimi-k2.6         | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Pro   | deepseek-v4-pro   | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |
 | DeepSeek V4 Flash | deepseek-v4-flash | `https://opencode.ai/zen/go/v1/chat/completions` | `@ai-sdk/openai-compatible` |