プラクティスに理解度テスト機能を追加

.agents/skills/bootcamp-ui-design/SKILL.md

@@ -0,0 +1,46 @@
+---
+name: bootcamp-ui-design
+description: Design, implement, or review user-facing Rails/Slim screens in fjordllc/bootcamp so spacing, layout, forms, cards, actions, responsive behavior, and visual hierarchy match the existing Bootcamp UI. Use for new pages, UI changes, CSS changes, design reviews, screenshot comparisons, or requests to make a page feel consistent with Bootcamp.
+---
+
+# Bootcamp UI Design
+
+Use existing Bootcamp structures as the design system. Prefer composition of established classes over new page-specific spacing rules.
+
+## Workflow
+
+1. Identify the page type: detail, list, form, result/status, or empty state.
+2. Read [references/patterns.md](references/patterns.md) and inspect the listed source examples for that page type.
+3. Search for existing components and classes before editing CSS:
+   - `rg "<class-name>" app/views app/assets/stylesheets`
+   - `rg -l "<similar-content>" app/views`
+4. Implement the smallest structural change that reuses existing primitives.
+5. Render realistic fixture data at desktop and mobile widths.
+6. Capture screenshots and compare them with the selected reference pages.
+7. Iterate until spacing, hierarchy, width, and actions feel consistent.
+8. Run focused tests, Slim-Lint, Stylelint when CSS changes, and `git diff --check`.
+
+## Required UI Checks
+
+- Use `.page-main`, `.page-main-header`, `.page-body`, and `.container` consistently with comparable pages.
+- Use `.page-body__rows` when direct page sections need the standard vertical gap.
+- Put card content inside `.card-body > .card-body__inner`; `.card-body` alone does not provide standard padding.
+- Use `.form__items`, `.form-item`, and `.form-actions` for form rhythm and action placement.
+- Use existing container widths (`.is-md`, `.is-lg`, `.is-xl`) based on comparable pages.
+- Keep primary, cancel, and destructive actions in their established `form-actions__item` roles.
+- Verify long Japanese text, empty states, validation errors, and realistic row counts.
+- Verify at 1440px desktop and 390px mobile widths. Do not approve from desktop alone.
+- Avoid arbitrary margin or padding values when an existing structural class provides the spacing.
+- If new CSS is necessary, explain which existing primitive was insufficient and use project variables.
+
+## Visual Review Output
+
+Report:
+
+- reference pages used;
+- reused layout and component classes;
+- desktop and mobile screenshots captured;
+- remaining intentional differences;
+- focused tests and linters run.
+
+Do not describe a screen as Bootcamp-like without rendering and inspecting it.

.agents/skills/bootcamp-ui-design/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "Bootcamp UI Design"
+  short_description: "Bootcampらしい画面設計と視覚検証を一貫して支援"
+  default_prompt: "Use $bootcamp-ui-design to implement this UI consistently with existing Bootcamp pages."

.agents/skills/bootcamp-ui-design/references/patterns.md

@@ -0,0 +1,72 @@
+# Bootcamp UI Patterns
+
+Inspect source files instead of copying this document as markup. These are maintained examples in the repository.
+
+## Page Structure
+
+- Standard page body and responsive section spacing:
+  - `app/assets/stylesheets/application/blocks/page/_page-body.css`
+  - `.page-body`, `.page-body__rows`, `.page-body__columns`
+- Page headers and actions:
+  - `app/views/mentor/practices/practice_quiz/edit.html.slim`
+  - `app/views/mentor/practices/practice_quiz/questions/edit.html.slim`
+
+## Forms
+
+- Standard mentor form rhythm and actions:
+  - `app/views/mentor/categories/_form.html.slim`
+  - `app/views/mentor/coding_tests/_form.html.slim`
+  - `app/assets/stylesheets/shared/blocks/form/_form.css`
+  - `app/assets/stylesheets/shared/blocks/form/_form-item.css`
+  - `app/assets/stylesheets/shared/blocks/form/_form-actions.css`
+- Use `.form__items` for a group, `.form-item` between fields, and `.form-actions` after fields.
+- Do not add margins to individual labels or buttons until the form primitives have been used correctly.
+
+## Cards
+
+- Card structure:
+
+```slim
+.a-card
+  header.card-header
+    h2.card-header__title Title
+  hr.a-border-tint
+  .card-body
+    .card-body__inner
+      / content
+```
+
+- Relevant styles:
+  - `app/assets/stylesheets/shared/blocks/card/_card-header.css`
+  - `app/assets/stylesheets/shared/blocks/card/_card-body.css`
+- `.card-body__inner` owns the standard responsive padding. Omitting it makes content touch card edges.
+
+## Tables and Empty States
+
+- Admin tables are standalone because `.admin-table` owns its borders, background, and corner treatment. Do not wrap an admin table in `.a-card`.
+- Use a preceding `header.page-body-header` when the table needs a local title or count.
+- Reference implementations:
+  - `app/views/mentor/categories/index.html.slim`
+  - `app/views/mentor/coding_tests/index.html.slim`
+  - `app/views/mentor/practices/practice_quiz/edit.html.slim`
+- Empty state:
+  - `.o-empty-message` in the same file.
+
+## Result and Status Screens
+
+- Status plus repeated result cards:
+  - `app/views/practices/practice_quiz/show.html.slim`
+  - `app/assets/stylesheets/application/blocks/practice-quiz/_practice-quiz.css`
+- Keep status messaging visually separate from question/result cards.
+
+## Screenshot Review
+
+Use realistic development fixtures. At minimum capture:
+
+- desktop: 1440 x 1000;
+- mobile: 390 x 844;
+- form before submission;
+- result or state after submission when applicable;
+- management/edit screen for mentor-facing features.
+
+Compare section padding, gaps between sibling sections, content width, heading hierarchy, button placement, table density, and mobile stacking.

.cloudbuild/deploy-cloud-run

@@ -48,12 +48,12 @@ fi
 case "$environment" in
   production)
     export _RAILS_MAX_THREADS=5
-    export _PJORD_LLM_MODEL=claude-sonnet-4-6
+    export _PJORD_LLM_MODEL=claude-sonnet-5
     cloud_run_args+=(--concurrency 5)
     ;;
   staging)
     export _MISSION_CONTROL_USERNAME="${_MISSION_CONTROL_USERNAME:-fjord}"
-    export _PJORD_LLM_MODEL=claude-sonnet-4-6
+    export _PJORD_LLM_MODEL=claude-sonnet-5
     ;;
   review)
     export _DISCORD_NOTICE_WEBHOOK_URL=

.github/workflows/ci.yml

@@ -222,10 +222,9 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Generate flakewatch HTML
-        # komagata/flakewatch v0.6.31
-        uses: komagata/flakewatch@e734ba749bb1f8de2b9ae8a35b2cb02d63bbbf76
+        # komagata/flakewatch v0.6.34
+        uses: komagata/flakewatch@v0.6.34
         with:
           junit-artifact-pattern: junit-xml-*
           source-root: ${{ github.workspace }}
           history-branch: flakewatch-data
-          history-write: auto

.gitignore

@@ -50,4 +50,7 @@ yarn-debug.log*
 .yarn-integrity
 .claude
 .DS_Store
-.agents
+.agents/*
+!.agents/skills/
+.agents/skills/*
+!.agents/skills/bootcamp-ui-design/

Dockerfile

@@ -60,6 +60,7 @@ RUN apt-get update -qq && apt-get install -y --no-install-recommends \
       python3 \
       git \
       ca-certificates \
+      ffmpeg \
       libvips && \
     rm -rf /var/lib/apt/lists/*
 

Dockerfile.dev

@@ -18,6 +18,7 @@ RUN apt-get update -qq && apt-get install -y --no-install-recommends \
       libvips-dev \
       postgresql-client \
       tzdata \
+      ffmpeg \
       vim && \
     rm -rf /var/lib/apt/lists/*
 

app/agents/pjord/product_review_agent.rb

@@ -10,11 +10,27 @@ class Pjord::ProductReviewAgent < Pjord::Agent
 
   class << self
     def review(product)
-      extract_public_response_body(new.ask(message(product)).content).presence
+      review_result(product)[:body]
+    end
+
+    def review_result(product)
+      content = new.ask(message(product)).content
+      {
+        body: extract_public_response_body(content).presence,
+        auto_check: auto_check?(content)
+      }
     end
 
     private
 
+    def auto_check?(content)
+      return false unless content.respond_to?(:to_h)
+
+      values = content.to_h
+      value = values.key?(:auto_check) ? values[:auto_check] : values['auto_check']
+      ActiveModel::Type::Boolean.new.cast(value) || false
+    end
+
     def message(product)
       user_course_practice = UserCoursePractice.new(product.user)
       <<~TEXT
@@ -31,6 +47,7 @@ def message(product)
 
         ## プラクティス
         - タイトル: #{product.practice.title}
+        - ピヨルドによる提出物OK: #{product.practice.pjord_auto_check? ? '許可されています' : '許可されていません'}
         - ゴール:
         #{truncate_for_prompt(product.practice.goal)}
         - 説明:

app/assets/stylesheets/application.css

@@ -70,6 +70,7 @@
 @import "./application/blocks/practice/_practice-first-actions.css";
 @import "./application/blocks/practice/_practice-status-buttons.css";
 @import "./application/blocks/practice/_sticky-message.css";
+@import "./application/blocks/practice-quiz/_practice-quiz.css";
 @import "./application/blocks/question/_answer-badge.css";
 @import "./application/blocks/reaction/_reaction.css";
 @import "./application/blocks/report/_learning-times.css";

app/assets/stylesheets/application/blocks/practice-quiz/_practice-quiz.css

@@ -0,0 +1,149 @@
+.practice-quiz-status {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  padding: 1.25rem 1.5rem;
+  margin-bottom: 1.5rem;
+  border: solid 1px var(--border-tint);
+  border-radius: 0.5rem;
+  background-color: var(--base);
+}
+
+.practice-quiz-status.is-passed {
+  border-color: var(--success-tint);
+  background-color: var(--success-tint);
+}
+
+.practice-quiz-status.is-waiting {
+  border-color: var(--warning-tint);
+  background-color: var(--warning-tint);
+}
+
+.practice-quiz-status.is-info {
+  border-color: var(--info-tint);
+  background-color: var(--info-tint);
+}
+
+.practice-quiz-status__icon {
+  font-size: 1.75rem;
+  line-height: 1;
+  flex: 0 0 auto;
+}
+
+.practice-quiz-status.is-passed .practice-quiz-status__icon {
+  color: var(--success);
+}
+
+.practice-quiz-status.is-waiting .practice-quiz-status__icon {
+  color: var(--warning);
+}
+
+.practice-quiz-status.is-info .practice-quiz-status__icon {
+  color: var(--info);
+}
+
+.practice-quiz-status__title {
+  font-size: 1.125rem;
+  font-weight: bold;
+  margin: 0 0 0.25rem;
+}
+
+.practice-quiz-status__text {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--default-text);
+  margin: 0;
+}
+
+.practice-quiz-result,
+.practice-quiz-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.practice-quiz-result__item .card-header,
+.practice-quiz-form__item .card-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+
+.practice-quiz-question__type {
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: var(--semi-muted-text);
+  border: solid 1px var(--border);
+  border-radius: 1rem;
+  padding: 0.0625rem 0.625rem;
+  white-space: nowrap;
+}
+
+.practice-quiz-question__body {
+  margin-bottom: 1rem;
+}
+
+.practice-quiz-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.practice-quiz-choices__item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 0.625rem 0.875rem;
+  border: solid 1px var(--border-tint);
+  border-radius: 0.25rem;
+  color: var(--semi-muted-text);
+}
+
+.practice-quiz-choices__item.is-correct {
+  border-color: var(--success-tint);
+  background-color: var(--success-tint);
+  color: var(--default-text);
+  font-weight: bold;
+}
+
+.practice-quiz-choices__icon {
+  flex: 0 0 auto;
+  color: var(--muted-text);
+}
+
+.practice-quiz-choices__item.is-correct .practice-quiz-choices__icon {
+  color: var(--success);
+}
+
+.practice-quiz-choices__label {
+  flex: 1 1 auto;
+}
+
+.practice-quiz-explanation {
+  margin-top: 1rem;
+  padding: 1rem 1.25rem;
+  border-radius: 0.25rem;
+  background-color: var(--background-tint);
+}
+
+.practice-quiz-explanation__label {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  font-weight: bold;
+  color: var(--semi-muted-text);
+  margin-bottom: 0.5rem;
+}
+
+.practice-quiz-explanation__label i {
+  color: var(--warning);
+}

app/assets/stylesheets/application/blocks/practice/_category-practices-item.css

@@ -151,21 +151,3 @@
 a.category-practices-item__title-link:hover .category-practices-item__title-link-label {
   text-decoration: underline;
 }
-
-.category-practices-item__learning-time {
-  font-size: .75rem;
-  line-height: 1.4;
-  color: var(--muted-text);
-}
-
-@media (width >= 48em) {
-  .category-practices-item__learning-time {
-    margin-top: -.25rem;
-  }
-}
-
-@media (width <= 47.9375em) {
-  .category-practices-item__learning-time {
-    margin-top: .5rem;
-  }
-}