chore: cleanup

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

@@ -26,6 +26,7 @@ import type { IconName } from "@opencode-ai/ui/icons/provider"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Select } from "@opencode-ai/ui/select"
+import { RadioGroup } from "@opencode-ai/ui/radio-group"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ModelSelectorPopover } from "@/components/dialog-select-model"
 import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid"
@@ -1059,7 +1060,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           removeLabel={language.t("prompt.attachment.remove")}
         />
         <div
-          class="relative max-h-[240px] overflow-y-auto"
+          class="relative max-h-[240px] overflow-y-auto no-scrollbar"
           ref={(el) => (scrollRef = el)}
           onMouseDown={(e) => {
             const target = e.target
@@ -1094,7 +1095,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             onKeyDown={handleKeyDown}
             classList={{
               "select-text": true,
-              "w-full pl-3 pr-2 pt-2 pb-12 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
+              "w-full pl-3 pr-2 pt-2 pb-12 text-14-regular leading-[var(--line-height-large)] text-text-strong focus:outline-none whitespace-pre-wrap": true,
               "[&_[data-type=file]]:text-syntax-property": true,
               "[&_[data-type=agent]]:text-syntax-type": true,
               "font-mono!": store.mode === "shell",
@@ -1102,123 +1103,123 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           />
           <Show when={!prompt.dirty()}>
             <div
-              class="absolute top-0 inset-x-0 pl-3 pr-2 pt-2 pb-12 text-14-regular text-text-weak pointer-events-none whitespace-nowrap truncate"
+              class="absolute top-0 inset-x-0 pl-3 pr-2 pt-2 pb-12 text-14-regular leading-[var(--line-height-large)] text-text-weak pointer-events-none whitespace-nowrap truncate"
               classList={{ "font-mono!": store.mode === "shell" }}
             >
               {placeholder()}
             </div>
           </Show>
+        </div>
 
-          <div class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-2">
+        <div class="pointer-events-none absolute bottom-2 right-2 flex items-center gap-2">
-            <input
+          <input
-              ref={fileInputRef}
+            ref={fileInputRef}
-              type="file"
+            type="file"
-              accept={ACCEPTED_FILE_TYPES.join(",")}
+            accept={ACCEPTED_FILE_TYPES.join(",")}
-              class="hidden"
+            class="hidden"
-              onChange={(e) => {
+            onChange={(e) => {
-                const file = e.currentTarget.files?.[0]
+              const file = e.currentTarget.files?.[0]
-                if (file) addImageAttachment(file)
+              if (file) addImageAttachment(file)
-                e.currentTarget.value = ""
+              e.currentTarget.value = ""
-              }}
+            }}
-            />
+          />
 
-            <div
+          <div
-              aria-hidden={store.mode !== "normal"}
+            aria-hidden={store.mode !== "normal"}
-              class="flex items-center gap-1 transition-all duration-200 ease-out"
+            class="flex items-center gap-1 transition-all duration-200 ease-out"
-              classList={{
+            classList={{
-                "opacity-100 translate-y-0 scale-100 pointer-events-auto": store.mode === "normal",
+              "opacity-100 translate-y-0 scale-100 pointer-events-auto": store.mode === "normal",
-                "opacity-0 translate-y-2 scale-95 pointer-events-none": store.mode !== "normal",
+              "opacity-0 translate-y-2 scale-95 pointer-events-none": store.mode !== "normal",
-              }}
+            }}
+          >
+            <TooltipKeybind
+              placement="top"
+              title={language.t("prompt.action.attachFile")}
+              keybind={command.keybind("file.attach")}
             >
+              <Button
+                data-action="prompt-attach"
+                type="button"
+                variant="ghost"
+                class="size-8 p-0"
+                onClick={pick}
+                disabled={store.mode !== "normal"}
+                tabIndex={store.mode === "normal" ? undefined : -1}
+                aria-label={language.t("prompt.action.attachFile")}
+              >
+                <Icon name="plus" class="size-4.5" />
+              </Button>
+            </TooltipKeybind>
+
+            <Tooltip
+              placement="top"
+              inactive={!prompt.dirty() && !working()}
+              value={
+                <Switch>
+                  <Match when={working()}>
+                    <div class="flex items-center gap-2">
+                      <span>{language.t("prompt.action.stop")}</span>
+                      <span class="text-icon-base text-12-medium text-[10px]!">{language.t("common.key.esc")}</span>
+                    </div>
+                  </Match>
+                  <Match when={true}>
+                    <div class="flex items-center gap-2">
+                      <span>{language.t("prompt.action.send")}</span>
+                      <Icon name="enter" size="small" class="text-icon-base" />
+                    </div>
+                  </Match>
+                </Switch>
+              }
+            >
+              <IconButton
+                data-action="prompt-submit"
+                type="submit"
+                disabled={store.mode !== "normal" || (!prompt.dirty() && !working() && commentCount() === 0)}
+                tabIndex={store.mode === "normal" ? undefined : -1}
+                icon={working() ? "stop" : "arrow-up"}
+                variant="primary"
+                class="size-8"
+                aria-label={working() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
+              />
+            </Tooltip>
+          </div>
+        </div>
+
+        <Show when={store.mode === "normal" && permission.permissionsEnabled() && params.id}>
+          <div class="pointer-events-none absolute bottom-2 left-2">
+            <div class="pointer-events-auto">
               <TooltipKeybind
                 placement="top"
-                title={language.t("prompt.action.attachFile")}
+                gutter={8}
-                keybind={command.keybind("file.attach")}
+                title={language.t("command.permissions.autoaccept.enable")}
+                keybind={command.keybind("permissions.autoaccept")}
               >
                 <Button
-                  data-action="prompt-attach"
+                  data-action="prompt-permissions"
-                  type="button"
                   variant="ghost"
-                  class="size-8 p-0"
+                  onClick={() => permission.toggleAutoAccept(params.id!, sdk.directory)}
-                  onClick={pick}
+                  classList={{
-                  disabled={store.mode !== "normal"}
+                    "_hidden group-hover/prompt-input:flex size-6 items-center justify-center": true,
-                  tabIndex={store.mode === "normal" ? undefined : -1}
+                    "text-text-base": !permission.isAutoAccepting(params.id!, sdk.directory),
-                  aria-label={language.t("prompt.action.attachFile")}
+                    "hover:bg-surface-success-base": permission.isAutoAccepting(params.id!, sdk.directory),
+                  }}
+                  aria-label={
+                    permission.isAutoAccepting(params.id!, sdk.directory)
+                      ? language.t("command.permissions.autoaccept.disable")
+                      : language.t("command.permissions.autoaccept.enable")
+                  }
+                  aria-pressed={permission.isAutoAccepting(params.id!, sdk.directory)}
                 >
-                  <Icon name="plus" class="size-4.5" />
+                  <Icon
+                    name="chevron-double-right"
+                    size="small"
+                    classList={{ "text-icon-success-base": permission.isAutoAccepting(params.id!, sdk.directory) }}
+                  />
                 </Button>
               </TooltipKeybind>
-
-              <Tooltip
-                placement="top"
-                inactive={!prompt.dirty() && !working()}
-                value={
-                  <Switch>
-                    <Match when={working()}>
-                      <div class="flex items-center gap-2">
-                        <span>{language.t("prompt.action.stop")}</span>
-                        <span class="text-icon-base text-12-medium text-[10px]!">{language.t("common.key.esc")}</span>
-                      </div>
-                    </Match>
-                    <Match when={true}>
-                      <div class="flex items-center gap-2">
-                        <span>{language.t("prompt.action.send")}</span>
-                        <Icon name="enter" size="small" class="text-icon-base" />
-                      </div>
-                    </Match>
-                  </Switch>
-                }
-              >
-                <IconButton
-                  data-action="prompt-submit"
-                  type="submit"
-                  disabled={store.mode !== "normal" || (!prompt.dirty() && !working() && commentCount() === 0)}
-                  tabIndex={store.mode === "normal" ? undefined : -1}
-                  icon={working() ? "stop" : "arrow-up"}
-                  variant="primary"
-                  class="size-8"
-                  aria-label={working() ? language.t("prompt.action.stop") : language.t("prompt.action.send")}
-                />
-              </Tooltip>
             </div>
           </div>
-
+        </Show>
-          <Show when={store.mode === "normal" && permission.permissionsEnabled() && params.id}>
-            <div class="pointer-events-none absolute bottom-2 left-2">
-              <div class="pointer-events-auto">
-                <TooltipKeybind
-                  placement="top"
-                  gutter={8}
-                  title={language.t("command.permissions.autoaccept.enable")}
-                  keybind={command.keybind("permissions.autoaccept")}
-                >
-                  <Button
-                    data-action="prompt-permissions"
-                    variant="ghost"
-                    onClick={() => permission.toggleAutoAccept(params.id!, sdk.directory)}
-                    classList={{
-                      "_hidden group-hover/prompt-input:flex size-6 items-center justify-center": true,
-                      "text-text-base": !permission.isAutoAccepting(params.id!, sdk.directory),
-                      "hover:bg-surface-success-base": permission.isAutoAccepting(params.id!, sdk.directory),
-                    }}
-                    aria-label={
-                      permission.isAutoAccepting(params.id!, sdk.directory)
-                        ? language.t("command.permissions.autoaccept.disable")
-                        : language.t("command.permissions.autoaccept.enable")
-                    }
-                    aria-pressed={permission.isAutoAccepting(params.id!, sdk.directory)}
-                  >
-                    <Icon
-                      name="chevron-double-right"
-                      size="small"
-                      classList={{ "text-icon-success-base": permission.isAutoAccepting(params.id!, sdk.directory) }}
-                    />
-                  </Button>
-                </TooltipKeybind>
-              </div>
-            </div>
-          </Show>
-        </div>
       </form>
       <Show when={store.mode === "normal" || store.mode === "shell"}>
         <div class="-mt-3.5 bg-background-base border border-border-weak-base relative z-0 rounded-[12px] rounded-tl-0 rounded-tr-0 overflow-clip">
@@ -1332,56 +1333,26 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             </div>
 
             <div class="shrink-0">
-              <div
+              <div data-component="prompt-mode-toggle">
-                data-component="prompt-mode-toggle"
+                <RadioGroup
-                class="relative h-7 w-[68px] rounded-[4px] bg-surface-inset-base border border-[0.5px] border-border-weak-base p-0 flex items-center gap-1 overflow-visible"
+                  options={["shell", "normal"] as const}
-              >
+                  current={store.mode}
-                <div
+                  onSelect={(mode) => mode && setMode(mode)}
-                  class="absolute inset-y-0 left-0 w-[calc((100%-4px)/2)] rounded-[4px] bg-surface-raised-stronger-non-alpha shadow-[var(--shadow-xs-border)] transition-transform duration-200 ease-out will-change-transform"
+                  label={(mode) => (
-                  style={{
+                    <div class="flex size-full items-center justify-center">
-                    transform: store.mode === "shell" ? "translateX(0px)" : "translateX(calc(100% + 4px))",
+                      <Icon
-                  }}
+                        name={mode === "shell" ? "console" : "prompt"}
+                        class="size-[18px]"
+                        classList={{
+                          "text-icon-strong-base": mode === "shell" && store.mode === "shell",
+                          "text-icon-interactive-base": mode === "normal" && store.mode === "normal",
+                          "text-icon-weak": store.mode !== mode,
+                        }}
+                      />
+                      <span class="sr-only">{mode === "shell" ? language.t("prompt.mode.shell") : mode}</span>
+                    </div>
+                  )}
                 />
-                <button
-                  type="button"
-                  class="relative z-10 flex-1 h-full p-0.5 flex items-center justify-center"
-                  aria-pressed={store.mode === "shell"}
-                  onClick={() => setMode("shell")}
-                >
-                  <div
-                    class="w-full h-full flex items-center justify-center rounded-[2px] transition-colors hover:bg-surface-inset-base"
-                    classList={{ "hover:bg-transparent": store.mode === "shell" }}
-                  >
-                    <Icon
-                      name="console"
-                      class="size-[18px]"
-                      classList={{
-                        "text-icon-strong-base": store.mode === "shell",
-                        "text-icon-weak": store.mode !== "shell",
-                      }}
-                    />
-                  </div>
-                </button>
-                <button
-                  type="button"
-                  class="relative z-10 flex-1 h-full p-0.5 flex items-center justify-center"
-                  aria-pressed={store.mode === "normal"}
-                  onClick={() => setMode("normal")}
-                >
-                  <div
-                    class="w-full h-full flex items-center justify-center rounded-[2px] transition-colors hover:bg-surface-inset-base"
-                    classList={{ "hover:bg-transparent": store.mode === "normal" }}
-                  >
-                    <Icon
-                      name="prompt"
-                      class="size-[18px]"
-                      classList={{
-                        "text-icon-interactive-base": store.mode === "normal",
-                        "text-icon-weak": store.mode !== "normal",
-                      }}
-                    />
-                  </div>
-                </button>
               </div>
             </div>
           </div>

packages/ui/src/components/radio-group.css

@@ -1,15 +1,30 @@
 [data-component="radio-group"] {
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   gap: calc(var(--spacing) * 2);
+  width: fit-content;
+
+  --radio-group-padding: 2px;
+  --radio-group-gap: 2px;
+  --radio-group-radius: var(--radius-sm);
+  --radio-group-transition-duration: 200ms;
+  --radio-group-border-width: 0.5px;
+  --radio-group-border-color: var(--border-weak-base);
+  --radio-group-bg: var(--surface-inset-base);
+  --radio-group-indicator-bg: var(--surface-raised-stronger-non-alpha);
+  --radio-group-indicator-shadow: var(--shadow-xs-border);
 
   [data-slot="radio-group-wrapper"] {
     all: unset;
-    background-color: var(--surface-base);
+    background-color: var(--radio-group-bg);
-    border-radius: var(--radius-md);
+    border: var(--radio-group-border-width) solid var(--radio-group-border-color);
+    border-radius: var(--radio-group-radius);
     box-shadow: var(--shadow-xs-border);
+    box-sizing: border-box;
+    display: inline-flex;
+    overflow: clip;
     margin: 0;
-    padding: 0;
+    padding: var(--radio-group-padding);
     position: relative;
     width: fit-content;
   }
@@ -18,63 +33,55 @@
     display: inline-flex;
     list-style: none;
     flex-direction: row;
+    gap: var(--radio-group-gap);
+    position: relative;
+    z-index: 1;
   }
 
   [data-slot="radio-group-indicator"] {
-    background: var(--button-secondary-base);
+    background: var(--radio-group-indicator-bg);
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radio-group-radius) - var(--radio-group-padding));
-    box-shadow: var(--shadow-xs-border);
+    box-shadow: var(--radio-group-indicator-shadow);
     content: "";
     opacity: var(--indicator-opacity, 1);
     position: absolute;
     transition:
-      opacity 300ms ease-in-out,
+      opacity var(--radio-group-transition-duration) ease-out,
-      box-shadow 100ms ease-in-out,
+      box-shadow 120ms ease-out,
-      width 150ms ease,
+      width var(--radio-group-transition-duration) ease-out,
-      height 150ms ease,
+      height var(--radio-group-transition-duration) ease-out,
-      transform 150ms ease;
+      transform var(--radio-group-transition-duration) ease-out,
+      translate var(--radio-group-transition-duration) ease-out,
+      left var(--radio-group-transition-duration) ease-out,
+      top var(--radio-group-transition-duration) ease-out;
+    will-change: transform, width, height;
   }
 
   [data-slot="radio-group-item"] {
     position: relative;
   }
 
-  /* Separator between items */
-  [data-slot="radio-group-item"]:not(:first-of-type)::before {
-    background: var(--border-weak-base);
-    border-radius: var(--radius-xs);
-    content: "";
-    inset: 6px 0;
-    position: absolute;
-    transition: opacity 150ms ease;
-    width: 1px;
-    transform: translateX(-0.5px);
-  }
-
-  /* Hide separator when item or previous item is checked */
-  [data-slot="radio-group-item"]:has([data-slot="radio-group-item-input"][data-checked])::before,
-  [data-slot="radio-group-item"]:has([data-slot="radio-group-item-input"][data-checked])
-    + [data-slot="radio-group-item"]::before {
-    opacity: 0;
-  }
-
   [data-slot="radio-group-item-label"] {
     color: var(--text-weak);
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-medium);
-    border-radius: var(--radius-md);
+    border-radius: calc(var(--radio-group-radius) - var(--radio-group-padding) - 1px);
     cursor: pointer;
-    display: flex;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     flex-wrap: nowrap;
     gap: calc(var(--spacing) * 1);
     line-height: 1;
-    padding: 6px 12px;
+    min-height: 24px;
+    padding: 5px 10px;
     place-content: center;
     position: relative;
-    transition-duration: 150ms;
+    transition:
-    transition-property: color, opacity;
+      color 150ms ease-out,
-    transition-timing-function: ease-in-out;
+      background-color 150ms ease-out,
+      opacity 150ms ease-out;
     user-select: none;
   }
 
@@ -101,6 +108,7 @@
 
   [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
     + [data-slot="radio-group-item-label"]:hover {
+    background-color: var(--surface-inset-base-hover);
     color: var(--text-base);
   }
 
@@ -112,7 +120,7 @@
   /* Focus state */
   [data-slot="radio-group-wrapper"]:has([data-slot="radio-group-item-input"]:focus-visible)
     [data-slot="radio-group-indicator"] {
-    box-shadow: var(--shadow-xs-border-focus);
+    box-shadow: var(--shadow-xs-border-focus), var(--radio-group-indicator-shadow);
   }
 
   /* Hide indicator when nothing is checked */
@@ -126,27 +134,16 @@
     flex-direction: column;
   }
 
-  &[aria-orientation="vertical"] [data-slot="radio-group-item"]:not(:first-of-type)::before {
-    height: 1px;
-    width: auto;
-    inset: 0 6px;
-    transform: translateY(-0.5px);
-  }
-
   /* Small size variant */
   &[data-size="small"] {
+    --radio-group-padding: 1px;
+    --radio-group-gap: 1px;
+
     [data-slot="radio-group-item-label"] {
       font-size: 12px;
+      min-height: 20px;
       padding: 4px 8px;
     }
-
-    [data-slot="radio-group-item"]:not(:first-of-type)::before {
-      inset: 4px 0;
-    }
-
-    &[aria-orientation="vertical"] [data-slot="radio-group-item"]:not(:first-of-type)::before {
-      inset: 0 4px;
-    }
   }
 
   /* Disabled root state */
@@ -155,3 +152,46 @@
     cursor: not-allowed;
   }
 }
+
+[data-component="prompt-mode-toggle"] [data-component="radio-group"] {
+  width: 68px;
+
+  --radio-group-padding: 0;
+  --radio-group-gap: 4px;
+  --radio-group-radius: 4px;
+
+  [data-slot="radio-group-wrapper"] {
+    height: 28px;
+    width: 100%;
+    box-shadow: none;
+    overflow: visible;
+  }
+
+  [data-slot="radio-group-items"] {
+    height: 100%;
+  }
+
+  [data-slot="radio-group-item"] {
+    display: flex;
+    flex: 1 1 0%;
+    height: 100%;
+    padding: 2px;
+  }
+
+  [data-slot="radio-group-item-label"] {
+    height: 100%;
+    min-height: 100%;
+    padding: 0;
+    border-radius: 2px;
+    width: 100%;
+  }
+
+  [data-slot="radio-group-indicator"] {
+    border-radius: 4px;
+  }
+
+  [data-slot="radio-group-item-input"]:not([data-checked], [data-disabled])
+    + [data-slot="radio-group-item-label"]:hover {
+    background-color: var(--surface-inset-base);
+  }
+}

packages/ui/src/pierre/virtualizer.ts

@@ -19,12 +19,35 @@ export const virtualMetrics: Partial<VirtualFileMetrics> = {
   fileGap: 0,
 }
 
+function scrollable(value: string) {
+  return value === "auto" || value === "scroll" || value === "overlay"
+}
+
+function scrollRoot(container: HTMLElement) {
+  let node = container.parentElement
+  while (node) {
+    const style = getComputedStyle(node)
+    if (scrollable(style.overflowY)) return node
+    node = node.parentElement
+  }
+}
+
 function target(container: HTMLElement): Target | undefined {
   if (typeof document === "undefined") return
 
-  const root = container.closest("[data-component='session-review']")
+  const review = container.closest("[data-component='session-review']")
-  if (root instanceof HTMLElement) {
+  if (review instanceof HTMLElement) {
-    const content = root.querySelector("[data-slot='session-review-container']")
+    const content = review.querySelector("[data-slot='session-review-container']")
+    return {
+      key: review,
+      root: review,
+      content: content instanceof HTMLElement ? content : undefined,
+    }
+  }
+
+  const root = scrollRoot(container)
+  if (root) {
+    const content = root.querySelector("[role='log']")
     return {
       key: root,
       root,