Feature/create history viewer2

[Makochaaan]

issue番号（- #〇）

やったこと（動作の確認のため、ある場合は動画や画像を添付してください）

#97 を引き継ぎ、実装を完了させました。

完成イメージ：
<video src=""/>

[とくに見て欲しいところ]

。Discordで共有した通りです。
https://discord.com/channels/1420354588388753410/1451071365179506829/1451155505472077958

不安なところ

その他情報（別で取った議事録等、このプルリクに関連する情報があれば）

---

ブランチ名について

以下のいずれかをブランチの先頭につけてブランチを命名してください

• feature/ 機能改修
• bugfix/ バグ修正
• refactor/ リファクタリング
• deps/ 依存パッケージなどのアップデート
• chore/ 雑用、当てはまるラベルがないときに設定する

例: feature/login-button

reviewer・mergeについて

for 作業者：

• レビュー担当者には、ジャンルに分けて以下の人を任命する：
  • フロントエンド(デザイン)：みつを　まこちゃーん
  • フロントエンド(ロジック)：まこちゃーん　めろ
  • バックエンド(AIエージェント/RAG)：やづや（精度)　めろ(速度）
  • バックエンド(API・DBなどその他)：まこちゃーん やづや
  • ロゴ/スライドその他：みつを まこちゃーん めろ
  • インフラ（CI/CD)：やづや
• レビューが承認(Approve)されたらmergeする
• レビューが非承認なら再度作業してpushし、コメントでコミット番号を明示しレビュー担当をメンションする

for レビュワー：

• レビュー担当はレビューをしたらDiscordにそれを通知する
• レビューは、わからないことへの共通認識をつけることを目的として、とにかく質問する。質問が無ければOK
• フロントエンドについては、実際に依頼された人が成果物を動作させて確認する

※ 作業の担当外の人は勉強になったことなどをコメントできるとBetterです!

レビューのコメントについて

レビュー時はバッヂ（テキストでも可）を付けて、どのレベル感のコメントか明示します。

• [must] 必ず直すべき
• [imo] 自分の考えは〜
• [nit]細かい指摘
• [ask] 質問/確認
• [fyi] ご参考まで

例

md

また、基本的に担当者がわからないことを質問することをレビューとします。フロントエンドについては、実際に成果物を触ってチェックするウォークスルーレビューを行います。

[vercel]

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

Project	Deployment	Review	Updated (UTC)
ng_2501	Error		Dec 18, 2025 10:15am

[waka320]

@Makochaaan お疲れ様、jackFesまでにレビュー間に合わなくてゴメンナサイ...
全体的に非常に便利な機能だと思っていて、感動しました。
コードは動作を優先した暫定的な実装が多いので、脆弱性などの観点は除いた、体験ベースでレビューを行おうと思います。

モバイル版のスタイリング

2025-12-20.17.01.37.1.mp4

レスポンシブ対応は多分まだ取り組めていないところだろうけど、モバイルレイアウトの際に、ベースのテキストのみが表示される不具合を発見しました。

おそらく、front/src/components/history/historyViewer.tsxの293行目のスタイリングでBase Promptのカラムが96pxの長さで固定されてしまっていて、動画に重なっているのが原因だとおもいます。

UX関連

2025-12-20.17.23.57.mp4

２段目の動画クリックに関して

PCで履歴画面を操作する際に、上から2段目以降の動画のクリックに関していくつか感じたことがあるので述べます。
動画にマウスカーソルをホバーすると、アニメーションが動作して、テキストが表示されるスタイリングがされていますが、

• 二段目の動画の位置が、初期の何もしていない時とホバーした時で変わってしまい、狙ってクリックが難しい
• 動画のテキストにクリックの判定がないため、カーソルを動画の絵に合わせる必要がある
  ということを感じました。

改善案として、動画のテキスト表示を

• ホバー時にレイアウトが動かない設計にする（カードの高さを固定する／詳細はオーバーレイ表示にする等）
• カード全体をクリック可能にする（テキスト領域も含めてクリックで同じ遷移/ロードが走る）
• 詳細は「クリックで展開」にする（ホバーは視覚効果だけにして、誤操作を減らす）

が考えられると思いました。

[waka320]

ここのスコープ外ですが、
動画編集画面などの「戻る」ボタンは表現的にどこの画面に戻るか分かりにくいため、
「数学テキスト入力に戻る」など、リンク先の画面の名称を表示するのはいかがでしょうか👀