fix(app): center timeline beside summary

packages/app/src/index.css

@@ -65,14 +65,14 @@
   }
 
   /* Keep the 1000px conversation intact, with 320px for the summary and its gutters.
-     Move only as far as needed; wider panels already have enough space in the margin. */
-  @container session-chat (min-width: 1320px) {
+     When they overlap, center the conversation in the space that remains beside the summary. */
+  @container session-chat (min-width: 1320px) and (width < 1640px) {
     [data-slot="session-chat-panel"][data-summary-open="true"]
       :is([data-timeline-virtual-content], [data-component="session-composer-dock"] > div) {
-      --session-summary-translate: min(0px, calc(50cqi - 820px));
+      --session-summary-translate: -160px;
 
       &:dir(rtl) {
-        --session-summary-translate: max(0px, calc(820px - 50cqi));
+        --session-summary-translate: 160px;
       }
     }
   }

packages/app/src/shell/titlebar/tab-nav.css

@@ -9,7 +9,8 @@
   justify-content: center;
 }
 
-[data-titlebar-tab] {
+[data-titlebar-tab],
+[data-titlebar-tab-action] {
   --tab-base: var(--v2-background-bg-deep);
   --tab-overlay: transparent;
   background: linear-gradient(var(--tab-overlay), var(--tab-overlay)), var(--tab-base);
@@ -68,6 +69,14 @@
   --tab-overlay: var(--v2-overlay-simple-overlay-pressed);
 }
 
+[data-titlebar-tab-action]:is(:hover, :focus-visible) {
+  --tab-overlay: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-titlebar-tab-action]:is(:active, [data-state="pressed"]) {
+  --tab-overlay: var(--v2-overlay-simple-overlay-pressed);
+}
+
 [data-titlebar-tab]:is(:hover, [data-state="pressed"]) [data-slot="tab-close"] {
   background: linear-gradient(var(--tab-overlay), var(--tab-overlay)), var(--tab-base);
 }

packages/app/src/shell/titlebar/titlebar.tsx

@@ -351,9 +351,10 @@ export function Titlebar(props: {
               >
                 <button
                   type="button"
+                  data-titlebar-tab-action
                   data-action="vertical-tabs-home"
                   data-state={layout.route().type === "home" ? "pressed" : undefined}
-                  class="group mb-1 flex h-7 w-full shrink-0 items-center gap-1.5 rounded-[6px] ps-1.5 pe-2 text-[13px] leading-4 text-v2-text-text-faint hover:bg-v2-background-bg-layer-02 hover:text-v2-text-text-base data-[state=pressed]:bg-v2-background-bg-layer-02 data-[state=pressed]:text-v2-text-text-base"
+                  class="group mb-1 flex h-7 w-full shrink-0 items-center gap-1.5 rounded-[6px] ps-1.5 pe-2 text-[13px] leading-4 text-v2-text-text-faint hover:text-v2-text-text-base data-[state=pressed]:text-v2-text-text-base"
                   onClick={toggleHome}
                   aria-label={language.t("home.title")}
                   aria-pressed={layout.route().type === "home"}
@@ -650,8 +651,9 @@ export function Titlebar(props: {
                             {homeButton(true)}
                             <button
                               type="button"
+                              data-titlebar-tab-action
                               data-action="vertical-tabs-new-session"
-                              class="group flex h-7 w-full shrink-0 items-center gap-1.5 rounded-[6px] ps-1.5 pe-2 text-[13px] leading-4 text-v2-text-text-faint hover:bg-v2-background-bg-layer-02 hover:text-v2-text-text-base"
+                              class="group flex h-7 w-full shrink-0 items-center gap-1.5 rounded-[6px] ps-1.5 pe-2 text-[13px] leading-4 text-v2-text-text-faint hover:text-v2-text-text-base"
                               onClick={openNewTab}
                               aria-label={language.t("command.session.new")}
                             >