#155

Merge remote-tracking branch 'origin/main' into feature/346

#346

#346

Merge remote-tracking branch 'origin/main' into feature/346

#346

#346

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #349

.gitea/ISSUE_TEMPLATE.md

@@ -0,0 +1,35 @@
+## 背景
+
+なぜ必要か。
+
+## 対象範囲
+
+- backend:
+- frontend:
+- docs:
+- migration:
+
+## やること
+
+- [ ] 
+
+## 受け入れ条件
+
+- [ ] 
+
+## 実行すべき確認
+
+- [ ] `cd backend && bundle exec rspec`
+- [ ] `cd frontend && npm run build`
+- [ ] `cd frontend && npm run lint`
+
+## 禁止事項
+
+- unrelated refactor はしない
+- 既存 API response shape を壊さない
+- 認証・認可・BAN を弱めない
+
+## Codex への指示
+
+この issue を読んで実装してください。
+不明点があれば、実装前に調査結果と選択肢を提示してください。

AGENTS.md

@@ -0,0 +1,143 @@
+# AGENTS.md
+
+## Project overview
+
+BTRC Hub / タグ広場 is a split Rails API and React frontend repository.
+
+- Backend: Rails API under `backend/`.
+- Frontend: React + TypeScript + Vite under `frontend/`.
+- Docs: lightweight command notes under `docs/`.
+- There is no README or Makefile at the repository root as of this inspection.
+
+## Stack
+
+- Backend: Ruby `3.2.2` from `backend/.ruby-version`, Rails `~> 8.0.2`.
+- Backend dependencies include `mysql2`, `sqlite3`, `rspec-rails`, `factory_bot_rails`, `rack-cors`, `jwt`, `discard`, `gollum`, `whenever`, `aws-sdk-s3`, `brakeman`, and `rubocop-rails-omakase`.
+- Frontend: React `^19.1.0`, TypeScript `~5.8.3`, Vite `^6.3.5`.
+- Frontend data/UI dependencies include Axios, TanStack Query, Tailwind CSS, Framer Motion, Radix UI components, lucide-react, MDX/Markdown tooling, and Zustand.
+
+## Main directories
+
+- `backend/app/controllers`: Rails API controllers.
+- `backend/app/models`: Active Record models.
+- `backend/app/representations`: API response representation classes.
+- `backend/app/services`: domain services such as version recording, wiki commit, YouTube sync, and similarity calculation.
+- `backend/config/routes.rb`: API routes.
+- `backend/db/migrate`: migrations.
+- `backend/db/schema.rb`: current schema snapshot.
+- `backend/lib/tasks`: custom Rake tasks.
+- `backend/spec`: RSpec tests.
+- `backend/test`: Rails minitest files that still exist in the tree.
+- `frontend/src/App.tsx`: frontend route definitions and initial user setup.
+- `frontend/src/pages`: page-level React components.
+- `frontend/src/components`: shared and feature components.
+- `frontend/src/lib`: API client helpers, query keys, prefetchers, and domain helpers.
+- `frontend/src/stores`: Zustand stores.
+- `docs/commands.md`: command notes.
+
+## Commands
+
+Only list commands that are backed by files inspected in this repository.
+
+### Backend
+
+The following binstubs exist under `backend/bin`:
+
+```sh
+cd backend
+bin/setup
+bin/dev
+bin/rails
+bin/rake
+bin/rubocop
+bin/brakeman
+bin/kamal
+bin/thrust
+```
+
+Common Rails/Rake usage through existing binstubs:
+
+```sh
+cd backend
+bin/rails db:prepare
+bin/rails db:migrate
+bin/rails routes
+bin/rails server
+bin/rake
+bin/rubocop
+bin/brakeman
+```
+
+RSpec is present in `Gemfile` and `.rspec` exists:
+
+```sh
+cd backend
+bundle exec rspec
+```
+
+### Frontend
+
+The following npm scripts exist in `frontend/package.json`:
+
+```sh
+cd frontend
+npm run dev
+npm run build
+npm run lint
+npm run preview
+```
+
+`npm run build` runs `tsc -b && vite build`, then `postbuild` runs `node scripts/generate-sitemap.js`.
+
+Do not write or report `npm test` as a repository command unless a `test` script is added to `frontend/package.json`.
+
+## Coding style
+
+- Prefer precise, minimal changes.
+- Do not flatter or over-explain.
+- Explain risks directly.
+- Prefer single quotes for strings unless interpolation or escaping makes double quotes better.
+- Ruby: never put a space before method-call parentheses.
+- Ruby: do not use `%w` or `%i`.
+- TypeScript and Python: use GNU-style spacing before parentheses where syntactically valid.
+- Do not add production dependencies without explicit approval.
+
+## Backend rules
+
+- Inspect existing routes, controllers, models, services, and specs before editing backend behavior.
+- For API behavior changes, add or update request specs under `backend/spec/requests`.
+- Prefer RSpec for new backend tests; existing minitest files under `backend/test` do not make minitest the default for new coverage.
+- Do not weaken authentication, BAN user checks, or IP BAN checks.
+- Preserve the `X-Transfer-Code` user identification flow unless the task explicitly changes authentication.
+- Be careful with version tables, `version_no`, optimistic concurrency, wiki revisions, and restore/diff behavior.
+- Be careful with tag names, tag normalization, implications, similarities, and discard behavior.
+- Keep migration files and `backend/db/schema.rb` consistent when changing schema.
+
+## Frontend rules
+
+- Use `frontend/src/lib/api.ts` for API calls so headers and camelCase conversion stay consistent.
+- Add or reuse TanStack Query keys through `frontend/src/lib/queryKeys.ts`; avoid ad hoc query key arrays.
+- Encode URL path-segment values with `encodeURIComponent`.
+- React hooks must be called unconditionally.
+- Keep page-level code under `frontend/src/pages` and shared UI/feature code under `frontend/src/components` unless existing patterns point elsewhere.
+- Match existing Tailwind, component, and import alias conventions.
+
+## Codex workflow
+
+- First inspect existing patterns; do not invent new architecture when a local convention exists.
+- Keep changes scoped to the requested issue.
+- Do not scan or summarize dependency/generated/runtime directories such as `node_modules`, `dist`, `tmp`, `log`, and `storage` unless explicitly needed.
+- Before touching wiki, tag, versioning, BAN, IP BAN, or authentication behavior, inspect the related request specs and service objects.
+- If frontend code changes, run the existing frontend verification commands that apply: `npm run build` and `npm run lint`.
+- If backend code changes, run the relevant RSpec command; for broad backend changes, run `bundle exec rspec`.
+- If a verification command cannot be run or fails, report the exact command and failure.
+
+## Completion criteria
+
+A task is complete only when:
+
+- implementation is complete,
+- relevant verification commands pass, or failures are clearly explained,
+- unrelated files are not changed,
+- migrations and schema are consistent when schema changes are made,
+- user-facing behavior is documented when needed.

backend/AGENTS.md

@@ -0,0 +1,147 @@
+# backend/AGENTS.md
+
+## Scope
+
+These rules apply to work under `backend/`.
+
+This is a Rails API app using Active Record, RSpec, request specs, service objects, representation classes, and version tables for post/tag/wiki history.
+
+## Commands
+
+Use commands backed by files and dependencies in this directory:
+
+```sh
+bin/setup
+bin/dev
+bin/rails
+bin/rake
+bin/rubocop
+bin/brakeman
+bundle exec rspec
+```
+
+Common checks:
+
+```sh
+bundle exec rspec
+bin/rubocop
+bin/brakeman
+```
+
+Common Rails commands:
+
+```sh
+bin/rails db:prepare
+bin/rails db:migrate
+bin/rails routes
+bin/rails server
+```
+
+After backend behavior changes, run the relevant RSpec files. For broad backend changes, run:
+
+```sh
+bundle exec rspec
+```
+
+If a command cannot be run or fails, report the exact command and failure.
+
+## Rails structure
+
+- `app/controllers`: API controllers.
+- `app/models`: Active Record models and concerns.
+- `app/representations`: JSON response shaping.
+- `app/services`: domain services such as version recorders, wiki commit, YouTube sync, and similarity calculation.
+- `config/routes.rb`: public API routes.
+- `db/migrate`: migrations.
+- `db/schema.rb`: schema snapshot.
+- `lib/tasks`: custom Rake tasks.
+- `spec`: RSpec tests.
+
+Before changing behavior, inspect the matching route, controller, model, service, representation, and spec.
+
+## Ruby style
+
+- Prefer precise, minimal changes.
+- Use single quotes unless interpolation or escaping makes double quotes better.
+- Do not put a space before Ruby method-call parentheses.
+- Do not use `%w` or `%i` in new Ruby code.
+- Keep comments short and useful; avoid narrating obvious code.
+- Do not add production dependencies without approval.
+
+## Authentication and authorization
+
+- Authentication is handled through the `X-Transfer-Code` header in `ApplicationController#authenticate_user`.
+- `current_user` is set by looking up `User.inheritance_code`.
+- Do not bypass or weaken the `X-Transfer-Code` flow unless the task explicitly changes authentication.
+- Unauthenticated write actions should return `:unauthorized` consistently with existing controllers.
+- Role checks use `User` enum roles: `guest`, `member`, and `admin`.
+- Use `current_user.gte_member?` for member-or-admin write permissions where existing controllers do so.
+- Use `current_user.admin?` only for admin-only paths, such as tag child relationship changes.
+- Do not replace role checks with looser presence checks.
+
+## BAN and IP BAN
+
+- `ApplicationController` runs these before actions in order:
+  - `reject_banned_ip_address!`
+  - `authenticate_user`
+  - `reject_banned_user!`
+- User and IP bans use `banned_at`, not a boolean `banned` column.
+- `User#banned?` and `IpAddress#banned?` check `banned_at.present?`.
+- Do not weaken BAN or IP BAN behavior.
+- If changing request authentication or controller before actions, add or update request specs covering banned users and banned IP addresses.
+
+## RSpec
+
+- Prefer RSpec for new backend tests.
+- Put API behavior coverage under `spec/requests`.
+- Put model behavior under `spec/models`.
+- Put service behavior under `spec/services`.
+- Put Rake task coverage under `spec/tasks`.
+- `spec/rails_helper.rb` loads `spec/support/**/*.rb`.
+- Request specs include `AuthHelper` and `JsonHelper`.
+- `AuthHelper#sign_in_as(user)` stubs `ApplicationController#current_user`; use it when matching existing request spec style.
+- Add or update request specs for API behavior changes, especially status codes, permissions, response shape, and version conflict behavior.
+
+## Migrations
+
+- Keep migrations and `db/schema.rb` consistent.
+- Use reversible migrations where practical; otherwise define explicit `up` and `down`.
+- For data backfills inside migrations, follow the existing pattern of defining migration-local `ActiveRecord::Base` classes with `self.table_name`.
+- Preserve existing indexes, foreign keys, check constraints, and null constraints.
+- Be careful with MySQL-specific options already present in migrations, such as `after:`.
+- Do not edit old migrations just to change current behavior unless explicitly requested; add a new migration.
+
+## Version tables
+
+- Versioned records include posts, tags, nico tags, and wiki pages.
+- Current records have `version_no`; version tables have positive `version_no` with unique indexes scoped to the parent record.
+- Version event types are `create`, `update`, `discard`, and `restore`.
+- Version rows are readonly through the `VersionRecord` concern.
+- Use the existing recorder services instead of manually inserting version rows in application code:
+  - `PostVersionRecorder`
+  - `TagVersionRecorder`
+  - `NicoTagVersionRecorder`
+  - `WikiVersionRecorder`
+  - `TagVersioning`
+- `VersionRecorder` locks the current record, validates sequence consistency, skips unchanged update snapshots, creates the next version row, and updates the record `version_no`.
+- Do not update versioned records without considering whether a version snapshot must be created.
+- For optimistic concurrency paths, preserve `base_version_no`, `force`, and `merge` semantics and cover conflicts in request specs.
+
+## Domain cautions
+
+- Posts have tag snapshots, parent post implications, original-created ranges, viewed state, and version conflict behavior.
+- Tags have canonical names, aliases through `TagName`, categories, parent implications, discard behavior, and version snapshots.
+- Nico tags have separate relation/version behavior; do not treat them like normal editable tags without checking existing code.
+- Wiki pages involve page content, revisions/history, version rows, title/tag-name behavior, and diff/restore paths.
+- Materials, theatres, and comments have user and permission checks; inspect the controller before changing them.
+
+## API responses
+
+- Use representation classes under `app/representations` when existing endpoints do.
+- Keep response keys consistent with existing JSON contracts; frontend code expects camelCase conversion client-side, while Rails params and JSON keys are generally snake_case.
+- Preserve existing HTTP status conventions: `:unauthorized` for no user, `:forbidden` for insufficient role or banned user, `:not_found` for missing records, and `:unprocessable_entity` for validation failures.
+
+## Files to avoid in routine work
+
+- Do not inspect or edit `tmp/`, `log/`, `storage/`, `vendor/`, or dependency directories unless explicitly needed.
+- Do not modify generated schema or migration output without the corresponding migration when schema changes are made.

docs/codex-handoff.md

@@ -0,0 +1,646 @@
+# Codex handoff for BTRC Hub / タグ広場
+
+This document transfers project-specific context from prior ChatGPT-assisted design and review work to Codex.
+
+Use this file as project background.
+Use `AGENTS.md`, `backend/AGENTS.md`, and `frontend/AGENTS.md` for concrete coding rules and verification commands.
+
+## Project identity
+
+BTRC Hub / タグ広場 is a collaborative knowledge base for collecting, tagging, explaining, and rediscovering Bocchi the Rock creature-related works.
+
+It is not a generic SNS.
+It is not a comment board.
+It is not a service for rehosting external content.
+It is primarily a structured link, tag, wiki, material, and viewing-party system.
+
+Core domains:
+
+1. Posts
+2. Tags
+3. Wiki pages
+4. Materials
+5. Theatre / watch-party features
+
+The project is already publicly accessible and indexed by search engines, but it has not been broadly announced. Treat it as a small public production system, not a private prototype.
+
+## Current stack
+
+Backend:
+
+- Ruby 3.2.2
+- Rails 8.0.2 API
+- MySQL 8
+- Active Storage
+- Cloudflare R2 / S3-compatible storage is expected for uploaded files
+- RSpec
+
+Frontend:
+
+- React 19.1
+- Vite 6.3
+- TypeScript 5.8
+- Axios
+- TanStack Query
+- Tailwind CSS
+- Framer Motion
+- shadcn-like local components
+- react-markdown
+- react-markdown-editor-lite
+- remark-wiki-autolink
+
+Batch / background-like tasks:
+
+- Rake tasks
+- Nico sync
+- YouTube sync
+- Similarity calculation tasks
+
+## Repository working principle
+
+Before editing, inspect the existing implementation.
+
+Do not invent a new architecture when the current repo already has an established convention.
+
+Keep changes scoped to the requested issue.
+
+Prefer small, reviewable changes over broad rewrites.
+
+Do not perform unrelated cleanup in the same patch.
+
+When a task has design ambiguity, first produce a short investigation and recommended plan. Do not silently choose a risky design.
+
+## User coding preferences
+
+General:
+
+- Prefer single quotes for strings unless interpolation, escaping, or framework convention makes double quotes better.
+- Do not add production dependencies without explicit approval.
+- Do not perform broad formatting churn.
+- Do not convert unrelated files to a different style.
+
+Ruby:
+
+- Do not put a space before method-call parentheses.
+- Do not use `%w`.
+- Do not use `%i`.
+- Keep Rails code idiomatic, but preserve the user's style where the repo already uses it.
+
+TypeScript / Python:
+
+- The user prefers GNU-style spacing before parentheses where syntactically valid.
+- Preserve existing project formatting if a formatter or nearby code dictates otherwise.
+
+## Current authentication model
+
+The system does not use normal email/password authentication.
+
+Users are authenticated by inheritance code.
+
+Frontend:
+
+- Stores the code in `localStorage.user_code`.
+- Sends it as the `X-Transfer-Code` header.
+
+Backend:
+
+- Looks up `users.inheritance_code`.
+- Sets `current_user`.
+
+Roles:
+
+- `guest`
+- `member`
+- `admin`
+
+Important helper:
+
+- `User#gte_member?` returns true for `member` and `admin`.
+
+Never introduce a conventional login assumption unless the issue explicitly asks for it.
+
+## BAN / abuse-control model
+
+The backend currently enforces BAN at API level.
+
+The relevant before_action order is conceptually:
+
+1. Reject banned IP address.
+2. Authenticate user if transfer code exists.
+3. Reject banned user.
+
+Entities:
+
+- `users.banned_at`
+- `ip_addresses.banned_at`
+- `user_ips`
+
+IP addresses are stored as binary values using `IPAddr#hton`.
+
+Do not weaken BAN behavior.
+
+Do not move BAN checks behind optional authentication.
+
+Do not make preview, theatre, verify, user creation, or public-looking endpoints bypass BAN without an explicit design decision.
+
+## Public-operation assumptions
+
+Current practical operation:
+
+- A few editor accounts exist.
+- Meaningful editing is mostly done by the owner.
+- Read access is already public.
+- Search engines have indexed the site.
+- Future editor applications are expected through Discord.
+- Prospective editors are likely people known in the Bocchi creature community.
+
+This means security and moderation issues matter even if traffic is still small.
+
+## Core domain summary
+
+### Posts
+
+Posts are external URL-based link records.
+
+Important properties:
+
+- `url` is required and unique.
+- URLs are normalized.
+- Only HTTP / HTTPS are allowed.
+- Posts can have thumbnails through Active Storage.
+- `uploaded_user_id` may be NULL for synced or bot-created posts.
+- `original_created_from` and `original_created_before` represent a time range for original content creation.
+- When both original time bounds exist, `from < before` is required.
+
+Parent/child posts:
+
+- Current implementation uses `post_implications`.
+- It is many-to-many.
+- Do not assume `posts.parent_id`.
+- Frontend/API clients must send `parent_post_ids`, even when empty.
+- `parent_post_ids` is parsed as a space-separated ID string.
+- Self-parenting is invalid.
+- Missing parent IDs are invalid.
+
+Versions:
+
+- `post_versions` stores snapshots.
+- `version_no` is a per-post sequence.
+- Snapshot includes title, URL, thumbnail base, tags, parent post IDs, original time bounds, event type, and actor.
+- Optimistic locking for posts is planned / important, but do not assume it is fully implemented unless the code proves it.
+
+### Tags
+
+Tags are central.
+
+There is separation between tag names and tag entities:
+
+- `tag_names`
+- `tags`
+
+Categories:
+
+- `deerjikist`
+- `meme`
+- `character`
+- `general`
+- `material`
+- `nico`
+- `meta`
+
+Alias model:
+
+- `tag_names.canonical_id` expresses aliases.
+- `canonical_id = NULL` means canonical name.
+- `canonical_id != NULL` means alias.
+- An alias must not point to another alias.
+- A tag name that already has a tag or wiki page generally must not be aliasified.
+
+Tag normalization:
+
+- User-entered tags are normalized through existing backend logic.
+- Known aliases are canonicalized.
+- Parent tags are expanded recursively.
+- `nico:` is normally rejected for manual entry.
+- Special tags such as tag-request / bot / unknown-deerjikist / video / niconico / youtube must be protected.
+
+Do not casually change tag normalization, alias resolution, or parent expansion. These affect search, wiki, sync, and historical data.
+
+### Nico tags
+
+Nico tags use the `nico` category and have separate versioning.
+
+Important relation:
+
+- `nico_tag_relations` maps external Nico tags to internal tags.
+- `nico_tag_id` must be a Nico category tag.
+- `tag_id` must not be Nico category.
+
+Do not allow ordinary manual tag editing to create or corrupt Nico tags.
+
+### Deerjikists
+
+Deerjikists map external platform identities to internal `deerjikist` tags.
+
+Known platforms include:
+
+- `nico`
+- `youtube`
+
+YouTube handles may be normalized to `UC...` channel IDs.
+
+Do not treat user-facing handles and canonical channel IDs as interchangeable without checking existing code.
+
+### Wiki
+
+Wiki pages are a major knowledge layer.
+
+Important points:
+
+- Wiki pages are tied to tag-like titles.
+- Title handling, aliases, and canonical tag names matter.
+- There is line-level storage / revision-oriented behavior in the current implementation.
+- There has been design tension between wiki revisions and wiki versions.
+- Wiki conflict detection using `base_revision_id` exists on the backend side.
+- Frontend support for conflict detection must be verified before assuming it is complete.
+
+Do not redesign Wiki storage casually.
+
+Do not add a second competing history system.
+
+Do not break existing wiki URLs.
+
+### Materials
+
+Materials connect files or reference URLs to `material` or `character` tags.
+
+Important properties:
+
+- A material has a `tag_id`.
+- The tag must be `material` or `character`.
+- A material requires either `url` or attached `file`.
+- Active Storage is involved.
+- Upload/security policy matters more than plain link posting.
+
+Important unresolved/risky area:
+
+- Material creation permissions have historically been risky because upload endpoints can be abused.
+- Prefer `member` or higher for material creation unless the issue explicitly says otherwise.
+
+### Theatre
+
+Theatre is an experimental watch-party style feature.
+
+Known pieces include:
+
+- Display
+- Presence
+- Next post
+- Comments
+- Host-like control
+
+Do not assume theatre has complete CRUD/admin support unless the code proves it.
+
+Theatre may become expensive if next-item selection uses random DB ordering.
+
+## Current high-risk areas
+
+Treat these areas with extra care.
+
+### Security
+
+- Preview API SSRF protection.
+- External iframe / embed CSP.
+- Markdown link safety.
+- BAN / IP BAN bypass.
+- Transfer-code leakage.
+- Guest write access.
+- Upload endpoints.
+- Admin-only tag operations.
+- System tag mutation.
+
+### Data integrity
+
+- Tag alias canonicalization.
+- Tag parent expansion.
+- Post parent many-to-many relationships.
+- Version tables.
+- `version_no` synchronization.
+- Schema drift from branch migration contamination.
+- Wiki revision/version split.
+- Material version recording.
+
+### Frontend correctness
+
+- React Hooks must not be called conditionally.
+- Role guards are currently spread across components/pages.
+- TanStack Query keys must not collide between ID/name or ID/title variants.
+- URL path segments containing tag names or wiki titles must use `encodeURIComponent`.
+- API response types may allow `null` users for bot or migration data.
+- Tag autocomplete has had duplicated logic and stale state hazards.
+
+### Performance
+
+- Avoid unbounded `limit`.
+- Avoid `order('RAND()')` for growing tables.
+- Avoid loading full relations just to count.
+- Avoid Ruby-side sorting/paging for large histories.
+- Tag sidebar client-side aggregation can become expensive.
+- Wiki full-text search needs deliberate indexing/design.
+
+## Current priority order
+
+Use this as the default priority unless an issue says otherwise.
+
+### P0: Safety before broad announcement
+
+1. Preview API SSRF hardening.
+2. Material creation permission tightening.
+3. System tag mutation holes.
+4. `GET /users/me` transfer-code leakage through query params.
+5. Limit caps for index/history/comment APIs.
+6. CSP / iframe sandbox policy.
+7. Confirm BAN enforcement remains global.
+
+### P1: Core correctness
+
+1. Post optimistic locking with `version_no`.
+2. Wiki edit conflict handling.
+3. Wiki history/revision model clarification.
+4. Wiki search truthfulness: implement body search or remove false UI.
+5. Tag alias/canonical/wiki interaction.
+6. Tag URL encoding.
+7. TanStack Query key separation.
+8. Frontend null-user handling.
+9. React Hooks rule fixes.
+10. Material version policy.
+
+### P2: Operational/admin usability
+
+1. Admin screens for users, IPs, bans, aliases, and settings.
+2. Settings table and user settings usage.
+3. Better tag sidebar.
+4. Better role guard helpers.
+5. Better frontend tests.
+6. Better issue triage and closure of already-implemented issues.
+
+### P3: Future features
+
+1. Theatre list/create/edit/admin flow.
+2. Muted/hidden tags.
+3. Tag category custom colors.
+4. Responsive refinements.
+5. Watch-party improvements.
+6. Broader embed support.
+
+## Known issue triage notes
+
+Some existing issues may already be partially or mostly implemented.
+
+Before implementing an issue, check code first.
+
+Examples:
+
+- Tag search and OR/NOT search may already be mostly implemented.
+- BAN enforcement may have been implemented after earlier issue drafts.
+- YouTube sync exists and should not be treated as purely planned.
+- Parent posts are many-to-many in current schema, even if older issues mention one-to-many.
+- Some issues may reflect old schema or old branch state.
+
+When in doubt:
+
+1. Inspect current code.
+2. Inspect schema.
+3. Inspect routes.
+4. Inspect frontend usage.
+5. Report whether the issue is implemented, partially implemented, not implemented, or obsolete.
+6. Only then edit.
+
+## Verification expectations
+
+Backend changes:
+
+- Run RSpec when possible.
+- Add request specs for API behavior changes.
+- Add model specs for validation / normalization changes.
+- Check migrations and schema consistency.
+- Do not silently ignore pending migrations.
+
+Frontend changes:
+
+- Run build.
+- Run lint if configured.
+- Run tests if configured.
+- Add tests for important behavior when the test framework exists.
+- If frontend tests are not yet installed, state that clearly.
+
+Full-stack changes:
+
+- Verify both backend and frontend compile/test paths where possible.
+- Confirm API response shapes match TypeScript types.
+- Confirm authorization behavior on both server and UI.
+
+If commands cannot be run because dependencies are missing, report that explicitly. Do not pretend verification passed.
+
+## Branch / migration caution
+
+The project has previously suffered from schema contamination caused by running migrations from another branch.
+
+Be careful when touching:
+
+- `db/schema.rb`
+- migration files
+- parent post schema
+- banned / banned_at schema
+- version_no migrations
+- wiki asset schema
+
+Before changing migrations:
+
+1. Inspect current schema.
+2. Inspect existing migrations.
+3. Confirm whether the intended branch already includes related migrations.
+4. Prefer additive migrations for shared branches.
+5. Do not edit already-applied production migrations unless explicitly instructed.
+
+## API design principles
+
+Prefer explicit server-side authorization.
+
+Do not rely only on frontend hiding.
+
+Do not return sensitive codes unnecessarily.
+
+Use 403 for authorization failures.
+
+Use 422 for validation failures.
+
+Use 409 for edit conflicts.
+
+Do not expose internal exception messages to users.
+
+Clamp or reject abusive limits consistently.
+
+Keep response shape stable unless the issue explicitly includes a breaking API change.
+
+## Frontend design principles
+
+Use existing route and query-key conventions.
+
+Use TanStack Query `enabled` rather than conditional hook calls.
+
+Do not let role-based early returns change hook order.
+
+Centralize repeated tag autocomplete logic when touching it.
+
+Use `encodeURIComponent` for tag names and wiki titles in URL path segments.
+
+Prefer graceful fallback for nullable actors:
+
+- bot operation
+- deleted user
+- migration-created data
+- external sync
+
+Do not assume all API user fields are non-null.
+
+## Testing priorities to add over time
+
+Frontend tests are especially important because the backend already has more mature RSpec coverage.
+
+Suggested first frontend tests:
+
+1. Tag autocomplete.
+2. Post form tag editing.
+3. Tag URL encoding.
+4. Wiki edit conflict UI.
+5. Role guard behavior.
+6. Null-user history rendering.
+7. Dialog behavior.
+8. Top navigation responsive behavior.
+
+Backend test priorities:
+
+1. BAN enforcement across public-looking endpoints.
+2. Material permissions.
+3. Preview SSRF rejection.
+4. System tag protection.
+5. Post optimistic locking.
+6. Wiki conflict detection.
+7. Tag alias/canonical behavior.
+8. Limit caps.
+9. Parent post parsing.
+10. Version recorder behavior.
+
+## What Codex should not do without explicit approval
+
+Do not:
+
+- Replace Rails.
+- Replace React.
+- Replace TanStack Query.
+- Redesign the database.
+- Rewrite Wiki storage.
+- Remove version tables.
+- Change authentication model.
+- Change role names.
+- Change tag category names.
+- Add background job infrastructure.
+- Add a new UI framework.
+- Add a new test framework if one already exists.
+- Add major dependencies.
+- Change public URL design.
+- Change production storage configuration.
+- Remove historical data behavior.
+- Simplify BAN/security checks.
+- Treat the site as private-only.
+
+## Good first Codex tasks
+
+Start with investigation-only tasks.
+
+Example:
+
+```txt
+Inspect the repository and summarize the Rails, React, TypeScript, and test setup.
+Do not modify files.
+List commands that actually exist in this repository.
+List risks Codex should know before editing.
+```
+
+Then small safe patches:
+
+```txt
+Fix a React Hooks rule violation in one file.
+Keep behavior unchanged.
+Run the relevant frontend verification commands.
+```
+
+```txt
+Add encodeURIComponent around one tag-name URL path segment.
+Add or update a test if the project has a frontend test setup.
+Run build/lint.
+```
+
+```txt
+Add a request spec for a known authorization rule.
+Do not change implementation unless the spec fails for the expected reason.
+```
+
+Avoid starting with:
+
+- Wiki history redesign.
+- Post versioning redesign.
+- Full admin screen suite.
+- Broad frontend refactor.
+- Database cleanup.
+- Authentication rewrite.
+
+## Relationship with ChatGPT
+
+ChatGPT has been used for:
+
+- Design review.
+- Risk analysis.
+- Prioritization.
+- Specification reconstruction.
+- Migration/locking discussions.
+- Codex migration planning.
+
+Codex should be used mainly for:
+
+- Repository inspection.
+- Localized implementation.
+- Test addition.
+- Running verification commands.
+- Producing small reviewable diffs.
+
+For ambiguous architecture, Codex should stop and present options rather than implement a guessed design.
+
+## Current strategic stance
+
+The project should not be rewritten from scratch.
+
+The current Rails + React system is acceptable.
+
+The immediate goal is not elegance.
+The immediate goal is safe public operation, data integrity, and maintainable incremental improvement.
+
+Priority is:
+
+1. Prevent abuse/security incidents.
+2. Preserve data correctness.
+3. Make editing safe for multiple users.
+4. Add tests around fragile frontend behavior.
+5. Improve admin/operation workflows.
+6. Optimize performance after obvious dangerous patterns are removed.
+
+## Final rule
+
+When current code, old specs, issue drafts, and memory disagree, current code wins.
+
+When current code is unsafe, write that explicitly and propose a small safe fix.
+
+When the task is too broad, split it.
+
+When verification cannot be performed, say exactly what was not verified.

docs/commands.md

@@ -0,0 +1,30 @@
+# Commands
+
+## Backend
+
+```sh
+cd backend
+bundle install
+bundle exec rails db:migrate
+bundle exec rspec
+bundle exec rails routes
+```
+
+## Frontend
+
+```sh
+cd frontend
+npm install
+npm run dev
+npm run build
+npm run lint
+npm run test
+npm run test:run
+```
+
+### Full verification
+
+```sh
+cd backend && bundle exec rspec
+cd ../frontend && npm run test:run && npm run build && npm run lint
+```

docs/issue-workflow.md

@@ -0,0 +1,80 @@
+# Issue workflow
+
+## Source of truth
+
+Gitea Issues are the source of truth for tasks, discussions, labels, milestones, and status.
+
+Do not copy the full backlog into git.
+
+Repository documents may define:
+
+- issue templates
+- triage rules
+- Codex task format
+- verification rules
+- release checklist
+
+## Labels
+
+Recommended labels:
+
+- `P0`
+- `P1`
+- `P2`
+- `P3`
+- `security`
+- `data-integrity`
+- `backend`
+- `frontend`
+- `wiki`
+- `tags`
+- `materials`
+- `theatre`
+- `codex-ready`
+- `needs-design`
+- `blocked`
+- `good-first-codex-task`
+
+## Codex-ready criteria
+
+An issue can be labeled `codex-ready` only when it has:
+
+- clear background
+- target area
+- concrete tasks
+- acceptance criteria
+- verification commands
+- explicit non-goals
+- no unresolved architecture decision
+
+## Workflow
+
+1. Create or refine the issue in Gitea.
+2. Add labels and milestone.
+3. If design is unclear, label `needs-design`.
+4. Discuss design before implementation.
+5. When scoped enough, label `codex-ready`.
+6. Give Codex the issue URL or copied issue body.
+7. Codex creates a branch.
+8. Codex implements a small patch.
+9. Codex runs verification commands.
+10. Human reviews the diff.
+11. Merge.
+12. Close the issue from the PR/commit message.
+
+## Commit message
+
+Use issue references when possible:
+
+```txt
+fix: prevent preview SSRF
+
+Refs: #123
+```
+or
+```
+fix: prevent preview SSRF
+
+Closes: #123
+```
+depending on whether the change fully resolves the issue.

docs/release-checklist.md

@@ -0,0 +1,8 @@
+# Release checklist
+
+- [ ] Backend specs pass
+- [ ] Frontend build passes
+- [ ] No pending migrations
+- [ ] Preview API SSRF checked
+- [ ] BAN behavior checked
+- [ ] CSP checked

docs/roadmap.md

@@ -0,0 +1,8 @@
+# Roadmap
+
+## Public announcement readiness
+
+- Harden preview API
+- Tighten material creation permission
+- Add admin MVP
+- Improve frontend tests

frontend/AGENTS.md

@@ -0,0 +1,95 @@
+# frontend/AGENTS.md
+
+## Scope
+
+These rules apply to work under `frontend/`.
+
+This is a Vite + React + TypeScript app using TanStack Query, Tailwind CSS, Framer Motion, Radix UI-style components, MDX, and Zustand.
+
+## Commands
+
+Use only scripts that exist in `package.json`:
+
+```sh
+npm run dev
+npm run build
+npm run lint
+npm run preview
+```
+
+`npm run build` runs `tsc -b && vite build`, and `postbuild` runs `node scripts/generate-sitemap.js`.
+
+There is currently no `test` script in `package.json`. Do not run or report `npm test` unless a test script is added.
+
+After frontend changes, run:
+
+```sh
+npm run build
+npm run lint
+```
+
+If either command cannot be run or fails, report the exact command and failure.
+
+## TypeScript
+
+- TypeScript is strict. `tsconfig.app.json` enables `strict`, `noUnusedLocals`, `noUnusedParameters`, `erasableSyntaxOnly`, `noFallthroughCasesInSwitch`, and `noUncheckedSideEffectImports`.
+- Keep types explicit at module boundaries, API helpers, and exported utilities.
+- Use `import type` for type-only imports.
+- Prefer existing shared types from `src/types.ts` before adding local duplicate types.
+- Preserve the repository's existing spacing style in TypeScript, including GNU-style spacing before call parentheses where it is already used.
+- Prefer single quotes for strings unless interpolation or escaping makes double quotes better.
+
+## React
+
+- Use function components.
+- Existing page components commonly export an anonymous function satisfying `FC`; match nearby file style when editing.
+- React hooks must be called unconditionally and at the top level of components or custom hooks.
+- Keep page-level components under `src/pages`.
+- Keep shared and feature components under `src/components`.
+- Use `react-router-dom` route params and navigation patterns already present in `src/App.tsx`.
+- Encode URL path-segment values with `encodeURIComponent`.
+
+## TanStack Query
+
+- Use `@tanstack/react-query` for server state.
+- Query keys should come from `src/lib/queryKeys.ts`; add key builders there instead of using ad hoc arrays in components.
+- Fetch functions should live in domain helpers under `src/lib`, such as `posts.ts`, `tags.ts`, or `wiki.ts`.
+- Use `useQueryClient().invalidateQueries` with the shared root keys when mutations affect cached lists or detail views.
+- The app-wide `QueryClient` is configured in `src/main.tsx`; do not create additional clients in feature code.
+
+## API calls
+
+- Use `src/lib/api.ts` for HTTP calls.
+- The API wrapper attaches `X-Transfer-Code` from `localStorage` and converts non-blob responses to camelCase.
+- Send Rails snake_case params and request body keys where the backend expects them.
+- Do not bypass the API wrapper unless there is a specific reason, such as a third-party request outside the Rails API.
+- For blob responses, pass `responseType: 'blob'` so the wrapper does not camelCase the body.
+
+## Imports and aliases
+
+- The `@` alias points to `frontend/src`.
+- Prefer `@/...` imports for app code instead of long relative paths.
+- Keep type imports separate with `import type`.
+- Match existing import grouping: external packages, app modules, then type imports.
+
+## Tailwind and UI
+
+- Tailwind scans `src/**/*.{html,js,ts,jsx,tsx,mdx}`.
+- Use `cn` from `src/lib/utils.ts` for conditional class names and class merging.
+- Reuse components from `src/components/common`, `src/components/layout`, and `src/components/ui` before adding new primitives.
+- Keep Tailwind classes consistent with nearby components.
+- When adding dynamic tag color classes, update `tailwind.config.js` safelist if the class cannot be statically detected.
+- Do not introduce new UI libraries or production dependencies without approval.
+
+## Lint and build constraints
+
+- ESLint uses `@eslint/js`, `typescript-eslint`, `eslint-plugin-react-hooks`, and `eslint-plugin-react-refresh`.
+- The hooks rules are enforced; fix hook ordering instead of disabling the rule.
+- `react-refresh/only-export-components` is enabled as a warning with `allowConstantExport`.
+- Build failures from unused locals or unused parameters are TypeScript errors, not lint-only issues.
+
+## Files to avoid in routine work
+
+- Do not edit `dist/` output directly.
+- Do not inspect or modify `node_modules/` unless explicitly needed.
+- Keep generated build artifacts out of source changes unless the user asks for them.

frontend/eslint.config.js

@@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ['dist', 'tailwind.config.js'] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     files: ['**/*.{ts,tsx}'],

frontend/package.json

@@ -8,6 +8,8 @@
     "build": "tsc -b && vite build",
     "postbuild": "node scripts/generate-sitemap.js",
     "lint": "eslint .",
+    "test": "vitest",
+    "test:run": "vitest run",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -45,6 +47,10 @@
   "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@tailwindcss/typography": "^0.5.19",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/axios": "^0.14.4",
     "@types/markdown-it": "^14.1.2",
     "@types/mdx": "^2.0.13",
@@ -58,11 +64,13 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "jsdom": "^26.1.0",
     "postcss": "^8.5.3",
     "tailwindcss": "^3.4.13",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
-    "vite": "^6.3.5"
+    "vite": "^6.3.5",
+    "vitest": "^4.1.5"
   },
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "main": "eslint.config.js",

frontend/src/App.tsx

@@ -93,7 +93,7 @@ const PostDetailRoute = ({ user }: { user: User | null }) => {
 }
 
 
-export default (() => {
+const App: FC = () => {
   const [user, setUser] = useState<User | null> (null)
   const [status, setStatus] = useState (200)
 
@@ -156,4 +156,6 @@ export default (() => {
 	  </DialogueProvider>
 	</BrowserRouter>
       </>)
-}) satisfies FC
+}
+
+export default App

frontend/src/components/DraggableDroppableTagRow.tsx

@@ -19,7 +19,7 @@ type Props = {
     sp?:              boolean }
 
 
-export default (({ tag, nestLevel, pathKey, parentTagId, suppressClickRef, sp }: Props) => {
+const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTagId, suppressClickRef, sp }) => {
   const dndId = `tag-node:${ pathKey }`
 
   const downPosRef = useRef<{ x: number; y: number } | null> (null)
@@ -96,4 +96,6 @@ export default (({ tag, nestLevel, pathKey, parentTagId, suppressClickRef, sp }:
 	  <TagLink tag={tag} nestLevel={nestLevel}/>
 	</motion.div>
       </div>)
-}) satisfies FC<Props>
+}
+
+export default DraggableDroppableTagRow

frontend/src/components/ErrorScreen.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react'
+import { HelmetProvider } from 'react-helmet-async'
+import { describe, expect, it } from 'vitest'
+
+import ErrorScreen from '@/components/ErrorScreen'
+
+describe ('ErrorScreen', () => {
+  it.each ([
+    [403, '権限ないよ（笑）'],
+    [404, 'ページないよ（笑）'],
+    [500, '鯖でエラー出たって（嘲笑）'],
+    [503, '鯖死んでるよ（泣）'],
+  ]) ('renders status %s', (status, message) => {
+    render (
+        <HelmetProvider>
+          <ErrorScreen status={status}/>
+        </HelmetProvider>,
+    )
+
+    expect (screen.getByText (String (status))).toBeInTheDocument ()
+    expect (screen.getByText (message)).toBeInTheDocument ()
+    expect (screen.getByAltText ('逃げたギター')).toBeInTheDocument ()
+  })
+
+  it ('throws for unsupported statuses', () => {
+    expect (() => render (
+        <HelmetProvider>
+          <ErrorScreen status={418}/>
+        </HelmetProvider>,
+    )).toThrow ()
+  })
+})

frontend/src/components/ErrorScreen.tsx

@@ -10,7 +10,7 @@ import type { FC } from 'react'
 type Props = { status: number }
 
 
-export default (({ status }: Props) => {
+const ErrorScreen: FC<Props> = ({ status }) => {
   const [message, rightMsg, leftMsg]: [string, string, string] = (() => {
     switch (status)
     {
@@ -58,4 +58,6 @@ export default (({ status }: Props) => {
 	  <p className="mr-[-.5em]">{message}</p>
 	</div>
       </MainArea>)
-}) satisfies FC<Props>
+}
+
+export default ErrorScreen

frontend/src/components/MaterialSidebar.tsx

@@ -31,7 +31,7 @@ const setChildrenById = (
     }))
 
 
-export default (() => {
+const MaterialSidebar: FC = () => {
   const [tags, setTags] = useState<TagWithDepth[]> ([])
   const [openTags, setOpenTags] = useState<Record<number, boolean>> ({ })
   const [tagFetchedFlags, setTagFetchedFlags] = useState<Record<number, boolean>> ({ })
@@ -94,4 +94,6 @@ export default (() => {
 	  {renderTags (tags)}
 	</ul>
       </SidebarComponent>)
-}) satisfies FC
+}
+
+export default MaterialSidebar

frontend/src/components/MenuSeparator.tsx

@@ -1,9 +1,11 @@
 import type { FC } from 'react'
 
 
-export default (() => (
+const MenuSeparator: FC = () => (
     <>
       <span className="hidden md:inline flex items-center px-2">|</span>
       <hr className="block md:hidden w-full opacity-25
 		     border-t border-black dark:border-white"/>
-    </>)) satisfies FC
+    </>)
+
+export default MenuSeparator

frontend/src/components/PostEditForm.test.tsx

@@ -0,0 +1,69 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostEditForm from '@/components/PostEditForm'
+import { buildPost, buildTag } from '@/test/factories'
+
+const postsApi = vi.hoisted (() => ({
+  updatePost: vi.fn (),
+}))
+
+const api = vi.hoisted (() => ({
+  isApiError: vi.fn (() => false),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/posts', () => postsApi)
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+vi.mock ('@/components/dialogues/DialogueProvider', () => ({
+  useDialogue: () => ({
+    choice: vi.fn (),
+  }),
+}))
+
+describe ('PostEditForm', () => {
+  it ('submits edited post fields with the current base version', async () => {
+    const onSave = vi.fn ()
+    const post = buildPost ({
+      id:        8,
+      versionNo: 4,
+      title:     'old',
+      tags:      [
+        buildTag ({ name: 'general-tag', category: 'general' }),
+        buildTag ({ id: 2, name: 'nico-tag', category: 'nico' }),
+      ],
+      parentPosts: [buildPost ({ id: 2, title: 'parent' })],
+    })
+    postsApi.updatePost.mockResolvedValueOnce ({
+      ...post,
+      versionNo: 5,
+      title:     'new',
+      tags:      [buildTag ({ name: 'new-tag' })],
+    })
+
+    render (<PostEditForm post={post} onSave={onSave}/>)
+
+    const [title, parentIds] = screen.getAllByRole ('textbox')
+    fireEvent.change (title, { target: { value: 'new' } })
+    fireEvent.change (parentIds, { target: { value: '3 4' } })
+    fireEvent.submit (screen.getByRole ('button', { name: '更新' }).closest ('form')!)
+
+    await waitFor (() => {
+      expect (postsApi.updatePost).toHaveBeenCalledWith (
+          expect.objectContaining ({
+            id:            8,
+            title:         'new',
+            parentPostIds: '3 4',
+            tags:          'general-tag',
+          }),
+          { baseVersionNo: 4 },
+      )
+    })
+    expect (onSave).toHaveBeenCalledWith (expect.objectContaining ({ versionNo: 5 }))
+    expect (toastApi.toast).toHaveBeenCalledWith ({ description: '更新しました．' })
+  })
+})

frontend/src/components/PostEditForm.tsx

@@ -6,6 +6,7 @@ import Label from '@/components/common/Label'
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
+import { isApiError } from '@/lib/api'
 import { updatePost } from '@/lib/posts'
 
 import type { FC, FormEvent } from 'react'
@@ -32,7 +33,7 @@ type Props = { post:    Post
 	       onSave:  (newPost: Post) => void }
 
 
-export default (({ post, onSave }: Props) => {
+const PostEditForm: FC<Props> = ({ post, onSave }) => {
   const [disabled, setDisabled] = useState (false)
   const [originalCreatedBefore, setOriginalCreatedBefore] =
       useState<string | null> (post.originalCreatedBefore)
@@ -62,7 +63,7 @@ export default (({ post, onSave }: Props) => {
     }
     catch (e)
     {
-      const response = (e as any)?.response
+      const response = isApiError<{ mergeable?: boolean }> (e) ? e.response : undefined
 
       if (response?.status !== 409)
 	{
@@ -164,4 +165,6 @@ export default (({ post, onSave }: Props) => {
 	  更新
 	</Button>
       </form>)
-}) satisfies FC<Props>
+}
+
+export default PostEditForm

frontend/src/components/PostEmbed.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostEmbed from '@/components/PostEmbed'
+import { buildPost } from '@/test/factories'
+
+const dialogue = vi.hoisted (() => ({
+  confirm: vi.fn (),
+}))
+
+vi.mock ('@/components/dialogues/DialogueProvider', () => ({
+  useDialogue: () => dialogue,
+}))
+
+vi.mock ('@/components/NicoViewer', () => ({
+  default: ({ id }: { id: string }) => <div>Nico:{id}</div>,
+}))
+
+vi.mock ('react-youtube', () => ({
+  default: ({ videoId }: { videoId: string }) => <div>YouTube:{videoId}</div>,
+}))
+
+describe ('PostEmbed', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('embeds nicovideo watch URLs', () => {
+    render (<PostEmbed post={buildPost ({ url: 'https://www.nicovideo.jp/watch/sm12345' })}/>)
+
+    expect (screen.getByText ('Nico:sm12345')).toBeInTheDocument ()
+  })
+
+  it ('embeds x/twitter status URLs', () => {
+    render (<PostEmbed post={buildPost ({ url: 'https://x.com/someone/status/12345' })}/>)
+
+    expect (screen.getByRole ('link', { name: '@someone' })).toBeInTheDocument ()
+  })
+
+  it ('embeds youtube watch URLs', () => {
+    render (<PostEmbed post={buildPost ({ url: 'https://www.youtube.com/watch?v=abc123' })}/>)
+
+    expect (screen.getByText ('YouTube:abc123')).toBeInTheDocument ()
+  })
+
+  it ('asks before framing unknown external pages', async () => {
+    dialogue.confirm.mockResolvedValueOnce (true)
+    render (
+        <PostEmbed
+            post={buildPost ({ url: 'https://example.com/page', title: 'external' })}/>,
+    )
+
+    fireEvent.click (screen.getByRole ('link', { name: '外部ページを表示' }))
+
+    await waitFor (() => {
+      expect (dialogue.confirm).toHaveBeenCalled ()
+    })
+    expect (await screen.findByTitle ('external')).toHaveAttribute (
+        'src',
+        'https://example.com/page',
+    )
+  })
+})

frontend/src/components/PostEmbed.tsx

@@ -16,8 +16,9 @@ type Props = {
     onMetadataChange?:  (meta: NiconicoMetadata) => void }
 
 
-export default (({ ref, post, onLoadComplete, onMetadataChange }: Props) => {
+const PostEmbed: FC<Props> = ({ ref, post, onLoadComplete, onMetadataChange }) => {
   const dialogue = useDialogue ()
+  const [framed, setFramed] = useState (false)
 
   const url = new URL (post.url)
 
@@ -44,7 +45,7 @@ export default (({ ref, post, onLoadComplete, onMetadataChange }: Props) => {
   case 'twitter.com':
   case 'x.com':
     {
-      const mUserId = url.pathname.match (/(?<=\/)[^\/]+?(?=\/|$|\?)/)
+      const mUserId = url.pathname.match (/(?<=\/)[^/]+?(?=\/|$|\?)/)
       const mStatusId = url.pathname.match (/(?<=\/status\/)\d+?(?=\/|$|\?)/)
       if (!(mUserId) || !(mStatusId))
 	break
@@ -72,8 +73,6 @@ export default (({ ref, post, onLoadComplete, onMetadataChange }: Props) => {
     }
   }
 
-  const [framed, setFramed] = useState (false)
-
   return (
       <>
 	{framed
@@ -101,4 +100,6 @@ export default (({ ref, post, onLoadComplete, onMetadataChange }: Props) => {
 	      </a>
 	    </div>)}
       </>)
-}) satisfies FC<Props>
+}
+
+export default PostEmbed

frontend/src/components/PostFormTagsArea.test.tsx

@@ -0,0 +1,34 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostFormTagsArea from '@/components/PostFormTagsArea'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('PostFormTagsArea', () => {
+  it ('updates text and fetches autocomplete for the selected token', async () => {
+    const setTags = vi.fn ()
+    api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 3 })])
+
+    renderWithProviders (<PostFormTagsArea tags="虹" setTags={setTags}/>)
+
+    const textarea = screen.getByRole ('textbox')
+    fireEvent.focus (textarea)
+    fireEvent.select (textarea, { target: { selectionStart: 1, selectionEnd: 1 } })
+    fireEvent.change (textarea, { target: { value: '虹夏' } })
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith (
+          '/tags/autocomplete',
+          { params: { q: '虹', nico: '0' } },
+      )
+    })
+    expect (setTags).toHaveBeenCalledWith ('虹夏')
+  })
+})

frontend/src/components/PostFormTagsArea.tsx

@@ -36,7 +36,7 @@ type Props = Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'onChange' | '
     setTags:  (tags: string) => void }
 
 
-export default (({ tags, setTags, ...rest }: Props) => {
+const PostFormTagsArea: FC<Props> = ({ tags, setTags, ...rest }) => {
   const ref = useRef<HTMLTextAreaElement> (null)
 
   const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
@@ -97,4 +97,6 @@ export default (({ tags, setTags, ...rest }: Props) => {
 		activeIndex={-1}
 		onSelect={handleTagSelect}/>)}
       </div>)
-}) satisfies FC<Props>
+}
+
+export default PostFormTagsArea

frontend/src/components/PostList.test.tsx

@@ -0,0 +1,44 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostList from '@/components/PostList'
+import { buildPost } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const prefetchers = vi.hoisted (() => ({
+  prefetchForURL: vi.fn (),
+}))
+
+vi.mock ('@/lib/prefetchers', () => prefetchers)
+
+describe ('PostList', () => {
+  beforeEach (() => {
+    prefetchers.prefetchForURL.mockResolvedValue (undefined)
+  })
+
+  it ('renders post thumbnails as links to post details', () => {
+    renderWithProviders (
+        <PostList posts={[
+          buildPost ({ id: 1, title: 'First', thumbnail: 'first.jpg' }),
+          buildPost ({ id: 2, title: null, url: 'https://example.com/second' }),
+        ]}/>,
+    )
+
+    expect (screen.getByRole ('link', { name: 'First' })).toHaveAttribute (
+        'href',
+        '/posts/1',
+    )
+    expect (
+        screen.getByRole ('link', { name: 'https://example.com/second' }),
+    ).toHaveAttribute ('href', '/posts/2')
+  })
+
+  it ('calls the optional click handler', () => {
+    const onClick = vi.fn ()
+    renderWithProviders (<PostList posts={[buildPost ()]} onClick={onClick}/>)
+
+    fireEvent.click (screen.getByRole ('link', { name: 'テスト投稿' }))
+
+    expect (onClick).toHaveBeenCalledTimes (1)
+  })
+})

frontend/src/components/PostList.tsx

@@ -14,7 +14,7 @@ type Props = { posts:     Post[]
 	       onClick?:  (event: MouseEvent<HTMLElement>) => void }
 
 
-export default (({ posts, onClick }: Props) => {
+const PostList: FC<Props> = ({ posts, onClick }) => {
   const location = useLocation ()
 
   const setForLocationKey = useSharedTransitionStore (s => s.setForLocationKey)
@@ -70,4 +70,6 @@ export default (({ posts, onClick }: Props) => {
 	      </PrefetchLink>)
 	})}
       </div>)
-}) satisfies FC<Props>
+}
+
+export default PostList

frontend/src/components/PostOriginalCreatedTimeField.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
+
+describe ('PostOriginalCreatedTimeField', () => {
+  it ('updates from and before values', () => {
+    const setFrom = vi.fn ()
+    const setBefore = vi.fn ()
+
+    render (
+        <PostOriginalCreatedTimeField
+            originalCreatedFrom={null}
+            setOriginalCreatedFrom={setFrom}
+            originalCreatedBefore={null}
+            setOriginalCreatedBefore={setBefore}/>,
+    )
+
+    const inputs = screen.getAllByDisplayValue ('')
+    fireEvent.change (inputs[0], { target: { value: '2026-01-02T03:04' } })
+    fireEvent.change (inputs[1], { target: { value: '2026-01-03T03:04' } })
+
+    expect (setFrom).toHaveBeenCalledWith (expect.any (String))
+    expect (setBefore).toHaveBeenCalledWith (expect.any (String))
+  })
+
+  it ('infers an exclusive before value on blur', () => {
+    const setBefore = vi.fn ()
+
+    render (
+        <PostOriginalCreatedTimeField
+            originalCreatedFrom={null}
+            setOriginalCreatedFrom={vi.fn ()}
+            originalCreatedBefore={null}
+            setOriginalCreatedBefore={setBefore}/>,
+    )
+
+    const input = screen.getAllByDisplayValue ('')[0]
+    fireEvent.blur (input, { target: { value: '2026-01-02T03:04' } })
+
+    expect (setBefore).toHaveBeenCalledWith (expect.any (String))
+  })
+
+  it ('resets both values', () => {
+    const setFrom = vi.fn ()
+    const setBefore = vi.fn ()
+
+    render (
+        <PostOriginalCreatedTimeField
+            originalCreatedFrom="2026-01-01T00:00:00Z"
+            setOriginalCreatedFrom={setFrom}
+            originalCreatedBefore="2026-01-02T00:00:00Z"
+            setOriginalCreatedBefore={setBefore}/>,
+    )
+
+    const buttons = screen.getAllByRole ('button', { name: 'リセット' })
+    fireEvent.click (buttons[0])
+    fireEvent.click (buttons[1])
+
+    expect (setFrom).toHaveBeenCalledWith (null)
+    expect (setBefore).toHaveBeenCalledWith (null)
+  })
+})

frontend/src/components/PostOriginalCreatedTimeField.tsx

@@ -12,11 +12,11 @@ type Props = {
     setOriginalCreatedBefore: (x: string | null) => void }
 
 
-export default (({ disabled,
+const PostOriginalCreatedTimeField: FC<Props> = ({ disabled,
 		   originalCreatedFrom,
 		   setOriginalCreatedFrom,
 		   originalCreatedBefore,
-		   setOriginalCreatedBefore }: Props) => (
+		   setOriginalCreatedBefore }) => (
     <div>
       <Label>オリジナルの作成日時</Label>
       <div className="my-1 flex">
@@ -71,4 +71,6 @@ export default (({ disabled,
 	  </Button>
 	</div>
       </div>
-    </div>)) satisfies FC<Props>
+    </div>)
+
+export default PostOriginalCreatedTimeField

frontend/src/components/RouteBlockerOverlay.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import RouteBlockerOverlay, { useOverlayStore } from '@/components/RouteBlockerOverlay'
+
+describe ('RouteBlockerOverlay', () => {
+  afterEach (() => {
+    useOverlayStore.setState ({ active: false })
+    document.body.style.overflow = ''
+    document.body.removeAttribute ('aria-busy')
+  })
+
+  it ('renders nothing while inactive', () => {
+    useOverlayStore.setState ({ active: false })
+
+    const { container } = render (<RouteBlockerOverlay/>)
+
+    expect (container).toBeEmptyDOMElement ()
+  })
+
+  it ('renders a blocking progressbar and marks the body busy while active', () => {
+    useOverlayStore.setState ({ active: true })
+
+    render (<RouteBlockerOverlay/>)
+
+    expect (screen.getByRole ('progressbar', { name: 'Loading' })).toBeInTheDocument ()
+    expect (document.body).toHaveAttribute ('aria-busy', 'true')
+    expect (document.body.style.overflow).toBe ('hidden')
+  })
+})

frontend/src/components/RouteBlockerOverlay.tsx

@@ -13,7 +13,7 @@ export const useOverlayStore = create<OverlayStore> (set => ({
     setActive:  v => set ({ active: v }) }))
 
 
-export default (() => {
+const RouteBlockerOverlay: FC = () => {
   const active = useOverlayStore (s => s.active)
 
   useEffect (() => {
@@ -43,4 +43,6 @@ export default (() => {
 	  </div>
 	</div>
       </div>)
-}) satisfies FC
+}
+
+export default RouteBlockerOverlay

frontend/src/components/SortHeader.test.tsx

@@ -0,0 +1,39 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import SortHeader from '@/components/SortHeader'
+import { renderWithProviders } from '@/test/render'
+
+describe ('SortHeader', () => {
+  it ('toggles the active sort direction and resets the page', () => {
+    renderWithProviders (
+        <SortHeader
+            by="title"
+            label="タイトル"
+            currentOrder="title:asc"
+            defaultDirection={{ title: 'asc' }}/>,
+        { route: '/posts?tags=x&page=4&order=title%3Aasc' },
+    )
+
+    expect (screen.getByRole ('link', { name: 'タイトル ▲' })).toHaveAttribute (
+        'href',
+        '/posts?tags=x&page=1&order=title%3Adesc',
+    )
+  })
+
+  it ('uses default direction for inactive fields', () => {
+    renderWithProviders (
+        <SortHeader
+            by="updated_at"
+            label="更新"
+            currentOrder="title:desc"
+            defaultDirection={{ title: 'asc', updated_at: 'desc' }}/>,
+        { route: '/posts?page=2' },
+    )
+
+    expect (screen.getByRole ('link', { name: '更新' })).toHaveAttribute (
+        'href',
+        '/posts?page=1&order=updated_at%3Adesc',
+    )
+  })
+})

frontend/src/components/TagDetailSidebar.tsx

@@ -151,7 +151,7 @@ const DropSlot = ({ cat }: { cat: Category }) => {
 type Props = { post: Post; sp?: boolean }
 
 
-export default (({ post, sp }: Props) => {
+const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
   sp = Boolean (sp)
 
   const qc = useQueryClient ()
@@ -376,4 +376,6 @@ export default (({ post, sp }: Props) => {
 	  </DragOverlay>
 	</DndContext>
       </SidebarComponent>)
-}) satisfies FC<Props>
+}
+
+export default TagDetailSidebar

frontend/src/components/TagLink.test.tsx

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import TagLink from '@/components/TagLink'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+describe ('TagLink', () => {
+  it ('links tag names to post search and shows counts', () => {
+    renderWithProviders (
+        <TagLink tag={buildTag ({ name: '虹 夏', postCount: 4 })}/>,
+    )
+
+    expect (screen.getByRole ('link', { name: '虹 夏' })).toHaveAttribute (
+        'href',
+        '/posts?tags=%E8%99%B9+%E5%A4%8F',
+    )
+    expect (screen.getByText ('4')).toBeInTheDocument ()
+  })
+
+  it ('links wiki markers to the correct detail route', () => {
+    renderWithProviders (
+        <TagLink tag={buildTag ({ hasWiki: true, name: 'a/b' })}/>,
+    )
+
+    expect (screen.getByRole ('link', { name: '?' })).toHaveAttribute (
+        'href',
+        '/wiki/a%2Fb',
+    )
+  })
+
+  it ('renders aliases and non-link tags when requested', () => {
+    renderWithProviders (
+        <TagLink
+            tag={buildTag ({ matchedAlias: '別名', name: '正式名' })}
+            linkFlg={false}
+            withWiki={false}
+            withCount={false}/>,
+    )
+
+    expect (screen.getByText ('別名')).toBeInTheDocument ()
+    expect (screen.getByText ('正式名')).toBeInTheDocument ()
+    expect (screen.queryByRole ('link')).not.toBeInTheDocument ()
+  })
+})

frontend/src/components/TagLink.tsx

@@ -27,12 +27,12 @@ type Props =
     | PropsWithoutLink
 
 
-export default (({ tag,
+const TagLink: FC<Props> = ({ tag,
 		   nestLevel = 0,
 		   linkFlg   = true,
 		   withWiki  = true,
 		   withCount = true,
-		   ...props }: Props) => {
+		   ...props }) => {
   const spanClass = cn (
       `text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
       `dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
@@ -126,4 +126,6 @@ export default (({ tag,
 	{withCount && (
 	    <span className="ml-1">{tag.postCount}</span>)}
       </>)
-}) satisfies FC<Props>
+}
+
+export default TagLink

frontend/src/components/TagSearch.tsx

@@ -12,7 +12,7 @@ import type { ChangeEvent, FC, KeyboardEvent } from 'react'
 import type { Tag } from '@/types'
 
 
-export default (() => {
+const TagSearch: FC = () => {
   const location = useLocation ()
   const navigate = useNavigate ()
 
@@ -115,4 +115,6 @@ export default (() => {
 		      activeIndex={activeIndex}
 		      onSelect={handleTagSelect}/>
       </div>)
-}) satisfies FC
+}
+
+export default TagSearch

frontend/src/components/TagSearchBox.test.tsx

@@ -0,0 +1,30 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import TagSearchBox from '@/components/TagSearchBox'
+import { buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+describe ('TagSearchBox', () => {
+  it ('renders suggestions and selects tags on mouse down', () => {
+    const handleSelect = vi.fn ()
+    const tag = buildTag ({ id: 9, name: '候補', postCount: 2 })
+
+    renderWithProviders (
+        <TagSearchBox suggestions={[tag]} activeIndex={0} onSelect={handleSelect}/>,
+    )
+
+    fireEvent.mouseDown (screen.getByText ('候補'))
+
+    expect (handleSelect).toHaveBeenCalledWith (tag)
+    expect (screen.getByText ('2')).toBeInTheDocument ()
+  })
+
+  it ('renders nothing when suggestions are empty', () => {
+    const { container } = renderWithProviders (
+        <TagSearchBox suggestions={[]} activeIndex={-1} onSelect={vi.fn ()}/>,
+    )
+
+    expect (container).toBeEmptyDOMElement ()
+  })
+})

frontend/src/components/TagSearchBox.tsx

@@ -10,7 +10,7 @@ type Props = { suggestions: Tag[]
 	       onSelect:    (tag: Tag) => void }
 
 
-export default (({ suggestions, activeIndex, onSelect }: Props) => {
+const TagSearchBox: FC<Props> = ({ suggestions, activeIndex, onSelect }) => {
   if (suggestions.length === 0)
     return
 
@@ -26,4 +26,6 @@ export default (({ suggestions, activeIndex, onSelect }: Props) => {
 	      <TagLink tag={tag} linkFlg={false} withWiki={false}/>
 	    </li>))}
       </ul>)
-}) satisfies FC<Props>
+}
+
+export default TagSearchBox

frontend/src/components/TagSidebar.tsx

@@ -19,7 +19,7 @@ type Props = { posts:     Post[]
 	       onClick?:  (event: MouseEvent<HTMLElement>) => void }
 
 
-export default (({ posts, onClick }: Props) => {
+const TagSidebar: FC<Props> = ({ posts, onClick }) => {
   const navigate = useNavigate ()
 
   const [tagsVsbl, setTagsVsbl] = useState (false)
@@ -126,4 +126,6 @@ export default (({ posts, onClick }: Props) => {
 	  {tagsVsbl ? '▲▲▲ タグ一覧を閉じる ▲▲▲' : '▼▼▼ タグ一覧を表示 ▼▼▼'}
 	</a>
       </SidebarComponent>)
-}) satisfies FC<Props>
+}
+
+export default TagSidebar

frontend/src/components/TopNav.tsx

@@ -26,7 +26,7 @@ export const menuOutline = ({ tag, wikiId, user, pathName }: {
     pathName: string }): Menu => {
   const postCount = tag?.postCount ?? 0
 
-  const wikiPageFlg = Boolean (/^\/wiki\/(?!new|changes)[^\/]+/.test (pathName) && wikiId)
+  const wikiPageFlg = Boolean (/^\/wiki\/(?!new|changes)[^/]+/.test (pathName) && wikiId)
   const wikiTitle = pathName.split ('/')[2] ?? ''
 
   const tagFlg = /^\/tags\/\d+/.test (pathName)
@@ -80,7 +80,7 @@ export const menuOutline = ({ tag, wikiId, user, pathName }: {
 }
 
 
-export default (({ user }: Props) => {
+const TopNav: FC<Props> = ({ user }) => {
   const location = useLocation ()
 
   const dirRef = useRef<(-1) | 1> (1)
@@ -159,12 +159,12 @@ export default (({ user }: Props) => {
   useEffect (() => {
     const unsubscribe = WikiIdBus.subscribe (setWikiId)
     return () => unsubscribe ()
-  }, [activeIdx])
+  }, [])
 
   useEffect (() => {
     setMenuOpen (false)
     setOpenItemIdx (activeIdx)
-  }, [location])
+  }, [activeIdx, location])
 
   return (
       <>
@@ -433,4 +433,6 @@ export default (({ user }: Props) => {
 	      </motion.div>)}
 	</AnimatePresence>
       </>)
-}) satisfies FC<Props>
+}
+
+export default TopNav

frontend/src/components/TopNavUser.test.tsx

@@ -0,0 +1,29 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import TopNavUser from '@/components/TopNavUser'
+import { buildUser } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+describe ('TopNavUser', () => {
+  it ('renders nothing without a user', () => {
+    const { container } = renderWithProviders (<TopNavUser user={null}/>)
+
+    expect (container).toBeEmptyDOMElement ()
+  })
+
+  it ('links named users to settings', () => {
+    renderWithProviders (<TopNavUser user={buildUser ({ name: '山田' })}/>)
+
+    expect (screen.getByRole ('link', { name: '山田' })).toHaveAttribute (
+        'href',
+        '/users/settings',
+    )
+  })
+
+  it ('uses the anonymous display name', () => {
+    renderWithProviders (<TopNavUser user={buildUser ({ name: null })}/>)
+
+    expect (screen.getByRole ('link', { name: '名もなきニジラー' })).toBeInTheDocument ()
+  })
+})

frontend/src/components/TopNavUser.tsx

@@ -10,7 +10,7 @@ type Props = { user:  User | null,
 	       sp?:   boolean }
 
 
-export default (({ user, sp }: Props) => {
+const TopNavUser: FC<Props> = ({ user, sp }) => {
   if (!(user))
     return
 
@@ -28,4 +28,6 @@ export default (({ user, sp }: Props) => {
 	  {user.name || '名もなきニジラー'}
 	</PrefetchLink>
       </>)
-}) satisfies FC<Props>
+}
+
+export default TopNavUser

frontend/src/components/TwitterEmbed.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import TwitterEmbed from '@/components/TwitterEmbed'
+
+describe ('TwitterEmbed', () => {
+  it ('renders tweet and user links', () => {
+    render (<TwitterEmbed userId="user_name" statusId="12345"/>)
+
+    expect (screen.getByRole ('link', { name: '@user_name' })).toHaveAttribute (
+        'href',
+        'https://twitter.com/user_name?ref_src=twsrc%3Etfw',
+    )
+    expect (screen.getByRole ('link', { name: /\d/ })).toHaveAttribute (
+        'href',
+        'https://twitter.com/user_name/status/12345?ref_src=twsrc%5Etfw',
+    )
+  })
+})

frontend/src/components/TwitterEmbed.tsx

@@ -5,7 +5,7 @@ type Props = {
     statusId: string }
 
 
-export default (({ userId, statusId }: Props) => {
+const TwitterEmbed: FC<Props> = ({ userId, statusId }) => {
   const now = (new Date).toLocaleDateString ()
 
   return (
@@ -18,4 +18,6 @@ export default (({ userId, statusId }: Props) => {
 	</blockquote>
 	<script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"/>
       </div>)
-}) satisfies FC<Props>
+}
+
+export default TwitterEmbed

frontend/src/components/WikiBody.tsx

@@ -25,7 +25,7 @@ const mdComponents = { a: (({ href, children }) => (
 				  </a>))) } as const satisfies Components
 
 
-export default (({ title, body }: Props) => {
+const WikiBody: FC<Props> = ({ title, body }) => {
   const { data } = useQuery ({
       enabled: Boolean (body),
       queryKey: wikiKeys.index ({ }),
@@ -39,4 +39,6 @@ export default (({ title, body }: Props) => {
       <ReactMarkdown components={mdComponents} remarkPlugins={remarkPlugins}>
 	{body || `このページは存在しません。[新規作成してください](/wiki/new?title=${ encodeURIComponent (title) })。`}
       </ReactMarkdown>)
-}) satisfies FC<Props>
+}
+
+export default WikiBody

frontend/src/components/common/DateTimeField.test.tsx

@@ -0,0 +1,27 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import DateTimeField from '@/components/common/DateTimeField'
+
+describe ('DateTimeField', () => {
+  it ('renders an ISO value as a datetime-local value', () => {
+    render (<DateTimeField aria-label="日時" value="2026-01-02T03:04:05.000Z"/>)
+
+    const input = screen.getByLabelText ('日時')
+
+    expect (input).toHaveValue ('2026-01-02T12:04')
+  })
+
+  it ('reports local changes as ISO strings and empty values as null', () => {
+    const handleChange = vi.fn ()
+    render (<DateTimeField aria-label="日時" onChange={handleChange}/>)
+
+    const input = screen.getByLabelText ('日時')
+    fireEvent.change (input, { target: { value: '2026-01-02T03:04' } })
+    fireEvent.change (input, { target: { value: '' } })
+
+    const first = handleChange.mock.calls[0]?.[0]
+    expect (new Date (first).getFullYear ()).toBe (2026)
+    expect (handleChange).toHaveBeenLastCalledWith (null)
+  })
+})

frontend/src/components/common/DateTimeField.tsx

@@ -25,7 +25,7 @@ type Props = Omit<ComponentPropsWithoutRef<'input'>, 'onChange'> & {
     onBlur?:    (ev: FocusEvent<HTMLInputElement>) => void }
 
 
-export default (({ value, onChange, className, onBlur, ...rest }: Props) => {
+const DateTimeField: FC<Props> = ({ value, onChange, className, onBlur, ...rest }) => {
   const [local, setLocal] = useState ('')
 
   useEffect (() => {
@@ -44,4 +44,6 @@ export default (({ value, onChange, className, onBlur, ...rest }: Props) => {
 	    onChange?.(v ? (new Date (v)).toISOString () : null)
 	  }}
 	  onBlur={onBlur}/>)
-}) satisfies FC<Props>
+}
+
+export default DateTimeField

frontend/src/components/common/Form.tsx

@@ -3,7 +3,9 @@ import type { FC, ReactNode } from 'react'
 type Props = { children: ReactNode }
 
 
-export default (({ children }: Props) => (
+const Form: FC<Props> = ({ children }) => (
     <div className="max-w-xl mx-auto p-4 space-y-4">
       {children}
-    </div>)) satisfies FC<Props>
+    </div>)
+
+export default Form

frontend/src/components/common/Label.test.tsx

@@ -0,0 +1,26 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import Label from '@/components/common/Label'
+
+describe ('Label', () => {
+  it ('renders a plain label', () => {
+    render (<Label>名前</Label>)
+
+    expect (screen.getByText ('名前')).toBeInTheDocument ()
+  })
+
+  it ('renders and toggles the optional checkbox', () => {
+    const handleChange = vi.fn ()
+
+    render (
+        <Label checkBox={{ label: '不明', checked: false, onChange: handleChange }}>
+          日時
+        </Label>,
+    )
+
+    fireEvent.click (screen.getByRole ('checkbox', { name: '不明' }))
+
+    expect (handleChange).toHaveBeenCalledTimes (1)
+  })
+})

frontend/src/components/common/Label.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 
+import type { FC } from 'react'
+
 type Props = { children:  React.ReactNode
                checkBox?: { label:    string
                             checked:  boolean
                             onChange: (event: React.ChangeEvent<HTMLInputElement>) => void } }
 
 
-export default ({ children, checkBox }: Props) => {
+const Label: FC<Props> = ({ children, checkBox }) => {
   if (!(checkBox))
     {
       return (
@@ -26,3 +28,5 @@ export default ({ children, checkBox }: Props) => {
         </label>
       </div>)
 }
+
+export default Label

frontend/src/components/common/PageTitle.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import PageTitle from '@/components/common/PageTitle'
+
+
+describe ('PageTitle', () => {
+  it ('renders children as a level 1 heading', () => {
+    render (<PageTitle>Test title</PageTitle>)
+
+    const heading = screen.getByRole ('heading', { level: 1 })
+
+    expect (heading.textContent).toBe ('Test title')
+  })
+})

frontend/src/components/common/PageTitle.tsx

@@ -1,9 +1,13 @@
 import React from 'react'
 
+import type { FC } from 'react'
+
 type Props = { children: React.ReactNode }
 
 
-export default ({ children }: Props) => (
+const PageTitle: FC<Props> = ({ children }) => (
     <h1 className="text-2xl font-bold mb-2">
       {children}
     </h1>)
+
+export default PageTitle

frontend/src/components/common/Pagination.test.tsx

@@ -0,0 +1,38 @@
+import { screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import Pagination from '@/components/common/Pagination'
+import { renderWithProviders } from '@/test/render'
+
+describe ('Pagination', () => {
+  it ('builds page links while preserving existing query parameters', () => {
+    renderWithProviders (
+        <Pagination page={3} totalPages={5} siblingCount={1}/>,
+        { route: '/posts?tags=abc&page=3' },
+    )
+
+    expect (screen.getByLabelText ('前のページ')).toHaveAttribute (
+        'href',
+        '/posts?tags=abc&page=2',
+    )
+    expect (screen.getByLabelText ('次のページ')).toHaveAttribute (
+        'href',
+        '/posts?tags=abc&page=4',
+    )
+    expect (screen.getByText ('3')).toHaveAttribute ('aria-current', 'page')
+  })
+
+  it ('does not render active previous and next controls at the edges', () => {
+    const { rerender } = renderWithProviders (
+        <Pagination page={1} totalPages={1}/>,
+        { route: '/tags' },
+    )
+
+    expect (screen.queryByLabelText ('前のページ')).not.toBeInTheDocument ()
+    expect (screen.queryByLabelText ('次のページ')).not.toBeInTheDocument ()
+
+    rerender (<Pagination page={1} totalPages={2}/>)
+
+    expect (screen.getByLabelText ('次のページ')).toHaveAttribute ('href', '/tags?page=2')
+  })
+})

frontend/src/components/common/Pagination.tsx

@@ -48,7 +48,7 @@ const getPages = (
 }
 
 
-export default (({ page, totalPages, siblingCount = 3 }) => {
+const Pagination: FC<Props> = ({ page, totalPages, siblingCount = 3 }) => {
   const location = useLocation ()
 
   const buildTo = (p: number) => {
@@ -124,4 +124,6 @@ export default (({ page, totalPages, siblingCount = 3 }) => {
 	      </>)}
 	</div>
       </nav>)
-}) satisfies FC<Props>
+}
+
+export default Pagination

frontend/src/components/common/SectionTitle.tsx

@@ -5,7 +5,9 @@ import type { ComponentPropsWithoutRef, FC } from 'react'
 type Props = ComponentPropsWithoutRef<'h2'>
 
 
-export default (({ children, className, ...rest }: Props) => (
+const SectionTitle: FC<Props> = ({ children, className, ...rest }) => (
     <h2 {...rest} className={cn ('text-xl my-4', className)}>
       {children}
-    </h2>)) satisfies FC<Props>
+    </h2>)
+
+export default SectionTitle

frontend/src/components/common/SubsectionTitle.tsx

@@ -1,9 +1,13 @@
 import React from 'react'
 
+import type { FC } from 'react'
+
 type Props = { children: React.ReactNode }
 
 
-export default ({ children }: Props) => (
+const SubsectionTitle: FC<Props> = ({ children }) => (
     <h3 className="my-2">
       {children}
     </h3>)
+
+export default SubsectionTitle

frontend/src/components/common/TabGroup.test.tsx

@@ -0,0 +1,23 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import TabGroup, { Tab } from '@/components/common/TabGroup'
+
+describe ('TabGroup', () => {
+  it ('uses the init tab and switches tabs when clicked', () => {
+    render (
+        <TabGroup>
+          <Tab name="A">Alpha</Tab>
+          <Tab name="B" init>Beta</Tab>
+        </TabGroup>,
+    )
+
+    expect (screen.queryByText ('Alpha')).not.toBeInTheDocument ()
+    expect (screen.getByText ('Beta')).toBeInTheDocument ()
+
+    fireEvent.click (screen.getByText ('A'))
+
+    expect (screen.getByText ('Alpha')).toBeInTheDocument ()
+    expect (screen.queryByText ('Beta')).not.toBeInTheDocument ()
+  })
+})

frontend/src/components/common/TabGroup.tsx

@@ -1,3 +1,5 @@
+import type { FC } from 'react'
+
 import React, { useState } from 'react'
 import { cn } from '@/lib/utils'
 
@@ -10,7 +12,7 @@ type Props = { children: React.ReactNode }
 export const Tab = ({ children }: TabProps) => <>{children}</>
 
 
-export default ({ children }: Props) => {
+const TabGroup: FC<Props> = ({ children }) => {
   const tabs = React.Children.toArray (children) as React.ReactElement<TabProps>[]
 
   const [current, setCurrent] = useState<number> (() => {
@@ -37,3 +39,5 @@ export default ({ children }: Props) => {
 	</div>
       </div>)
 }
+
+export default TabGroup

frontend/src/components/common/TagInput.test.tsx

@@ -0,0 +1,44 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import TagInput from '@/components/common/TagInput'
+import { buildTag } from '@/test/factories'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('TagInput', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('updates value and fetches autocomplete for the last token', async () => {
+    const setValue = vi.fn ()
+    api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 2 })])
+
+    render (<TagInput value="ぼっち 虹" setValue={setValue}/>)
+
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: 'ぼっち 虹夏' } })
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith (
+          '/tags/autocomplete',
+          { params: { q: '虹夏' } },
+      )
+    })
+    expect (setValue).toHaveBeenCalledWith ('ぼっち 虹夏')
+  })
+
+  it ('does not fetch when the last token is blank', () => {
+    const setValue = vi.fn ()
+    render (<TagInput value="" setValue={setValue}/>)
+
+    fireEvent.change (screen.getByRole ('textbox'), { target: { value: ' ' } })
+
+    expect (api.apiGet).not.toHaveBeenCalled ()
+    expect (setValue).toHaveBeenCalledWith (' ')
+  })
+})

frontend/src/components/common/TagInput.tsx

@@ -12,7 +12,7 @@ type Props = {
     value:      string
     setValue:   (value: string) => void }
 
-export default (({ value, setValue }: Props) => {
+const TagInput: FC<Props> = ({ value, setValue }) => {
   const [activeIndex, setActiveIndex] = useState (-1)
   const [suggestions, setSuggestions] = useState<Tag[]> ([])
   const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
@@ -62,9 +62,12 @@ export default (({ value, setValue }: Props) => {
     case 'Enter':
       if (activeIndex < 0)
 	break
-      ev.preventDefault ()
+      {
-      const selected = suggestions[activeIndex]
+	ev.preventDefault ()
-      selected && handleTagSelect (selected)
+	const selected = suggestions[activeIndex]
+	if (selected)
+	  handleTagSelect (selected)
+      }
       break
 
     case 'Escape':
@@ -94,4 +97,6 @@ export default (({ value, setValue }: Props) => {
 	    activeIndex={activeIndex}
 	    onSelect={handleTagSelect}/>
       </div>)
-}) satisfies FC<Props>
+}
+
+export default TagInput

frontend/src/components/common/TypographyAndForm.test.tsx

@@ -0,0 +1,37 @@
+import { createRef } from 'react'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import Form from '@/components/common/Form'
+import SectionTitle from '@/components/common/SectionTitle'
+import SubsectionTitle from '@/components/common/SubsectionTitle'
+import TextArea from '@/components/common/TextArea'
+
+describe ('common typography and form components', () => {
+  it ('renders Form children inside the standard container', () => {
+    render (<Form><span>Content</span></Form>)
+
+    expect (screen.getByText ('Content')).toBeInTheDocument ()
+  })
+
+  it ('renders SectionTitle as an h2', () => {
+    render (<SectionTitle>Section</SectionTitle>)
+
+    expect (screen.getByRole ('heading', { level: 2, name: 'Section' })).toBeInTheDocument ()
+  })
+
+  it ('renders SubsectionTitle as an h3', () => {
+    render (<SubsectionTitle>Subsection</SubsectionTitle>)
+
+    expect (screen.getByRole ('heading', { level: 3, name: 'Subsection' })).toBeInTheDocument ()
+  })
+
+  it ('forwards refs and props to TextArea', () => {
+    const ref = createRef<HTMLTextAreaElement> ()
+
+    render (<TextArea ref={ref} aria-label="Body" defaultValue="text"/>)
+
+    expect (ref.current).toBe (screen.getByLabelText ('Body'))
+    expect (screen.getByLabelText ('Body')).toHaveValue ('text')
+  })
+})

frontend/src/components/dialogues/DialogueProvider.tsx

@@ -57,7 +57,7 @@ let nextDialogueId = 1
 type Props = { children: ReactNode }
 
 
-export default (({ children }: Props) => {
+const DialogueProvider: FC<Props> = ({ children }) => {
   const [queue, setQueue] = useState<DialogueRequest[]> ([])
 
   const push = useCallback ((request: Omit<DialogueRequest, 'id'>) => {
@@ -174,7 +174,7 @@ export default (({ children }: Props) => {
 	      </DialogContent>)}
 	</Dialog>
       </DialogueContext.Provider>)
-}) satisfies FC<Props>
+}
 
 
 export const useDialogue = () => {
@@ -185,3 +185,5 @@ export const useDialogue = () => {
 
   return dialogue
 }
+
+export default DialogueProvider

frontend/src/components/layout/MainArea.tsx

@@ -9,10 +9,12 @@ type Props = {
     className?: string }
 
 
-export default (({ children, className }: Props) => (
+const MainArea: FC<Props> = ({ children, className }) => (
     <motion.main
 	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
 	className={cn ('flex-1 overflow-y-auto p-4', className)}
 	layout="position">
       {children}
-    </motion.main>)) satisfies FC<Props>
+    </motion.main>)
+
+export default MainArea

frontend/src/components/layout/SidebarComponent.tsx

@@ -6,7 +6,7 @@ import type { FC, ReactNode } from 'react'
 type Props = { children: ReactNode }
 
 
-export default (({ children }: Props) => (
+const SidebarComponent: FC<Props> = ({ children }) => (
     <motion.div
 	layout="position"
 	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
@@ -27,4 +27,6 @@ export default (({ children }: Props) => (
       </Helmet>
 
       {children}
-    </motion.div>)) satisfies FC<Props>
+    </motion.div>)
+
+export default SidebarComponent

frontend/src/components/ui/use-toast.tsx

@@ -18,13 +18,6 @@ type ToasterToast = ToastProps & {
   action?: ToastActionElement
 }
 
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
 let count = 0
 
 function genId() {
@@ -32,23 +25,21 @@ function genId() {
   return count.toString()
 }
 
-type ActionType = typeof actionTypes
-
 type Action =
   | {
-      type: ActionType["ADD_TOAST"]
+      type: "ADD_TOAST"
       toast: ToasterToast
     }
   | {
-      type: ActionType["UPDATE_TOAST"]
+      type: "UPDATE_TOAST"
       toast: Partial<ToasterToast>
     }
   | {
-      type: ActionType["DISMISS_TOAST"]
+      type: "DISMISS_TOAST"
       toastId?: ToasterToast["id"]
     }
   | {
-      type: ActionType["REMOVE_TOAST"]
+      type: "REMOVE_TOAST"
       toastId?: ToasterToast["id"]
     }
 

frontend/src/components/users/InheritDialogue.tsx

@@ -1,3 +1,5 @@
+import type { FC } from 'react'
+
 import { useState } from 'react'
 
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
@@ -18,7 +20,7 @@ type Props = { visible:         boolean
 	       setUser:         (user: User) => void }
 
 
-export default ({ visible, onVisibleChange, setUser }: Props) => {
+const InheritDialogue: FC<Props> = ({ visible, onVisibleChange, setUser }) => {
   const dialogue = useDialogue ()
 
   const [inputCode, setInputCode] = useState ('')
@@ -68,3 +70,5 @@ export default ({ visible, onVisibleChange, setUser }: Props) => {
 	</DialogContent>
       </Dialog>)
 }
+
+export default InheritDialogue

frontend/src/components/users/UserCodeDialogue.tsx

@@ -1,3 +1,5 @@
+import type { FC } from 'react'
+
 import { useDialogue } from '@/components/dialogues/DialogueProvider'
 import { Button } from '@/components/ui/button'
 import { Dialog,
@@ -17,7 +19,7 @@ type Props = { visible:         boolean
 	       setUser:         React.Dispatch<React.SetStateAction<User | null>> }
 
 
-export default ({ visible, onVisibleChange, user, setUser }: Props) => {
+const UserCodeDialogue: FC<Props> = ({ visible, onVisibleChange, user, setUser }) => {
   const dialogue = useDialogue ()
 
   const handleChange = async () => {
@@ -69,3 +71,5 @@ export default ({ visible, onVisibleChange, user, setUser }: Props) => {
 	</DialogContent>
       </Dialog>)
 }
+
+export default UserCodeDialogue

frontend/src/lib/api.test.ts

@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted (() => {
+  const client = {
+    delete: vi.fn (),
+    get:    vi.fn (),
+    patch:  vi.fn (),
+    post:   vi.fn (),
+    put:    vi.fn (),
+  }
+
+  return {
+    client,
+    isAxiosError: vi.fn (),
+  }
+})
+
+vi.mock ('axios', () => ({
+  default: {
+    create:       vi.fn (() => mocks.client),
+    isAxiosError: mocks.isAxiosError,
+  },
+}))
+
+vi.mock ('@/config', () => ({
+  API_BASE_URL: '/api',
+}))
+
+describe ('api helpers', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    localStorage.clear ()
+  })
+
+  it ('adds the transfer code header and camelizes get responses', async () => {
+    localStorage.setItem ('user_code', 'abc123')
+    mocks.client.get.mockResolvedValueOnce ({
+      data: { post_id: 1, nested_value: { created_at: 'now' } },
+    })
+
+    const { apiGet } = await import ('@/lib/api')
+    const data = await apiGet<{ postId: number; nestedValue: { createdAt: string } }> (
+        '/posts/1',
+        { headers: { 'X-Extra': '1' }, params: { page: 2 } },
+    )
+
+    expect (mocks.client.get).toHaveBeenCalledWith (
+        '/posts/1',
+        {
+          headers: { 'X-Transfer-Code': 'abc123', 'X-Extra': '1' },
+          params:  { page: 2 },
+        },
+    )
+    expect (data).toEqual ({ postId: 1, nestedValue: { createdAt: 'now' } })
+  })
+
+  it ('passes an empty body for post-like requests when body is omitted', async () => {
+    mocks.client.patch.mockResolvedValueOnce ({ data: { ok_value: true } })
+
+    const { apiPatch } = await import ('@/lib/api')
+    const data = await apiPatch<{ okValue: boolean }> ('/posts/1')
+
+    expect (mocks.client.patch).toHaveBeenCalledWith (
+        '/posts/1',
+        {},
+        { headers: { 'X-Transfer-Code': '' } },
+    )
+    expect (data.okValue).toBe (true)
+  })
+
+  it ('does not camelize blob responses', async () => {
+    const blob = new Blob (['csv'])
+    mocks.client.get.mockResolvedValueOnce ({ data: blob })
+
+    const { apiGet } = await import ('@/lib/api')
+    const data = await apiGet<Blob> ('/exports', { responseType: 'blob' })
+
+    expect (data).toBe (blob)
+  })
+
+  it ('delegates deletes and exposes axios error detection', async () => {
+    const err = new Error ('bad')
+    mocks.client.delete.mockResolvedValueOnce ({})
+    mocks.isAxiosError.mockReturnValueOnce (true)
+
+    const { apiDelete, isApiError } = await import ('@/lib/api')
+    await apiDelete ('/posts/1')
+
+    expect (mocks.client.delete).toHaveBeenCalledWith (
+        '/posts/1',
+        { headers: { 'X-Transfer-Code': '' } },
+    )
+    expect (isApiError (err)).toBe (true)
+    expect (mocks.isAxiosError).toHaveBeenCalledWith (err)
+  })
+})

frontend/src/lib/api.ts

@@ -28,7 +28,7 @@ const apiP = async <T> (
   const res = await client[method] (path, body ?? { }, withUserCode (opt))
   if (opt?.responseType === 'blob')
     return res.data as T
-  return toCamel (res.data as any, { deep: true }) as T
+  return toCamel (res.data as Record<string, unknown>, { deep: true }) as T
 }
 
 
@@ -39,7 +39,7 @@ export const apiGet = async <T> (
   const res = await client.get (path, withUserCode (opt))
   if (opt?.responseType === 'blob')
     return res.data as T
-  return toCamel (res.data as any, { deep: true }) as T
+  return toCamel (res.data as Record<string, unknown>, { deep: true }) as T
 }
 
 
@@ -72,4 +72,5 @@ export const apiDelete = async (
 }
 
 
-export const isApiError = (err: unknown): err is AxiosError => axios.isAxiosError (err)
+export const isApiError = <T = unknown> (err: unknown): err is AxiosError<T> =>
+    axios.isAxiosError (err)

frontend/src/lib/posts.test.ts

@@ -0,0 +1,117 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fetchPostChanges, fetchPosts, toggleViewedFlg, updatePost } from '@/lib/posts'
+
+import type { FetchPostsParams } from '@/types'
+
+const api = vi.hoisted (() => ({
+  apiDelete: vi.fn (),
+  apiGet:    vi.fn (),
+  apiPost:   vi.fn (),
+  apiPut:    vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+const baseParams: FetchPostsParams = {
+  url:                 '',
+  title:               '',
+  tags:                '',
+  match:               'all',
+  originalCreatedFrom: '',
+  originalCreatedTo:   '',
+  createdFrom:         '',
+  createdTo:           '',
+  updatedFrom:         '',
+  updatedTo:           '',
+  page:                1,
+  limit:               20,
+  order:               'updated_at:desc',
+}
+
+describe ('posts API functions', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('maps post search parameters to backend snake_case names', async () => {
+    api.apiGet.mockResolvedValueOnce ({ posts: [], count: 0 })
+
+    await fetchPosts ({
+      ...baseParams,
+      title:               'title',
+      tags:                'a b',
+      originalCreatedFrom: '2026-01-01',
+      updatedTo:           '2026-02-01',
+    })
+
+    expect (api.apiGet).toHaveBeenCalledWith (
+        '/posts',
+        {
+          params: {
+            title:                 'title',
+            tags:                  'a b',
+            match:                 'all',
+            original_created_from: '2026-01-01',
+            updated_to:            '2026-02-01',
+            page:                  1,
+            limit:                 20,
+            order:                 'updated_at:desc',
+          },
+        },
+    )
+  })
+
+  it ('updates posts with version and merge controls', async () => {
+    api.apiPut.mockResolvedValueOnce ({ id: 5 })
+
+    await updatePost (
+        {
+          id:                    5,
+          title:                 'new title',
+          tags:                  'tag',
+          parentPostIds:         '1 2',
+          originalCreatedFrom:   null,
+          originalCreatedBefore: '2026-01-02T00:00:00Z',
+        },
+        { baseVersionNo: 7, force: true, merge: false },
+    )
+
+    expect (api.apiPut).toHaveBeenCalledWith (
+        '/posts/5',
+        {
+          title:                   'new title',
+          tags:                    'tag',
+          parent_post_ids:         '1 2',
+          original_created_from:   null,
+          original_created_before: '2026-01-02T00:00:00Z',
+        },
+        {
+          params: {
+            base_version_no: '7',
+            force:           '1',
+            merge:           '0',
+          },
+        },
+    )
+  })
+
+  it ('uses the viewed endpoint method matching the requested state', async () => {
+    await toggleViewedFlg ('9', true)
+    await toggleViewedFlg ('9', false)
+
+    expect (api.apiPost).toHaveBeenCalledWith ('/posts/9/viewed')
+    expect (api.apiDelete).toHaveBeenCalledWith ('/posts/9/viewed')
+  })
+
+  it ('keeps optional post history filters out when blank', async () => {
+    api.apiGet.mockResolvedValueOnce ({ versions: [], count: 0 })
+
+    await fetchPostChanges ({ page: 2, limit: 50 })
+
+    expect (api.apiGet).toHaveBeenCalledWith (
+        '/posts/versions',
+        { params: { page: 2, limit: 50 } },
+    )
+  })
+})

frontend/src/lib/prefetchers.test.ts

@@ -0,0 +1,112 @@
+import { QueryClient } from '@tanstack/react-query'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { prefetchForURL } from '@/lib/prefetchers'
+
+const postsApi = vi.hoisted (() => ({
+  fetchPost:        vi.fn (),
+  fetchPostChanges: vi.fn (),
+  fetchPosts:       vi.fn (),
+}))
+
+const tagsApi = vi.hoisted (() => ({
+  fetchTag:        vi.fn (),
+  fetchTagByName:  vi.fn (),
+  fetchTagChanges: vi.fn (),
+  fetchTags:       vi.fn (),
+}))
+
+const wikiApi = vi.hoisted (() => ({
+  fetchWikiPage:        vi.fn (),
+  fetchWikiPageByTitle: vi.fn (),
+  fetchWikiPages:       vi.fn (),
+}))
+
+vi.mock ('@/lib/posts', () => postsApi)
+vi.mock ('@/lib/tags', () => tagsApi)
+vi.mock ('@/lib/wiki', () => wikiApi)
+
+const qc = () => new QueryClient ({
+  defaultOptions: { queries: { retry: false } },
+})
+
+describe ('prefetchForURL', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    postsApi.fetchPosts.mockResolvedValue ({ posts: [], count: 0 })
+    postsApi.fetchPost.mockResolvedValue ({ id: 1 })
+    postsApi.fetchPostChanges.mockResolvedValue ({ versions: [], count: 0 })
+    tagsApi.fetchTags.mockResolvedValue ({ tags: [], count: 0 })
+    tagsApi.fetchTag.mockResolvedValue ({ id: 1 })
+    tagsApi.fetchTagByName.mockResolvedValue (null)
+    tagsApi.fetchTagChanges.mockResolvedValue ({ versions: [], count: 0 })
+    wikiApi.fetchWikiPages.mockResolvedValue ([])
+    wikiApi.fetchWikiPage.mockResolvedValue ({ id: 1 })
+    wikiApi.fetchWikiPageByTitle.mockResolvedValue (null)
+  })
+
+  it ('prefetches post indexes from query parameters', async () => {
+    await prefetchForURL (
+        qc (),
+        'http://localhost/posts?tags=a+b&match=any&page=2&limit=5&order=title%3Aasc',
+    )
+
+    expect (postsApi.fetchPosts).toHaveBeenCalledWith (
+        expect.objectContaining ({
+          tags:  'a b',
+          match: 'any',
+          page:  2,
+          limit: 5,
+          order: 'title:asc',
+        }),
+    )
+  })
+
+  it ('prefetches post detail pages', async () => {
+    await prefetchForURL (qc (), 'http://localhost/posts/12')
+
+    expect (postsApi.fetchPost).toHaveBeenCalledWith ('12')
+  })
+
+  it ('prefetches tag indexes from query parameters', async () => {
+    await prefetchForURL (
+        qc (),
+        'http://localhost/tags?post=9&name=x&category=general&page=4&post_count_lte=10',
+    )
+
+    expect (tagsApi.fetchTags).toHaveBeenCalledWith (
+        expect.objectContaining ({
+          post:         9,
+          name:         'x',
+          category:     'general',
+          page:         4,
+          postCountLTE: 10,
+        }),
+    )
+  })
+
+  it ('prefetches wiki show pages and related tag/post data', async () => {
+    wikiApi.fetchWikiPageByTitle.mockResolvedValueOnce ({
+      id:    3,
+      title: 'Actual',
+      body:  'body',
+    })
+
+    await prefetchForURL (qc (), 'http://localhost/wiki/Alias')
+
+    expect (wikiApi.fetchWikiPageByTitle).toHaveBeenCalledWith ('Alias', { version: undefined })
+    expect (wikiApi.fetchWikiPage).toHaveBeenCalledWith ('3', {})
+    expect (tagsApi.fetchTagByName).toHaveBeenCalledWith ('Actual')
+    expect (postsApi.fetchPosts).toHaveBeenCalledWith (
+        expect.objectContaining ({ tags: 'Actual', limit: 8 }),
+    )
+  })
+
+  it ('ignores routes without a prefetcher', async () => {
+    await prefetchForURL (qc (), 'http://localhost/unknown')
+
+    expect (postsApi.fetchPosts).not.toHaveBeenCalled ()
+    expect (tagsApi.fetchTags).not.toHaveBeenCalled ()
+    expect (wikiApi.fetchWikiPages).not.toHaveBeenCalled ()
+  })
+})

frontend/src/lib/queryKeys.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+
+import { postsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
+
+describe ('query keys', () => {
+  it ('uses stable namespaces for posts, tags, and wiki', () => {
+    expect (postsKeys.show ('3')).toEqual (['posts', '3'])
+    expect (postsKeys.related ('3')).toEqual (['related', '3'])
+    expect (tagsKeys.deerjikists ('7')).toEqual (['tags', 'deerjikists', '7'])
+    expect (wikiKeys.show ('Title', { version: '2' })).toEqual (
+        ['wiki', 'Title', { version: '2' }],
+    )
+  })
+})

frontend/src/lib/remark-wiki-autolink.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+
+import remarkWikiAutolink from '@/lib/remark-wiki-autolink'
+
+import type { Root } from 'mdast'
+
+describe ('remarkWikiAutolink', () => {
+  it ('links matching wiki page names and prefers longer matches', () => {
+    const tree: Root = {
+      type:     'root',
+      children: [{
+        type:     'paragraph',
+        children: [{ type: 'text', value: '虹夏 and 虹' }],
+      }],
+    }
+
+    remarkWikiAutolink (['虹', '虹夏']) (tree)
+
+    expect (tree.children[0]).toMatchObject ({
+      type:     'paragraph',
+      children: [
+        {
+          type:     'link',
+          url:      '/wiki/%E8%99%B9%E5%A4%8F',
+          children: [{ type: 'text', value: '虹夏' }],
+        },
+        { type: 'text', value: ' and ' },
+        {
+          type:     'link',
+          url:      '/wiki/%E8%99%B9',
+          children: [{ type: 'text', value: '虹' }],
+        },
+      ],
+    })
+  })
+
+  it ('does not link text inside existing links or code', () => {
+    const tree: Root = {
+      type:     'root',
+      children: [
+        {
+          type:     'paragraph',
+          children: [{
+            type:     'link',
+            url:      '/existing',
+            children: [{ type: 'text', value: '虹' }],
+          }],
+        },
+        {
+          type:  'code',
+          value: '虹',
+        },
+      ],
+    }
+
+    remarkWikiAutolink (['虹']) (tree)
+
+    expect (tree.children[0]).toMatchObject ({
+      type:     'paragraph',
+      children: [{
+        type:     'link',
+        url:      '/existing',
+        children: [{ type: 'text', value: '虹' }],
+      }],
+    })
+    expect (tree.children[1]).toMatchObject ({ type: 'code', value: '虹' })
+  })
+})

frontend/src/lib/remark-wiki-autolink.ts

@@ -38,7 +38,7 @@ export default (pageNames: string[], basePath = '/wiki'): ((tree: Root) => void)
 	      let last = 0
 	      const parts: RootContent[] = []
 
-	      while (m = re.exec (value))
+	      while ((m = re.exec (value)) !== null)
 		{
 		  const start = m.index
 		  const end = start + m[0].length
@@ -70,7 +70,7 @@ export default (pageNames: string[], basePath = '/wiki'): ((tree: Root) => void)
 	    }
 	}
 
-      const maybeChidren = (node as any).children
+      const maybeChidren = 'children' in node ? node.children : undefined
       if (Array.isArray (maybeChidren))
 	{
 	  const parent = node as Parent

frontend/src/lib/tags.test.ts

@@ -0,0 +1,67 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fetchTag, fetchTagByName, fetchTags } from '@/lib/tags'
+
+import type { FetchTagsParams } from '@/types'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+const baseParams: FetchTagsParams = {
+  post:         null,
+  name:         '',
+  category:     null,
+  postCountGTE: 0,
+  postCountLTE: null,
+  createdFrom:  '',
+  createdTo:    '',
+  updatedFrom:  '',
+  updatedTo:    '',
+  page:         1,
+  limit:        30,
+  order:        'updated_at:desc',
+}
+
+describe ('tags API functions', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('maps tag filters to backend parameters', async () => {
+    api.apiGet.mockResolvedValueOnce ({ tags: [], count: 0 })
+
+    await fetchTags ({
+      ...baseParams,
+      name:         '虹',
+      category:     'character',
+      postCountGTE: 10,
+      postCountLTE: 20,
+    })
+
+    expect (api.apiGet).toHaveBeenCalledWith (
+        '/tags',
+        {
+          params: {
+            name:           '虹',
+            category:       'character',
+            post_count_gte: 10,
+            post_count_lte: 20,
+            page:           1,
+            limit:          30,
+            order:          'updated_at:desc',
+          },
+        },
+    )
+  })
+
+  it ('returns null when tag fetches fail', async () => {
+    api.apiGet.mockRejectedValueOnce (new Error ('missing'))
+    api.apiGet.mockRejectedValueOnce (new Error ('missing'))
+
+    await expect (fetchTag ('1')).resolves.toBeNull ()
+    await expect (fetchTagByName ('unknown')).resolves.toBeNull ()
+  })
+})

frontend/src/lib/utils.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+
+import { cn, originalCreatedAtString, toDate } from '@/lib/utils'
+
+describe ('utils', () => {
+  it ('converts strings to dates and leaves date instances intact', () => {
+    const date = new Date ('2026-01-02T03:04:05Z')
+
+    expect (toDate ('2026-01-02T03:04:05Z')).toBeInstanceOf (Date)
+    expect (toDate (date)).toBe (date)
+  })
+
+  it ('merges conditional Tailwind classes', () => {
+    const hidden = false
+
+    expect (cn ('p-2', hidden && 'hidden', 'p-4')).toBe ('p-4')
+  })
+
+  it ('renders unknown original creation time ranges', () => {
+    expect (originalCreatedAtString (null, null)).toBe ('年月日不詳')
+    expect (
+        originalCreatedAtString (
+            '2026-01-01T00:00:00+09:00',
+            '2026-01-02T00:00:00+09:00',
+        ),
+    ).toContain ('時刻不詳')
+  })
+})

frontend/src/lib/wiki.test.ts

@@ -0,0 +1,48 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { fetchWikiPage, fetchWikiPageByTitle, fetchWikiPages } from '@/lib/wiki'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('wiki API functions', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+  })
+
+  it ('fetches wiki index and show pages with expected parameters', async () => {
+    api.apiGet.mockResolvedValueOnce ([])
+    api.apiGet.mockResolvedValueOnce ({ id: 1 })
+
+    await fetchWikiPages ({ title: '虹' })
+    await fetchWikiPage ('1', { version: '3' })
+
+    expect (api.apiGet).toHaveBeenNthCalledWith (
+        1,
+        '/wiki',
+        { params: { title: '虹' } },
+    )
+    expect (api.apiGet).toHaveBeenNthCalledWith (
+        2,
+        '/wiki/1',
+        { params: { version: '3' } },
+    )
+  })
+
+  it ('encodes title path segments and returns null on misses', async () => {
+    api.apiGet.mockResolvedValueOnce ({ id: 2 })
+    api.apiGet.mockRejectedValueOnce (new Error ('missing'))
+
+    await fetchWikiPageByTitle ('a/b c', { version: undefined })
+    await expect (fetchWikiPageByTitle ('missing', {})).resolves.toBeNull ()
+
+    expect (api.apiGet).toHaveBeenNthCalledWith (
+        1,
+        '/wiki/title/a%2Fb%20c',
+        { params: { version: undefined } },
+    )
+  })
+})

frontend/src/pages/Forbidden.tsx

@@ -1,4 +1,8 @@
+import type { FC } from 'react'
+
 import ErrorScreen from '@/components/ErrorScreen'
 
 
-export default () => <ErrorScreen status={403}/>
+const Forbidden: FC = () => <ErrorScreen status={403}/>
+
+export default Forbidden

frontend/src/pages/MorePage.tsx

@@ -11,7 +11,7 @@ import type { FC } from 'react'
 import type { User } from '@/types'
 
 
-export default (() => {
+const MorePage: FC = () => {
   const menu = menuOutline (
       { tag: null, wikiId: null, user: { } as User, pathName: location.pathname })
 
@@ -43,4 +43,6 @@ export default (() => {
 		  </section>))}
 	    </div>))}
       </MainArea>)
-}) satisfies FC
+}
+
+export default MorePage

frontend/src/pages/NotFound.tsx

@@ -1,4 +1,8 @@
+import type { FC } from 'react'
+
 import ErrorScreen from '@/components/ErrorScreen'
 
 
-export default () => <ErrorScreen status={404}/>
+const NotFound: FC = () => <ErrorScreen status={404}/>
+
+export default NotFound

frontend/src/pages/ServiceUnavailable.tsx

@@ -1,4 +1,8 @@
+import type { FC } from 'react'
+
 import ErrorScreen from '@/components/ErrorScreen'
 
 
-export default () => <ErrorScreen status={503}/>
+const ServiceUnavailable: FC = () => <ErrorScreen status={503}/>
+
+export default ServiceUnavailable

frontend/src/pages/deerjikists/DeerjikistDetailPage.tsx

@@ -1,5 +1,5 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import TagLink from '@/components/TagLink'
@@ -18,7 +18,7 @@ import type { FC, FormEvent } from 'react'
 import type { Deerjikist, Platform } from '@/types'
 
 
-export default (() => {
+const DeerjikistDetailPage: FC = () => {
   const { id } = useParams ()
   const tagId = String (id ?? '')
   const tagKey = tagsKeys.deerjikists (tagId)
@@ -26,7 +26,7 @@ export default (() => {
   const { data: qData, isLoading: loading } =
       useQuery ({ queryKey: tagKey, queryFn: () => fetchDeerjikistsByTag (tagId) })
   const tag = qData?.tag
-  const deerjikists = qData?.deerjikists ?? []
+  const deerjikists = useMemo (() => qData?.deerjikists ?? [], [qData])
 
   const [data, setData] =
       useState<(Omit<Deerjikist, 'platform'> & { platform: Platform | null })[]> ([])
@@ -152,4 +152,6 @@ export default (() => {
 	    </div>
 	)}
       </MainArea>)
-}) satisfies FC
+}
+
+export default DeerjikistDetailPage

frontend/src/pages/materials/MaterialBasePage.test.tsx

@@ -0,0 +1,26 @@
+import { screen } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { describe, expect, it, vi } from 'vitest'
+
+import MaterialBasePage from '@/pages/materials/MaterialBasePage'
+import { renderWithProviders } from '@/test/render'
+
+vi.mock ('@/components/MaterialSidebar', () => ({
+  default: () => <aside>Material sidebar</aside>,
+}))
+
+describe ('MaterialBasePage', () => {
+  it ('renders the material sidebar and nested route outlet', () => {
+    renderWithProviders (
+        <Routes>
+          <Route path="/materials" element={<MaterialBasePage/>}>
+            <Route index element={<div>Outlet content</div>}/>
+          </Route>
+        </Routes>,
+        { route: '/materials' },
+    )
+
+    expect (screen.getByText ('Material sidebar')).toBeInTheDocument ()
+    expect (screen.getByText ('Outlet content')).toBeInTheDocument ()
+  })
+})

frontend/src/pages/materials/MaterialBasePage.tsx

@@ -5,8 +5,10 @@ import MaterialSidebar from '@/components/MaterialSidebar'
 import type { FC } from 'react'
 
 
-export default (() => (
+const MaterialBasePage: FC = () => (
     <div className="md:flex md:flex-1 overflow-y-auto md:overflow-y-hidden">
       <MaterialSidebar/>
       <Outlet/>
-    </div>)) satisfies FC
+    </div>)
+
+export default MaterialBasePage

frontend/src/pages/materials/MaterialDetailPage.test.tsx

@@ -0,0 +1,86 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import MaterialDetailPage from '@/pages/materials/MaterialDetailPage'
+import { buildMaterial, buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+  apiPut: vi.fn (),
+}))
+
+const wikiApi = vi.hoisted (() => ({
+  fetchWikiPages: vi.fn (),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/lib/wiki', () => wikiApi)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+
+const renderPage = () =>
+  renderWithProviders (
+      <Routes>
+        <Route path="/materials/:id" element={<MaterialDetailPage/>}/>
+      </Routes>,
+      { route: '/materials/8' },
+  )
+
+describe ('MaterialDetailPage', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    api.apiGet.mockResolvedValue ([])
+    wikiApi.fetchWikiPages.mockResolvedValue ([])
+    vi.stubGlobal ('fetch', vi.fn (async () => ({
+      blob: async () => new Blob (['image'], { type: 'image/png' }),
+    })))
+  })
+
+  it ('loads and displays material detail', async () => {
+    api.apiGet.mockResolvedValueOnce (
+        buildMaterial ({
+          id:          8,
+          tag:         buildTag ({ name: '素材タグ' }),
+          file:        'image.png',
+          contentType: 'image/png',
+        }),
+    )
+
+    renderPage ()
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith ('/materials/8')
+    })
+    expect (await screen.findByAltText ('素材タグ')).toHaveAttribute ('src', 'image.png')
+  })
+
+  it ('submits edited material fields', async () => {
+    api.apiGet.mockResolvedValueOnce (
+        buildMaterial ({ id: 8, tag: buildTag ({ name: 'old' }), url: '' }),
+    )
+    api.apiPut.mockResolvedValueOnce (
+        buildMaterial ({ id: 8, tag: buildTag ({ name: 'new' }) }),
+    )
+
+    renderPage ()
+
+    fireEvent.click (await screen.findByText ('編輯'))
+    const textboxes = screen.getAllByRole ('textbox')
+    fireEvent.change (textboxes[0], { target: { value: 'new' } })
+    fireEvent.change (textboxes[1], { target: { value: 'https://example.com/ref' } })
+    fireEvent.click (screen.getByRole ('button', { name: '更新' }))
+
+    await waitFor (() => {
+      expect (api.apiPut).toHaveBeenCalledWith ('/materials/8', expect.any (FormData))
+    })
+    const formData = api.apiPut.mock.calls[0]?.[1] as FormData
+    expect (formData.get ('tag')).toBe ('new')
+    expect (formData.get ('url')).toBe ('https://example.com/ref')
+    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '更新成功!' })
+  })
+})

frontend/src/pages/materials/MaterialDetailPage.tsx

@@ -21,7 +21,7 @@ import type { Material, Tag } from '@/types'
 type MaterialWithTag = Material & { tag: Tag }
 
 
-export default (() => {
+const MaterialDetailPage: FC = () => {
   const { id } = useParams ()
 
   const [file, setFile] = useState<File | null> (null)
@@ -179,4 +179,6 @@ export default (() => {
 	      </TabGroup>
 	    </>))}
       </MainArea>)
-}) satisfies FC
+}
+
+export default MaterialDetailPage

frontend/src/pages/materials/MaterialListPage.test.tsx

@@ -0,0 +1,62 @@
+import { screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import MaterialListPage from '@/pages/materials/MaterialListPage'
+import { buildMaterial, buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+
+describe ('MaterialListPage', () => {
+  it ('shows the empty selection guide without a tag query', () => {
+    renderWithProviders (<MaterialListPage/>, { route: '/materials' })
+
+    expect (screen.getByText ('左のリストから照会したいタグを選択してください。')).toBeInTheDocument ()
+    expect (screen.getByRole ('link', { name: '素材を新規追加する' })).toHaveAttribute (
+        'href',
+        '/materials/new',
+    )
+  })
+
+  it ('loads materials for a tag query', async () => {
+    const tag = {
+      ...buildTag ({
+        id:       4,
+        name:     '素材タグ',
+        category: 'material',
+      }),
+      material: buildMaterial ({ id: 8, contentType: 'image/png', file: 'image.png' }),
+      children: [],
+    }
+    api.apiGet.mockResolvedValueOnce (tag)
+
+    renderWithProviders (<MaterialListPage/>, { route: '/materials?tag=%E7%B4%A0%E6%9D%90' })
+
+    await waitFor (() => {
+      expect (api.apiGet).toHaveBeenCalledWith (
+          '/tags/name/%E7%B4%A0%E6%9D%90/materials',
+      )
+    })
+    expect (await screen.findByRole ('link', { name: '素材タグ' })).toBeInTheDocument ()
+    expect (screen.getByRole ('link', { name: '' })).toHaveAttribute ('href', '/materials/8')
+  })
+
+  it ('offers adding a missing non-meme material', async () => {
+    api.apiGet.mockResolvedValueOnce ({
+      ...buildTag ({ name: '未登録', category: 'material' }),
+      material: null,
+      children: [],
+    })
+
+    renderWithProviders (<MaterialListPage/>, { route: '/materials?tag=x' })
+
+    expect (await screen.findByRole ('link', { name: '追加' })).toHaveAttribute (
+        'href',
+        '/materials/new?tag=%E6%9C%AA%E7%99%BB%E9%8C%B2',
+    )
+  })
+})

frontend/src/pages/materials/MaterialListPage.tsx

@@ -41,7 +41,7 @@ const MaterialCard = ({ tag }: { tag: TagWithMaterial }) => {
 }
 
 
-export default (() => {
+const MaterialListPage: FC = () => {
   const [loading, setLoading] = useState (false)
   const [tag, setTag] = useState<TagWithMaterial | null> (null)
 
@@ -69,7 +69,7 @@ export default (() => {
 	setLoading (false)
       }
     }) ()
-  }, [location.search])
+  }, [location.search, tagQuery])
 
   return (
       <MainArea>
@@ -163,4 +163,6 @@ export default (() => {
 		  </ul>
 		</>))}
       </MainArea>)
-}) satisfies FC
+}
+
+export default MaterialListPage

frontend/src/pages/materials/MaterialNewPage.test.tsx

@@ -0,0 +1,38 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import MaterialNewPage from '@/pages/materials/MaterialNewPage'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiPost: vi.fn (),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+
+describe ('MaterialNewPage', () => {
+  it ('initializes tag from query and submits form data', async () => {
+    api.apiPost.mockResolvedValueOnce ({})
+
+    renderWithProviders (<MaterialNewPage/>, { route: '/materials/new?tag=%E8%99%B9%E5%A4%8F' })
+
+    expect (screen.getAllByRole ('textbox')[0]).toHaveValue ('虹夏')
+    fireEvent.change (screen.getAllByRole ('textbox')[1], {
+      target: { value: 'https://example.com/ref' },
+    })
+    fireEvent.click (screen.getByRole ('button', { name: '追加' }))
+
+    await waitFor (() => {
+      expect (api.apiPost).toHaveBeenCalledWith ('/materials', expect.any (FormData))
+    })
+    const formData = api.apiPost.mock.calls[0]?.[1] as FormData
+    expect (formData.get ('tag')).toBe ('虹夏')
+    expect (formData.get ('url')).toBe ('https://example.com/ref')
+    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '送信成功!' })
+  })
+})

frontend/src/pages/materials/MaterialNewPage.tsx

@@ -15,7 +15,7 @@ import { apiPost } from '@/lib/api'
 import type { FC } from 'react'
 
 
-export default (() => {
+const MaterialNewPage: FC = () => {
   const location = useLocation ()
   const query = new URLSearchParams (location.search)
   const tagQuery = query.get ('tag') ?? ''
@@ -121,4 +121,6 @@ export default (() => {
 	  </Button>
 	</Form>
       </MainArea>)
-}) satisfies FC
+}
+
+export default MaterialNewPage

frontend/src/pages/materials/MaterialSearchPage.tsx

@@ -10,7 +10,7 @@ import { SITE_TITLE } from '@/config'
 import type { FC, FormEvent } from 'react'
 
 
-export default (() => {
+const MaterialSearchPage: FC = () => {
   const [tagName, setTagName] = useState ('')
   const [parentTagName, setParentTagName] = useState ('')
 
@@ -46,4 +46,6 @@ export default (() => {
 	  </form>
 	</div>
       </MainArea>)
-}) satisfies FC
+}
+
+export default MaterialSearchPage

frontend/src/pages/posts/PostDetailPage.test.tsx

@@ -0,0 +1,109 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { Route, Routes } from 'react-router-dom'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostDetailPage from '@/pages/posts/PostDetailPage'
+import { buildPost, buildUser } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+import type { ReactNode } from 'react'
+
+const postsApi = vi.hoisted (() => ({
+  fetchPost:       vi.fn (),
+  toggleViewedFlg: vi.fn (),
+}))
+
+const api = vi.hoisted (() => ({
+  isApiError: vi.fn (() => false),
+}))
+
+vi.mock ('@/lib/posts', () => postsApi)
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/PostEmbed', () => ({
+  default: ({ post }: { post: { url: string } }) => <div>Embed:{post.url}</div>,
+}))
+vi.mock ('@/components/TagDetailSidebar', () => ({
+  default: () => <aside>Tag sidebar</aside>,
+}))
+vi.mock ('@/components/PostEditForm', () => ({
+  default: () => <div>Post edit form</div>,
+}))
+vi.mock ('framer-motion', () => ({
+  motion: {
+    div: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+    main: ({ children }: { children?: ReactNode }) => <main>{children}</main>,
+  },
+}))
+
+const renderPage = (user = buildUser ({ role: 'member' })) =>
+  renderWithProviders (
+      <Routes>
+        <Route path="/posts/:id" element={<PostDetailPage user={user}/>}/>
+      </Routes>,
+      { route: '/posts/9' },
+  )
+
+describe ('PostDetailPage', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    postsApi.toggleViewedFlg.mockResolvedValue (undefined)
+  })
+
+  it ('loads and displays a post detail', async () => {
+    postsApi.fetchPost.mockResolvedValue (
+        buildPost ({
+          id:            9,
+          url:           'https://example.com/9',
+          related:       [],
+          thumbnail:     null,
+          thumbnailBase: null,
+        }),
+    )
+
+    renderPage ()
+
+    await waitFor (() => {
+      expect (postsApi.fetchPost).toHaveBeenCalledWith ('9')
+    })
+    expect (await screen.findByText ('Embed:https://example.com/9')).toBeInTheDocument ()
+    expect (screen.getByRole ('button', { name: '未閲覧' })).toBeInTheDocument ()
+    expect (screen.getByText ('まだないよ（笑）')).toBeInTheDocument ()
+  })
+
+  it ('toggles viewed state through the mutation', async () => {
+    postsApi.fetchPost.mockResolvedValue (
+        buildPost ({ id: 9, viewed: false, thumbnail: null, thumbnailBase: null }),
+    )
+
+    renderPage ()
+
+    fireEvent.click (await screen.findByRole ('button', { name: '未閲覧' }))
+
+    await waitFor (() => {
+      expect (postsApi.toggleViewedFlg).toHaveBeenCalledWith ('9', true)
+    })
+  })
+
+  it ('shows the edit tab for members', async () => {
+    postsApi.fetchPost.mockResolvedValue (
+        buildPost ({ id: 9, thumbnail: null, thumbnailBase: null }),
+    )
+
+    renderPage (buildUser ({ role: 'member' }))
+
+    fireEvent.click (await screen.findByText ('編輯'))
+
+    expect (screen.getByText ('Post edit form')).toBeInTheDocument ()
+  })
+
+  it ('hides the edit tab for guests', async () => {
+    postsApi.fetchPost.mockResolvedValue (
+        buildPost ({ id: 9, thumbnail: null, thumbnailBase: null }),
+    )
+
+    renderPage (buildUser ({ role: 'guest' }))
+
+    expect (await screen.findByText ('関聯')).toBeInTheDocument ()
+    expect (screen.queryByText ('編輯')).not.toBeInTheDocument ()
+  })
+})

frontend/src/pages/posts/PostDetailPage.tsx

@@ -13,6 +13,7 @@ import MainArea from '@/components/layout/MainArea'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { SITE_TITLE } from '@/config'
+import { isApiError } from '@/lib/api'
 import { fetchPost, toggleViewedFlg } from '@/lib/posts'
 import { postsKeys, tagsKeys } from '@/lib/queryKeys'
 import { cn } from '@/lib/utils'
@@ -26,7 +27,7 @@ import type { NiconicoViewerHandle, Post, User } from '@/types'
 type Props = { user: User | null }
 
 
-export default (({ user }: Props) => {
+const PostDetailPage: FC<Props> = ({ user }) => {
   const { id } = useParams ()
   const postId = String (id ?? '')
   const postKey = postsKeys.show (postId)
@@ -43,17 +44,15 @@ export default (({ user }: Props) => {
   const [status, setStatus] = useState (200)
 
   const changeViewedFlg = useMutation ({
-      mutationFn: async () => {
+      mutationFn: async (next: boolean) => {
-	const cur = qc.getQueryData<any> (postKey)
-	const next = !(cur?.viewed)
 	await toggleViewedFlg (postId, next)
 	return next
       },
-      onMutate: async () => {
+      onMutate: async (next: boolean) => {
 	await qc.cancelQueries ({ queryKey: postKey })
-	const prev = qc.getQueryData<any> (postKey)
+	const prev = qc.getQueryData<Post> (postKey)
 	qc.setQueryData (postKey,
-			 (cur: any) => cur ? { ...cur, viewed: !(cur.viewed) } : cur)
+			 (cur: Post | undefined) => cur ? { ...cur, viewed: next } : cur)
 	return { prev }
       },
       onError: (...[, , ctx]) => {
@@ -69,7 +68,7 @@ export default (({ user }: Props) => {
     if (!(errorFlg))
       return
 
-    const code = (error as any)?.response.status ?? (error as any)?.status
+    const code = isApiError (error) ? error.response?.status : undefined
     if (code)
       setStatus (code)
   }, [errorFlg, error])
@@ -154,7 +153,7 @@ export default (({ user }: Props) => {
 		    ref={embedRef}
 		    post={post}
 		    onLoadComplete={() => embedRef.current?.play ()}/>
-		<Button onClick={() => changeViewedFlg.mutate ()}
+		<Button onClick={() => changeViewedFlg.mutate (!(post.viewed))}
 			disabled={changeViewedFlg.isPending}
 			className={cn ('text-white', viewedClass)}>
 		  {post.viewed ? '閲覧済' : '未閲覧'}
@@ -169,9 +168,9 @@ export default (({ user }: Props) => {
 		      <Tab name="編輯">
 			<PostEditForm
 			    post={post}
-			    onSave={newPost => {
+			 onSave={newPost => {
 			      qc.setQueryData (postsKeys.show (postId),
-					       (prev: any) => newPost ?? prev)
+					       (prev: Post | undefined) => newPost ?? prev)
 			      qc.invalidateQueries ({ queryKey: postsKeys.root })
 			      qc.invalidateQueries ({ queryKey: tagsKeys.root })
 			    }}/>
@@ -185,4 +184,6 @@ export default (({ user }: Props) => {
 	  {post && <TagDetailSidebar post={post} sp/>}
 	</div>
       </div>)
-}) satisfies FC<Props>
+}
+
+export default PostDetailPage

frontend/src/pages/posts/PostHistoryPage.tsx

@@ -35,7 +35,7 @@ const renderDiff = (diff: { current: string | null; prev: string | null }) => (
     </>)
 
 
-export default (() => {
+const PostHistoryPage: FC = () => {
   const dialogue = useDialogue ()
 
   const location = useLocation ()
@@ -48,11 +48,11 @@ export default (() => {
   // 投稿列の結合で使用
   let rowsCnt: number
 
-  const { data: tag } =
+  const tagQueryId = tagId ?? ''
-      tagId
+  const { data: tag } = useQuery ({
-      ? useQuery ({ queryKey: tagsKeys.show (tagId),
+      enabled:  Boolean (tagId),
-		    queryFn: () => fetchTag (tagId) })
+      queryKey: tagsKeys.show (tagQueryId),
-      : { data: null }
+      queryFn:  () => fetchTag (tagQueryId) })
 
   const { data, isLoading: loading } = useQuery ({
       queryKey: postsKeys.changes ({ ...(id && { post: id }),
@@ -290,4 +290,6 @@ export default (() => {
 	      <Pagination page={page} totalPages={totalPages}/>
 	    </>)}
       </MainArea>)
-}) satisfies FC
+}
+
+export default PostHistoryPage

frontend/src/pages/posts/PostListPage.test.tsx

@@ -0,0 +1,74 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostListPage from '@/pages/posts/PostListPage'
+import { buildPost, buildTag, buildWikiPage } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const postsApi = vi.hoisted (() => ({
+  fetchPosts: vi.fn (),
+}))
+
+const wikiApi = vi.hoisted (() => ({
+  fetchWikiPageByTitle: vi.fn (),
+  fetchWikiPages:       vi.fn (),
+}))
+
+vi.mock ('@/lib/posts', () => postsApi)
+vi.mock ('@/lib/wiki', () => wikiApi)
+
+describe ('PostListPage', () => {
+  it ('loads posts from the current query and renders the plaza tab', async () => {
+    const tag = buildTag ({ name: '虹夏' })
+    postsApi.fetchPosts.mockResolvedValueOnce ({
+      posts: [buildPost ({ id: 5, title: '投稿5', tags: [tag] })],
+      count: 1,
+    })
+    wikiApi.fetchWikiPageByTitle.mockResolvedValueOnce (buildWikiPage ({ title: '虹夏' }))
+    wikiApi.fetchWikiPages.mockResolvedValueOnce ([buildWikiPage ({ title: '虹夏' })])
+
+    renderWithProviders (<PostListPage/>, { route: '/posts?tags=%E8%99%B9%E5%A4%8F&page=2' })
+
+    await waitFor (() => {
+      expect (postsApi.fetchPosts).toHaveBeenCalledWith (
+          expect.objectContaining ({
+            tags:  '虹夏',
+            match: 'all',
+            page:  2,
+            limit: 20,
+          }),
+      )
+    })
+    expect (await screen.findByRole ('link', { name: '投稿5' })).toHaveAttribute (
+        'href',
+        '/posts/5',
+    )
+    expect (screen.getByText ('広場')).toBeInTheDocument ()
+  })
+
+  it ('shows the empty state when loading finishes without posts', async () => {
+    postsApi.fetchPosts.mockResolvedValueOnce ({ posts: [], count: 0 })
+
+    renderWithProviders (<PostListPage/>, { route: '/posts' })
+
+    expect (await screen.findByText ('広場には何もありませんよ．')).toBeInTheDocument ()
+  })
+
+  it ('renders the wiki tab for single-tag pages', async () => {
+    postsApi.fetchPosts.mockResolvedValueOnce ({ posts: [], count: 0 })
+    wikiApi.fetchWikiPageByTitle.mockResolvedValueOnce (
+        buildWikiPage ({ title: '虹夏', body: 'Wiki body' }),
+    )
+    wikiApi.fetchWikiPages.mockResolvedValueOnce ([buildWikiPage ({ title: '虹夏' })])
+
+    renderWithProviders (<PostListPage/>, { route: '/posts?tags=%E8%99%B9%E5%A4%8F' })
+
+    fireEvent.click (await screen.findByText ('Wiki'))
+
+    expect (await screen.findByText ('Wiki body')).toBeInTheDocument ()
+    expect (screen.getByRole ('link', { name: 'Wiki を見る' })).toHaveAttribute (
+        'href',
+        '/wiki/%E8%99%B9%E5%A4%8F',
+    )
+  })
+})

frontend/src/pages/posts/PostListPage.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query'
-import { useLayoutEffect, useRef, useState } from 'react'
+import { useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useLocation } from 'react-router-dom'
 
@@ -20,7 +20,7 @@ import type { FC } from 'react'
 import type { WikiPage } from '@/types'
 
 
-export default (() => {
+const PostListPage: FC = () => {
   const containerRef = useRef<HTMLDivElement | null> (null)
 
   const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
@@ -30,7 +30,7 @@ export default (() => {
   const tagsQuery = query.get ('tags') ?? ''
   const anyFlg = query.get ('match') === 'any'
   const match = anyFlg ? 'any' : 'all'
-  const tags = tagsQuery.split (' ').filter (e => e !== '')
+  const tags = useMemo (() => tagsQuery.split (' ').filter (e => e !== ''), [tagsQuery])
   const tagsKey = tags.join (' ')
   const page = Number (query.get ('page') ?? 1)
   const limit = Number (query.get ('limit') ?? 20)
@@ -66,7 +66,7 @@ export default (() => {
 	;
       }
     }) ()
-  }, [location.search])
+  }, [location.search, tags])
 
   return (
       <div
@@ -76,7 +76,7 @@ export default (() => {
 	  <title>
 	    {tags.length
 	     ? `${ tags.join (anyFlg ? ' or ' : ' and ') } | ${ SITE_TITLE }`
-	     : `${ SITE_TITLE }　〜 ぼざろクリーチャーシリーズ綜合リンク集サイト`}
+	     : `${ SITE_TITLE }\u3000〜 ぼざろクリーチャーシリーズ綜合リンク集サイト`}
 	  </title>
 	</Helmet>
 
@@ -112,4 +112,6 @@ export default (() => {
 	  </TabGroup>
 	</MainArea>
       </div>)
-}) satisfies FC
+}
+
+export default PostListPage

frontend/src/pages/posts/PostNewPage.test.tsx

@@ -0,0 +1,58 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import PostNewPage from '@/pages/posts/PostNewPage'
+import { buildUser } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const api = vi.hoisted (() => ({
+  apiGet:  vi.fn (),
+  apiPost: vi.fn (),
+}))
+
+const toastApi = vi.hoisted (() => ({
+  toast: vi.fn (),
+}))
+
+vi.mock ('@/lib/api', () => api)
+vi.mock ('@/components/ui/use-toast', () => toastApi)
+
+describe ('PostNewPage', () => {
+  it ('blocks guests', () => {
+    renderWithProviders (<PostNewPage user={buildUser ({ role: 'guest' })}/>)
+
+    expect (screen.getByText ('403')).toBeInTheDocument ()
+  })
+
+  it ('submits a new post with manual title and thumbnail settings', async () => {
+    api.apiPost.mockResolvedValueOnce ({})
+    api.apiGet.mockResolvedValue ([])
+
+    renderWithProviders (<PostNewPage user={buildUser ({ role: 'member' })}/>)
+
+    const checkboxes = screen.getAllByRole ('checkbox', { name: '自動' })
+    fireEvent.click (checkboxes[0])
+    fireEvent.click (checkboxes[1])
+
+    const textboxes = screen.getAllByRole ('textbox')
+    fireEvent.change (textboxes[0], { target: { value: 'https://example.com/post' } })
+    fireEvent.change (textboxes[1], { target: { value: '投稿タイトル' } })
+    fireEvent.change (textboxes[2], { target: { value: '1 2' } })
+    fireEvent.change (textboxes[3], { target: { value: 'tag1 tag2' } })
+    fireEvent.click (screen.getByRole ('button', { name: '追加' }))
+
+    await waitFor (() => {
+      expect (api.apiPost).toHaveBeenCalledWith (
+          '/posts',
+          expect.any (FormData),
+          { headers: { 'Content-Type': 'multipart/form-data' } },
+      )
+    })
+    const formData = api.apiPost.mock.calls[0]?.[1] as FormData
+    expect (formData.get ('url')).toBe ('https://example.com/post')
+    expect (formData.get ('title')).toBe ('投稿タイトル')
+    expect (formData.get ('parent_post_ids')).toBe ('1 2')
+    expect (formData.get ('tags')).toBe ('tag1 tag2')
+    expect (toastApi.toast).toHaveBeenCalledWith ({ title: '投稿成功!' })
+  })
+})

frontend/src/pages/posts/PostNewPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react'
+import { useCallback, useEffect, useState, useRef } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useNavigate } from 'react-router-dom'
 
@@ -21,9 +21,8 @@ import type { User } from '@/types'
 type Props = { user: User | null }
 
 
-export default (({ user }: Props) => {
+const PostNewPage: FC<Props> = ({ user }) => {
-  if (!(['admin', 'member'].some (r => user?.role === r)))
+  const editable = ['admin', 'member'].some (r => user?.role === r)
-    return <Forbidden/>
 
   const navigate = useNavigate ()
 
@@ -41,6 +40,7 @@ export default (({ user }: Props) => {
   const [url, setURL] = useState ('')
 
   const previousURLRef = useRef ('')
+  const thumbnailPreviewRef = useRef ('')
 
   const handleSubmit = async () => {
     const formData = new FormData
@@ -67,16 +67,6 @@ export default (({ user }: Props) => {
     }
   }
 
-  useEffect (() => {
-    if (titleAutoFlg && url)
-      fetchTitle ()
-  }, [titleAutoFlg])
-
-  useEffect (() => {
-    if (thumbnailAutoFlg && url)
-      fetchThumbnail ()
-  }, [thumbnailAutoFlg])
-
   const handleURLBlur = () => {
     if (!(url) || url === previousURLRef.current)
       return
@@ -88,20 +78,20 @@ export default (({ user }: Props) => {
     previousURLRef.current = url
   }
 
-  const fetchTitle = async () => {
+  const fetchTitle = useCallback (async () => {
     setTitle ('')
     setTitleLoading (true)
     const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
     setTitle (data.title || '')
     setTitleLoading (false)
-  }
+  }, [url])
 
-  const fetchThumbnail = async () => {
+  const fetchThumbnail = useCallback (async () => {
     setThumbnailPreview ('')
     setThumbnailFile (null)
     setThumbnailLoading (true)
-    if (thumbnailPreview)
+    if (thumbnailPreviewRef.current)
-      URL.revokeObjectURL (thumbnailPreview)
+      URL.revokeObjectURL (thumbnailPreviewRef.current)
     const data = await apiGet<Blob> ('/preview/thumbnail',
 				     { params: { url }, responseType: 'blob' })
     const imageURL = URL.createObjectURL (data)
@@ -110,7 +100,24 @@ export default (({ user }: Props) => {
 				'thumbnail.png',
 				{ type: data.type || 'image/png' }))
     setThumbnailLoading (false)
-  }
+  }, [url])
+
+  useEffect (() => {
+    thumbnailPreviewRef.current = thumbnailPreview
+  }, [thumbnailPreview])
+
+  useEffect (() => {
+    if (titleAutoFlg && url)
+      fetchTitle ()
+  }, [fetchTitle, titleAutoFlg, url])
+
+  useEffect (() => {
+    if (thumbnailAutoFlg && url)
+      fetchThumbnail ()
+  }, [fetchThumbnail, thumbnailAutoFlg, url])
+
+  if (!(editable))
+    return <Forbidden/>
 
   return (
       <MainArea>
@@ -207,4 +214,6 @@ export default (({ user }: Props) => {
 	  </Button>
 	</Form>
       </MainArea>)
-}) satisfies FC<Props>
+}
+
+export default PostNewPage

frontend/src/pages/posts/PostSearchPage.test.tsx

@@ -0,0 +1,84 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import PostSearchPage from '@/pages/posts/PostSearchPage'
+import { buildPost, buildTag } from '@/test/factories'
+import { renderWithProviders } from '@/test/render'
+
+const postsApi = vi.hoisted (() => ({
+  fetchPosts: vi.fn (),
+}))
+
+const api = vi.hoisted (() => ({
+  apiGet: vi.fn (),
+}))
+
+vi.mock ('@/lib/posts', () => postsApi)
+vi.mock ('@/lib/api', () => api)
+
+describe ('PostSearchPage', () => {
+  beforeEach (() => {
+    vi.clearAllMocks ()
+    api.apiGet.mockResolvedValue ([])
+  })
+
+  it ('loads posts from URL search filters', async () => {
+    postsApi.fetchPosts.mockResolvedValueOnce ({
+      posts: [buildPost ({ id: 4, title: '検索対象', tags: [buildTag ({ name: '虹夏' })] })],
+      count: 1,
+    })
+
+    renderWithProviders (
+        <PostSearchPage/>,
+        { route: '/posts/search?title=%E6%A4%9C%E7%B4%A2&tags=x&match=any&page=2' },
+    )
+
+    await waitFor (() => {
+      expect (postsApi.fetchPosts).toHaveBeenCalledWith (
+          expect.objectContaining ({
+            title: '検索',
+            tags:  'x',
+            match: 'any',
+            page:  2,
+          }),
+      )
+    })
+    expect ((await screen.findAllByRole ('link', { name: '検索対象' }))[0]).toHaveAttribute (
+        'href',
+        '/posts/4',
+    )
+  })
+
+  it ('submits form state into a new search', async () => {
+    postsApi.fetchPosts.mockResolvedValue ({ posts: [], count: 0 })
+
+    renderWithProviders (<PostSearchPage/>, { route: '/posts/search' })
+
+    const textboxes = screen.getAllByRole ('textbox')
+    fireEvent.change (textboxes[0], { target: { value: 'title' } })
+    fireEvent.change (textboxes[1], { target: { value: 'https://example.com' } })
+    fireEvent.change (textboxes[2], { target: { value: 'tag' } })
+    fireEvent.click (screen.getByRole ('radio', { name: 'OR' }))
+    fireEvent.click (screen.getByRole ('button', { name: '検索' }))
+
+    await waitFor (() => {
+      expect (postsApi.fetchPosts).toHaveBeenLastCalledWith (
+          expect.objectContaining ({
+            title: 'title',
+            url:   'https://example.com',
+            tags:  'tag',
+            match: 'any',
+            page:  1,
+          }),
+      )
+    })
+  })
+
+  it ('shows the no-result message', async () => {
+    postsApi.fetchPosts.mockResolvedValueOnce ({ posts: [], count: 0 })
+
+    renderWithProviders (<PostSearchPage/>, { route: '/posts/search' })
+
+    expect (await screen.findByText ('結果ないよ（笑）')).toBeInTheDocument ()
+  })
+})

frontend/src/pages/posts/PostSearchPage.tsx

@@ -32,7 +32,7 @@ const setIf = (qs: URLSearchParams, k: string, v: string | null) => {
 }
 
 
-export default (() => {
+const PostSearchPage: FC = () => {
   const location = useLocation ()
 
   const navigate = useNavigate ()
@@ -96,7 +96,8 @@ export default (() => {
     setUpdatedTo (qUpdatedTo)
 
     document.querySelector ('table')?.scrollIntoView ({ behavior: 'smooth' })
-  }, [location.search])
+  }, [location.search, qCreatedFrom, qCreatedTo, qMatch, qOriginalCreatedFrom,
+      qOriginalCreatedTo, qTags, qTitle, qUpdatedFrom, qUpdatedTo, qURL])
 
   const search = async () => {
     const qs = new URLSearchParams ()
@@ -336,4 +337,6 @@ export default (() => {
 	      <Pagination page={page} totalPages={totalPages}/>
 	    </div>) : '結果ないよ（笑）')}
       </MainArea>)
-}) satisfies FC
+}
+
+export default PostSearchPage

frontend/src/pages/tags/NicoTagListPage.tsx

@@ -1,4 +1,6 @@
-import { useEffect, useRef, useState } from 'react'
+import type { FC } from 'react'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 
 import TagLink from '@/components/TagLink'
@@ -14,7 +16,7 @@ import type { NicoTag, Tag, User } from '@/types'
 type Props = { user: User | null }
 
 
-export default ({ user }: Props) => {
+const NicoTagListPage: FC<Props> = ({ user }) => {
   const [cursor, setCursor] = useState ('')
   const [editing, setEditing] = useState<{ [key: number]: boolean }> ({ })
   const [loading, setLoading] = useState (false)
@@ -25,12 +27,8 @@ export default ({ user }: Props) => {
 
   const memberFlg = ['admin', 'member'].some (r => user?.role === r)
 
-  const loadMore = async (withCursor: boolean) => {
+  const applyLoadedTags = useCallback ((data: { tags: NicoTag[]; nextCursor: string },
-    setLoading (true)
+					withCursor: boolean) => {
-
-    const data = await apiGet<{ tags: NicoTag[]; nextCursor: string }> (
-	'/tags/nico', { params: withCursor ? { cursor } : { } })
-
     setNicoTags (tags => [...(withCursor ? tags : []), ...data.tags])
     setCursor (data.nextCursor)
 
@@ -40,9 +38,26 @@ export default ({ user }: Props) => {
     const newRawTags = Object.fromEntries (
 	data.tags.map (t => [t.id, t.linkedTags.map (lt => lt.name).join (' ')]))
     setRawTags (rawTags => ({ ...rawTags, ...newRawTags }))
+  }, [])
+
+  const loadInitial = useCallback (async () => {
+    setLoading (true)
+
+    const data = await apiGet<{ tags: NicoTag[]; nextCursor: string }> ('/tags/nico')
+    applyLoadedTags (data, false)
 
     setLoading (false)
-  }
+  }, [applyLoadedTags])
+
+  const loadMore = useCallback (async () => {
+    setLoading (true)
+
+    const data = await apiGet<{ tags: NicoTag[]; nextCursor: string }> (
+	'/tags/nico', { params: { cursor } })
+    applyLoadedTags (data, true)
+
+    setLoading (false)
+  }, [applyLoadedTags, cursor])
 
   const handleEdit = async (id: number) => {
     if (editing[id])
@@ -67,7 +82,7 @@ export default ({ user }: Props) => {
   useEffect(() => {
     const observer = new IntersectionObserver (entries => {
       if (entries[0].isIntersecting && !(loading) && cursor)
-	loadMore (true)
+	loadMore ()
     }, { threshold: 1 })
 
     const target = loaderRef.current
@@ -78,12 +93,12 @@ export default ({ user }: Props) => {
       if (target)
 	observer.unobserve (target)
     }
-  }, [loaderRef, loading])
+  }, [cursor, loadMore, loading])
 
   useEffect (() => {
     setNicoTags ([])
-    loadMore (false)
+    loadInitial ()
-  }, [])
+  }, [loadInitial])
 
   return (
       <MainArea>
@@ -147,3 +162,5 @@ export default ({ user }: Props) => {
 	</div>
       </MainArea>)
 }
+
+export default NicoTagListPage