fix: show a close button on every tab, including the last one

The tab close (✕) was hidden when only one tab remained (`tabs.length > 1`),
so the final tab couldn't be closed with the mouse even though the app already
falls back to a Zed-style empty pane (matching Cmd+W). Always render the close
button so no tab is unclosable, and add an aria-label/title for accessibility.

Adds TabBar regression tests covering: a close button on every tab, on the last
remaining tab specifically, and that close-click stops propagation (doesn't also
select the tab).

Author: puncsky

src/components/TabBar.tsx

@@ -84,28 +84,30 @@ export function TabBar({
               />
             )}
             <span className="truncate max-w-[150px] font-medium">{tab.label}</span>
-            {tabs.length > 1 && (
-              <button
-                className="ml-1 p-0.5 rounded transition-colors"
-                style={{ color: "var(--nh-text-tertiary)" }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.background = "var(--nh-border)";
-                  e.currentTarget.style.color = "var(--nh-text)";
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.color = "var(--nh-text-tertiary)";
-                }}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onCloseTab(tab.id);
-                }}
-              >
-                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            )}
+            {/* Every tab gets a close button — including the last one, which falls back to the
+                empty pane (matching Cmd+W). No tab is unclosable from the mouse. */}
+            <button
+              className="ml-1 p-0.5 rounded transition-colors"
+              aria-label={`Close ${tab.label}`}
+              title="Close"
+              style={{ color: "var(--nh-text-tertiary)" }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = "var(--nh-border)";
+                e.currentTarget.style.color = "var(--nh-text)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = "transparent";
+                e.currentTarget.style.color = "var(--nh-text-tertiary)";
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                onCloseTab(tab.id);
+              }}
+            >
+              <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
           </div>
         );
       })}

src/components/__tests__/TabBar.test.tsx

@@ -0,0 +1,54 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import { TabBar } from "../TabBar";
+import type { TabInfo } from "../../lib/types";
+
+type Props = Parameters<typeof TabBar>[0];
+
+function tab(id: string, label: string, filePath: string | null = `/ws/${label}`): TabInfo {
+  return { id, label, filePath, kind: "markdown" } as TabInfo;
+}
+
+function setup(overrides: Partial<Props> = {}) {
+  const props: Props = {
+    tabs: [tab("t1", "a.md"), tab("t2", "b.md")],
+    activeTabId: "t1",
+    onSelectTab: vi.fn(),
+    onCloseTab: vi.fn(),
+    onAddTab: vi.fn(),
+    onDetachTab: vi.fn(),
+    ...overrides,
+  };
+  render(<TabBar {...props} />);
+  return props;
+}
+
+describe("TabBar", () => {
+  it("renders a close button on every tab", () => {
+    setup({ tabs: [tab("t1", "a.md"), tab("t2", "b.md"), tab("t3", "c.md")] });
+    expect(screen.getAllByRole("button", { name: /^Close / })).toHaveLength(3);
+  });
+
+  it("renders a close button on the LAST remaining tab (closing all tabs is allowed)", () => {
+    // The regression: the close ✕ used to be hidden when only one tab was left
+    // (`tabs.length > 1`), so the final tab was unclosable with the mouse even though
+    // the app now falls back to an empty pane. Every tab must stay closable.
+    const onCloseTab = vi.fn();
+    setup({ tabs: [tab("only", "solo.md")], activeTabId: "only", onCloseTab });
+
+    const closeBtn = screen.getByRole("button", { name: "Close solo.md" });
+    fireEvent.click(closeBtn);
+    expect(onCloseTab).toHaveBeenCalledWith("only");
+  });
+
+  it("close click doesn't also select the tab (stops propagation)", () => {
+    const onSelectTab = vi.fn();
+    const onCloseTab = vi.fn();
+    setup({ onSelectTab, onCloseTab });
+
+    fireEvent.click(screen.getByRole("button", { name: "Close b.md" }));
+    expect(onCloseTab).toHaveBeenCalledWith("t2");
+    expect(onSelectTab).not.toHaveBeenCalled();
+  });
+});