feat: small transitions, spacing, polishing

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

@@ -1557,7 +1557,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           </Show>
         </div>
         <div class="relative p-3 flex items-center justify-between">
-          <div class="flex items-center justify-start gap-0.5">
+          <div class="flex items-center justify-start gap-1">
             <Switch>
               <Match when={store.mode === "shell"}>
                 <div class="flex items-center gap-2 px-2 h-6">
@@ -1608,13 +1608,60 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     title="Thinking effort"
                     keybind={command.keybind("model.variant.cycle")}
                   >
-                    <Button
-                      variant="ghost"
-                      class="text-text-base _hidden group-hover/prompt-input:inline-block capitalize text-12-regular"
-                      onClick={() => local.model.variant.cycle()}
-                    >
-                      {local.model.variant.current() ?? "Default"}
-                    </Button>
+                    {(() => {
+                      const [text, setText] = createSignal(local.model.variant.current() ?? "Default")
+                      const [animating, setAnimating] = createSignal(false)
+                      let locked = false
+
+                      const handleClick = async () => {
+                        if (locked) return
+
+                        local.model.variant.cycle()
+                        const newText = local.model.variant.current() ?? "Default"
+
+                        if (newText === text()) return
+
+                        locked = true
+                        setAnimating(true)
+
+                        // Wait for exit animation
+                        const charCount = text().length
+                        await new Promise((r) => setTimeout(r, charCount * 40 + 400))
+
+                        // Reset animating before setting new text so @starting-style works
+                        setAnimating(false)
+                        setText(newText)
+
+                        // Wait for enter animation
+                        const newCharCount = newText.length
+                        await new Promise((r) => setTimeout(r, newCharCount * 40 + 400))
+
+                        locked = false
+                      }
+
+                      return (
+                        <Button
+                          variant="ghost"
+                          class="text-text-base _hidden text-12-regular"
+                          onClick={handleClick}
+                        >
+                          <span data-slot="cycle-text" data-animating={animating()}>
+                            <For each={text().split("")}>
+                              {(char, i) =>
+                                char === " " ? (
+                                  <span data-slot="space" />
+                                ) : (
+                                  <span data-slot="char" style={{ "--i": i() }}>
+                                    {i() === 0 ? char.toUpperCase() : char}
+                                  </span>
+                                )
+                              }
+                            </For>
+                          </span>
+                          <Icon name="chevron-down" size="small" />
+                        </Button>
+                      )
+                    })()}
                   </TooltipKeybind>
                 </Show>
                 <Show when={permission.permissionsEnabled() && params.id}>

packages/app/src/pages/layout.tsx

@@ -34,7 +34,7 @@ import { DiffChanges } from "@opencode-ai/ui/diff-changes"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { getFilename } from "@opencode-ai/util/path"
-import { Session, type Message, type TextPart } from "@opencode-ai/sdk/v2/client"
+import { Session, type Message, type TextPart, UserMessage } from "@opencode-ai/sdk/v2/client"
 import { usePlatform } from "@/context/platform"
 import { createStore, produce, reconcile } from "solid-js/store"
 import {
@@ -1352,7 +1352,7 @@ export default function Layout(props: ParentProps) {
     })
 
     const hoverMessages = createMemo(() =>
-      sessionStore.message[props.session.id]?.filter((message) => message.role === "user"),
+      sessionStore.message[props.session.id]?.filter((message) => message.role === "user") as UserMessage[],
     )
     const hoverReady = createMemo(() => sessionStore.message[props.session.id] !== undefined)
     const hoverAllowed = createMemo(() => !props.mobile && layout.sidebar.opened())
@@ -1425,8 +1425,8 @@ export default function Layout(props: ParentProps) {
             </Tooltip>
           }
         >
-          <HoverCard openDelay={150} closeDelay={100} placement="right" gutter={12} trigger={item}>
-            <Show when={hoverReady()} fallback={<div class="text-12-regular text-text-weak">Loading messages…</div>}>
+          <HoverCard openDelay={150} closeDelay={100} placement="right" gutter={28} trigger={item}>
+            <Show when={hoverReady()} fallback={<div>Loading messages…</div>}>
               <MessageNav
                 messages={hoverMessages() ?? []}
                 current={undefined}
@@ -1822,7 +1822,7 @@ export default function Layout(props: ParentProps) {
         class="size-full flex flex-col py-2 overflow-y-auto no-scrollbar"
         style={{ "overflow-anchor": "none" }}
       >
-        <nav class="flex flex-col gap-1 px-2">
+        <nav class="flex flex-col gap-2 px-2">
           <Show when={loading()}>
             <SessionSkeleton />
           </Show>

packages/app/src/pages/session.tsx

@@ -1180,7 +1180,7 @@ export default function Page() {
                           if (isDesktop()) scheduleScrollSpy(e.currentTarget)
                         }}
                         onClick={autoScroll.handleInteraction}
-                        class="relative min-w-0 w-full h-full overflow-y-auto no-scrollbar snap-y snap-mandatory"
+                        class="relative min-w-0 w-full h-full overflow-y-auto no-scrollbar snap-both snap-mandatory"
                         style={{ "--session-title-height": info()?.title ? "40px" : "0px" }}
                       >
                         <Show when={info()?.title}>
@@ -1252,7 +1252,7 @@ export default function Page() {
                                   id={anchor(message.id)}
                                   data-message-id={message.id}
                                   classList={{
-                                    "min-w-0 w-full max-w-full snap-start": true,
+                                    "min-w-0 w-full max-w-full snap-both": true,
                                     "md:max-w-200": !showTabs(),
                                     "last:min-h-[calc(100vh-5.5rem-var(--prompt-height,8rem)-64px)] md:last:min-h-[calc(100vh-4.5rem-var(--prompt-height,10rem)-64px)]":
                                       platform.platform !== "desktop",

packages/ui/src/components/button.css

@@ -9,6 +9,7 @@
   user-select: none;
   cursor: default;
   outline: none;
+  padding: 4px 8px;
   white-space: nowrap;
   transition-property: background-color, border-color, color, box-shadow;
   transition-duration: 200ms;
@@ -105,19 +106,15 @@
   }
 
   &[data-size="small"] {
-    height: 22px;
-    padding: 0 8px;
+    padding: 2px 10px;
     &[data-icon] {
       padding: 0 12px 0 4px;
     }
-
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-large);
     gap: 4px;
 
     /* text-12-medium */
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
+    font-size: var(--font-size-base);
     font-style: normal;
     font-weight: var(--font-weight-medium);
     line-height: var(--line-height-large); /* 166.667% */
@@ -166,3 +163,39 @@
     outline: none;
   }
 }
+
+[data-slot="cycle-text"] {
+  display: inline-flex;
+  perspective: 400px;
+  overflow: hidden;
+
+  [data-slot="char"] {
+    display: inline-block;
+    transform-style: preserve-3d;
+    transform-origin: 50% 100%;
+    transform: rotateX(0deg);
+    opacity: 1;
+    transition:
+      transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: calc(var(--i, 0) * 40ms);
+
+    /* Entry animation using @starting-style */
+    @starting-style {
+      transform: rotateX(90deg);
+      opacity: 0;
+    }
+  }
+
+  /* Exit animation when animating */
+  &[data-animating="true"] [data-slot="char"] {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+
+  /* Preserve spaces */
+  [data-slot="space"] {
+    display: inline-block;
+    width: 0.25em;
+  }
+}

packages/ui/src/components/message-nav.css

@@ -2,13 +2,14 @@
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
+  gap: 12px;
   align-items: flex-start;
-  padding-left: 0;
+  padding: 0;
   list-style: none;
 
   &[data-size="normal"] {
     width: 240px;
-    gap: 4px;
+    gap: 8px;
   }
 
   &[data-size="compact"] {
@@ -36,6 +37,7 @@
   border: none;
   background: none;
   padding: 0;
+  margin: 0;
 
   &[data-active] [data-slot="message-nav-tick-line"] {
     background-color: var(--icon-strong-base);
@@ -54,7 +56,8 @@
 
 [data-slot="message-nav-tick-button"]:hover [data-slot="message-nav-tick-line"] {
   width: 100%;
-  background-color: var(--icon-strong-base);
+  color: var(--text-strong);
+  box-sizing: border-box;
 }
 
 [data-slot="message-nav-message-button"] {
@@ -62,33 +65,38 @@
   align-items: center;
   align-self: stretch;
   width: 100%;
+  color: inherit;
   column-gap: 12px;
   cursor: default;
   border: none;
   background: none;
-  padding: 4px 12px;
+  padding: 0;
   border-radius: var(--radius-sm);
 }
 
 [data-slot="message-nav-title-preview"] {
   font-size: 14px; /* text-14-regular */
-  color: var(--text-weak);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0;
   text-align: left;
 
+  &:not(:hover) {
+    color: var(--text-weak);
+  }
+
+  &:hover,
   &[data-active] {
     color: var(--text-strong);
   }
 }
 
 [data-slot="message-nav-item"]:hover [data-slot="message-nav-message-button"] {
-  background-color: var(--surface-base);
+  color: var(--text-strong);
 }
 [data-slot="message-nav-item"]:active [data-slot="message-nav-message-button"] {
-  background-color: var(--surface-base-active);
+  color: var(--text-base);
 }
 
 [data-slot="message-nav-item"]:active [data-slot="message-nav-title-preview"] {
@@ -101,7 +109,7 @@
 
 [data-slot="message-nav-tooltip-content"] {
   display: flex;
-  padding: 4px 4px 6px 4px;
+  padding: 4px;
   justify-content: center;
   align-items: center;
   border-radius: var(--radius-md);

packages/ui/src/components/message-nav.tsx

@@ -2,6 +2,7 @@ import { UserMessage } from "@opencode-ai/sdk/v2"
 import { ComponentProps, For, Match, Show, splitProps, Switch } from "solid-js"
 import { DiffChanges } from "./diff-changes"
 import { Tooltip } from "@kobalte/core/tooltip"
+import { ScrollReveal } from "./scroll-reveal"
 
 export function MessageNav(
   props: ComponentProps<"ul"> & {
@@ -43,14 +44,16 @@ export function MessageNav(
                 </Match>
                 <Match when={local.size === "normal"}>
                   <button data-slot="message-nav-message-button" onClick={handleClick} onKeyDown={handleKeyPress}>
-                    <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" />
+                    <DiffChanges changes={message.summary?.diffs ?? []} variant="bars" class="-ml-1" />
                     <div
                       data-slot="message-nav-title-preview"
                       data-active={message.id === local.current?.id || undefined}
                     >
-                      <Show when={local.getLabel?.(message) ?? message.summary?.title} fallback="New message">
-                        {local.getLabel?.(message) ?? message.summary?.title}
-                      </Show>
+                      <ScrollReveal fadeEndSize={12}>
+                        <Show when={local.getLabel?.(message) ?? message.summary?.title} fallback="New message">
+                          {local.getLabel?.(message) ?? message.summary?.title}
+                        </Show>
+                      </ScrollReveal>
                     </div>
                   </button>
                 </Match>

packages/ui/src/components/scroll-fade.css

@@ -3,6 +3,8 @@
   overscroll-behavior: contain;
   scrollbar-width: none;
   box-sizing: border-box;
+  color: inherit;
+  font: inherit;
   -ms-overflow-style: none;
   
   &::-webkit-scrollbar {

packages/ui/src/components/scroll-reveal.tsx

@@ -127,7 +127,7 @@ export function ScrollReveal(props: ScrollRevealProps) {
         local.ref?.(el)
       }}
       fadeStartSize={8}
-      fadeEndSize={16}
+      fadeEndSize={8}
       direction="horizontal"
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}

packages/ui/src/components/select.css

@@ -1,6 +1,9 @@
 [data-component="select"] {
   [data-slot="select-select-trigger"] {
-    padding: 0 4px 0 8px;
+    display: flex;
+    padding: 4px 8px !important;
+    align-items: center;
+    justify-content: space-between;
     box-shadow: none;
     transition: background-color 200ms cubic-bezier(0.25, 0, 0.5, 1);