docs(storybook): story the object browser — file tree, breadcrumbs, and object detail

[alukach]

Stories for the object browser — the file tree, the breadcrumbs above it, and the detail panel for a single object. 16 stories across three components.

The __filename fix that made any of this renderable went in separately as #524, which has merged; this PR is stories plus one Storybook config line.

DirectoryList — and it browses

Default is navigable. In the app a directory is a <Link> and the server re-fetches the listing for the new URL. Storybook has neither a server nor a real router, so clicks went nowhere and every story was one frozen level.

Default now holds the prefix in state, derives each listing from a single fixture tree, and intercepts clicks on links into this product. That is a stand-in for the routing, not the routing itself — the story says so — but it makes the thing you'd actually want to check reviewable.

Verified in a browser rather than assumed:

• root → recordings → 2019 shows the two recordings;
• the breadcrumb walks back up through recordings to root;
• clicking a file leaves the listing alone.

The remaining three cover states navigation cannot reach: Empty (an empty prefix, not an empty product), AwkwardNames (a 100-character filename beside a 1-byte and a 4-terabyte file), and Virtualized (250 rows, past MAX_VISIBLE_ITEMS).

The two static stories an earlier revision had are gone — the browsable one opens on what Default showed, and one click reaches what InADirectory showed.

BreadcrumbNav

Six stories. The one that earns its place is Truncated: past four segments the path collapses to the first two, an ellipsis, and the last two, and a real product rarely hands you a path that deep on demand. Also the rule that the current directory renders as plain text but the same segment becomes a link once a fileName sits below it.

ObjectSummary — the object detail view

Six stories. Its two conditional rows are the point, and both are awkward to arrange in the app:

• Cloud URI appears only with a resolved connection, and takes a different shape per provider — s3://bucket/… on S3, an https://account.blob.core.windows.net/… URL on Azure, and no row at all on GCS. All three confirmed in a browser.
• Checksum appears only when the object carries a sha256, and brings the verifier with it. That verifier is live — pressing it fetches the object, which fails here. The button and its states are what the story shows, not a passing check.

One config line, and why it is needed

CONFIG.storage.endpoint reads NEXT_PUBLIC_S3_ENDPOINT with no fallback, so every Source URL rendered as undefined/cascadia-research/…. On a published page that reads as a bug in the product rather than a gap in the environment.

It goes through a Vite define rather than Storybook's own env: the Next builder inlines NEXT_PUBLIC_* at build time from the real environment and never consults env. I tried that first and the value stayed undefined.

Providers, not stubs

The real S3CredentialsProvider and UploadProvider wrap the DirectoryList stories through a decorator, because the rows read upload progress from context.

No credentials mock. Nothing here uploads, so no credential is ever minted. I added the mock, found it unused, and removed it.

Verification

tsc clean · jest 65 suites / 567 tests · next lint 0 errors · storybook build succeeds.

🤖 Generated with Claude Code

https://claude.ai/code/session_011mnsg8m1dXZ5z5ig5xMtkE

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
source-coop-ui	Ready	Preview	Aug 28, 2026 1:22am
source-cooperative	Ready	Preview	Aug 28, 2026 1:22am

[claude]

Claude finished @alukach's task in 1m 23s —— View job

---

Reviewing PR #521

• Gather context (diff, changed files, CLAUDE.md)
• Review for correctness/security/best-practice issues
• Ponytail pass for over-engineering
• Post final review

---

✅ No blocking issues — safe to merge.

Traced the pieces this PR depends on to confirm the story fixtures actually match production behavior:

• BreadcrumbNav.tsx builds segment links as ${baseUrl}/${path.slice(0, i+1).join("/")} (no trailing slash) and the root link as baseUrl || "/" — matches the Browsable story's assumption that a breadcrumb href never ends in /.
• DirectoryRow.tsx's href is objectUrl(...), which appends item.path verbatim — directories carry a trailing slash from asFileNodes, matching the story's assumption that row hrefs do.
• ObjectSummary.tsx's checksum row requires both objectInfo.metadata.sha256 and product.account — the WithChecksum story sets both; DataProvider.S3/Azure/GCS string values ("s3", "azure", "gcs") line up with the cloudUri branching.
• NEXT_PUBLIC_S3_ENDPOINT is genuinely read with no fallback in src/lib/config.ts:14, so the .storybook/main.ts viteFinal define is a real, not speculative, fix — value matches .env.example.

No correctness, security, or best-practice issues found in the diff.

Simplify (ponytail): none — BrowsableTree's prefix-in-state click intercept is already flagged in-code as a deliberate stand-in for routing (not a permanent abstraction), and the fixture helpers (object, childrenOf) are the minimum needed to drive the stories.

---

💰 Estimated review cost: $0.43 · 1m23s · 25 turns