Skip to content

feat(mockups): three runnable directions for the Tools search results state - #1839

Merged
BigSimmo merged 15 commits into
mainfrom
claude/tools-search-mockups-kmzxf1
Aug 13, 2026
Merged

feat(mockups): three runnable directions for the Tools search results state#1839
BigSimmo merged 15 commits into
mainfrom
claude/tools-search-mockups-kmzxf1

Conversation

@BigSimmo

Copy link
Copy Markdown
Owner

Summary

  • Adds /mockups/tools-search-directions — one design-scratch route presenting three directions for the Tools search results state (/tools?q=…), each shown at phone 390 and desktop 1280. This is the runnable successor to the July 2026 static comps in public/mockups/mode-page-redesign-2026-07/tools-search/, whose direction A was the product pick but was never built, so the pick had never been read against live catalogue data. Tracked as #162.
  • 01 Compact Results Instrument — the smallest change that fixes the page: the mode hero and the 7-chip quick-action grid drop on submit, the query becomes the only h1, count and area filters fold onto that title row, and results become dense rows whose primary button launches the tool (Details demotes to a desktop-only secondary). A filter row is only drawn when there is more than one match.
  • 02 Ranked Clinical Brief — adopts rankToolRecords, which src/lib/tools-catalog.ts already exports and this page has never called, and promotes the top match into an inline brief built from bestFor / checkFirst / neededInput / output — four per-tool fields authored for all 13 tools and currently invisible in the results state.
  • 03 Launch-First Triage Deck — removes the detail dialog entirely: rows are native <details> that open inline, and the area filter and result count fuse into a single segmented band. safetyFirst tools carry a persistent warning edge instead of a badge one tap deep.
  • Frames are built from the real 13-record catalogue rather than fixtures, so match counts, orderings, badges and per-tool copy are genuine. Both demo queries are real: monitoring (3 substring matches vs 4 ranked — today's matcher returns the exactly-named tool last and misses a fourth relevant match) and compare (one match, the reported screenshot state where the only result fell below the fold).
  • Match-reason chips deliberately use categorical --type-* tones rather than the relevance.tsx badges. Those are typed to EvidenceRelevance / SourceEvidenceRelevance and render a source-grounding verdict ("Source-backed" / "Partial support"), so feeding a text-match score into them would print a grounding claim where only a keyword hit exists — one line away from a real sourceBacked badge.
  • src/app/mockups/mockups-layout-client.tsx gains one pathname predicate so shared app chrome is suppressed for this route: every frame draws its own top bar, composer and band, and per mockups/README.md shared chrome is inherited or suppressed, never forked into the page. The /mockups/tools- prefix already supplied initialMode="tools" and hid the bottom composer.
  • Scope is the submitted results state only. No production surface changes, and the Tools home redesign stays out per #162's own stop rule.

Verification

  • npm run verify:pr-local — ran with the changed-file list. The wrapper stops at its second step on this machine: check:installed-lock-parity fails because the container's SessionStart hook writes node_modules/.session-start-lock-hashafterpostinstall stamps the tree, so the tree digest no longer matches the stamp it just created. Diagnosed rather than assumed: packageLockDigest still matches, the inventory differs by exactly one file, and find node_modules -newer …/.codex-installed-tree.json -type f -not -path '*/.cache/*' returns only .session-start-lock-hash. Pre-existing and environment-only — no dependency drift. Every remaining selected step was then run directly and passed:
check:runtime PASS: Node 24.19.0 / npm 11.17.0
format:changed All matched files use Prettier code style!
sitemap:check (clean)
docs:check-index all 50 repository roots/modules/routes indexed
docs:check-inventory 225 script files, 236 npm scripts
docs:check-scripts 452 npm-run reference(s) resolve
docs:check-links 1721 repo path references resolve
check:branch-review-ledger 842 live + 1206 archived, no duplicates
check:outstanding-issues 301 rows (145 open), unique ids
lint clean (--max-warnings 0)
typecheck clean
test Test Files 1 failed | 555 passed (556) · Tests 1 failed | 6064 passed | 4 skipped
build succeeded; Client bundle secret surface check passed
check:rag:fixtures 36 golden cases, 23 suites
check:bundle-budget production 1294.7 KiB (baseline 1279.1) and mockups 276.3 KiB (baseline 267.5) — both within tolerance

The one unit failure is tests/pr-handoff-stop.test.ts, which is pre-existing and unrelated: it reproduces on a clean tree at this branch's base with the working changes stashed (Tests 1 failed | 10 passed). This diff touches no hook, script, or settings file.

  • UI verification not run: npm run verify:ui exercises production journeys, and this diff adds only a /mockups/* route that 404s in production and changes no production surface. Browser evidence was captured directly instead — the route was loaded in Chromium at 1400×1000 against the local dev server, returning 200 with zero console or page errors, one h1, and all 9 expected frames present; each direction was then screenshotted at both viewports and both demo queries and read in light theme.
  • npm run check:bundle-budget was run against a fresh build rather than skipped, since mockup chunks are weighed against the separate mockups baseline: +3.3% on a 25% tolerance.

Risk and rollout

  • Risk: none to production. src/app/mockups/** is dev-only — layout.tsx calls notFound() unless mockupsEnabled(), robots.txt disallows the tree, and src/proxy.ts guards it in production. The only shared file touched is mockups-layout-client.tsx, and the change there is purely additive: one new pathname predicate and one new && !… term, affecting no other mockup route.
  • Rollback: revert the commit. Nothing outside the mockups tree, mockups/README.md, and the generated docs/site-map.md line is involved.
  • Provider or production effects: None.

Notes

  • Read this in light theme (Clinical White). The frames use role tokens, so they follow the app theme; a scoped light override was deliberately not attempted because ckb-v2-tokens.css records DS-01, where a :not(.dark) subtree scope clobbered inherited dark values. The same route will render Sky Graphite for a later dark review with no rewrite.
  • The in-frame band is a faithful replica, not a mount of the real SearchResultsHeaderBand. That component reads its count noun from the live mode registry via appModeSearchConfig(modeId), its placement is governed by docs/search-chrome-behaviour.md § "Results band" and tests/search-results-band-adoption.test.ts, and directions 01 and 03 exist precisely to restructure it.
  • Follow-ups deliberately left out of scope: the zero-match state (compare covers the sparse-but-nonzero case), dark-mode frames, and the production implementation itself. Note for whoever implements 02 — adopting rankToolRecords on the live page is a search-ranking change and should be scoped and reviewed as one, even though tools-catalog.ts / catalog-search.ts sit outside src/lib/rag/** and classifyPullRequestFiles reports ragRanking: false for this diff.

Generated by Claude Code

… state
`/tools?q=…` is rated an urgent redesign in the outstanding-issues ledger
(`#162`). The July 2026 study produced three static PNG comps and picked
direction A, but nothing runnable was ever built, so the pick had never been
read against live catalogue data.
Adds `/mockups/tools-search-directions`: one route, three stacked directions
for the submitted results state, each shown at phone 390 and desktop 1280.
- 01 Compact Results Instrument — query-as-h1, hero and quick-action grid
dropped on submit, filters folded onto the title row, dense rows whose
primary button launches the tool.
- 02 Ranked Clinical Brief — adopts `rankToolRecords` (already exported by the
catalogue, never called by this page) and promotes the top match into an
inline brief built from `bestFor` / `checkFirst` / `neededInput` / `output`.
- 03 Launch-First Triage Deck — no dialog at all; native `<details>` rows, and
the area filter and count fuse into one segmented band.
Frames are built from the real 13-record `src/lib/tools-catalog.ts`, so match
counts, orderings, badges and per-tool copy are genuine rather than fixtures.
Both demo queries are real: `monitoring` (3 substring matches vs 4 ranked —
today's matcher puts the exactly-named tool last) and `compare` (one match, the
reported screenshot).
Match-reason chips deliberately use categorical `--type-*` tones rather than the
`relevance.tsx` badges, whose `EvidenceRelevance` verdicts would print a
source-grounding claim where only a keyword hit exists.
Shared app chrome is suppressed for this route because every frame draws its own
top bar, composer and band; per `mockups/README.md` shared chrome is inherited or
suppressed, never forked into the page.
Scope is the results state only — no production surface changes, and the Tools
home redesign stays out per `#162`'s own stop rule.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CCSWnNvh73Y3FG3oDj6rRi
@coderabbitai

coderabbitaiBot commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your recent review volume is higher than typical usage, so adaptive limits are currently applied.

Next review available in:1 second

Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f04f1f37-6610-44db-bfac-4f92acd8cfa6

📥 Commits

Reviewing files that changed from the base of the PR and between 794a478 and b60e422.

📒 Files selected for processing (5)
  • docs/site-map.md
  • src/app/mockups/mockups-layout-client.tsx
  • src/app/mockups/tools-search-directions/page.tsx
  • src/components/tools-search-directions-mockups.tsx
  • tests/tools-search-directions-mockups.test.ts

Comment @coderabbitai help to get the list of available commands.

@supabase

supabaseBot commented Aug 12, 2026

Copy link
Copy Markdown

This pull request has been ignored for the connected project sjrfecxgysukkwxsowpy because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@BigSimmo
BigSimmo marked this pull request as draft August 12, 2026 06:39
@BigSimmo
BigSimmo requested a balanced review from CopilotAugust 12, 2026 06:41

CopilotAI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a dev-only runnable study comparing three Tools search-results designs using the real catalogue.

Changes:

  • Adds compact, ranked-brief, and launch-first mockup directions.
  • Adds the mockup route and suppresses shared chrome.
  • Updates mockup documentation and generated records.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file
FileDescription
src/components/tools-search-directions-mockups.tsxImplements the three design studies.
src/app/mockups/tools-search-directions/page.tsxRegisters the mockup route.
src/app/mockups/mockups-layout-client.tsxSuppresses shared chrome for the route.
mockups/README.mdDocuments the study and recommendation.
docs/site-map.mdAdds the generated route entry.
docs/branch-review-ledger.mdRecords the PR review state.
Suppressed comments (1)

src/components/tools-search-directions-mockups.tsx:765

  • The PR promises both demo queries at phone and desktop widths, but each direction renders the desktop frame only for monitoring. This leaves the sparse compare state unevaluated on desktop in all three directions. Add the missing desktop compare frame (yielding 12 frames total).
 <DeviceFrame direction={direction.id} query="monitoring" device="desktop" />

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment threadsrc/components/tools-search-directions-mockups.tsx Outdated
BigSimmo pushed a commit that referenced this pull request Aug 12, 2026
Checked all 12 open PRs and mapped them to ledger rows. Twenty-four open rows
are actively being fixed right now — #1835 (7 rows), #1840 (4), #1842 (6),
#1841 (4), #1836 (2), #1837 (1), #1839 (1) — and none of those rows said so.
This is the #292 failure mode with the safety off: a queued row that reads as
unclaimed while a PR is open against it is how the same conversion shipped
twice on 2026-08-09. Each row now names its PR and says not to start until
that PR merges.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017paT42ZVMf8jaLtkjFxdy5
@BigSimmoChatGPT Codex Connector

Copy link
Copy Markdown
OwnerAuthor

Resolved the suppressed desktop-completeness review finding: every direction now renders both representative queries at phone 390 and desktop 1280 (12 frames total). Focused static proof passed 2/2 before publication; a later identical rerun was skipped by the repository coordinator because another worktree held the focused-test capacity.

@BigSimmoChatGPT Codex Connector

Copy link
Copy Markdown
OwnerAuthor

@claude This draft PR is currently mergeable_state: dirty against current main at head a28934e0779b26c36030cb128274a3201e03f013, with its review threads already resolved and prior exact-head CI green. Fetch current main and merge it into this PR branch without rebasing or force-pushing. Resolve only the conflicts, preserving the mockup-only scope and all newer main changes. Run format/typecheck and the focused mockup/static contract checks that cover the touched conflict files, push the merge-resolution commit to this PR branch, and report the pushed SHA and verification. Do not mark ready, merge or close the PR, deploy, alter auto-merge, or broaden scope.

@github-actions

Copy link
Copy Markdown
Contributor

Hi @BigSimmo — thanks for the @claude mention.

Open this in Claude Code on the web to continue here: https://claude.ai/code

Context: BigSimmo/Database · #1839

Automated backlink from the Claude backlink workflow. Claude Code can pick up the mention and push a scoped fix to the branch.

@claude

claudeBot commented Aug 12, 2026

Copy link
Copy Markdown
Contributor

Claude encountered an error after 2s —— View job


I'll analyze this and get back to you.

@BigSimmoChatGPT Codex Connector

Copy link
Copy Markdown
OwnerAuthor

@claude Please main-sync this draft PR from exact head 666e3596659d65e1639017438cced922a7f7561c: merge the latest main once (never rebase), resolve all conflicts minimally, commit and push. Do not merge/close the PR, mark it ready, force-push, alter auto-merge, or touch unrelated files.

Preserve the tools-search mockup study and the verified evidence matrix at the captioned 390px/1280px dimensions. For docs/branch-review-ledger.md, docs/site-map.md, mockups/README.md and shared mockups layout/navigation, current main is authoritative; keep newer routes/inventory/history and reapply only this PR’s route/index entry without duplication. Do not rewrite ledger history.

Run the focused tools-search-directions mockup contract, site-map/docs checks if retained, typecheck and format. Report the new head and exact outcomes.

@github-actions

Copy link
Copy Markdown
Contributor

Hi @BigSimmo — thanks for the @claude mention.

Open this in Claude Code on the web to continue here: https://claude.ai/code

Context: BigSimmo/Database · #1839

Automated backlink from the Claude backlink workflow. Claude Code can pick up the mention and push a scoped fix to the branch.

@claude

claudeBot commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

Claude encountered an error after 2s —— View job


I'll analyze this and get back to you.

@BigSimmoChatGPT Codex Connector

Copy link
Copy Markdown
OwnerAuthor

@copilot Merge main at 0709965e66e04173ec0b0de1d121e85ac1ff7e04 into current draft head 666e3596659d65e1639017438cced922a7f7561c, resolve conflicts minimally, and push the merge commit to claude/tools-search-mockups-kmzxf1. Never rebase or force-push. Do not merge/close the PR, mark it ready, deploy, alter auto-merge, or touch unrelated files.

Preserve the tools-search mockup study and its verified 390px/1280px evidence matrix. For docs/branch-review-ledger.md, docs/site-map.md, mockups/README.md and shared mockups layout/navigation, current main is authoritative; keep newer inventory/routes/history and reapply only this PR’s route/index entry without duplication. Do not rewrite immutable ledger history.

Run the focused tools-search-directions mockup contract, site-map/docs and ledger integrity/write-discipline checks, typecheck and format. Report the pushed 40-character SHA and exact outcomes.

Preserve the three runnable Tools search directions and focused contract while replaying the one shared-layout guard onto current main. Keep current generated indexes and ledgers for regeneration on the combined tree.
@github-actions

Copy link
Copy Markdown
Contributor

CI triage

CI failed on this PR. Automated classification of the 3 failed job(s):

  • Unit coverageneeds investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
  • Static PR checksneeds investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.
  • PR requiredneeds investigation: inspect the failing step and uploaded diagnostics; rerun only after classifying the cause.

Compared with main CI run #10317 (success).

Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger.

@BigSimmo
BigSimmo marked this pull request as ready for review August 13, 2026 16:48

@chatgpt-codex-connectorchatgpt-codex-connectorBot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:edd1932afd

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment threadsrc/components/tools-search-directions-mockups.tsx Outdated
Comment threadsrc/components/tools-search-directions-mockups.tsx Outdated
@BigSimmo

Copy link
Copy Markdown
OwnerAuthor

@codex resolve actionable Codex review findings for this pull request and current head using the repository instructions. This is the pull request's single automatic repair pass: do not perform a fresh review, create new standalone findings, or request another review. Work only the existing unresolved Codex threads on the current head. The only repository destination is BigSimmo/Database, and the only branch destination is the pull request head branch claude/tools-search-mockups-kmzxf1 at starting commit edd1932; never publish fixes to a detached or synthetic work branch and never create a stacked pull request. Use the authenticated GitHub connector to commit each approved fix to BigSimmo/Database:claude/tools-search-mockups-kmzxf1, then verify that the pull request head contains the published commit before reporting success. Always fix P0 and P1 findings. For P2 and lower findings, fix only clear, scoped, low-risk issues; otherwise disposition them with a concise reason. For a fixed thread, reply with as the first line and as the second line. For a no-code disposition, use followed by . These result markers authorize the workflow to close that exact thread only after it verifies a fixed commit is the pull request head; a local-only commit is not a fix. If publication or verification fails, do not use either result marker, do not claim success, and leave the thread open with the blocker. If human input or new authorization is required, do the same. Finish only after every actionable thread is fixed or dispositioned and closed, or explicitly left open for a human decision. Do not update the branch from main, address unrelated reviews, broaden scope, or create more than one scoped fix commit. Do not use external APIs, paid services, credentials, dependency changes, or broad refactors unless explicitly authorized. Add targeted tests where behavior changes and run the narrowest relevant validation.

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. 🚀

Reviewed commit:edd1932afd

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@BigSimmo
BigSimmo merged commit d3b9215 into mainAug 13, 2026
26 checks passed
@BigSimmo
BigSimmo deleted the claude/tools-search-mockups-kmzxf1 branch August 13, 2026 17:38
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@BigSimmo@claude