diff --git a/packages/paperclip-runner/devtools/issue-thread/issue-thread.spec.ts b/packages/paperclip-runner/devtools/issue-thread/issue-thread.spec.ts index 88f08663eec..7e53e90175d 100644 --- a/packages/paperclip-runner/devtools/issue-thread/issue-thread.spec.ts +++ b/packages/paperclip-runner/devtools/issue-thread/issue-thread.spec.ts @@ -722,6 +722,15 @@ test.describe("Capability clean-room chat", () => { const tabs = panel.getByRole("tab"); await expect(tabs.first()).toHaveText(/Evidence/); await expect(tabs.nth(1)).toHaveText(/Timeline/); + await expect(panel.locator(".pit-devtools-tabs .pit-icon")).toHaveCount(8); + const centerOffsets = await tabs.evaluateAll((elements) => elements.map((element) => { + const icon = element.querySelector(".pit-tab-glyph")?.getBoundingClientRect(); + const label = element.querySelector(".pit-tab-glyph + span")?.getBoundingClientRect(); + return icon === undefined || label === undefined + ? Number.POSITIVE_INFINITY + : Math.abs((icon.top + icon.height / 2) - (label.top + label.height / 2)); + })); + expect(Math.max(...centerOffsets)).toBeLessThanOrEqual(1); await expect(tabs.first()).toHaveAttribute("aria-selected", "true"); await expect(panel.locator("#evidence-turn-selector")).toBeVisible(); await panel.getByRole("tab", { name: /Timeline/ }).click(); diff --git a/packages/paperclip-runner/devtools/issue-thread/src/DevtoolsInspector.tsx b/packages/paperclip-runner/devtools/issue-thread/src/DevtoolsInspector.tsx index 4d52d20fee1..45e64ce73b7 100644 --- a/packages/paperclip-runner/devtools/issue-thread/src/DevtoolsInspector.tsx +++ b/packages/paperclip-runner/devtools/issue-thread/src/DevtoolsInspector.tsx @@ -1,7 +1,7 @@ import { useEffect, useMemo, useState } from "react"; import type { CapabilityDevtoolsSnapshot } from "../../../src/devtools"; -import { Icon } from "./Icons"; +import { Icon, type IconName } from "./Icons"; export type CapabilityDevtoolsTab = "evidence" | "timeline" | "state" | "diff" | "documents" | "protocol" | "runtime" | "authority"; type Json = null | boolean | number | string | Json[] | { [key: string]: Json }; @@ -55,15 +55,15 @@ function download(snapshot: CapabilityDevtoolsSnapshot) { URL.revokeObjectURL(url); } -const TABS: ReadonlyArray<{ id: CapabilityDevtoolsTab; glyph: string; label: string }> = [ - { id: "evidence", glyph: "◎", label: "Evidence" }, - { id: "timeline", glyph: "◫", label: "Timeline" }, - { id: "state", glyph: "{}", label: "State" }, - { id: "diff", glyph: "±", label: "Diff" }, - { id: "documents", glyph: "▤", label: "Documents" }, - { id: "protocol", glyph: "⇄", label: "Protocol" }, - { id: "runtime", glyph: ">_", label: "Runtime" }, - { id: "authority", glyph: "◇", label: "Authority" }, +const TABS: ReadonlyArray<{ id: CapabilityDevtoolsTab; icon: IconName; label: string }> = [ + { id: "evidence", icon: "evidence", label: "Evidence" }, + { id: "timeline", icon: "timeline", label: "Timeline" }, + { id: "state", icon: "state", label: "State" }, + { id: "diff", icon: "diff", label: "Diff" }, + { id: "documents", icon: "documents", label: "Documents" }, + { id: "protocol", icon: "protocol", label: "Protocol" }, + { id: "runtime", icon: "terminal", label: "Runtime" }, + { id: "authority", icon: "authority", label: "Authority" }, ]; function documentsOf(state: Json): Array<{ id: string; key: string; title: string; revisions: Array<{ id: string; revision: number; body: string; changeSummary: string | null; createdAt: string }> }> { @@ -124,8 +124,8 @@ export function DevtoolsInspector({ snapshot, onFork, tab, onTabChange }: { snap