fix: improve worktree path readability (#1311)

Long worktree paths often share a low-signal prefix, while the final
checkout or branch segments identify the context a developer actually
needs. This keeps that useful tail visible in the compact session-vitals
panel and preserves the actual order of mixed-direction paths through
explicit LTR isolation.

The complete value is available through the shared tooltip for hover and
keyboard focus. This worktree-specific tooltip can use up to half the
viewport, expand left beyond the sidebar, and wrap long unbroken
segments at the cap while remaining viewport-contained with its arrow
anchored to the trigger; kit-ui’s generic 280-pixel tooltip default
remains unchanged. Existing copy behavior and the empty-path state are
preserved.

<sup>generated by a clanker</sup>

Author: mariusvniekerk

cmd/testfixture/main.go

@@ -449,6 +449,7 @@ func createDurationShowcaseFixture(
 		Project:          project,
 		Machine:          "test-machine",
 		Agent:            "claude",
+		Cwd:              "/workspace/مشروع/.worktrees/שלוםfeaturewithalongcheckoutnamefortooltipwrappingwithoutbreakopportunities",
 		StartedAt:        new(t0.Format(time.RFC3339Nano)),
 		EndedAt:          new(endParent.Format(time.RFC3339Nano)),
 		MessageCount:     len(parentMessages),

docs/superpowers/plans/2026-07-30-worktree-tooltip-width.md

@@ -0,0 +1,246 @@
+# Worktree Tooltip Width Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans
+> to implement this plan directly in the current agent, task-by-task. Never use
+> subagent-driven development. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Let the session-vitals worktree tooltip use up to half of the viewport
+so ordinary paths stay on one line while oversized paths wrap.
+
+**Approved spec/design:**
+`docs/superpowers/specs/2026-07-30-worktree-tooltip-width-design.md`
+
+**Architecture:** Keep kit-ui's generic tooltip sizing unchanged. Pass a
+dedicated class to the existing worktree `Tooltip`, then use the supported class
+hook to override only that popover's maximum width while retaining kit-ui's
+fixed viewport positioning and end-aligning its arrow with the trigger.
+
+**Tech Stack:** Svelte 5, TypeScript, `@kenn-io/kit-ui`, Playwright, Vitest
+
+## Global Constraints
+
+- The generic kit-ui tooltip must retain its 280-pixel default maximum width.
+- The worktree tooltip maximum width is `min(50vw, calc(100vw - 32px))`.
+- Paths that fit within the cap stay on one line; longer paths wrap.
+- The tooltip may extend left of the analysis sidebar but must remain inside the
+  viewport.
+- Unbroken path segments must wrap rather than overflow, and the tooltip arrow
+  must remain over the worktree trigger.
+- Preserve the existing LTR-isolated path text, start truncation, hover and
+  keyboard behavior, copy control, and empty state.
+
+______________________________________________________________________
+
+### Task 1: Make the worktree tooltip viewport-relative
+
+**Files:**
+
+- Modify: `cmd/testfixture/main.go`
+- Modify: `frontend/e2e/session-timing.spec.ts`
+- Modify: `frontend/src/lib/components/content/SessionVitals.svelte`
+
+**Interfaces:**
+
+- Consumes: kit-ui `Tooltip`'s supported `class?: string` and `align` props plus
+  existing fixed-position viewport clamping.
+
+- Produces: a `worktree-path-tooltip` popover class scoped to the session-vitals
+  worktree tooltip.
+
+- [ ] **Step 1: Make the fixture deterministic and write the failing browser
+  test**
+
+In `cmd/testfixture/main.go`, lengthen the showcase session's existing synthetic
+worktree path to exactly this value:
+
+```go
+Cwd: "/workspace/مشروع/.worktrees/שלוםfeaturewithalongcheckoutnamefortooltipwrappingwithoutbreakopportunities",
+```
+
+Update `SHOWCASE_WORKTREE` in `frontend/e2e/session-timing.spec.ts` to the same
+literal:
+
+```ts
+const SHOWCASE_WORKTREE =
+  "/workspace/مشروع/.worktrees/שלוםfeaturewithalongcheckoutnamefortooltipwrappingwithoutbreakopportunities";
+```
+
+Add this test after the existing mixed-direction worktree-path regression in
+`frontend/e2e/session-timing.spec.ts`:
+
+```ts
+test("uses available viewport width for the worktree tooltip", async ({
+  page,
+}) => {
+  await gotoShowcase(page);
+
+  const panel = page.locator("aside.vitals");
+  const path = page.locator(".context-value--path");
+  const trigger = page.locator(".context-tooltip .kit-tooltip-trigger");
+  await path.hover();
+
+  const tooltip = page.getByRole("tooltip");
+  await expect(tooltip).toHaveText(SHOWCASE_WORKTREE);
+  const panelLeft = await panel.evaluate(
+    (element) => element.getBoundingClientRect().left,
+  );
+  const wideLayout = await tooltip.evaluate((element) => {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    const lineTops = Array.from(
+      range.getClientRects(),
+      (rect) => Math.round(rect.top),
+    );
+    const rect = element.getBoundingClientRect();
+    const arrowStyle = getComputedStyle(element, "::before");
+    const arrowWidth = Number.parseFloat(arrowStyle.width);
+    const arrowCenter =
+      arrowStyle.left === "auto"
+        ? rect.right - Number.parseFloat(arrowStyle.right) - arrowWidth / 2
+        : rect.left + Number.parseFloat(arrowStyle.left) + arrowWidth / 2;
+    return {
+      arrowCenter,
+      left: rect.left,
+      lineCount: new Set(lineTops).size,
+      right: rect.right,
+      viewportWidth: window.innerWidth,
+      width: rect.width,
+    };
+  });
+  const triggerBounds = await trigger.boundingBox();
+  expect(triggerBounds).not.toBeNull();
+
+  expect(wideLayout.width).toBeLessThanOrEqual(
+    wideLayout.viewportWidth * 0.5 + 1,
+  );
+  expect(wideLayout.lineCount).toBe(1);
+  expect(wideLayout.left).toBeGreaterThanOrEqual(0);
+  expect(wideLayout.right).toBeLessThanOrEqual(wideLayout.viewportWidth);
+  expect(wideLayout.left).toBeLessThan(panelLeft);
+  expect(wideLayout.arrowCenter).toBeGreaterThanOrEqual(triggerBounds!.x);
+  expect(wideLayout.arrowCenter).toBeLessThanOrEqual(
+    triggerBounds!.x + triggerBounds!.width,
+  );
+
+  await page.setViewportSize({ width: 1000, height: 900 });
+  await expect(path).toBeVisible();
+  await path.hover();
+  const narrowLayout = await tooltip.evaluate((element) => {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    const lineTops = Array.from(
+      range.getClientRects(),
+      (rect) => Math.round(rect.top),
+    );
+    const rect = element.getBoundingClientRect();
+    return {
+      clientWidth: element.clientWidth,
+      left: rect.left,
+      lineCount: new Set(lineTops).size,
+      right: rect.right,
+      scrollWidth: element.scrollWidth,
+      viewportWidth: window.innerWidth,
+      width: rect.width,
+    };
+  });
+
+  expect(narrowLayout.width).toBeLessThanOrEqual(
+    narrowLayout.viewportWidth * 0.5 + 1,
+  );
+  expect(narrowLayout.lineCount).toBeGreaterThan(1);
+  expect(narrowLayout.scrollWidth).toBeLessThanOrEqual(
+    narrowLayout.clientWidth + 1,
+  );
+  expect(narrowLayout.left).toBeGreaterThanOrEqual(0);
+  expect(narrowLayout.right).toBeLessThanOrEqual(narrowLayout.viewportWidth);
+});
+```
+
+- [ ] **Step 2: Run the browser test to verify it fails**
+
+Run:
+
+```bash
+cd frontend
+npm run e2e -- session-timing.spec.ts --project=chromium \
+  --grep "uses available viewport width for the worktree tooltip"
+```
+
+Expected: FAIL because the current 280-pixel maximum wraps the fixture path at
+the default 1600-pixel viewport, so `wideLayout.lineCount` is greater than 1.
+After adding only the width override, the arrow assertion also fails until the
+tooltip is end-aligned.
+
+- [ ] **Step 3: Add the per-use width override**
+
+In `frontend/src/lib/components/content/SessionVitals.svelte`, pass the popover
+class through the existing tooltip:
+
+```svelte
+<Tooltip
+  text={session.cwd}
+  focusable
+  align="end"
+  class="worktree-path-tooltip"
+>
+```
+
+Add the scoped global rule next to the existing `.context-tooltip` integration
+styles:
+
+```css
+.context-tooltip :global(.worktree-path-tooltip) {
+  max-width: min(50vw, calc(100vw - 32px));
+  overflow-wrap: anywhere;
+}
+```
+
+Do not modify kit-ui source or the shared `.kit-tooltip` rule.
+
+- [ ] **Step 4: Run the focused browser regression in both engines**
+
+Run:
+
+```bash
+cd frontend
+npm run e2e -- session-timing.spec.ts --project=chromium \
+  --grep "uses available viewport width for the worktree tooltip"
+npm run e2e -- session-timing.spec.ts --project=webkit \
+  --grep "uses available viewport width for the worktree tooltip"
+```
+
+Expected: PASS in Chromium and WebKit. The default viewport renders one line and
+positions the tooltip left of the sidebar; the 1000-pixel viewport wraps the
+same complete path without exceeding 500 pixels or overflowing its unbroken
+segment. Both layouts remain viewport-contained, with the arrow over the
+trigger.
+
+- [ ] **Step 5: Run the affected component and integration checks**
+
+Run:
+
+```bash
+cd frontend
+npm test -- --run src/lib/components/content/SessionVitals.test.ts
+npm run e2e -- session-timing.spec.ts --project=chromium
+npm run check
+npm run check:kit-ui
+cd ..
+go fmt ./...
+go vet ./...
+```
+
+Expected: 12 component tests and all 7 Chromium session-vitals tests pass,
+Svelte reports 0 errors, kit-ui reports 0 findings, and Go formatting and vet
+complete successfully. Existing unrelated Svelte unused-selector warnings may
+remain.
+
+- [ ] **Step 6: Commit the implementation**
+
+```bash
+git add cmd/testfixture/main.go \
+  frontend/e2e/session-timing.spec.ts \
+  frontend/src/lib/components/content/SessionVitals.svelte
+git commit -m "fix: widen worktree path tooltip" \
+  -m "The shared 280-pixel default suits prose but forces filesystem paths to wrap inside the analysis sidebar. Give only the worktree tooltip a viewport-relative limit so ordinary paths stay on one line while oversized paths wrap at half the viewport."
+```

docs/superpowers/specs/2026-07-30-worktree-tooltip-width-design.md

@@ -0,0 +1,48 @@
+# Worktree Tooltip Width Design
+
+## Problem
+
+The shared kit-ui tooltip limits all content to 280 pixels. That is useful for
+short explanatory copy, but it forces ordinary filesystem paths to wrap inside
+the narrow session-analysis sidebar. The tooltip uses fixed positioning and can
+already move outside that sidebar, so the generic width limit wastes available
+viewport space.
+
+## Design
+
+Keep the shared tooltip default unchanged. Pass a dedicated class through the
+worktree tooltip's supported `class` prop and override only that tooltip's
+maximum width:
+
+```css
+max-width: min(50vw, calc(100vw - 32px));
+overflow-wrap: anywhere;
+```
+
+The tooltip retains kit-ui's existing `width: max-content`. A path that fits
+within half of the viewport therefore stays on one line. A longer path wraps
+once it reaches the 50 percent cap, including when a single path segment has no
+natural line-breaking opportunity. The tooltip uses end alignment so kit-ui's
+fixed-position floating logic anchors its right edge and arrow to the trigger
+near the viewport's right edge. This allows the bubble to extend outside the
+sidebar without leaving the viewport or visually detaching its arrow from the
+worktree row.
+
+The displayed path and tooltip content remain LTR-isolated technical
+identifiers. Hover, keyboard focus, copy behavior, and the compact truncated row
+remain unchanged.
+
+## Verification
+
+Extend the session-vitals browser coverage to assert that the worktree tooltip:
+
+- contains the complete path;
+- never exceeds 50 percent of the viewport width;
+- stays on one line when the fixture path fits under that limit;
+- extends left of the sidebar when additional width is needed;
+- remains inside the viewport with its arrow over the trigger; and
+- wraps an unbroken path segment without overflowing when synthetic content
+  exceeds the viewport-relative cap.
+
+Keep the existing mixed-direction path geometry regression and component tooltip
+interaction test.