From 9d7852b5c39b64b96fe1bc14a80a344a0667f0b7 Mon Sep 17 00:00:00 2001 From: Kit Langton Date: Mon, 2 Mar 2026 17:24:32 -0500 Subject: Animation Smorgasbord (#15637) Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com> --- packages/app/src/components/prompt-input.tsx | 80 +++++-- .../session/composer/session-composer-region.tsx | 100 +++++++-- .../session/composer/session-composer-state.ts | 15 +- .../pages/session/composer/session-todo-dock.tsx | 238 +++++++++++++++------ .../app/src/pages/session/message-timeline.tsx | 57 ++++- 5 files changed, 381 insertions(+), 109 deletions(-) (limited to 'packages/app/src') diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx index ba5a33a47..89169af0d 100644 --- a/packages/app/src/components/prompt-input.tsx +++ b/packages/app/src/components/prompt-input.tsx @@ -1,4 +1,5 @@ import { useFilteredList } from "@opencode-ai/ui/hooks" +import { useSpring } from "@opencode-ai/ui/motion-spring" import { createEffect, on, Component, Show, onCleanup, Switch, Match, createMemo, createSignal } from "solid-js" import { createStore } from "solid-js/store" import { createFocusSignal } from "@solid-primitives/active-element" @@ -255,6 +256,11 @@ export const PromptInput: Component = (props) => { pendingAutoAccept: false, }) + const buttonsSpring = useSpring( + () => (store.mode === "normal" ? 1 : 0), + { visualDuration: 0.2, bounce: 0 }, + ) + const commentCount = createMemo(() => { if (store.mode === "shell") return 0 return prompt.context.items().filter((item) => !!item.comment?.trim()).length @@ -1250,10 +1256,9 @@ export const PromptInput: Component = (props) => {
0.5 ? "auto" : "none", }} > = (props) => { type="button" variant="ghost" class="size-8 p-0" + style={{ + opacity: buttonsSpring(), + transform: `scale(${0.95 + buttonsSpring() * 0.05})`, + filter: `blur(${(1 - buttonsSpring()) * 2}px)`, + }} onClick={pick} disabled={store.mode !== "normal"} tabIndex={store.mode === "normal" ? undefined : -1} @@ -1303,6 +1313,11 @@ export const PromptInput: Component = (props) => { icon={working() ? "stop" : "arrow-up"} variant="primary" class="size-8" + style={{ + opacity: buttonsSpring(), + transform: `scale(${0.95 + buttonsSpring() * 0.05})`, + filter: `blur(${(1 - buttonsSpring()) * 2}px)`, + }} aria-label={working() ? language.t("prompt.action.stop") : language.t("prompt.action.send")} /> @@ -1355,14 +1370,21 @@ export const PromptInput: Component = (props) => {
-
- -
- {language.t("prompt.mode.shell")} -
-
- - +
+
+ {language.t("prompt.mode.shell")} +
+
+
= (props) => { onSelect={local.agent.set} class="capitalize max-w-[160px]" valueClass="truncate text-13-regular" - triggerStyle={{ height: "28px" }} + triggerStyle={{ + height: "28px", + opacity: buttonsSpring(), + transform: `scale(${0.95 + buttonsSpring() * 0.05})`, + filter: `blur(${(1 - buttonsSpring()) * 2}px)`, + "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none", + }} variant="ghost" /> @@ -1394,7 +1422,13 @@ export const PromptInput: Component = (props) => { variant="ghost" size="normal" class="min-w-0 max-w-[320px] text-13-regular group" - style={{ height: "28px" }} + style={{ + height: "28px", + opacity: buttonsSpring(), + transform: `scale(${0.95 + buttonsSpring() * 0.05})`, + filter: `blur(${(1 - buttonsSpring()) * 2}px)`, + "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none", + }} onClick={() => dialog.show(() => )} > @@ -1423,7 +1457,13 @@ export const PromptInput: Component = (props) => { triggerProps={{ variant: "ghost", size: "normal", - style: { height: "28px" }, + style: { + height: "28px", + opacity: buttonsSpring(), + transform: `scale(${0.95 + buttonsSpring() * 0.05})`, + filter: `blur(${(1 - buttonsSpring()) * 2}px)`, + "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none", + }, class: "min-w-0 max-w-[320px] text-13-regular group", }} > @@ -1455,11 +1495,17 @@ export const PromptInput: Component = (props) => { onSelect={(x) => local.model.variant.set(x === "default" ? undefined : x)} class="capitalize max-w-[160px]" valueClass="truncate text-13-regular" - triggerStyle={{ height: "28px" }} + triggerStyle={{ + height: "28px", + opacity: buttonsSpring(), + transform: `scale(${0.95 + buttonsSpring() * 0.05})`, + filter: `blur(${(1 - buttonsSpring()) * 2}px)`, + "pointer-events": buttonsSpring() > 0.5 ? "auto" : "none", + }} variant="ghost" /> - +
void onResponseSubmit: () => void setPromptDockRef: (el: HTMLDivElement) => void + visualDuration?: number + bounce?: number + dockOpenVisualDuration?: number + dockOpenBounce?: number + dockCloseVisualDuration?: number + dockCloseBounce?: number + drawerExpandVisualDuration?: number + drawerExpandBounce?: number + drawerCollapseVisualDuration?: number + drawerCollapseBounce?: number + subtitleDuration?: number + subtitleTravel?: number + subtitleEdge?: number + countDuration?: number + countMask?: number + countMaskHeight?: number + countWidthDuration?: number }) { const params = useParams() const prompt = usePrompt() @@ -43,6 +61,40 @@ export function SessionComposerRegion(props: { setSessionHandoff(sessionKey(), { prompt: previewPrompt() }) }) + const open = createMemo(() => props.state.dock() && !props.state.closing()) + const config = createMemo(() => + open() + ? { + visualDuration: props.dockOpenVisualDuration ?? props.visualDuration ?? 0.3, + bounce: props.dockOpenBounce ?? props.bounce ?? 0, + } + : { + visualDuration: props.dockCloseVisualDuration ?? props.visualDuration ?? 0.3, + bounce: props.dockCloseBounce ?? props.bounce ?? 0, + }, + ) + const progress = useSpring( + () => (open() ? 1 : 0), + config, + ) + const value = createMemo(() => Math.max(0, Math.min(1, progress()))) + const [height, setHeight] = createSignal(320) + const dock = createMemo(() => props.state.dock() || value() > 0.001) + const full = createMemo(() => Math.max(78, height())) + const [contentRef, setContentRef] = createSignal() + + createEffect(() => { + const el = contentRef() + if (!el) return + const update = () => { + setHeight(el.getBoundingClientRect().height) + } + update() + const observer = new ResizeObserver(update) + observer.observe(el) + onCleanup(() => observer.disconnect()) + }) + return (
} > - +
- +
+ +
number) + }, +) { const params = useParams() const sdk = useSDK() const sync = useSync() @@ -96,12 +100,19 @@ export function createSessionComposerState() { let timer: number | undefined let raf: number | undefined + const closeMs = () => { + const value = options?.closeMs + if (typeof value === "function") return Math.max(0, value()) + if (typeof value === "number") return Math.max(0, value) + return 400 + } + const scheduleClose = () => { if (timer) window.clearTimeout(timer) timer = window.setTimeout(() => { setStore({ dock: false, closing: false }) timer = undefined - }, 400) + }, closeMs()) } createEffect( diff --git a/packages/app/src/pages/session/composer/session-todo-dock.tsx b/packages/app/src/pages/session/composer/session-todo-dock.tsx index 279982760..ab8755aec 100644 --- a/packages/app/src/pages/session/composer/session-todo-dock.tsx +++ b/packages/app/src/pages/session/composer/session-todo-dock.tsx @@ -1,8 +1,12 @@ import type { Todo } from "@opencode-ai/sdk/v2" +import { AnimatedNumber } from "@opencode-ai/ui/animated-number" import { Checkbox } from "@opencode-ai/ui/checkbox" import { DockTray } from "@opencode-ai/ui/dock-surface" import { IconButton } from "@opencode-ai/ui/icon-button" -import { For, Show, createEffect, createMemo, createSignal, on, onCleanup } from "solid-js" +import { useSpring } from "@opencode-ai/ui/motion-spring" +import { TextReveal } from "@opencode-ai/ui/text-reveal" +import { TextStrikethrough } from "@opencode-ai/ui/text-strikethrough" +import { Index, createEffect, createMemo, createSignal, on, onCleanup } from "solid-js" import { createStore } from "solid-js/store" function dot(status: Todo["status"]) { @@ -30,19 +34,35 @@ function dot(status: Todo["status"]) { ) } -export function SessionTodoDock(props: { todos: Todo[]; title: string; collapseLabel: string; expandLabel: string }) { +export function SessionTodoDock(props: { + todos: Todo[] + title: string + collapseLabel: string + expandLabel: string + dockProgress?: number + visualDuration?: number + bounce?: number + expandVisualDuration?: number + expandBounce?: number + collapseVisualDuration?: number + collapseBounce?: number + subtitleDuration?: number + subtitleTravel?: number + subtitleEdge?: number + countDuration?: number + countMask?: number + countMaskHeight?: number + countWidthDuration?: number +}) { const [store, setStore] = createStore({ collapsed: false, }) const toggle = () => setStore("collapsed", (value) => !value) - const summary = createMemo(() => { - const total = props.todos.length - if (total === 0) return "" - const completed = props.todos.filter((todo) => todo.status === "completed").length - return `${completed} of ${total} ${props.title.toLowerCase()} completed` - }) + const total = createMemo(() => props.todos.length) + const done = createMemo(() => props.todos.filter((todo) => todo.status === "completed").length) + const label = createMemo(() => `${done()} of ${total()} ${props.title.toLowerCase()} completed`) const active = createMemo( () => @@ -53,56 +73,134 @@ export function SessionTodoDock(props: { todos: Todo[]; title: string; collapseL ) const preview = createMemo(() => active()?.content ?? "") + const config = createMemo(() => + store.collapsed + ? { + visualDuration: props.collapseVisualDuration ?? props.visualDuration ?? 0.3, + bounce: props.collapseBounce ?? props.bounce ?? 0, + } + : { + visualDuration: props.expandVisualDuration ?? props.visualDuration ?? 0.3, + bounce: props.expandBounce ?? props.bounce ?? 0, + }, + ) + const collapse = useSpring(() => (store.collapsed ? 1 : 0), config) + const dock = createMemo(() => Math.max(0, Math.min(1, props.dockProgress ?? 1))) + const shut = createMemo(() => 1 - dock()) + const value = createMemo(() => Math.max(0, Math.min(1, collapse()))) + const hide = createMemo(() => Math.max(value(), shut())) + const off = createMemo(() => hide() > 0.98) + const turn = createMemo(() => Math.max(0, Math.min(1, value()))) + const [height, setHeight] = createSignal(320) + const full = createMemo(() => Math.max(78, height())) + let contentRef: HTMLDivElement | undefined + + createEffect(() => { + const el = contentRef + if (!el) return + const update = () => { + setHeight(el.getBoundingClientRect().height) + } + update() + const observer = new ResizeObserver(update) + observer.observe(el) + onCleanup(() => observer.disconnect()) + }) return ( -
{ - if (event.key !== "Enter" && event.key !== " ") return - event.preventDefault() - toggle() - }} - > - {summary()} - -
- -
{preview()}
- -
- -
- { - event.preventDefault() - event.stopPropagation() +
+
{ + if (event.key !== "Enter" && event.key !== " ") return + event.preventDefault() + toggle() + }} + > + { - event.stopPropagation() - toggle() + > + + of + +  {props.title.toLowerCase()} completed + +
+ > + +
+
+ { + event.preventDefault() + event.stopPropagation() + }} + onClick={(event) => { + event.stopPropagation() + toggle() + }} + aria-label={store.collapsed ? props.expandLabel : props.collapseLabel} + /> +
-
- ) @@ -171,33 +269,43 @@ function TodoList(props: { todos: Todo[]; open: boolean }) { }, 250) }} > - + {(todo) => ( - - {todo.content} - + /> )} - +
parts.flatMap((part) => { if (part.type !== "text" || !(part as TextPart).synthetic) return [] @@ -213,8 +217,34 @@ export function MessageTimeline(props: { const dialog = useDialog() const language = useLanguage() + const rendered = createMemo(() => props.renderedUserMessages.map((message) => message.id)) const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`) const sessionID = createMemo(() => params.id) + const sessionMessages = createMemo(() => { + const id = sessionID() + if (!id) return emptyMessages + return sync.data.message[id] ?? emptyMessages + }) + const pending = createMemo(() => + sessionMessages().findLast( + (item): item is AssistantMessage => item.role === "assistant" && typeof item.time.completed !== "number", + ), + ) + const activeMessageID = createMemo(() => { + const parentID = pending()?.parentID + if (!parentID) return + + const messages = sessionMessages() + const result = Binary.search(messages, parentID, (message) => message.id) + const message = result.found ? messages[result.index] : messages.find((item) => item.id === parentID) + if (!message || message.role !== "user") return + return message.id + }) + const sessionStatus = createMemo(() => { + const id = sessionID() + if (!id) return idle + return sync.data.session_status[id] ?? idle + }) const info = createMemo(() => { const id = sessionID() if (!id) return @@ -651,17 +681,23 @@ export function MessageTimeline(props: {
- - {(message) => { - const comments = createMemo(() => messageComments(sync.data.part[message.id] ?? [])) + + {(messageID) => { + const active = createMemo(() => activeMessageID() === messageID) + const queued = createMemo(() => { + const item = pending() + if (!item || active()) return false + return messageID > item.id + }) + const comments = createMemo(() => messageComments(sync.data.part[messageID] ?? [])) const commentCount = createMemo(() => comments().length) return (
{ - props.onRegisterMessage(el, message.id) - onCleanup(() => props.onUnregisterMessage(message.id)) + props.onRegisterMessage(el, messageID) + onCleanup(() => props.onUnregisterMessage(messageID)) }} classList={{ "min-w-0 w-full max-w-full": true, @@ -701,7 +737,10 @@ export function MessageTimeline(props: {