Fix workspace title display names

Author: pallyoung

packages/web/src/features/command-palette/components/command-palette.tsx

@@ -17,6 +17,7 @@ import {
 } from "../../../atoms/workspaces";
 import { useViewport } from "../../../hooks/use-viewport";
 import { useTranslation } from "../../../lib/i18n";
+import { formatWorkspaceLabel } from "../../notifications/format";
 import {
   bottomPanelHeightAtom,
   focusModeAtom,
@@ -382,7 +383,7 @@ function buildCommands(context: {
 
   // Add workspace switch commands
   workspaces.forEach((ws) => {
-    const workspaceLabel = ws.name || ws.path?.split("/").pop() || ws.path || ws.id;
+    const workspaceLabel = formatWorkspaceLabel(ws) || ws.id;
 
     commands.push({
       id: `switch-workspace-${ws.id}`,

packages/web/src/features/notifications/format.test.ts

@@ -21,6 +21,15 @@ describe("formatWorkspaceLabel", () => {
     expect(formatWorkspaceLabel({ name: "My Project", path: "/tmp/foo" })).toBe("My Project");
   });
 
+  it("extracts the basename when the explicit name is a full path", () => {
+    expect(
+      formatWorkspaceLabel({
+        name: "/home/spencer/workspace/coder-studio",
+        path: "/home/spencer/workspace/coder-studio",
+      })
+    ).toBe("coder-studio");
+  });
+
   it("falls back to the basename of the path", () => {
     expect(formatWorkspaceLabel({ path: "/home/spencer/workspace/coder-studio" })).toBe(
       "coder-studio"

packages/web/src/features/notifications/format.ts

@@ -28,11 +28,15 @@ export function formatWorkspaceLabel(
 ): string {
   if (!workspace) return "";
   const name = workspace.name?.trim();
-  if (name) return name;
+  if (name) return extractWorkspaceLeafName(name);
   const path = workspace.path?.trim();
   if (!path) return "";
+  return extractWorkspaceLeafName(path);
+}
+
+function extractWorkspaceLeafName(value: string): string {
   // Strip trailing slashes, then take last segment.
-  const cleaned = path.replace(/[/\\]+$/, "");
+  const cleaned = value.replace(/[/\\]+$/, "");
   const parts = cleaned.split(/[/\\]/);
   return parts[parts.length - 1] || cleaned;
 }

packages/web/src/features/topbar/components/tab.test.tsx

@@ -43,6 +43,24 @@ describe("WorkspaceTab", () => {
     routerMocks.navigate.mockReset();
   });
 
+  it("renders the folder basename when workspace name is a full path", () => {
+    const workspace = {
+      ...createWorkspace("ws-2", "/home/spencer/workspace/coder-studio"),
+      name: "/home/spencer/workspace/coder-studio",
+    };
+    const store = createStore();
+    store.set(localeAtom, "en");
+
+    render(
+      <Provider store={store}>
+        <WorkspaceTab workspace={workspace} isActive={false} />
+      </Provider>
+    );
+
+    expect(screen.getByText("coder-studio")).toBeInTheDocument();
+    expect(screen.queryByText("/home/spencer/workspace/coder-studio")).toBeNull();
+  });
+
   it("sets the active workspace without navigating when a tab is clicked", () => {
     const workspace = createWorkspace("ws-2", "/tmp/two");
     const store = createStore();

packages/web/src/features/topbar/components/tab.tsx

@@ -11,6 +11,7 @@ import { X } from "lucide-react";
 import type { FC } from "react";
 import { activeWorkspaceIdAtom } from "../../../atoms/workspaces";
 import { useTranslation } from "../../../lib/i18n";
+import { formatWorkspaceLabel } from "../../notifications/format";
 import { useWorkspaceCloseAction } from "../../workspace/actions/use-workspace-close-action";
 
 interface WorkspaceTabProps {
@@ -31,11 +32,7 @@ export const WorkspaceTab: FC<WorkspaceTabProps> = ({ workspace, isActive }) =>
   const t = useTranslation();
   const setActiveWorkspace = useSetAtom(activeWorkspaceIdAtom);
   const closeWorkspace = useWorkspaceCloseAction();
-  const displayName =
-    workspace.name ||
-    workspace.path?.split("/").filter(Boolean).pop() ||
-    workspace.path ||
-    workspace.id;
+  const displayName = formatWorkspaceLabel(workspace) || workspace.id;
 
   const handleClick = () => {
     setActiveWorkspace(workspace.id);

packages/web/src/features/workspace/views/mobile/mobile-topbar.tsx

@@ -1,6 +1,7 @@
 import type { Workspace } from "@coder-studio/core";
 import { Menu, Settings2 } from "lucide-react";
 import { useTranslation } from "../../../../lib/i18n";
+import { formatWorkspaceLabel } from "../../../notifications/format";
 import type { WorkspaceFullscreenController } from "../../actions/use-workspace-fullscreen";
 import { WorkspaceFullscreenButton } from "../../components/workspace-fullscreen-button";
 
@@ -21,10 +22,7 @@ export function MobileTopBar({
 }: MobileTopBarProps) {
   const t = useTranslation();
   const workspaceLabel =
-    activeWorkspace?.name ??
-    activeWorkspace?.path?.split("/").filter(Boolean).pop() ??
-    activeWorkspace?.path ??
-    t("mobile.workspace_drawer.select_title");
+    formatWorkspaceLabel(activeWorkspace) || t("mobile.workspace_drawer.select_title");
 
   return (
     <header className="mobile-topbar">

packages/web/src/features/workspace/views/mobile/mobile-workspace-drawer.tsx

@@ -4,6 +4,7 @@ import { X } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { activeWorkspaceIdAtom } from "../../../../atoms/workspaces";
 import { useTranslation } from "../../../../lib/i18n";
+import { formatWorkspaceLabel } from "../../../notifications/format";
 import { useWorkspaceCloseAction } from "../../actions/use-workspace-close-action";
 
 interface MobileWorkspaceDrawerProps {
@@ -51,11 +52,7 @@ export function MobileWorkspaceDrawer({
 
         <div className="mobile-workspace-drawer__list">
           {workspaces.map((workspace) => {
-            const displayName =
-              workspace.name ||
-              workspace.path?.split("/").filter(Boolean).pop() ||
-              workspace.path ||
-              workspace.id;
+            const displayName = formatWorkspaceLabel(workspace) || workspace.id;
 
             return (
               <div