@flanksource/clicky-ui 0.3.46 → 0.3.48

package/dist/data/test-runner/TestDetailPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TestDetailPanel.js","sources":["../../../src/data/test-runner/TestDetailPanel.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../../components/button\";\nimport { JsonView } from \"../JsonView\";\nimport { TabButton } from \"../TabButton\";\nimport { cn } from \"../../lib/utils\";\nimport { UiClass, UiClock, UiRefresh, UiStop } from \"../../icons\";\nimport type { Test } from \"./types\";\nimport { useTestRunner } from \"./context\";\nimport { formatTestDuration, statusIconFor, statusToneFor, sum } from \"./status\";\nimport { frameworkIcon } from \"./frameworkIcon\";\nimport { TestAttempts, TestFailureDetail, TestOutput } from \"./TestFailureDetail\";\n\nconst ICON_TONE = {\n  danger: \"rose\",\n  warning: \"amber\",\n  success: \"emerald\",\n  info: \"sky\",\n  neutral: \"neutral\",\n} as const;\n\n/** Built-in detail body — used when no adapter contributes `renderDetail`. */\nfunction DefaultDetailBody({ node }: { node: Test }) {\n  const hasChildren = (node.children?.length ?? 0) > 0;\n  const counts = hasChildren ? sum(node) : null;\n  return (\n    <div className=\"space-y-4 p-density-4\">\n      {node.message && !node.failure_detail && (\n        <p className=\"whitespace-pre-wrap break-words text-sm\">{node.message}</p>\n      )}\n      {node.failure_detail && <TestFailureDetail failure={node.failure_detail} />}\n      <TestOutput node={node} />\n      {node.attempts && node.attempts.length > 0 && <TestAttempts attempts={node.attempts} />}\n      {counts && counts.total > 0 && (\n        <div className=\"flex flex-wrap gap-3 text-xs text-muted-foreground\">\n          <span>{counts.total} total</span>\n          {counts.passed > 0 && <span>{counts.passed} passed</span>}\n          {counts.failed > 0 && <span>{counts.failed} failed</span>}\n          {counts.skipped > 0 && <span>{counts.skipped} skipped</span>}\n        </div>\n      )}\n      {node.detail != null && (\n        <div className=\"space-y-1\">\n          <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Detail</div>\n          <JsonView data={node.detail} />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction DetailHeader({ node, actions }: { node: Test; actions?: ReactNode }) {\n  const runner = useTestRunner();\n  const fwIcon = frameworkIcon(node.framework);\n  const canRerun = !!runner.onRerun && node.framework !== \"task\";\n  const canStop = !!runner.onStop && !!node.can_stop && !!node.task_id;\n  return (\n    <div className=\"flex items-start gap-2 border-b border-border p-density-4\">\n      <Icon\n        icon={statusIconFor(node)}\n        className={cn(\"mt-0.5 shrink-0 text-2xl\", node.running && \"animate-spin\")}\n        tone={ICON_TONE[statusToneFor(node)]}\n      />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-start justify-between gap-2\">\n          <h2 className=\"break-words text-base font-semibold\">{node.name}</h2>\n          <div className=\"flex shrink-0 items-center gap-1\">\n            {actions}\n            {canRerun && (\n              <Button\n                size=\"sm\"\n                disabled={runner.busy.rerun}\n                onClick={() => runner.onRerun!(node)}\n                title=\"Rerun this test or subtree\"\n              >\n                <Icon icon={UiRefresh} className=\"mr-1 text-sm\" />\n                {runner.busy.rerun ? \"Running...\" : \"Rerun\"}\n              </Button>\n            )}\n            {canStop && (\n              <Button\n                size=\"sm\"\n                variant=\"destructive\"\n                disabled={runner.busy.stop}\n                onClick={() => runner.onStop!(node)}\n                title=\"Stop this running task\"\n              >\n                <Icon icon={UiStop} className=\"mr-1 text-sm\" />\n                {runner.busy.stop ? \"Stopping...\" : \"Stop\"}\n              </Button>\n            )}\n          </div>\n        </div>\n        <div className=\"mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground\">\n          {fwIcon && (\n            <span className=\"inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5\">\n              <Icon icon={fwIcon} className=\"text-sm\" />\n              {node.framework}\n            </span>\n          )}\n          {node.duration ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Icon icon={UiClock} className=\"text-xs\" />\n              {formatTestDuration(node.duration)}\n            </span>\n          ) : null}\n          {node.file && (\n            <span className=\"font-mono\">\n              {node.file}\n              {node.line ? `:${node.line}` : \"\"}\n            </span>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/**\n * The right pane. Resolves the node's adapter for body / tabs / header actions,\n * falling back to the built-in default body. Shows an empty state when nothing\n * is selected.\n */\nexport function TestDetailPanel() {\n  const runner = useTestRunner();\n  const node = runner.selected;\n  // Tab state is controlled when the host supplies activeTab (e.g. to mirror it\n  // into the URL); otherwise the panel owns it. The render below tolerates an\n  // unknown id by falling back to the built-in \"detail\" tab.\n  const controlled = runner.activeTab !== undefined;\n  const [internalTab, setInternalTab] = useState<string>(\"detail\");\n  const activeTab = controlled ? runner.activeTab! : internalTab;\n  const setActiveTab = (id: string) => {\n    if (controlled) runner.onTabChange?.(id);\n    else setInternalTab(id);\n  };\n\n  if (!node) {\n    return (\n      <div className=\"flex h-full items-center justify-center text-sm text-muted-foreground\">\n        <div className=\"text-center\">\n          <Icon icon={UiClass} className=\"mb-2 block text-4xl\" />\n          Select a test to view its details.\n        </div>\n      </div>\n    );\n  }\n\n  const detailAdapter = runner.adapters.resolveDetail(node, runner);\n  const actionAdapter = runner.adapters.resolveActions(node, runner);\n  const tabs = runner.adapters.resolveTabs(node, runner);\n  const ownsScroll = runner.adapters.ownsScroll(node, runner);\n\n  const body = detailAdapter?.renderDetail\n    ? detailAdapter.renderDetail({ node, runner })\n    : <DefaultDetailBody node={node} />;\n  const actions = actionAdapter?.nodeActions?.({ node, runner });\n\n  const detailRegion = ownsScroll ? \"min-h-0 flex-1\" : \"min-h-0 flex-1 overflow-y-auto\";\n\n  // No extra tabs → just the body under the header.\n  if (tabs.length === 0) {\n    return (\n      <div className=\"flex h-full min-h-0 flex-col\">\n        <DetailHeader node={node} actions={actions} />\n        <div className={detailRegion}>{body}</div>\n      </div>\n    );\n  }\n\n  const detailTab = { id: \"detail\", label: \"Detail\", render: () => body };\n  const allTabs = [detailTab, ...tabs];\n  const active = allTabs.find((t) => t.id === activeTab) ?? detailTab;\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <DetailHeader node={node} actions={actions} />\n      <div className=\"flex shrink-0 items-center gap-1 border-b border-border px-density-2 py-density-1\">\n        {allTabs.map((t) => (\n          <TabButton\n            key={t.id}\n            active={active.id === t.id}\n            onClick={() => setActiveTab(t.id)}\n            label={t.label}\n          />\n        ))}\n      </div>\n      <div className={detailRegion}>{active.render()}</div>\n    </div>\n  );\n}\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"TestDetailPanel.js","sources":["../../../src/data/test-runner/TestDetailPanel.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { Button } from \"../../components/button\";\nimport { Select } from \"../../components/select\";\nimport { SplitButton } from \"../../components/SplitButton\";\nimport { useCopyFlash } from \"../../components/clipboard\";\nimport type { DropdownMenuItem } from \"../../overlay/DropdownMenu\";\nimport { cn } from \"../../lib/utils\";\nimport { JsonView } from \"../JsonView\";\nimport { TabButton } from \"../TabButton\";\nimport {\n  UiCheck,\n  UiClass,\n  UiClock,\n  UiCopy,\n  UiJson,\n  UiRefresh,\n  UiStop,\n  UiWarningCircle,\n} from \"../../icons\";\nimport type { Test } from \"./types\";\nimport { useTestRunner } from \"./context\";\nimport { buildNodeBrief, buildNodeJson, type CopyItem } from \"./copy\";\nimport { formatTestDuration, outcomeFor, sum } from \"./status\";\nimport { toolKeyFor } from \"./marks\";\nimport { OutcomeIcon, ToolIcon } from \"./MarkIcons\";\nimport { TestAttempts, TestFailureDetail, TestOutput } from \"./TestFailureDetail\";\n\n/** Built-in detail body — used when no adapter contributes `renderDetail`. */\nfunction DefaultDetailBody({ node }: { node: Test }) {\n  const hasChildren = (node.children?.length ?? 0) > 0;\n  const counts = hasChildren ? sum(node) : null;\n  return (\n    <div className=\"space-y-4 p-density-4\">\n      {node.message && !node.failure_detail && (\n        <p className=\"whitespace-pre-wrap break-words text-sm\">{node.message}</p>\n      )}\n      {node.failure_detail && <TestFailureDetail failure={node.failure_detail} />}\n      <TestOutput node={node} />\n      {node.attempts && node.attempts.length > 0 && <TestAttempts attempts={node.attempts} />}\n      {counts && counts.total > 0 && (\n        <div className=\"flex flex-wrap gap-3 text-xs text-muted-foreground\">\n          <span>{counts.total} total</span>\n          {counts.passed > 0 && <span>{counts.passed} passed</span>}\n          {counts.failed > 0 && <span>{counts.failed} failed</span>}\n          {counts.skipped > 0 && <span>{counts.skipped} skipped</span>}\n        </div>\n      )}\n      {node.detail != null && (\n        <div className=\"space-y-1\">\n          <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">Detail</div>\n          <JsonView data={node.detail} />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction copyMenuItem(item: CopyItem, copy: (text: string) => void): DropdownMenuItem {\n  const icon = item.icon ? { icon: item.icon } : {};\n  if (\"reason\" in item) {\n    return { label: item.label, ...icon, disabled: true, title: item.reason, onSelect: () => {} };\n  }\n  return { label: item.label, ...icon, onSelect: () => copy(item.value) };\n}\n\nconst COPY_LABEL = { idle: \"Copy details\", copied: \"Copied\", error: \"Copy failed\" } as const;\nconst COPY_ICON = { idle: UiCopy, copied: UiCheck, error: UiWarningCircle } as const;\n\n/**\n * \"Copy details\" split button: the primary action copies a Markdown brief of\n * the generic sections plus every matching adapter's `copy` sections; the menu\n * offers the node as JSON and the adapters' items, disabled with a reason when\n * they have nothing to copy. The label flips to \"Copied\" or \"Copy failed\".\n */\nfunction CopyDetailsButton({ node }: { node: Test }) {\n  const runner = useTestRunner();\n  const { state, copy } = useCopyFlash();\n  const sections = useMemo(() => runner.adapters.resolveCopy(node, runner), [node, runner]);\n  const items: DropdownMenuItem[] = [\n    { label: \"Copy as JSON\", icon: UiJson, onSelect: () => copy(buildNodeJson(node)) },\n    ...sections.items.map((item) => copyMenuItem(item, copy)),\n  ];\n  return (\n    <SplitButton\n      label={COPY_LABEL[state]}\n      icon={COPY_ICON[state]}\n      variant=\"outline\"\n      size=\"sm\"\n      align=\"right\"\n      title=\"More copy options\"\n      onClick={() => copy(buildNodeBrief(node, sections))}\n      items={items}\n    />\n  );\n}\n\nfunction DetailHeader({ node, actionNode, actions, attemptChooser }: { node: Test; actionNode: Test; actions?: ReactNode; attemptChooser?: ReactNode }) {\n  const runner = useTestRunner();\n  const outcome = outcomeFor(node);\n  const canRerun = !!runner.onRerun && actionNode.framework !== \"task\";\n  const canStop = !!runner.onStop && !!actionNode.can_stop && !!actionNode.task_id;\n  const location = node.file ? `${node.file}${node.line ? `:${node.line}` : \"\"}` : undefined;\n  return (\n    <div\n      className=\"flex min-w-0 items-center gap-2 border-b border-border px-density-4 py-density-2\"\n      data-detail-header=\"\"\n    >\n      {outcome ? (\n        <OutcomeIcon outcome={outcome} className=\"text-lg\" />\n      ) : (\n        <Icon icon={UiClass} className=\"shrink-0 text-lg text-muted-foreground\" />\n      )}\n      <h2 className=\"min-w-0 shrink truncate text-base font-semibold\" title={node.name}>\n        {node.name}\n      </h2>\n      {node.framework && (\n        <span className=\"inline-flex shrink-0 items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground\">\n          <ToolIcon tool={toolKeyFor(node)} className=\"text-sm\" />\n          {node.framework}\n        </span>\n      )}\n      {node.duration ? (\n        <span className=\"inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground\">\n          <Icon icon={UiClock} className=\"text-xs\" />\n          {formatTestDuration(node.duration)}\n        </span>\n      ) : null}\n      {location && (\n        <span\n          className=\"min-w-0 shrink-[100] truncate font-mono text-xs text-muted-foreground\"\n          title={location}\n        >\n          {location}\n        </span>\n      )}\n      <div className=\"ml-auto flex shrink-0 items-center gap-1\">\n        {attemptChooser}\n        {actions}\n        <CopyDetailsButton node={node} />\n        {canRerun && (\n          <Button\n            size=\"sm\"\n            disabled={runner.busy.rerun}\n            onClick={() => runner.onRerun!(actionNode)}\n            title=\"Rerun this test or subtree\"\n          >\n            <Icon icon={UiRefresh} className=\"mr-1 text-sm\" />\n            {runner.busy.rerun ? \"Running...\" : \"Rerun\"}\n          </Button>\n        )}\n        {canStop && (\n          <Button\n            size=\"sm\"\n            variant=\"destructive\"\n            disabled={runner.busy.stop}\n            onClick={() => runner.onStop!(actionNode)}\n            title=\"Stop this running task\"\n          >\n            <Icon icon={UiStop} className=\"mr-1 text-sm\" />\n            {runner.busy.stop ? \"Stopping...\" : \"Stop\"}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * The right pane. Resolves the node's adapter for body / tabs / header actions,\n * falling back to the built-in default body. Shows an empty state when nothing\n * is selected.\n */\nexport function TestDetailPanel() {\n  const runner = useTestRunner();\n  const selected = runner.selected;\n  const [attemptSelection, setAttemptSelection] = useState<{ key: string; id: number } | null>(null);\n  // Tab state is controlled when the host supplies activeTab (e.g. to mirror it\n  // into the URL); otherwise the panel owns it. The render below tolerates an\n  // unknown id by falling back to the built-in \"detail\" tab.\n  const controlled = runner.activeTab !== undefined;\n  const [internalTab, setInternalTab] = useState<string>(\"detail\");\n  const activeTab = controlled ? runner.activeTab! : internalTab;\n  const setActiveTab = (id: string) => {\n    if (controlled) runner.onTabChange?.(id);\n    else setInternalTab(id);\n  };\n\n  if (!selected) {\n    return (\n      <div className=\"flex h-full items-center justify-center text-sm text-muted-foreground\">\n        <div className=\"text-center\">\n          <Icon icon={UiClass} className=\"mb-2 block text-4xl\" />\n          Select a test to view its details.\n        </div>\n      </div>\n    );\n  }\n\n  const attempts = runner.adapters.resolveAttempts(selected, runner);\n  const key = selected.task_id ?? selected.name;\n  const attemptId = runner.activeAttempt ?? (attemptSelection?.key === key ? attemptSelection.id : undefined);\n  const attempt = attempts.find((a) => a.id === attemptId) ?? attempts.at(-1);\n  const node = attempts.length > 1 && attempt ? attempt.node : selected;\n  const attemptChooser = attempts.length > 1 && attempt ? (\n    <div className=\"w-44 shrink-0\">\n      <Select aria-label=\"Attempt\" value={String(attempt.id)} className=\"h-7 text-xs\" onChange={(event) => {\n        const id = Number(event.target.value);\n        if (runner.onAttemptChange) runner.onAttemptChange(id);\n        else setAttemptSelection({ key, id });\n      }} options={attempts.map((a) => ({ value: String(a.id), label: `Attempt ${a.id}/${attempts.length} · ${a.status}${a.durationMs !== undefined ? ` · ${formatTestDuration(a.durationMs * 1e6)}` : \"\"}` }))} />\n    </div>\n  ) : null;\n\n  const detailAdapter = runner.adapters.resolveDetail(node, runner);\n  const actionAdapter = runner.adapters.resolveActions(selected, runner);\n  const tabs = runner.adapters.resolveTabs(node, runner);\n  const ownsScroll = runner.adapters.ownsScroll(node, runner);\n\n  const body = detailAdapter?.renderDetail\n    ? detailAdapter.renderDetail({ node, runner })\n    : <DefaultDetailBody node={node} />;\n  const actions = actionAdapter?.nodeActions?.({ node: selected, runner });\n\n  // A size container, so log blocks can cap themselves at a share of the pane (cqh).\n  const detailRegion = cn(\"min-h-0 flex-1 [container-type:size]\", !ownsScroll && \"overflow-y-auto\");\n\n  // No extra tabs → just the body under the header.\n  if (tabs.length === 0) {\n    return (\n      <div className=\"flex h-full min-h-0 flex-col\">\n        <DetailHeader node={node} actionNode={selected} actions={actions} attemptChooser={attemptChooser} />\n        <div className={detailRegion}>{body}</div>\n      </div>\n    );\n  }\n\n  const detailTab = { id: \"detail\", label: \"Detail\", render: () => body };\n  const allTabs = [detailTab, ...tabs];\n  const active = allTabs.find((t) => t.id === activeTab) ?? detailTab;\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <DetailHeader node={node} actionNode={selected} actions={actions} attemptChooser={attemptChooser} />\n      <div className=\"flex shrink-0 items-center gap-1 border-b border-border px-density-2 py-density-1\">\n        {allTabs.map((t) => (\n          <TabButton\n            key={t.id}\n            active={active.id === t.id}\n            onClick={() => setActiveTab(t.id)}\n            label={t.label}\n          />\n        ))}\n      </div>\n      <div className={detailRegion}>{active.render()}</div>\n    </div>\n  );\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/data/test-runner/TestFailureDetail.cjs

@@ -3,47 +3,43 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const LogViewer = require("../LogViewer.cjs");
 const utils = require("../../lib/utils.cjs");
+const Expectation = require("./Expectation.cjs");
 const status = require("./status.cjs");
-function Field({
-  label,
-  value,
-  mono
-}) {
-  if (!value) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "pre",
-      {
-        className: utils.cn(
-          "whitespace-pre-wrap break-words rounded-md bg-muted p-2 text-xs",
-          mono && "font-mono"
-        ),
-        children: value
-      }
-    )
-  ] });
-}
 function TestFailureDetail({ failure }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 rounded-md border border-red-200 bg-red-50/50 p-3 dark:border-red-900 dark:bg-red-950/30", children: [
+  const hasExpectation = !!(failure.matcher || failure.expected || failure.actual || failure.location);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     failure.summary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-700 dark:text-red-300", children: failure.summary }),
-    /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Matcher", value: failure.matcher, mono: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Expected", value: failure.expected, mono: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Actual", value: failure.actual, mono: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(Field, { label: "Location", value: failure.location, mono: true }),
+    hasExpectation && /* @__PURE__ */ jsxRuntime.jsx(
+      Expectation.Expectation,
+      {
+        check: failure.matcher,
+        expected: failure.expected || void 0,
+        actual: failure.actual || void 0,
+        location: failure.location
+      }
+    ),
     failure.stack && /* @__PURE__ */ jsxRuntime.jsx(LogViewer.LogViewer, { logs: failure.stack, collapsedLines: 6 })
   ] });
 }
+const OUTPUT_MAX_HEIGHT = "25cqh";
 function TestOutput({ node }) {
   if (!node.stdout && !node.stderr) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
     node.stdout && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "stdout" }),
-      /* @__PURE__ */ jsxRuntime.jsx(LogViewer.LogViewer, { logs: node.stdout })
+      /* @__PURE__ */ jsxRuntime.jsx(LogViewer.LogViewer, { logs: node.stdout, variant: "terminal", maxHeight: OUTPUT_MAX_HEIGHT })
     ] }),
     node.stderr && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "stderr" }),
-      /* @__PURE__ */ jsxRuntime.jsx(LogViewer.LogViewer, { logs: node.stderr, borderClass: "border-red-300 dark:border-red-900" })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LogViewer.LogViewer,
+        {
+          logs: node.stderr,
+          variant: "terminal",
+          maxHeight: OUTPUT_MAX_HEIGHT,
+          borderClass: "border-red-500/70"
+        }
+      )
     ] })
   ] });
 }

package/dist/data/test-runner/TestFailureDetail.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TestFailureDetail.cjs","sources":["../../../src/data/test-runner/TestFailureDetail.tsx"],"sourcesContent":["import { LogViewer } from \"../LogViewer\";\nimport { cn } from \"../../lib/utils\";\nimport type { FailureDetail, Test, TestAttempt } from \"./types\";\nimport { formatTestDuration } from \"./status\";\n\nfunction Field({\n  label,\n  value,\n  mono,\n}: {\n  label: string;\n  value: string | undefined;\n  mono?: boolean;\n}) {\n  if (!value) return null;\n  return (\n    <div className=\"space-y-1\">\n      <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">{label}</div>\n      <pre\n        className={cn(\n          \"whitespace-pre-wrap break-words rounded-md bg-muted p-2 text-xs\",\n          mono && \"font-mono\",\n        )}\n      >\n        {value}\n      </pre>\n    </div>\n  );\n}\n\n/** Renders a structured failure (expected/actual/matcher/location/stack). */\nexport function TestFailureDetail({ failure }: { failure: FailureDetail }) {\n  return (\n    <div className=\"space-y-3 rounded-md border border-red-200 bg-red-50/50 p-3 dark:border-red-900 dark:bg-red-950/30\">\n      {failure.summary && (\n        <p className=\"text-sm font-medium text-red-700 dark:text-red-300\">{failure.summary}</p>\n      )}\n      <Field label=\"Matcher\" value={failure.matcher} mono />\n      <Field label=\"Expected\" value={failure.expected} mono />\n      <Field label=\"Actual\" value={failure.actual} mono />\n      <Field label=\"Location\" value={failure.location} mono />\n      {failure.stack && <LogViewer logs={failure.stack} collapsedLines={6} />}\n    </div>\n  );\n}\n\n/** stdout / stderr blocks, each via the collapsible LogViewer. */\nexport function TestOutput({ node }: { node: Test }) {\n  if (!node.stdout && !node.stderr) return null;\n  return (\n    <div className=\"space-y-3\">\n      {node.stdout && (\n        <div className=\"space-y-1\">\n          <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">stdout</div>\n          <LogViewer logs={node.stdout} />\n        </div>\n      )}\n      {node.stderr && (\n        <div className=\"space-y-1\">\n          <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">stderr</div>\n          <LogViewer logs={node.stderr} borderClass=\"border-red-300 dark:border-red-900\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction attemptTone(a: TestAttempt): string {\n  if (a.failed || a.timed_out) return \"text-red-600 dark:text-red-400\";\n  if (a.passed) return \"text-green-600 dark:text-green-400\";\n  return \"text-muted-foreground\";\n}\n\n/** Prior attempts list for flaky/reran tests. */\nexport function TestAttempts({ attempts }: { attempts: TestAttempt[] }) {\n  if (attempts.length === 0) return null;\n  return (\n    <div className=\"space-y-1\">\n      <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">\n        Attempts ({attempts.length})\n      </div>\n      <ul className=\"divide-y divide-border rounded-md border border-border text-xs\">\n        {attempts.map((a) => (\n          <li key={a.sequence} className=\"flex items-center justify-between gap-2 px-2 py-1\">\n            <span className={cn(\"font-medium\", attemptTone(a))}>\n              #{a.sequence} {a.run_kind ?? \"\"}\n            </span>\n            <span className=\"truncate text-muted-foreground\">{a.message}</span>\n            {a.duration ? (\n              <span className=\"shrink-0 text-muted-foreground\">{formatTestDuration(a.duration)}</span>\n            ) : null}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","cn","LogViewer","formatTestDuration"],"mappings":"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"}
+{"version":3,"file":"TestFailureDetail.cjs","sources":["../../../src/data/test-runner/TestFailureDetail.tsx"],"sourcesContent":["import { LogViewer } from \"../LogViewer\";\nimport { cn } from \"../../lib/utils\";\nimport { Expectation } from \"./Expectation\";\nimport type { FailureDetail, Test, TestAttempt } from \"./types\";\nimport { formatTestDuration } from \"./status\";\n\n/** Renders a structured failure: its summary, the expectation, and the stack. */\nexport function TestFailureDetail({ failure }: { failure: FailureDetail }) {\n  const hasExpectation = !!(\n    failure.matcher ||\n    failure.expected ||\n    failure.actual ||\n    failure.location\n  );\n  return (\n    <div className=\"space-y-2\">\n      {failure.summary && (\n        <p className=\"text-sm font-medium text-red-700 dark:text-red-300\">{failure.summary}</p>\n      )}\n      {hasExpectation && (\n        <Expectation\n          check={failure.matcher}\n          expected={failure.expected || undefined}\n          actual={failure.actual || undefined}\n          location={failure.location}\n        />\n      )}\n      {failure.stack && <LogViewer logs={failure.stack} collapsedLines={6} />}\n    </div>\n  );\n}\n\n// A quarter of the detail pane, which TestDetailPanel makes a size container.\nconst OUTPUT_MAX_HEIGHT = \"25cqh\";\n\n/** stdout / stderr as terminal blocks, each scrolling within a quarter of the detail pane. */\nexport function TestOutput({ node }: { node: Test }) {\n  if (!node.stdout && !node.stderr) return null;\n  return (\n    <div className=\"space-y-3\">\n      {node.stdout && (\n        <div className=\"space-y-1\">\n          <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">stdout</div>\n          <LogViewer logs={node.stdout} variant=\"terminal\" maxHeight={OUTPUT_MAX_HEIGHT} />\n        </div>\n      )}\n      {node.stderr && (\n        <div className=\"space-y-1\">\n          <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">stderr</div>\n          <LogViewer\n            logs={node.stderr}\n            variant=\"terminal\"\n            maxHeight={OUTPUT_MAX_HEIGHT}\n            borderClass=\"border-red-500/70\"\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction attemptTone(a: TestAttempt): string {\n  if (a.failed || a.timed_out) return \"text-red-600 dark:text-red-400\";\n  if (a.passed) return \"text-green-600 dark:text-green-400\";\n  return \"text-muted-foreground\";\n}\n\n/** Prior attempts list for flaky/reran tests. */\nexport function TestAttempts({ attempts }: { attempts: TestAttempt[] }) {\n  if (attempts.length === 0) return null;\n  return (\n    <div className=\"space-y-1\">\n      <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">\n        Attempts ({attempts.length})\n      </div>\n      <ul className=\"divide-y divide-border rounded-md border border-border text-xs\">\n        {attempts.map((a) => (\n          <li key={a.sequence} className=\"flex items-center justify-between gap-2 px-2 py-1\">\n            <span className={cn(\"font-medium\", attemptTone(a))}>\n              #{a.sequence} {a.run_kind ?? \"\"}\n            </span>\n            <span className=\"truncate text-muted-foreground\">{a.message}</span>\n            {a.duration ? (\n              <span className=\"shrink-0 text-muted-foreground\">{formatTestDuration(a.duration)}</span>\n            ) : null}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","Expectation","LogViewer","cn","formatTestDuration"],"mappings":";;;;;;;AAOO,SAAS,kBAAkB,EAAE,WAAuC;AACzE,QAAM,iBAAiB,CAAC,EACtB,QAAQ,WACR,QAAQ,YACR,QAAQ,UACR,QAAQ;AAEV,SACEA,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,IAAA,QAAQ,WACPC,2BAAAA,IAAC,KAAA,EAAE,WAAU,sDAAsD,kBAAQ,SAAQ;AAAA,IAEpF,kBACCA,2BAAAA;AAAAA,MAACC,YAAAA;AAAAA,MAAA;AAAA,QACC,OAAO,QAAQ;AAAA,QACf,UAAU,QAAQ,YAAY;AAAA,QAC9B,QAAQ,QAAQ,UAAU;AAAA,QAC1B,UAAU,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAGrB,QAAQ,SAASD,2BAAAA,IAACE,qBAAA,EAAU,MAAM,QAAQ,OAAO,gBAAgB,EAAA,CAAG;AAAA,EAAA,GACvE;AAEJ;AAGA,MAAM,oBAAoB;AAGnB,SAAS,WAAW,EAAE,QAAwB;AACnD,MAAI,CAAC,KAAK,UAAU,CAAC,KAAK,OAAQ,QAAO;AACzC,SACEH,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,IAAA,KAAK,UACJA,gCAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,6DAA4D,UAAA,UAAM;AAAA,MACjFA,+BAACE,UAAAA,aAAU,MAAM,KAAK,QAAQ,SAAQ,YAAW,WAAW,kBAAA,CAAmB;AAAA,IAAA,GACjF;AAAA,IAED,KAAK,UACJH,gCAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,6DAA4D,UAAA,UAAM;AAAA,MACjFA,2BAAAA;AAAAA,QAACE,UAAAA;AAAAA,QAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,SAAQ;AAAA,UACR,WAAW;AAAA,UACX,aAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACd,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAAS,YAAY,GAAwB;AAC3C,MAAI,EAAE,UAAU,EAAE,UAAW,QAAO;AACpC,MAAI,EAAE,OAAQ,QAAO;AACrB,SAAO;AACT;AAGO,SAAS,aAAa,EAAE,YAAyC;AACtE,MAAI,SAAS,WAAW,EAAG,QAAO;AAClC,SACEH,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,IAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,6DAA4D,UAAA;AAAA,MAAA;AAAA,MAC9D,SAAS;AAAA,MAAO;AAAA,IAAA,GAC7B;AAAA,IACAC,2BAAAA,IAAC,MAAA,EAAG,WAAU,kEACX,UAAA,SAAS,IAAI,CAAC,MACbD,2BAAAA,KAAC,MAAA,EAAoB,WAAU,qDAC7B,UAAA;AAAA,MAAAA,gCAAC,UAAK,WAAWI,MAAAA,GAAG,eAAe,YAAY,CAAC,CAAC,GAAG,UAAA;AAAA,QAAA;AAAA,QAChD,EAAE;AAAA,QAAS;AAAA,QAAE,EAAE,YAAY;AAAA,MAAA,GAC/B;AAAA,MACAH,2BAAAA,IAAC,QAAA,EAAK,WAAU,kCAAkC,YAAE,SAAQ;AAAA,MAC3D,EAAE,WACDA,+BAAC,QAAA,EAAK,WAAU,kCAAkC,UAAAI,OAAAA,mBAAmB,EAAE,QAAQ,EAAA,CAAE,IAC/E;AAAA,IAAA,KAPG,EAAE,QAQX,CACD,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;;;;"}

package/dist/data/test-runner/TestFailureDetail.d.ts

@@ -1,9 +1,9 @@
 import { FailureDetail, Test, TestAttempt } from './types.js';
-/** Renders a structured failure (expected/actual/matcher/location/stack). */
+/** Renders a structured failure: its summary, the expectation, and the stack. */
 export declare function TestFailureDetail({ failure }: {
     failure: FailureDetail;
 }): import("react").JSX.Element;
-/** stdout / stderr blocks, each via the collapsible LogViewer. */
+/** stdout / stderr as terminal blocks, each scrolling within a quarter of the detail pane. */
 export declare function TestOutput({ node }: {
     node: Test;
 }): import("react").JSX.Element | null;

package/dist/data/test-runner/TestFailureDetail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TestFailureDetail.d.ts","sourceRoot":"","sources":["../../../src/data/test-runner/TestFailureDetail.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AA4BhE,6EAA6E;AAC7E,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,aAAa,CAAA;CAAE,+BAaxE;AAED,kEAAkE;AAClE,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,sCAkBlD;AAQD,iDAAiD;AACjD,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,WAAW,EAAE,CAAA;CAAE,sCAsBrE"}
+{"version":3,"file":"TestFailureDetail.d.ts","sourceRoot":"","sources":["../../../src/data/test-runner/TestFailureDetail.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGhE,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,aAAa,CAAA;CAAE,+BAuBxE;AAKD,8FAA8F;AAC9F,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,sCAuBlD;AAQD,iDAAiD;AACjD,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,WAAW,EAAE,CAAA;CAAE,sCAsBrE"}

package/dist/data/test-runner/TestFailureDetail.js

@@ -1,47 +1,43 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { LogViewer } from "../LogViewer.js";
 import { cn } from "../../lib/utils.js";
+import { Expectation } from "./Expectation.js";
 import { formatTestDuration } from "./status.js";
-function Field({
-  label,
-  value,
-  mono
-}) {
-  if (!value) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx(
-      "pre",
-      {
-        className: cn(
-          "whitespace-pre-wrap break-words rounded-md bg-muted p-2 text-xs",
-          mono && "font-mono"
-        ),
-        children: value
-      }
-    )
-  ] });
-}
 function TestFailureDetail({ failure }) {
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-md border border-red-200 bg-red-50/50 p-3 dark:border-red-900 dark:bg-red-950/30", children: [
+  const hasExpectation = !!(failure.matcher || failure.expected || failure.actual || failure.location);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     failure.summary && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-red-700 dark:text-red-300", children: failure.summary }),
-    /* @__PURE__ */ jsx(Field, { label: "Matcher", value: failure.matcher, mono: true }),
-    /* @__PURE__ */ jsx(Field, { label: "Expected", value: failure.expected, mono: true }),
-    /* @__PURE__ */ jsx(Field, { label: "Actual", value: failure.actual, mono: true }),
-    /* @__PURE__ */ jsx(Field, { label: "Location", value: failure.location, mono: true }),
+    hasExpectation && /* @__PURE__ */ jsx(
+      Expectation,
+      {
+        check: failure.matcher,
+        expected: failure.expected || void 0,
+        actual: failure.actual || void 0,
+        location: failure.location
+      }
+    ),
     failure.stack && /* @__PURE__ */ jsx(LogViewer, { logs: failure.stack, collapsedLines: 6 })
   ] });
 }
+const OUTPUT_MAX_HEIGHT = "25cqh";
 function TestOutput({ node }) {
   if (!node.stdout && !node.stderr) return null;
   return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
     node.stdout && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "stdout" }),
-      /* @__PURE__ */ jsx(LogViewer, { logs: node.stdout })
+      /* @__PURE__ */ jsx(LogViewer, { logs: node.stdout, variant: "terminal", maxHeight: OUTPUT_MAX_HEIGHT })
     ] }),
     node.stderr && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
       /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "stderr" }),
-      /* @__PURE__ */ jsx(LogViewer, { logs: node.stderr, borderClass: "border-red-300 dark:border-red-900" })
+      /* @__PURE__ */ jsx(
+        LogViewer,
+        {
+          logs: node.stderr,
+          variant: "terminal",
+          maxHeight: OUTPUT_MAX_HEIGHT,
+          borderClass: "border-red-500/70"
+        }
+      )
     ] })
   ] });
 }

package/dist/data/test-runner/TestFailureDetail.js.map

@@ -1 +1 @@
-{"version":3,"file":"TestFailureDetail.js","sources":["../../../src/data/test-runner/TestFailureDetail.tsx"],"sourcesContent":["import { LogViewer } from \"../LogViewer\";\nimport { cn } from \"../../lib/utils\";\nimport type { FailureDetail, Test, TestAttempt } from \"./types\";\nimport { formatTestDuration } from \"./status\";\n\nfunction Field({\n  label,\n  value,\n  mono,\n}: {\n  label: string;\n  value: string | undefined;\n  mono?: boolean;\n}) {\n  if (!value) return null;\n  return (\n    <div className=\"space-y-1\">\n      <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">{label}</div>\n      <pre\n        className={cn(\n          \"whitespace-pre-wrap break-words rounded-md bg-muted p-2 text-xs\",\n          mono && \"font-mono\",\n        )}\n      >\n        {value}\n      </pre>\n    </div>\n  );\n}\n\n/** Renders a structured failure (expected/actual/matcher/location/stack). */\nexport function TestFailureDetail({ failure }: { failure: FailureDetail }) {\n  return (\n    <div className=\"space-y-3 rounded-md border border-red-200 bg-red-50/50 p-3 dark:border-red-900 dark:bg-red-950/30\">\n      {failure.summary && (\n        <p className=\"text-sm font-medium text-red-700 dark:text-red-300\">{failure.summary}</p>\n      )}\n      <Field label=\"Matcher\" value={failure.matcher} mono />\n      <Field label=\"Expected\" value={failure.expected} mono />\n      <Field label=\"Actual\" value={failure.actual} mono />\n      <Field label=\"Location\" value={failure.location} mono />\n      {failure.stack && <LogViewer logs={failure.stack} collapsedLines={6} />}\n    </div>\n  );\n}\n\n/** stdout / stderr blocks, each via the collapsible LogViewer. */\nexport function TestOutput({ node }: { node: Test }) {\n  if (!node.stdout && !node.stderr) return null;\n  return (\n    <div className=\"space-y-3\">\n      {node.stdout && (\n        <div className=\"space-y-1\">\n          <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">stdout</div>\n          <LogViewer logs={node.stdout} />\n        </div>\n      )}\n      {node.stderr && (\n        <div className=\"space-y-1\">\n          <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">stderr</div>\n          <LogViewer logs={node.stderr} borderClass=\"border-red-300 dark:border-red-900\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction attemptTone(a: TestAttempt): string {\n  if (a.failed || a.timed_out) return \"text-red-600 dark:text-red-400\";\n  if (a.passed) return \"text-green-600 dark:text-green-400\";\n  return \"text-muted-foreground\";\n}\n\n/** Prior attempts list for flaky/reran tests. */\nexport function TestAttempts({ attempts }: { attempts: TestAttempt[] }) {\n  if (attempts.length === 0) return null;\n  return (\n    <div className=\"space-y-1\">\n      <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">\n        Attempts ({attempts.length})\n      </div>\n      <ul className=\"divide-y divide-border rounded-md border border-border text-xs\">\n        {attempts.map((a) => (\n          <li key={a.sequence} className=\"flex items-center justify-between gap-2 px-2 py-1\">\n            <span className={cn(\"font-medium\", attemptTone(a))}>\n              #{a.sequence} {a.run_kind ?? \"\"}\n            </span>\n            <span className=\"truncate text-muted-foreground\">{a.message}</span>\n            {a.duration ? (\n              <span className=\"shrink-0 text-muted-foreground\">{formatTestDuration(a.duration)}</span>\n            ) : null}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAKA,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,CAAC,MAAO,QAAO;AACnB,SACE,qBAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,6DAA6D,UAAA,OAAM;AAAA,IAClF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,QAAQ;AAAA,QAAA;AAAA,QAGT,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;AAGO,SAAS,kBAAkB,EAAE,WAAuC;AACzE,SACE,qBAAC,OAAA,EAAI,WAAU,sGACZ,UAAA;AAAA,IAAA,QAAQ,WACP,oBAAC,KAAA,EAAE,WAAU,sDAAsD,kBAAQ,SAAQ;AAAA,IAErF,oBAAC,SAAM,OAAM,WAAU,OAAO,QAAQ,SAAS,MAAI,MAAC;AAAA,IACpD,oBAAC,SAAM,OAAM,YAAW,OAAO,QAAQ,UAAU,MAAI,MAAC;AAAA,IACtD,oBAAC,SAAM,OAAM,UAAS,OAAO,QAAQ,QAAQ,MAAI,MAAC;AAAA,IAClD,oBAAC,SAAM,OAAM,YAAW,OAAO,QAAQ,UAAU,MAAI,MAAC;AAAA,IACrD,QAAQ,SAAS,oBAAC,WAAA,EAAU,MAAM,QAAQ,OAAO,gBAAgB,EAAA,CAAG;AAAA,EAAA,GACvE;AAEJ;AAGO,SAAS,WAAW,EAAE,QAAwB;AACnD,MAAI,CAAC,KAAK,UAAU,CAAC,KAAK,OAAQ,QAAO;AACzC,SACE,qBAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,IAAA,KAAK,UACJ,qBAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,6DAA4D,UAAA,UAAM;AAAA,MACjF,oBAAC,WAAA,EAAU,MAAM,KAAK,OAAA,CAAQ;AAAA,IAAA,GAChC;AAAA,IAED,KAAK,UACJ,qBAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,6DAA4D,UAAA,UAAM;AAAA,0BAChF,WAAA,EAAU,MAAM,KAAK,QAAQ,aAAY,qCAAA,CAAqC;AAAA,IAAA,EAAA,CACjF;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAAS,YAAY,GAAwB;AAC3C,MAAI,EAAE,UAAU,EAAE,UAAW,QAAO;AACpC,MAAI,EAAE,OAAQ,QAAO;AACrB,SAAO;AACT;AAGO,SAAS,aAAa,EAAE,YAAyC;AACtE,MAAI,SAAS,WAAW,EAAG,QAAO;AAClC,SACE,qBAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,6DAA4D,UAAA;AAAA,MAAA;AAAA,MAC9D,SAAS;AAAA,MAAO;AAAA,IAAA,GAC7B;AAAA,IACA,oBAAC,MAAA,EAAG,WAAU,kEACX,UAAA,SAAS,IAAI,CAAC,MACb,qBAAC,MAAA,EAAoB,WAAU,qDAC7B,UAAA;AAAA,MAAA,qBAAC,UAAK,WAAW,GAAG,eAAe,YAAY,CAAC,CAAC,GAAG,UAAA;AAAA,QAAA;AAAA,QAChD,EAAE;AAAA,QAAS;AAAA,QAAE,EAAE,YAAY;AAAA,MAAA,GAC/B;AAAA,MACA,oBAAC,QAAA,EAAK,WAAU,kCAAkC,YAAE,SAAQ;AAAA,MAC3D,EAAE,WACD,oBAAC,QAAA,EAAK,WAAU,kCAAkC,UAAA,mBAAmB,EAAE,QAAQ,EAAA,CAAE,IAC/E;AAAA,IAAA,KAPG,EAAE,QAQX,CACD,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"TestFailureDetail.js","sources":["../../../src/data/test-runner/TestFailureDetail.tsx"],"sourcesContent":["import { LogViewer } from \"../LogViewer\";\nimport { cn } from \"../../lib/utils\";\nimport { Expectation } from \"./Expectation\";\nimport type { FailureDetail, Test, TestAttempt } from \"./types\";\nimport { formatTestDuration } from \"./status\";\n\n/** Renders a structured failure: its summary, the expectation, and the stack. */\nexport function TestFailureDetail({ failure }: { failure: FailureDetail }) {\n  const hasExpectation = !!(\n    failure.matcher ||\n    failure.expected ||\n    failure.actual ||\n    failure.location\n  );\n  return (\n    <div className=\"space-y-2\">\n      {failure.summary && (\n        <p className=\"text-sm font-medium text-red-700 dark:text-red-300\">{failure.summary}</p>\n      )}\n      {hasExpectation && (\n        <Expectation\n          check={failure.matcher}\n          expected={failure.expected || undefined}\n          actual={failure.actual || undefined}\n          location={failure.location}\n        />\n      )}\n      {failure.stack && <LogViewer logs={failure.stack} collapsedLines={6} />}\n    </div>\n  );\n}\n\n// A quarter of the detail pane, which TestDetailPanel makes a size container.\nconst OUTPUT_MAX_HEIGHT = \"25cqh\";\n\n/** stdout / stderr as terminal blocks, each scrolling within a quarter of the detail pane. */\nexport function TestOutput({ node }: { node: Test }) {\n  if (!node.stdout && !node.stderr) return null;\n  return (\n    <div className=\"space-y-3\">\n      {node.stdout && (\n        <div className=\"space-y-1\">\n          <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">stdout</div>\n          <LogViewer logs={node.stdout} variant=\"terminal\" maxHeight={OUTPUT_MAX_HEIGHT} />\n        </div>\n      )}\n      {node.stderr && (\n        <div className=\"space-y-1\">\n          <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">stderr</div>\n          <LogViewer\n            logs={node.stderr}\n            variant=\"terminal\"\n            maxHeight={OUTPUT_MAX_HEIGHT}\n            borderClass=\"border-red-500/70\"\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction attemptTone(a: TestAttempt): string {\n  if (a.failed || a.timed_out) return \"text-red-600 dark:text-red-400\";\n  if (a.passed) return \"text-green-600 dark:text-green-400\";\n  return \"text-muted-foreground\";\n}\n\n/** Prior attempts list for flaky/reran tests. */\nexport function TestAttempts({ attempts }: { attempts: TestAttempt[] }) {\n  if (attempts.length === 0) return null;\n  return (\n    <div className=\"space-y-1\">\n      <div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">\n        Attempts ({attempts.length})\n      </div>\n      <ul className=\"divide-y divide-border rounded-md border border-border text-xs\">\n        {attempts.map((a) => (\n          <li key={a.sequence} className=\"flex items-center justify-between gap-2 px-2 py-1\">\n            <span className={cn(\"font-medium\", attemptTone(a))}>\n              #{a.sequence} {a.run_kind ?? \"\"}\n            </span>\n            <span className=\"truncate text-muted-foreground\">{a.message}</span>\n            {a.duration ? (\n              <span className=\"shrink-0 text-muted-foreground\">{formatTestDuration(a.duration)}</span>\n            ) : null}\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAOO,SAAS,kBAAkB,EAAE,WAAuC;AACzE,QAAM,iBAAiB,CAAC,EACtB,QAAQ,WACR,QAAQ,YACR,QAAQ,UACR,QAAQ;AAEV,SACE,qBAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,IAAA,QAAQ,WACP,oBAAC,KAAA,EAAE,WAAU,sDAAsD,kBAAQ,SAAQ;AAAA,IAEpF,kBACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,QAAQ;AAAA,QACf,UAAU,QAAQ,YAAY;AAAA,QAC9B,QAAQ,QAAQ,UAAU;AAAA,QAC1B,UAAU,QAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAGrB,QAAQ,SAAS,oBAAC,WAAA,EAAU,MAAM,QAAQ,OAAO,gBAAgB,EAAA,CAAG;AAAA,EAAA,GACvE;AAEJ;AAGA,MAAM,oBAAoB;AAGnB,SAAS,WAAW,EAAE,QAAwB;AACnD,MAAI,CAAC,KAAK,UAAU,CAAC,KAAK,OAAQ,QAAO;AACzC,SACE,qBAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,IAAA,KAAK,UACJ,qBAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,6DAA4D,UAAA,UAAM;AAAA,MACjF,oBAAC,aAAU,MAAM,KAAK,QAAQ,SAAQ,YAAW,WAAW,kBAAA,CAAmB;AAAA,IAAA,GACjF;AAAA,IAED,KAAK,UACJ,qBAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,6DAA4D,UAAA,UAAM;AAAA,MACjF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,SAAQ;AAAA,UACR,WAAW;AAAA,UACX,aAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACd,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAAS,YAAY,GAAwB;AAC3C,MAAI,EAAE,UAAU,EAAE,UAAW,QAAO;AACpC,MAAI,EAAE,OAAQ,QAAO;AACrB,SAAO;AACT;AAGO,SAAS,aAAa,EAAE,YAAyC;AACtE,MAAI,SAAS,WAAW,EAAG,QAAO;AAClC,SACE,qBAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,6DAA4D,UAAA;AAAA,MAAA;AAAA,MAC9D,SAAS;AAAA,MAAO;AAAA,IAAA,GAC7B;AAAA,IACA,oBAAC,MAAA,EAAG,WAAU,kEACX,UAAA,SAAS,IAAI,CAAC,MACb,qBAAC,MAAA,EAAoB,WAAU,qDAC7B,UAAA;AAAA,MAAA,qBAAC,UAAK,WAAW,GAAG,eAAe,YAAY,CAAC,CAAC,GAAG,UAAA;AAAA,QAAA;AAAA,QAChD,EAAE;AAAA,QAAS;AAAA,QAAE,EAAE,YAAY;AAAA,MAAA,GAC/B;AAAA,MACA,oBAAC,QAAA,EAAK,WAAU,kCAAkC,YAAE,SAAQ;AAAA,MAC3D,EAAE,WACD,oBAAC,QAAA,EAAK,WAAU,kCAAkC,UAAA,mBAAmB,EAAE,QAAQ,EAAA,CAAE,IAC/E;AAAA,IAAA,KAPG,EAAE,QAQX,CACD,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

package/dist/data/test-runner/TestFilterBar.cjs

@@ -1,36 +1,62 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const Icon = require("../Icon.cjs");
 const utils = require("../../lib/utils.cjs");
-const frameworkIcon = require("./frameworkIcon.cjs");
+const Icon = require("../Icon.cjs");
+const DropdownMenu = require("../../overlay/DropdownMenu.cjs");
+const filterBarContext = require("../../components/filter-bar-context.cjs");
+const filterBarMulti = require("../../components/filter-bar-multi.cjs");
+const filterBarFieldUtils = require("../../components/filter-bar-field-utils.cjs");
+const MarkIcons = require("./MarkIcons.cjs");
+const marks = require("./marks.cjs");
 const status = require("./status.cjs");
-const filterState = require("./filterState.cjs");
-const UiAdd = require("../../icons/components/UiAdd.cjs");
-const UiRemove = require("../../icons/components/UiRemove.cjs");
-const STATUS_BADGES = {
-  failed: "bg-red-500",
-  warned: "bg-amber-400",
-  timedout: "bg-amber-500",
-  passed: "bg-green-500",
-  skipped: "bg-yellow-400",
-  running: "bg-blue-500",
-  pending: "bg-muted-foreground",
-  total: "bg-muted-foreground"
-};
-const STATUS_DEFS = status.STATUS_LABELS.map((d) => ({
-  ...d,
-  badge: STATUS_BADGES[d.key]
-}));
-function pillClass(mode) {
-  if (mode === "include") return "bg-accent border-border font-medium text-foreground";
-  if (mode === "exclude") return "bg-foreground text-background border-foreground font-medium";
-  return "border-border text-muted-foreground hover:bg-accent";
-}
-function StateMarker({ mode }) {
-  if (mode === "include") return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiAdd.UiAdd, className: "text-xs" });
-  if (mode === "exclude") return /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiRemove.UiRemove, className: "text-xs" });
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-current opacity-30", "aria-hidden": true });
+const UiChevronDown = require("../../icons/components/UiChevronDown.cjs");
+const COMMIT_IMMEDIATELY = { autoSubmit: false, compact: false };
+function Facet({
+  label,
+  options,
+  state,
+  onChange
+}) {
+  const value = Object.fromEntries(state);
+  const active = state.size > 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu.DropdownMenu,
+    {
+      align: "right",
+      menuLabel: label,
+      menuClassName: "p-2",
+      trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          role: "button",
+          tabIndex: 0,
+          className: utils.cn(
+            "inline-flex h-6 items-center gap-0.5 rounded px-1.5 text-xs transition-colors",
+            active ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+          ),
+          children: [
+            filterBarFieldUtils.summarizeMultiFilter(label, value),
+            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronDown.UiChevronDown, className: "text-[10px] opacity-60" })
+          ]
+        }
+      ),
+      children: () => /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: COMMIT_IMMEDIATELY, children: /* @__PURE__ */ jsxRuntime.jsx(
+        filterBarMulti.MultiFilterPanel,
+        {
+          chrome: "embedded",
+          filter: {
+            key: label,
+            kind: "multi",
+            label,
+            options,
+            value,
+            onChange: (v) => onChange(new Map(Object.entries(v)))
+          }
+        }
+      ) })
+    }
+  );
 }
 function TestFilterBar({
   filters,
@@ -39,72 +65,40 @@ function TestFilterBar({
   frameworks,
   className
 }) {
-  const hasActive = filters.status.size > 0 || filters.framework.size > 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-wrap items-center gap-1.5", className), children: [
-    STATUS_DEFS.map((sf) => {
-      const count = counts[sf.key];
-      if (count === 0) return null;
-      const mode = filters.status.get(sf.key);
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          className: utils.cn(
-            "inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs transition-colors",
-            pillClass(mode)
-          ),
-          onClick: () => onChange({ ...filters, status: filterState.cycleFilterState(filters.status, sf.key) }),
-          title: `${sf.label}: ${mode ?? "neutral"}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: utils.cn(
-                  "inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white",
-                  sf.badge
-                ),
-                children: status.formatCount(count)
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(StateMarker, { mode }),
-            sf.label
-          ]
-        },
-        sf.key
-      );
-    }),
-    frameworks.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-0.5 text-border", children: "|" }),
-      frameworks.map((fw) => {
-        const icon = frameworkIcon.frameworkIcon(fw);
-        const mode = filters.framework.get(fw);
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            className: utils.cn(
-              "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition-colors",
-              pillClass(mode)
-            ),
-            onClick: () => onChange({ ...filters, framework: filterState.cycleFilterState(filters.framework, fw) }),
-            title: `${fw}: ${mode ?? "neutral"}`,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(StateMarker, { mode }),
-              icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon, className: "text-sm" }),
-              fw
-            ]
-          },
-          fw
-        );
-      })
-    ] }),
-    hasActive && /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+  const statusOptions = status.STATUS_LABELS.filter((d) => counts[d.key] > 0).map(
+    (d) => ({
+      value: d.key,
+      label: d.label,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(MarkIcons.OutcomeIcon, { outcome: d.key }),
+      count: counts[d.key]
+    })
+  );
+  const toolOptions = frameworks.map((fw) => {
+    var _a;
+    return {
+      value: fw,
+      label: ((_a = marks.toolMark(fw)) == null ? void 0 : _a.label) ?? fw,
+      title: fw,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(MarkIcons.ToolIcon, { tool: fw })
+    };
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex items-center gap-0.5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Facet,
+      {
+        label: "Status",
+        options: statusOptions,
+        state: filters.status,
+        onChange: (status2) => onChange({ ...filters, status: status2 })
+      }
+    ),
+    frameworks.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      Facet,
       {
-        type: "button",
-        className: "ml-1 text-xs text-muted-foreground hover:text-foreground",
-        onClick: () => onChange({ status: /* @__PURE__ */ new Map(), framework: /* @__PURE__ */ new Map() }),
-        children: "Clear"
+        label: "Tool",
+        options: toolOptions,
+        state: filters.framework,
+        onChange: (framework) => onChange({ ...filters, framework })
       }
     )
   ] });

package/dist/data/test-runner/TestFilterBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TestFilterBar.cjs","sources":["../../../src/data/test-runner/TestFilterBar.tsx"],"sourcesContent":["import { Icon } from \"../Icon\";\nimport { cn } from \"../../lib/utils\";\nimport { UiAdd, UiRemove } from \"../../icons\";\nimport { frameworkIcon } from \"./frameworkIcon\";\nimport { formatCount, STATUS_LABELS, type StatusCounts } from \"./status\";\nimport { cycleFilterState, type FilterMode, type TestFilters } from \"./filterState\";\n\nexport type TestFilterBarProps = {\n  filters: TestFilters;\n  onChange: (next: TestFilters) => void;\n  counts: StatusCounts;\n  frameworks: string[];\n  className?: string;\n};\n\ntype StatusDef = { key: keyof StatusCounts; label: string; badge: string };\n\nconst STATUS_BADGES: Record<keyof StatusCounts, string> = {\n  failed: \"bg-red-500\",\n  warned: \"bg-amber-400\",\n  timedout: \"bg-amber-500\",\n  passed: \"bg-green-500\",\n  skipped: \"bg-yellow-400\",\n  running: \"bg-blue-500\",\n  pending: \"bg-muted-foreground\",\n  total: \"bg-muted-foreground\",\n};\n\nconst STATUS_DEFS: StatusDef[] = STATUS_LABELS.map((d) => ({\n  ...d,\n  badge: STATUS_BADGES[d.key],\n}));\n\nfunction pillClass(mode: FilterMode | undefined): string {\n  if (mode === \"include\") return \"bg-accent border-border font-medium text-foreground\";\n  if (mode === \"exclude\") return \"bg-foreground text-background border-foreground font-medium\";\n  return \"border-border text-muted-foreground hover:bg-accent\";\n}\n\nfunction StateMarker({ mode }: { mode: FilterMode | undefined }) {\n  if (mode === \"include\") return <Icon icon={UiAdd} className=\"text-xs\" />;\n  if (mode === \"exclude\") return <Icon icon={UiRemove} className=\"text-xs\" />;\n  return <span className=\"h-2 w-2 rounded-full bg-current opacity-30\" aria-hidden />;\n}\n\n/**\n * Tri-state status + framework filter pills. Named TestFilterBar to avoid the\n * pre-existing generic `FilterBar` export in clicky-ui/components.\n */\nexport function TestFilterBar({\n  filters,\n  onChange,\n  counts,\n  frameworks,\n  className,\n}: TestFilterBarProps) {\n  const hasActive = filters.status.size > 0 || filters.framework.size > 0;\n\n  return (\n    <div className={cn(\"flex flex-wrap items-center gap-1.5\", className)}>\n      {STATUS_DEFS.map((sf) => {\n        const count = counts[sf.key];\n        if (count === 0) return null;\n        const mode = filters.status.get(sf.key);\n        return (\n          <button\n            key={sf.key}\n            type=\"button\"\n            className={cn(\n              \"inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs transition-colors\",\n              pillClass(mode),\n            )}\n            onClick={() => onChange({ ...filters, status: cycleFilterState(filters.status, sf.key) })}\n            title={`${sf.label}: ${mode ?? \"neutral\"}`}\n          >\n            <span\n              className={cn(\n                \"inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-bold text-white\",\n                sf.badge,\n              )}\n            >\n              {formatCount(count)}\n            </span>\n            <StateMarker mode={mode} />\n            {sf.label}\n          </button>\n        );\n      })}\n\n      {frameworks.length > 1 && (\n        <>\n          <span className=\"mx-0.5 text-border\">|</span>\n          {frameworks.map((fw) => {\n            const icon = frameworkIcon(fw);\n            const mode = filters.framework.get(fw);\n            return (\n              <button\n                key={fw}\n                type=\"button\"\n                className={cn(\n                  \"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition-colors\",\n                  pillClass(mode),\n                )}\n                onClick={() =>\n                  onChange({ ...filters, framework: cycleFilterState(filters.framework, fw) })\n                }\n                title={`${fw}: ${mode ?? \"neutral\"}`}\n              >\n                <StateMarker mode={mode} />\n                {icon && <Icon icon={icon} className=\"text-sm\" />}\n                {fw}\n              </button>\n            );\n          })}\n        </>\n      )}\n\n      {hasActive && (\n        <button\n          type=\"button\"\n          className=\"ml-1 text-xs text-muted-foreground hover:text-foreground\"\n          onClick={() => onChange({ status: new Map(), framework: new Map() })}\n        >\n          Clear\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["STATUS_LABELS","jsx","Icon","UiAdd","UiRemove","cn","jsxs","cycleFilterState","Fragment","frameworkIcon"],"mappings":"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"}
+{"version":3,"file":"TestFilterBar.cjs","sources":["../../../src/data/test-runner/TestFilterBar.tsx"],"sourcesContent":["import { cn } from \"../../lib/utils\";\nimport { Icon } from \"../Icon\";\nimport { UiChevronDown } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { FilterBarContext } from \"../../components/filter-bar-context\";\nimport { MultiFilterPanel } from \"../../components/filter-bar-multi\";\nimport { summarizeMultiFilter } from \"../../components/filter-bar-field-utils\";\nimport type { MultiSelectOption } from \"../../components/MultiSelect\";\nimport { OutcomeIcon, ToolIcon } from \"./MarkIcons\";\nimport { toolMark } from \"./marks\";\nimport { STATUS_LABELS, type StatusCounts, type TestOutcome } from \"./status\";\nimport type { FilterMode, FilterState, TestFilters } from \"./filterState\";\n\nexport type TestFilterBarProps = {\n  filters: TestFilters;\n  onChange: (next: TestFilters) => void;\n  counts: StatusCounts;\n  frameworks: string[];\n  className?: string;\n};\n\n// Picks commit straight away: the runner, not a form, owns the filter state.\nconst COMMIT_IMMEDIATELY = { autoSubmit: false, compact: false };\n\nfunction Facet({\n  label,\n  options,\n  state,\n  onChange,\n}: {\n  label: string;\n  options: MultiSelectOption[];\n  state: FilterState<string>;\n  onChange: (next: FilterState<string>) => void;\n}) {\n  const value: Record<string, FilterMode> = Object.fromEntries(state);\n  const active = state.size > 0;\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel={label}\n      menuClassName=\"p-2\"\n      trigger={\n        <span\n          role=\"button\"\n          tabIndex={0}\n          className={cn(\n            \"inline-flex h-6 items-center gap-0.5 rounded px-1.5 text-xs transition-colors\",\n            active\n              ? \"bg-muted font-medium text-foreground\"\n              : \"text-muted-foreground hover:bg-muted/60 hover:text-foreground\",\n          )}\n        >\n          {summarizeMultiFilter(label, value)}\n          <Icon icon={UiChevronDown} className=\"text-[10px] opacity-60\" />\n        </span>\n      }\n    >\n      {() => (\n        <FilterBarContext.Provider value={COMMIT_IMMEDIATELY}>\n          <MultiFilterPanel\n            chrome=\"embedded\"\n            filter={{\n              key: label,\n              kind: \"multi\",\n              label,\n              options,\n              value,\n              onChange: (v) => onChange(new Map(Object.entries(v))),\n            }}\n          />\n        </FilterBarContext.Provider>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * Status and tool facets as compact, muted menu triggers sized for the tree\n * toolbar; each opens a tri-state (include / exclude) option list. Named\n * TestFilterBar to avoid the generic `FilterBar` export in clicky-ui/components.\n */\nexport function TestFilterBar({\n  filters,\n  onChange,\n  counts,\n  frameworks,\n  className,\n}: TestFilterBarProps) {\n  const statusOptions: MultiSelectOption[] = STATUS_LABELS.filter((d) => counts[d.key] > 0).map(\n    (d) => ({\n      value: d.key,\n      label: d.label,\n      icon: <OutcomeIcon outcome={d.key as TestOutcome} />,\n      count: counts[d.key],\n    }),\n  );\n  const toolOptions: MultiSelectOption[] = frameworks.map((fw) => ({\n    value: fw,\n    label: toolMark(fw)?.label ?? fw,\n    title: fw,\n    icon: <ToolIcon tool={fw} />,\n  }));\n\n  return (\n    <div className={cn(\"flex items-center gap-0.5\", className)}>\n      <Facet\n        label=\"Status\"\n        options={statusOptions}\n        state={filters.status}\n        onChange={(status) => onChange({ ...filters, status })}\n      />\n      {frameworks.length > 1 && (\n        <Facet\n          label=\"Tool\"\n          options={toolOptions}\n          state={filters.framework}\n          onChange={(framework) => onChange({ ...filters, framework })}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["jsx","DropdownMenu","jsxs","cn","summarizeMultiFilter","Icon","UiChevronDown","FilterBarContext","MultiFilterPanel","STATUS_LABELS","OutcomeIcon","toolMark","ToolIcon","status"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,qBAAqB,EAAE,YAAY,OAAO,SAAS,MAAA;AAEzD,SAAS,MAAM;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,QAAoC,OAAO,YAAY,KAAK;AAClE,QAAM,SAAS,MAAM,OAAO;AAC5B,SACEA,2BAAAA;AAAAA,IAACC,aAAAA;AAAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,WAAW;AAAA,MACX,eAAc;AAAA,MACd,SACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,WAAWC,MAAAA;AAAAA,YACT;AAAA,YACA,SACI,yCACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAC,oBAAAA,qBAAqB,OAAO,KAAK;AAAA,YAClCJ,2BAAAA,IAACK,KAAAA,MAAA,EAAK,MAAMC,cAAAA,eAAe,WAAU,yBAAA,CAAyB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAIjE,gBACCN,2BAAAA,IAACO,kCAAiB,UAAjB,EAA0B,OAAO,oBAChC,UAAAP,2BAAAA;AAAAA,QAACQ,eAAAA;AAAAA,QAAA;AAAA,UACC,QAAO;AAAA,UACP,QAAQ;AAAA,YACN,KAAK;AAAA,YACL,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,IAAI,IAAI,OAAO,QAAQ,CAAC,CAAC,CAAC;AAAA,UAAA;AAAA,QACtD;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAOO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,gBAAqCC,OAAAA,cAAc,OAAO,CAAC,MAAM,OAAO,EAAE,GAAG,IAAI,CAAC,EAAE;AAAA,IACxF,CAAC,OAAO;AAAA,MACN,OAAO,EAAE;AAAA,MACT,OAAO,EAAE;AAAA,MACT,MAAMT,2BAAAA,IAACU,UAAAA,aAAA,EAAY,SAAS,EAAE,KAAoB;AAAA,MAClD,OAAO,OAAO,EAAE,GAAG;AAAA,IAAA;AAAA,EACrB;AAEF,QAAM,cAAmC,WAAW,IAAI,CAAC,OAAA;;AAAQ;AAAA,MAC/D,OAAO;AAAA,MACP,SAAOC,WAAAA,SAAS,EAAE,MAAXA,mBAAc,UAAS;AAAA,MAC9B,OAAO;AAAA,MACP,MAAMX,2BAAAA,IAACY,UAAAA,UAAA,EAAS,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,GAC1B;AAEF,yCACG,OAAA,EAAI,WAAWT,MAAAA,GAAG,6BAA6B,SAAS,GACvD,UAAA;AAAA,IAAAH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO,QAAQ;AAAA,QACf,UAAU,CAACa,YAAW,SAAS,EAAE,GAAG,SAAS,QAAAA,SAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtD,WAAW,SAAS,KACnBb,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAO,QAAQ;AAAA,QACf,UAAU,CAAC,cAAc,SAAS,EAAE,GAAG,SAAS,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAC7D,GAEJ;AAEJ;;"}

package/dist/data/test-runner/TestFilterBar.d.ts

@@ -8,8 +8,9 @@ export type TestFilterBarProps = {
     className?: string;
 };
 /**
- * Tri-state status + framework filter pills. Named TestFilterBar to avoid the
- * pre-existing generic `FilterBar` export in clicky-ui/components.
+ * Status and tool facets as compact, muted menu triggers sized for the tree
+ * toolbar; each opens a tri-state (include / exclude) option list. Named
+ * TestFilterBar to avoid the generic `FilterBar` export in clicky-ui/components.
  */
 export declare function TestFilterBar({ filters, onChange, counts, frameworks, className, }: TestFilterBarProps): import("react").JSX.Element;
 //# sourceMappingURL=TestFilterBar.d.ts.map

package/dist/data/test-runner/TestFilterBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TestFilterBar.d.ts","sourceRoot":"","sources":["../../../src/data/test-runner/TestFilterBar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA8B,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACzE,OAAO,EAAqC,KAAK,WAAW,EAAE,MAAM,eAAe,CAAC;AAEpF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgCF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,QAAQ,EACR,MAAM,EACN,UAAU,EACV,SAAS,GACV,EAAE,kBAAkB,+BAyEpB"}
+{"version":3,"file":"TestFilterBar.d.ts","sourceRoot":"","sources":["../../../src/data/test-runner/TestFilterBar.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAiB,KAAK,YAAY,EAAoB,MAAM,UAAU,CAAC;AAC9E,OAAO,KAAK,EAA2B,WAAW,EAAE,MAAM,eAAe,CAAC;AAE1E,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA0DF;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,QAAQ,EACR,MAAM,EACN,UAAU,EACV,SAAS,GACV,EAAE,kBAAkB,+BAkCpB"}