🤖 fix: fade sideways-scrolling rows, full skill descriptions, keep pop-out terminals out of the sidebar (#5732)

## Summary

Three small layout and terminal fixes from the bug bash:

- Rows that scroll sideways with a hidden scrollbar (workspace footer,
Timeline filter chips) now fade the edge where more items sit past it.
- The Skills popover shows each skill's full description instead of one
line.
- A terminal open in a pop-out window no longer comes back as a (often
hidden) right-sidebar tab when the main window reloads. In the desktop
app, closing the pop-out window ends its session.

Fixes #5696
Fixes #5697
Fixes #5673

## Implementation

**#5696** One shared CSS class, `scroll-fade-x`, in `scrollbar-none.css`
(shared with the VS Code webview, because both rows are
webview-importable). It is scroll-driven CSS (`animation-timeline:
scroll(self inline)` animating two registered `@property` lengths into a
`mask-image`), so there is no JS and no per-render work. A row that fits
has an inactive scroll timeline and shows no fade. Browsers without
scroll timelines keep today's plain row.

**#5697** The description drops `line-clamp-1` and wraps
(`break-words`). The list already scrolls inside
`max-h-[min(400px,60vh)]`. I chose full text over click-to-expand
because expanding would be a new operation that needs its own keyboard
shortcut.

**#5673** (coordinator-approved design, no persisted state):

1. Pop-out terminal windows mount `TerminalRouterProvider popout`, so
their `terminal.attach` calls send `popout: true` (new optional input
field, no new subscription).
2. While such an attach stream is open, `TerminalService` counts the
session as shown in a pop-out, and `terminal.listSessions` skips it. So
the right sidebar's reload sync (and layout presets) do not adopt it.
3. The count drops when the stream ends: the pop-out closed, crashed,
reloaded or lost its connection. A backend restart starts with no
counts.
4. Desktop: `TerminalWindowManager` reports a closed pop-out window, and
`TerminalService` closes that session. This matches closing a sidebar
terminal tab, which also does not ask first. Reloading or crashing a
pop-out does not close its window, so the session survives those.
5. Browser mode (documented decision): a pop-out page cannot tell its
window closing from its own reload, so closing a browser pop-out does
not end the session. Killing it would lose the shell on every pop-out
reload. After the pop-out closes, the session returns as a sidebar tab
on the next main-window load, which is today's recovery path.

## Validation

Test-first for #5673. Before the fix:

```
TypeError: service.markPopoutAttached is not a function
(fail) TerminalService > pop-out attachments (#5673) > a session with a live pop-out is not listed, so the sidebar does not adopt it
(fail) TerminalService > pop-out attachments (#5673) > the session stays hidden until every pop-out attach for it has ended
(fail) TerminalService > pop-out attachments (#5673) > closing the desktop pop-out window ends its session
```

`routerSubscriptions.test.ts` adds the stream-level test
(reload-adoption and crash path): a pop-out attach hides the session
while it is live, and aborting it lists the session again. If
`attachTerminal` ignores the flag, the test fails.
`vscode/src/webview/webviewCss.test.ts` passes (it first caught the
class living only in desktop CSS, so the class moved to the shared
file).

#5696 and #5697 are CSS-only. Asserting class names would be a
tautological test, so the evidence is measured in the browser
(agent-browser against `tests/bugbash/startApp.ts` servers built from
main and from this branch):

| Check | main | this branch |
|---|---|---|
| Footer row at 375px (`scrollWidth` 430 > `clientWidth` 375) | cut at
the edge, no hint | right edge fades; after scrolling to the end the
left edge fades |
| Timeline chip row in the default sidebar (438 > 373) | cut chip, no
hint | edge fades |
| Skills popover: first 10 description spans clipped | 9 of 10 | 0 of 10
(desktop and 375px) |
| Main-window reload with a browser pop-out terminal open | session
added as a sidebar Terminal tab | no tab added |
| Main-window reload after that browser pop-out is closed | tab | tab
(session comes back, as designed) |

Footer at 375px: main (top), branch at the start (middle), branch
scrolled to the end (bottom):

![Footer row at
375px](https://github.com/user-attachments/assets/c5ea28a1-837d-4641-b5af-2d8eccd24d09)

Timeline chips (row narrowed to 240px, as in a narrow sidebar): main
(top), branch (bottom):

![Timeline chip
row](https://github.com/user-attachments/assets/e3322735-f84c-48e4-97df-ac999a539a7f)

Skills popover on main (desktop) and on this branch (375px):

![Skills popover on
main](https://github.com/user-attachments/assets/1ca23732-34ef-4949-9c47-ac6e72f98678)

![Skills popover on this branch at
375px](https://github.com/user-attachments/assets/4a4195c4-3bba-4874-8902-f1ec8ac500e4)

## Risks

Low. The fade only paints a mask on two rows and needs scroll-timeline
support (Chromium, so Electron and the VS Code webview). Long skill
descriptions make the popover list taller, and it scrolls.
`listSessions` now hides sessions that a pop-out shows, so the
layout-preset terminal mapping also skips them, which matches the
intent. Closing a desktop pop-out now kills its shell. Before, the shell
kept running unseen until the sidebar adopted it.

---

_Generated with `xum` • Model: `anthropic:claude-opus-5-5` • Thinking:
`high` • Cost: `$3.19`_

<!-- mux-attribution: model=anthropic:claude-opus-5-5 thinking=high -->

Author: ThomasK33

src/browser/components/ChatPane/WorkspaceFooterBar.tsx

@@ -400,7 +400,7 @@ export const WorkspaceFooterBar: React.FC<WorkspaceFooterBarProps> = (props) =>
     >
       {/* min-h rather than a fixed height: mobile raises these buttons to 44px touch targets, and a
         capped row would clip them along the same axis overflow-x-auto makes scrollable. */}
-      <div className="scrollbar-none flex min-h-7 items-center gap-2 overflow-x-auto px-2 text-xs whitespace-nowrap">
+      <div className="scrollbar-none scroll-fade-x flex min-h-7 items-center gap-2 overflow-x-auto px-2 text-xs whitespace-nowrap">
         <RuntimeBadge
           runtimeConfig={props.runtimeConfig}
           isWorking={isWorking}

src/browser/components/SkillIndicator/SkillIndicator.tsx

@@ -91,7 +91,9 @@ const SkillsPopoverContent: React.FC<SkillsPopoverContentProps> = (props) => {
                       )}
                       {isLoaded && <Check className="text-success ml-1 inline h-3 w-3" />}
                     </span>
-                    <span className="text-muted-foreground line-clamp-1 text-[11px] leading-snug">
+                    {/* Full text (#5697): the list already scrolls, and a clamp left no way to read
+                        the rest. */}
+                    <span className="text-muted-foreground text-[11px] leading-snug break-words">
                       {skill.description}
                     </span>
                   </div>

src/browser/features/RightSidebar/Timeline/TimelinePanel.tsx

@@ -813,7 +813,7 @@ export function TimelinePanelView(props: TimelinePanelViewProps) {
       }}
     >
       <div className="border-border shrink-0 border-b px-3 py-2.5">
-        <div className="scrollbar-none flex min-w-0 gap-1.5 overflow-x-auto">
+        <div className="scrollbar-none scroll-fade-x flex min-w-0 gap-1.5 overflow-x-auto">
           {FILTERS.map((item) => (
             <button
               key={item.value}

src/browser/styles/scrollbar-none.css

@@ -12,3 +12,49 @@
   scrollbar-width: none;
   scrollbar-color: auto;
 }
+
+/*
+ * Edge fade for rows that scroll sideways with a hidden scrollbar (#5696): an edge fades out
+ * while more items sit past it, so cut-off items do not look missing. Scroll-driven CSS, no JS:
+ * a row that fits has an inactive scroll timeline and shows no fade, and browsers without scroll
+ * timelines keep the plain row.
+ */
+@property --scroll-fade-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --scroll-fade-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@keyframes scroll-fade-x {
+  0% {
+    --scroll-fade-start: 0px;
+    --scroll-fade-end: 24px;
+  }
+  10%,
+  90% {
+    --scroll-fade-start: 24px;
+    --scroll-fade-end: 24px;
+  }
+  100% {
+    --scroll-fade-start: 24px;
+    --scroll-fade-end: 0px;
+  }
+}
+@supports (animation-timeline: scroll()) {
+  .scroll-fade-x {
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      #000 var(--scroll-fade-start),
+      #000 calc(100% - var(--scroll-fade-end)),
+      transparent
+    );
+    animation: scroll-fade-x linear both;
+    /* After the shorthand, which resets the timeline. */
+    animation-timeline: scroll(self inline);
+  }
+}

src/browser/terminal-window.tsx

@@ -63,7 +63,7 @@ if (!workspaceId || !sessionId) {
   // race conditions with WebSocket connections and terminal lifecycle
   ReactDOM.createRoot(document.getElementById("root")!).render(
     <APIProvider>
-      <TerminalRouterProvider>
+      <TerminalRouterProvider popout>
         <TerminalWindowContent
           workspaceId={workspaceId}
           sessionId={sessionId}

src/browser/terminal/TerminalRouterContext.tsx

@@ -13,6 +13,8 @@ const TerminalRouterContext = createContext<TerminalSessionRouter | null>(null);
 
 interface TerminalRouterProviderProps {
   children: React.ReactNode;
+  /** Set in pop-out terminal windows (terminal-window.tsx). */
+  popout?: boolean;
 }
 
 /**
@@ -35,12 +37,12 @@ export function TerminalRouterProvider(props: TerminalRouterProviderProps) {
     }
 
     // Create/cleanup after commit to avoid render-time disposal in concurrent mode.
-    const nextRouter = new TerminalSessionRouter(api);
+    const nextRouter = new TerminalSessionRouter(api, { popout: props.popout === true });
     setRouter(nextRouter);
     return () => {
       nextRouter.dispose();
     };
-  }, [api]);
+  }, [api, props.popout]);
 
   const routerForContext = api && router?.getApi() === api ? router : null;
 

src/browser/terminal/TerminalSessionRouter.ts

@@ -51,8 +51,12 @@ export class TerminalSessionRouter {
   private readonly api: APIClient;
   private sessions = new Map<string, SessionState>();
 
-  constructor(api: APIClient) {
+  /** True in a pop-out terminal window: its attaches keep the session out of the sidebar. */
+  private readonly popout: boolean;
+
+  constructor(api: APIClient, options?: { popout?: boolean }) {
     this.api = api;
+    this.popout = options?.popout === true;
   }
 
   /** Get the API client (for identity comparison when recreating router) */
@@ -287,7 +291,10 @@ export class TerminalSessionRouter {
     // Start attach stream (fire-and-forget, but managed by abort controller)
     void (async () => {
       try {
-        const iterator = await this.api.terminal.attach({ sessionId }, { signal });
+        const iterator = await this.api.terminal.attach(
+          this.popout ? { sessionId, popout: true } : { sessionId },
+          { signal }
+        );
         for await (const msg of iterator) {
           // Check if session was removed (unsubscribed)
           const currentSession = this.sessions.get(sessionId);

src/common/orpc/schemas/api.ts

@@ -2907,7 +2907,11 @@ export const terminal = {
    * Guarantees no missed output between state snapshot and live stream.
    */
   attach: {
-    input: z.object({ sessionId: z.string() }),
+    input: z.object({
+      sessionId: z.string(),
+      /** Set by pop-out terminal windows; their sessions stay out of listSessions meanwhile. */
+      popout: z.boolean().nullish(),
+    }),
     output: eventIterator(
       z.discriminatedUnion("type", [
         z.object({ type: z.literal("screenState"), data: z.string() }),

src/desktop/terminalWindowManager.ts

@@ -24,6 +24,10 @@ export class TerminalWindowManager {
   private windows = new Map<string, Set<BrowserWindow>>(); // workspaceId -> Set of windows
   private windowCount = 0; // Counter for unique window IDs
   private readonly config: Config;
+  private onSessionWindowClosed: ((sessionId: string, closedBy: "user" | "app") => void) | null =
+    null;
+  /** Windows closed by closeTerminalWindow rather than by the user. */
+  private readonly appClosedWindows = new WeakSet<BrowserWindow>();
 
   constructor(
     config: Config,
@@ -34,6 +38,13 @@ export class TerminalWindowManager {
     this.config = config;
   }
 
+  /** Called with the session ID when a pop-out window that showed a session has closed. */
+  setSessionWindowClosedHandler(
+    handler: (sessionId: string, closedBy: "user" | "app") => void
+  ): void {
+    this.onSessionWindowClosed = handler;
+  }
+
   /**
    * Open a new terminal window for a workspace
    * Multiple windows can be open for the same workspace
@@ -117,6 +128,18 @@ export class TerminalWindowManager {
         }
       }
       log.info(`Terminal window ${windowId} closed for workspace: ${workspaceId}`);
+      // 'closed' fires only when the window really goes away: its reload and a renderer crash
+      // keep the window, so the session survives those.
+      if (sessionId) {
+        try {
+          this.onSessionWindowClosed?.(
+            sessionId,
+            this.appClosedWindows.has(terminalWindow) ? "app" : "user"
+          );
+        } catch (err) {
+          log.error(`Failed to end terminal session ${sessionId} after its window closed:`, err);
+        }
+      }
     });
 
     // Load the terminal page
@@ -158,6 +181,7 @@ export class TerminalWindowManager {
     if (windowSet) {
       for (const window of windowSet) {
         if (!window.isDestroyed()) {
+          this.appClosedWindows.add(window);
           window.close();
         }
       }

src/node/orpc/router.ts

@@ -2492,7 +2492,9 @@ export const router = (authToken?: string) => {
       attach: t
         .input(schemas.terminal.attach.input)
         .output(schemas.terminal.attach.output)
-        .handler(({ context, input, signal }) => attachTerminal(context, input.sessionId, signal)),
+        .handler(({ context, input, signal }) =>
+          attachTerminal(context, input.sessionId, signal, input.popout === true)
+        ),
       onExit: t
         .input(schemas.terminal.onExit.input)
         .output(schemas.terminal.onExit.output)