From 892002a19af1d35a7e72944727339cdcbec95912 Mon Sep 17 00:00:00 2001
From: Alex Yaroshuk <alexander_4288@Yahoo.com>
Date: Thu, 12 Feb 2026 04:06:07 +0800
Subject: [PATCH 1/2] feat(app): marquee scroll for overflowing sidebar titles

---
 .../app/src/pages/layout/sidebar-items.tsx    | 55 ++++++++++++++++---
 packages/ui/src/styles/tailwind/utilities.css | 13 +++++
 2 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/pages/layout/sidebar-items.tsx b/packages/app/src/pages/layout/sidebar-items.tsx
index 678bfa0d86da..5a2134d40c2d 100644
--- a/packages/app/src/pages/layout/sidebar-items.tsx
+++ b/packages/app/src/pages/layout/sidebar-items.tsx
@@ -14,7 +14,7 @@ import { Spinner } from "@opencode-ai/ui/spinner"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { getFilename } from "@opencode-ai/util/path"
 import { type Message, type Session, type TextPart } from "@opencode-ai/sdk/v2/client"
-import { For, Match, Show, Switch, createMemo, onCleanup, type Accessor, type JSX } from "solid-js"
+import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onCleanup, type Accessor, type JSX } from "solid-js"
 import { agentColor } from "@/utils/agent"
 
 const OPENCODE_PROJECT_ID = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"
@@ -142,14 +142,44 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
     return text?.text
   }
 
+  const [itemHovered, setItemHovered] = createSignal(false)
+  const [overflows, setOverflows] = createSignal(false)
+  const marquee = createMemo(() => itemHovered() && overflows())
+
+  let titleRef: HTMLSpanElement | undefined
+  let containerRef: HTMLDivElement | undefined
+  createEffect(() => {
+    if (!titleRef || !containerRef || !itemHovered()) return
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (!titleRef || !containerRef) return
+        const titleWidth = titleRef.scrollWidth
+        const containerWidth = containerRef.offsetWidth
+        if (titleWidth <= containerWidth) {
+          setOverflows(false)
+          return
+        }
+        const overflowWidth = titleWidth - containerWidth + 8
+        const duration = overflowWidth / 40
+        titleRef.style.setProperty("--overflow-width", `${overflowWidth}px`)
+        titleRef.style.setProperty("--marquee-duration", `${duration}s`)
+        setOverflows(true)
+      })
+    })
+  })
+
   const item = (
     <A
       href={`/${props.slug}/session/${props.session.id}`}
       class={`flex items-center justify-between gap-3 min-w-0 text-left w-full focus:outline-none transition-[padding] ${props.mobile ? "pr-7" : ""} group-hover/session:pr-7 group-focus-within/session:pr-7 group-active/session:pr-7 ${props.dense ? "py-0.5" : "py-1"}`}
-      onPointerEnter={scheduleHoverPrefetch}
-      onPointerLeave={cancelHoverPrefetch}
-      onMouseEnter={scheduleHoverPrefetch}
-      onMouseLeave={cancelHoverPrefetch}
+      onPointerEnter={() => {
+        setItemHovered(true)
+        scheduleHoverPrefetch()
+      }}
+      onPointerLeave={() => {
+        setItemHovered(false)
+        cancelHoverPrefetch()
+      }}
       onFocus={() => props.prefetchSession(props.session, "high")}
       onClick={() => {
         props.setHoverSession(undefined)
@@ -177,9 +207,18 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
             </Match>
           </Switch>
         </div>
-        <span class="text-14-regular text-text-strong grow-1 min-w-0 overflow-hidden text-ellipsis truncate">
-          {props.session.title}
-        </span>
+        <div ref={containerRef} class="grow-1 min-w-0 overflow-hidden">
+          <span
+            ref={titleRef}
+            class="text-14-regular text-text-strong whitespace-nowrap"
+            classList={{
+              "inline-block marquee": marquee(),
+              "block overflow-hidden text-ellipsis": !marquee(),
+            }}
+          >
+            {props.session.title}
+          </span>
+        </div>
         <Show when={props.session.summary}>
           {(summary) => (
             <div class="group-hover/session:hidden group-active/session:hidden group-focus-within/session:hidden">
diff --git a/packages/ui/src/styles/tailwind/utilities.css b/packages/ui/src/styles/tailwind/utilities.css
index be305b4cbce3..9417cd97fa64 100644
--- a/packages/ui/src/styles/tailwind/utilities.css
+++ b/packages/ui/src/styles/tailwind/utilities.css
@@ -49,6 +49,19 @@
   text-align: left;
 }
 
+@utility marquee {
+  animation: marquee var(--marquee-duration, 2s) linear infinite alternate;
+}
+
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-1 * var(--overflow-width, 0px)));
+  }
+}
+
 @utility fade-up-text {
   animation: fadeUp 0.4s ease-out forwards;
   opacity: 0;

From 92122c9d654adbef58dcc48d379f4e4179dccb02 Mon Sep 17 00:00:00 2001
From: Alex Yaroshuk <alexander_4288@Yahoo.com>
Date: Fri, 13 Feb 2026 19:29:56 +0800
Subject: [PATCH 2/2] resolve conflicts

---
 .../app/src/pages/layout/sidebar-items.tsx    | 188 ++++++++++++++----
 1 file changed, 147 insertions(+), 41 deletions(-)

diff --git a/packages/app/src/pages/layout/sidebar-items.tsx b/packages/app/src/pages/layout/sidebar-items.tsx
index 5a2134d40c2d..408156204473 100644
--- a/packages/app/src/pages/layout/sidebar-items.tsx
+++ b/packages/app/src/pages/layout/sidebar-items.tsx
@@ -13,8 +13,19 @@ import { MessageNav } from "@opencode-ai/ui/message-nav"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { getFilename } from "@opencode-ai/util/path"
-import { type Message, type Session, type TextPart } from "@opencode-ai/sdk/v2/client"
-import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onCleanup, type Accessor, type JSX } from "solid-js"
+import { type Message, type Session, type TextPart, type UserMessage } from "@opencode-ai/sdk/v2/client"
+import {
+  For,
+  Match,
+  Show,
+  Switch,
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  type Accessor,
+  type JSX,
+} from "solid-js"
 import { agentColor } from "@/utils/agent"
 
 const OPENCODE_PROJECT_ID = "4b0ea68d7af9a6031a7ffda7ad66e0cb83315750"
@@ -70,6 +81,116 @@ export type SessionItemProps = {
   archiveSession: (session: Session) => Promise<void>
 }
 
+const SessionRow = (props: {
+  session: Session
+  slug: string
+  mobile?: boolean
+  dense?: boolean
+  tint: Accessor<string | undefined>
+  isWorking: Accessor<boolean>
+  hasPermissions: Accessor<boolean>
+  hasError: Accessor<boolean>
+  unseenCount: Accessor<number>
+  setHoverSession: (id: string | undefined) => void
+  clearHoverProjectSoon: () => void
+  sidebarOpened: Accessor<boolean>
+  prefetchSession: (session: Session, priority?: "high" | "low") => void
+  scheduleHoverPrefetch: () => void
+  cancelHoverPrefetch: () => void
+}): JSX.Element => (
+  <A
+    href={`/${props.slug}/session/${props.session.id}`}
+    class={`flex items-center justify-between gap-3 min-w-0 text-left w-full focus:outline-none transition-[padding] ${props.mobile ? "pr-7" : ""} group-hover/session:pr-7 group-focus-within/session:pr-7 group-active/session:pr-7 ${props.dense ? "py-0.5" : "py-1"}`}
+    onPointerEnter={props.scheduleHoverPrefetch}
+    onPointerLeave={props.cancelHoverPrefetch}
+    onMouseEnter={props.scheduleHoverPrefetch}
+    onMouseLeave={props.cancelHoverPrefetch}
+    onFocus={() => props.prefetchSession(props.session, "high")}
+    onClick={() => {
+      props.setHoverSession(undefined)
+      if (props.sidebarOpened()) return
+      props.clearHoverProjectSoon()
+    }}
+  >
+    <div class="flex items-center gap-1 w-full">
+      <div
+        class="shrink-0 size-6 flex items-center justify-center"
+        style={{ color: props.tint() ?? "var(--icon-interactive-base)" }}
+      >
+        <Switch fallback={<Icon name="dash" size="small" class="text-icon-weak" />}>
+          <Match when={props.isWorking()}>
+            <Spinner class="size-[15px]" />
+          </Match>
+          <Match when={props.hasPermissions()}>
+            <div class="size-1.5 rounded-full bg-surface-warning-strong" />
+          </Match>
+          <Match when={props.hasError()}>
+            <div class="size-1.5 rounded-full bg-text-diff-delete-base" />
+          </Match>
+          <Match when={props.unseenCount() > 0}>
+            <div class="size-1.5 rounded-full bg-text-interactive-base" />
+          </Match>
+        </Switch>
+      </div>
+      <span class="text-14-regular text-text-strong grow-1 min-w-0 overflow-hidden text-ellipsis truncate">
+        {props.session.title}
+      </span>
+      <Show when={props.session.summary}>
+        {(summary) => (
+          <div class="group-hover/session:hidden group-active/session:hidden group-focus-within/session:hidden">
+            <DiffChanges changes={summary()} />
+          </div>
+        )}
+      </Show>
+    </div>
+  </A>
+)
+
+const SessionHoverPreview = (props: {
+  mobile?: boolean
+  nav: Accessor<HTMLElement | undefined>
+  hoverSession: Accessor<string | undefined>
+  session: Session
+  sidebarHovering: Accessor<boolean>
+  hoverReady: Accessor<boolean>
+  hoverMessages: Accessor<UserMessage[] | undefined>
+  language: ReturnType<typeof useLanguage>
+  isActive: Accessor<boolean>
+  slug: string
+  setHoverSession: (id: string | undefined) => void
+  messageLabel: (message: Message) => string | undefined
+  onMessageSelect: (message: Message) => void
+  trigger: JSX.Element
+}): JSX.Element => (
+  <HoverCard
+    openDelay={1000}
+    closeDelay={props.sidebarHovering() ? 600 : 0}
+    placement="right-start"
+    gutter={16}
+    shift={-2}
+    trigger={props.trigger}
+    mount={!props.mobile ? props.nav() : undefined}
+    open={props.hoverSession() === props.session.id}
+    onOpenChange={(open) => props.setHoverSession(open ? props.session.id : undefined)}
+  >
+    <Show
+      when={props.hoverReady()}
+      fallback={<div class="text-12-regular text-text-weak">{props.language.t("session.messages.loading")}</div>}
+    >
+      <div class="overflow-y-auto max-h-72 h-full">
+        <MessageNav
+          messages={props.hoverMessages() ?? []}
+          current={undefined}
+          getLabel={props.messageLabel}
+          onMessageSelect={props.onMessageSelect}
+          size="normal"
+          class="w-60"
+        />
+      </div>
+    </Show>
+  </HoverCard>
+)
+
 export const SessionItem = (props: SessionItemProps): JSX.Element => {
   const params = useParams()
   const navigate = useNavigate()
@@ -113,7 +234,7 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
   })
 
   const hoverMessages = createMemo(() =>
-    sessionStore.message[props.session.id]?.filter((message) => message.role === "user"),
+    sessionStore.message[props.session.id]?.filter((message): message is UserMessage => message.role === "user"),
   )
   const hoverReady = createMemo(() => sessionStore.message[props.session.id] !== undefined)
   const hoverAllowed = createMemo(() => !props.mobile && props.sidebarExpanded())
@@ -141,7 +262,6 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
     const text = parts.find((part): part is TextPart => part?.type === "text" && !part.synthetic && !part.ignored)
     return text?.text
   }
-
   const [itemHovered, setItemHovered] = createSignal(false)
   const [overflows, setOverflows] = createSignal(false)
   const marquee = createMemo(() => itemHovered() && overflows())
@@ -244,44 +364,30 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
           </Tooltip>
         }
       >
-        <HoverCard
-          openDelay={1000}
-          closeDelay={props.sidebarHovering() ? 600 : 0}
-          placement="right-start"
-          gutter={16}
-          shift={-2}
+        <SessionHoverPreview
+          mobile={props.mobile}
+          nav={props.nav}
+          hoverSession={props.hoverSession}
+          session={props.session}
+          sidebarHovering={props.sidebarHovering}
+          hoverReady={hoverReady}
+          hoverMessages={hoverMessages}
+          language={language}
+          isActive={isActive}
+          slug={props.slug}
+          setHoverSession={props.setHoverSession}
+          messageLabel={messageLabel}
+          onMessageSelect={(message) => {
+            if (!isActive()) {
+              layout.pendingMessage.set(`${base64Encode(props.session.directory)}/${props.session.id}`, message.id)
+              navigate(`${props.slug}/session/${props.session.id}`)
+              return
+            }
+            window.history.replaceState(null, "", `#message-${message.id}`)
+            window.dispatchEvent(new HashChangeEvent("hashchange"))
+          }}
           trigger={item}
-          mount={!props.mobile ? props.nav() : undefined}
-          open={props.hoverSession() === props.session.id}
-          onOpenChange={(open) => props.setHoverSession(open ? props.session.id : undefined)}
-        >
-          <Show
-            when={hoverReady()}
-            fallback={<div class="text-12-regular text-text-weak">{language.t("session.messages.loading")}</div>}
-          >
-            <div class="overflow-y-auto max-h-72 h-full">
-              <MessageNav
-                messages={hoverMessages() ?? []}
-                current={undefined}
-                getLabel={messageLabel}
-                onMessageSelect={(message) => {
-                  if (!isActive()) {
-                    layout.pendingMessage.set(
-                      `${base64Encode(props.session.directory)}/${props.session.id}`,
-                      message.id,
-                    )
-                    navigate(`${props.slug}/session/${props.session.id}`)
-                    return
-                  }
-                  window.history.replaceState(null, "", `#message-${message.id}`)
-                  window.dispatchEvent(new HashChangeEvent("hashchange"))
-                }}
-                size="normal"
-                class="w-60"
-              />
-            </div>
-          </Show>
-        </HoverCard>
+        />
       </Show>
       <div
         class={`absolute ${props.dense ? "top-0.5 right-0.5" : "top-1 right-1"} flex items-center gap-0.5 transition-opacity`}