Add subtle border, bg-muted/40 background, and rounded corners to
fenced code blocks. Reset inline code styles inside highlighted
blocks so Shiki colors show through cleanly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

The rehype plugin needs languages already loaded (it's synchronous).
Pre-load 16 common languages (JS/TS, Go, Python, Rust, etc.) so
Markdown code blocks get highlighted. FileViewer continues to load
additional languages on demand.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Share the Shiki highlighter between FileViewer and Markdown via a
singleton in src/lib/shiki.ts. The Markdown component uses
@shikijs/rehype/core with a pre-resolved highlighter (react-markdown
doesn't support async plugins).

The highlighter loads in a useEffect — Markdown renders without
highlighting initially, then re-renders with syntax colors once
the highlighter is ready.

Also update sanitize schema to allow Shiki's style/class attributes
on pre/code/span elements, and adjust prose styles so inline code
inside highlighted blocks doesn't get bg-muted.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Only the root .shiki element gets background-color. Token spans only
get color/font-style/font-weight/text-decoration. This prevents
white blocks showing through the yellow line highlight.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

The Shiki global CSS rule '.shiki span { background-color: ... }'
was applying to the gutter span, showing a white block through the
yellow line highlight. Force transparent background on .line-number.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace ::before pseudo-element with an actual <span> for line numbers,
injected by the Shiki transformer. Only the gutter span has
data-line-number, so clicking code text no longer triggers selection.
Gutter gets a hover state (opacity 0.4 → 0.8) for affordance.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Shiki now outputs only CSS variables (--shiki-light, --shiki-dark)
on each span with no inline color/background. The CSS in index.css
maps the variables to the active theme — no !important needed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Use a Shiki transformer to replace the default "line" class with our
CSS module's scoped .line class. No more :global() needed — everything
is properly module-scoped.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

CSS modules were mangling .line in selectors like
.code-content code > .line, but .line is generated by Shiki and
must stay as-is. Wrap with :global(.line) so the selector targets
the actual DOM class.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Rename code_block → code-block, code_content → code-content.
Use var(--font-mono) from the Tailwind theme instead of hardcoded
font-family stack.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Extract the wall of Tailwind arbitrary selectors into
file-viewer.module.css with snake_case class names. The scoped
<style> tag for line highlighting uses the module's generated
class name for proper scoping.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Remove !bg-transparent override — let Shiki control the background
  so there's no mismatch between padding areas and line backgrounds
- Move vertical padding from <code> to first/last .line elements so
  every visible pixel has Shiki's background
- Use separate light/dark highlight colors (yellow 30% light, 15% dark)
- Fix line number opacity to work with both themes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Switch lines from table-row to block display so highlight
  background spans the full container width
- Use GitHub-style yellow highlight (rgba(255,235,59,0.25))
  instead of subtle accent color
- Fix line count (was showing 0 — use text split instead of
  hast tree traversal)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Append a \n text node inside each .line span so copy-pasting from
the code block includes proper line breaks.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Use Shiki transformer to inject data-line-number on each .line span
  and strip whitespace text nodes between lines (caused empty rows
  with table-row display)
- Render line numbers via CSS ::before + content:attr(data-line-number)
  so gutter is always in sync with code lines
- Count lines from hast tree instead of splitting text by \n
- Use event delegation on the code block for line click handling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace dangerouslySetInnerHTML with native React rendering via
Shiki's codeToHast → hast-util-to-jsx-runtime pipeline.

Features:
- Clickable line numbers in a sticky gutter
- Click to select a line (#L12 in URL hash)
- Shift+click to select a range (#L12:25)
- Selected lines highlighted with accent background
- URL hash syncs both ways (navigation + popstate)
- Scrolls to selected line on initial load

Also fix dark mode theme sync — add CSS rule to swap Shiki's
--shiki-dark variables when .dark class is active.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Shiki uses VS Code's TextMate grammar engine (Oniguruma WASM) for
accurate syntax highlighting that matches what developers see in
their editor.

- Lazy singleton highlighter with on-demand language loading
- github-light/github-dark dual themes with automatic dark mode
- Inline styles — no external CSS needed (removed hljs theme + overrides)
- Fine-grained imports via @shikijs/langs and @shikijs/themes

Skip FileViewer from Vitest browser tests (Shiki WASM doesn't load
in that context). Snapshot tests still cover it via happy-dom.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Apply opacity-50, pointer-events-none, aria-disabled, and tabIndex=-1
when disabled. Prevents navigation and gives visual feedback.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

The Icon wrapper's size-4 didn't constrain the child SVG.
Add [&>svg]:size-4 to force the icon to 16px.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Reflect the component layer system (ui/shared/bugs/code), colocated
GraphQL fragments, Storybook + Vitest testing setup, a11y testing,
and all current tooling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add play functions to stories for behavior testing:
- QueryInput: type "label:" → suggestions appear → Enter selects first
- WritePreview: click Preview → content switches → click Write → back

These run as real browser tests via the Storybook Vitest addon.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace ~45 lines of inline status toggle code in each consumer with
the StatusTabs composition component. Indicators accept an `active`
prop for explicit state control (needed because active state comes
from query parsing, not router URL matching).

Also remove unused cn/CircleDot/CircleCheck imports from issues list.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

IssueFilters has zero GraphQL dependencies — it's purely presentational.
Belongs in shared/ with other reusable, domain-aware components.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Move tokenizeQuery, parseQueryString, buildBaseQuery, buildQueryString,
SortValue, StatusFilter, and SORT_OPTIONS from the route file and
issue-filters into a shared module. These are pure functions with no
React deps — removes ~80 lines from the issues route.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Rename all PascalCase component files to kebab-case across the
codebase for consistency with the ui/ (shadcn) convention:

- shared/: IssueRow→issue-row, LabelBadge→label-badge, StatusBadge→status-badge
- bugs/: CommentBox→comment-box, IssueFilters→issue-filters, etc.
- code/: CodeBreadcrumb→code-breadcrumb, FileTree→file-tree, etc.
- content/: Markdown→markdown
- layout/: Header→header, Shell→shell

All imports updated accordingly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Restructure components into three clear layers:

  ui/       — generic shadcn primitives (button, input, avatar, etc.)
              Managed by shadcn CLI. No domain knowledge.

  shared/   — app-level reusable components with domain awareness but
              no data fetching. Typed against GraphQL fragments.
              (IssueRow, LabelBadge, StatusBadge, CommentCard,
              Pagination, QueryInput, StatusTabs, WritePreview,
              EmptyState, SectionHeading)

  bugs/     — feature components with GraphQL mutations and auth
              (CommentBox, Timeline, TitleEditor, LabelEditor,
              IssueFilters)

Also update components.json for Tailwind v4 (drop tailwind.config
reference, set config to empty string per shadcn docs).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- LabelBadge: props typed as LabelFieldsFragment (spread fragment
  data directly onto the component)
- CommentCard.AuthorAvatar: props typed as Pick<IdentitySummaryFragment>
  with avatarUrl/displayName fields
- IssueRow stories: mock data typed as BugSummaryFragment
- CommentCard stories: mock data typed as IdentitySummaryFragment
- Update Timeline and CommentBox for new AuthorAvatar prop names

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Define reusable fragments next to the components that consume them:
- IdentitySummary: id, humanId, displayName, avatarUrl
- LabelFields: name, color { R G B }
- BugSummary: composes IdentitySummary + LabelFields for bug list nodes
- Timeline fragments: BugCreateCommentFields, BugAddCommentFields,
  LabelChangeFields, StatusChangeFields, TitleChangeFields

Rewrite BugList, BugDetail, and UserProfile queries to compose
fragments instead of duplicating field selections. Codegen now
includes src/components/**/*.graphql for fragment discovery.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace Math.random() with a deterministic formula so snapshot tests
don't flake on every run.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- issues/index.tsx: EmptyState + Pagination (remove ButtonLink, ChevronLeft/Right)
- user/$id.tsx: EmptyState + Pagination (remove ButtonLink, ChevronLeft/Right)
- issues/$id.tsx: EmptyState + SectionHeading
- LabelEditor.tsx: SectionHeading
- Timeline.tsx: CommentCard (Root/AuthorAvatar/Card/CardHeader/CardBody)
- CommentBox.tsx: CommentCard (Root/AuthorAvatar/Card)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Four new shared UI components with composition APIs:
- EmptyState: styled "no results" message
- SectionHeading: uppercase sidebar/section heading
- Pagination: createLink-wrapped Previous/Next with Info
- CommentCard: avatar + bordered card (Root/AuthorAvatar/Card/CardHeader/CardBody)

Each has stories and snapshot tests.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Every story file now has a corresponding snapshot test using the
portable stories API. The pattern auto-generates a test per exported
story — adding a new story automatically adds a snapshot test.

63 snapshot tests across 18 component files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Vite 8 no longer needs the plugin. Use resolve.alias to map @/* to
src/* directly, silencing the deprecation warning on every build/test.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Integrates axe-core via the a11y addon. Violations fail tests by
default (test: "error"). The addon adds an accessibility panel in
Storybook UI and a vision impairment simulator in the toolbar.

Also fix preview.ts import to use @storybook/react-vite.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Restore setupFiles in storybook project (addon detects it, skips
  auto-provisioning, but it's still needed per docs)
- Add storybookScript for watch mode DX (story links in failures)
- Switch snapshot tests from render() to run() which goes through
  the full Storybook lifecycle (loaders, decorators, play functions)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Set up the official Storybook Vitest addon which auto-transforms every
story into a Vitest test running in a real Chromium browser via
Playwright. Works alongside the existing snapshot tests.

Two vitest projects:
- storybook: browser-mode smoke/interaction tests (Playwright)
- snapshot: portable stories snapshot tests (happy-dom)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Configure vitest with happy-dom and the portable stories API to
run snapshot tests against Storybook stories. Adding a story
automatically adds a snapshot test.

Includes Button snapshot tests as the initial example.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replaced by the provider-based ui/query-input composition component.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

New generic QueryInput with pluggable CompletionProviders:
- Root manages state (cursor tracking, keyboard nav, suggestions) via context
- Input renders the two-layer syntax-highlighted input
- Completions renders the autocomplete dropdown
- Icon is a positioned slot

Providers define prefix, highlight color, and getSuggestions (sync or async).
Adding a new filter type means adding a provider — zero component changes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

All consumers now use the IssueRow composition components.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace inline write/preview tab rendering with WritePreview
composition component in controlled mode, since CommentBox resets
preview state after submitting.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace inline write/preview tab logic with WritePreview composition
component in uncontrolled mode. Removes manual preview state management.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace 40-line inline bug row rendering with IssueRow compound
components. No hover, no label links, no author — expressed naturally
by what the consumer composes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace BugRow with IssueRow composition components in the issues list.
Labels now use LabelBadgeLink (createLink-wrapped) instead of onClick.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

IssueRow: compound component (Root/StatusIcon/TitleArea/Meta/CommentCount)
replacing the flat prop-heavy BugRow.

StatusTabs: createLink-wrapped tab with OpenIndicator/ClosedIndicator/Count
sub-components for the open/closed toggle pattern.

WritePreview: context-based write/preview editor with controlled and
uncontrolled modes, replacing duplicated tab logic.

Also refactor LabelBadge: remove onClick prop, add LabelBadgeLink via
createLink for navigation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add Storybook stories for:
- UI primitives: Badge, Input, Textarea, Separator, Skeleton, Avatar
- Bug components: StatusBadge, LabelBadge, BugRow
- Code components: RefSelector, FileTree, FileViewer, CodeBreadcrumb
- Content: Markdown

Also add a TanStack Router decorator for components using <Link>.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Enforce proper property ordering when creating routes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Load the Storybook ESLint plugin through oxlint's jsPlugins support,
scoped to *.stories.tsx files via an override. Also fix the Button
story import to use @storybook/react-vite per no-renderer-packages.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Set up Storybook with @storybook/react-vite for isolated component
development and visual testing. Includes a Button story showcasing
all variants and sizes as a starting point.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>