fix(app): settle on the slash header separator (#57677)

packages/app/src/session/session-identity-header.css

@@ -85,64 +85,11 @@
   top: 48px;
 }
 
-/* Session header separator variants, chosen in the debug bar's Motion workspace under Experiments. */
+/* The "/" does not mirror and its side bearings differ, so each direction gets its own padding to centre the ink between the segments. */
 .session-location-separator {
-  padding-inline-end: 4px;
+  padding-inline: 3.5px 3px;
 }
 
-/* The slash's ink sits 1.3px nearer the project than the title; this evens the two gaps. */
-.session-location-separator[data-variant="slash"] {
-  padding-inline: 0.5px 3px;
-}
-
-.session-location-separator:not([data-variant="slash"]) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 16px;
-  block-size: 16px;
-}
-
-.session-location-separator:not([data-variant="slash"])::before {
-  content: "";
-}
-
-.session-location-separator[data-variant="chevron"]::before {
-  inline-size: 5px;
-  block-size: 5px;
-  border-block-start: 1.25px solid currentColor;
-  border-inline-end: 1.25px solid currentColor;
-  transform: translateX(-1px) rotate(45deg);
-}
-
-.session-location-separator[data-variant="chevron"]:dir(rtl)::before {
-  transform: translateX(1px) rotate(-45deg);
-}
-
-.session-location-separator[data-variant="caret"]::before {
-  border-block: 3px solid transparent;
-  border-inline-start: 4px solid currentColor;
-}
-
-.session-location-separator[data-variant="dot"]::before {
-  inline-size: 3px;
-  block-size: 3px;
-  border-radius: 50%;
-  background-color: currentColor;
-}
-
-.session-location-separator[data-variant="divider"]::before {
-  inline-size: 1px;
-  block-size: 14px;
-  background-color: var(--v2-border-border-base);
-}
-
-.session-header-location > [data-slot="session-location-trigger"][data-separator="chip"] {
-  margin-inline-end: 6px;
-  background-color: var(--v2-overlay-simple-overlay-hover);
-}
-
-.session-header-location
-  > [data-slot="session-location-trigger"][data-separator="chip"]:is(:hover, :focus-visible, [data-expanded]) {
-  background-color: var(--v2-overlay-simple-overlay-pressed);
+.session-location-separator:dir(rtl) {
+  padding-inline: 3.25px 3.5px;
 }

packages/app/src/session/session-identity-header.tsx

@@ -2,7 +2,6 @@ import type { SessionInfo } from "@opencode/client/promise"
 import type { MountedSession, SessionScreen } from "@opencode/gui-extensions/sdk"
 import { Icon } from "@opencode/ui/icon"
 import { Menu } from "@opencode/ui/menu"
-import { motionTuning } from "@opencode/ui/motion-tuning"
 import {
   displayName,
   getProjectAvatarSource,
@@ -10,7 +9,7 @@ import {
   ProjectAvatar,
 } from "@opencode/ui/project-avatar"
 import { useNavigate } from "@solidjs/router"
-import { createMemo, createSignal, For, Show, type ComponentProps, type JSX, type ParentProps } from "solid-js"
+import { createMemo, For, Show, type ComponentProps, type JSX, type ParentProps } from "solid-js"
 import { createStore } from "solid-js/store"
 import { ExtensionSlot } from "@/runtime/extension/render"
 import { containsDirectory, getFilename } from "@opencode/util/path"
@@ -33,24 +32,6 @@ import { SessionWorkingIndicator } from "./header/session-working-indicator"
 import { CollapsedSidebarToggleSpace } from "@/shell/sidebar-toggle"
 import "./session-identity-header.css"
 
-const separatorChoice = motionTuning.choice("sessionHeader.separator", {
-  label: "Session header separator",
-  group: "Experiments",
-  value: "slash",
-  labels: {
-    slash: "Slash",
-    chevron: "Chevron",
-    caret: "Mini caret",
-    dot: "Middle dot",
-    chip: "Project chip",
-    divider: "Divider",
-  },
-})
-
-const [separator, setSeparator] = createSignal(separatorChoice())
-
-motionTuning.subscribe(() => setSeparator(separatorChoice()))
-
 export function SessionTitleHeader(props: ParentProps) {
   return (
     <>
@@ -199,8 +180,7 @@ export function SessionLocation(props: {
       <Menu placement="bottom-start" gutter={4} modal={false} onOpenChange={onOpenChange}>
         <Menu.Trigger
           data-slot="session-location-trigger"
-          data-separator={props.trailing ? separator() : undefined}
-          class="flex h-6 min-w-0 max-w-[60%] shrink items-center gap-1.5 rounded-md ps-1 pe-2 text-start text-[13px] font-[440] leading-[var(--line-height-compact)] tracking-[-0.04px] text-v2-text-text-muted transition-colors hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-text-text-base focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-text-text-base focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-hover data-[expanded]:text-v2-text-text-base"
+          class="flex h-6 min-w-0 max-w-[60%] shrink items-center gap-1.5 rounded-[6px] px-1 text-start text-[13px] font-[440] leading-[var(--line-height-compact)] tracking-[-0.04px] text-v2-text-text-muted transition-colors hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-text-text-base focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-text-text-base focus-visible:outline-none data-[expanded]:bg-v2-overlay-simple-overlay-hover data-[expanded]:text-v2-text-text-base"
         >
           <ProjectAvatar
             class="shrink-0"
@@ -357,14 +337,13 @@ export function SessionLocation(props: {
           </Menu.Content>
         </Menu.Portal>
       </Menu>
-      <Show when={props.trailing && separator() !== "chip"}>
+      <Show when={props.trailing}>
         <span
           data-slot="session-title-separator"
-          data-variant={separator()}
           class="session-location-separator shrink-0 text-[11px] font-medium text-v2-text-text-faint"
           aria-hidden="true"
         >
-          {separator() === "slash" ? "/" : undefined}
+          /
         </span>
       </Show>
     </>