@aiquants/daily-report 0.6.2 → 0.7.0

package/src/client/components/daily-report-detail-list.tsx

@@ -3,7 +3,7 @@
  * useFetcher ベースのデータフックで日報詳細を提供する仮想スクロールビュー。
  */
 
-import { type ScrollBarTapCircleOptions, type ScrollBarThumbOverlayRenderProps, tapScrollCircleSampleVisual, VirtualScroll, type VirtualScrollHandle } from "@aiquants/virtualscroll"
+import { type ScrollBarThumbOverlayRenderProps, VirtualScroll, type VirtualScrollHandle } from "@aiquants/virtualscroll"
 
 /**
  * Handle type augmented with E2E test helper methods.
@@ -25,8 +25,10 @@ import { useDailyReportDetail, useDailyReportPrefetch } from "../hooks/use-daily
 import { useDailyReportComments } from "../hooks/use-daily-report-comments"
 import { useDynamicViewportHeight } from "../hooks/use-dynamic-viewport-height"
 import { cn } from "../ui/cn"
-import { EMPTY_ITEM, FAST_SCROLL_INERTIA_OPTIONS, FAST_SCROLL_WHEEL_MULTIPLIER, PREFETCH_LOOKAHEAD, PREFETCH_MAX_DATES, VIRTUAL_SCROLL_OVERSCAN_COUNT } from "../utils/constants"
+import { CONTENT_DRAG_POINTER_INPUTS, EMPTY_ITEM, FAST_SCROLL_INERTIA_OPTIONS, FAST_SCROLL_WHEEL_MULTIPLIER, PREFETCH_LOOKAHEAD, PREFETCH_MAX_DATES, SCROLL_BAR_WIDTH, TAP_SCROLL_CIRCLE_OPTIONS, VIRTUAL_SCROLL_OVERSCAN_COUNT, WHEEL_RESET_TIMEOUT_MS } from "../utils/constants"
 import { BusinessDayThumbOverlay } from "./business-day-thumb-overlay"
+import { DailyReportAttachmentIndicator } from "./daily-report-attachment-indicator"
+import { DailyReportAttachmentList } from "./daily-report-attachment-list"
 import { DailyReportCommentForm, DailyReportCommentList } from "./daily-report-comment-section"
 import { DailyReportEditForm } from "./daily-report-edit-form"
 import { UnreadIndicator } from "./unread-indicator"
@@ -230,7 +232,7 @@ export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId
             wheelResetTimerRef.current = window.setTimeout(() => {
                 setIsWheelScrollActive(false)
                 wheelResetTimerRef.current = null
-            }, 240)
+            }, WHEEL_RESET_TIMEOUT_MS)
         }
         el.addEventListener("wheel", onWheel, { passive: true })
         return () => {
@@ -270,8 +272,6 @@ export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId
         [getItem],
     )
 
-    const tapScrollCircleOptions = useMemo<ScrollBarTapCircleOptions>(() => ({ enabled: true, renderVisual: tapScrollCircleSampleVisual }), [])
-
     /**
      * Updates viewport height when item count changes.
      * アイテム数変更時にビューポート高さを更新する。
@@ -311,11 +311,14 @@ export const DailyReportDetailList = ({ dailyReportItems, userId, selectedItemId
                     initialScrollOffset={initialScrollOffset}
                     overscanCount={VIRTUAL_SCROLL_OVERSCAN_COUNT}
                     scrollBarOptions={{
-                        width: 8,
-                        tapScrollCircleOptions: tapScrollCircleOptions,
+                        width: SCROLL_BAR_WIDTH,
+                        tapScrollCircleOptions: TAP_SCROLL_CIRCLE_OPTIONS,
                         renderThumbOverlay: renderThumbOverlay,
                     }}
                     behaviorOptions={{
+                        // ドラッグスクロールは無効化せず、**ポインタ種別で絞る**。
+                        // 丸ごと切るとタッチ端末からスクロール手段が消える (定数の注記参照)
+                        pointerDragInputs: CONTENT_DRAG_POINTER_INPUTS,
                         wheelSpeedMultiplier: FAST_SCROLL_WHEEL_MULTIPLIER,
                         inertiaOptions: FAST_SCROLL_INERTIA_OPTIONS,
                     }}
@@ -472,6 +475,9 @@ const DailyReportHeader = ({
     const { sourceTypeConfigs } = useDailyReportConfig()
     return (
         <div className="flex flex-wrap items-center gap-2 font-medium text-slate-600 text-xs">
+            {/* 添付の有無を一目判別できるようにする。仕様書が定める
+                [sourceType] [Star] [Read] の相対順は崩さず、その手前に置く */}
+            <DailyReportAttachmentIndicator count={report.attachments.length} label={fieldLabels.attachments} />
             {(() => {
                 const sourceType = itemSourceType ?? report?.sourceType
                 const sourceConfig = resolveSourceTypeConfig(sourceType, sourceTypeConfigs)
@@ -673,6 +679,7 @@ const DailyReportResolvedItem = ({ item, report, onCommentAdded, userId, onDoubl
                                 </ul>
                             </div>
                         )}
+                        <DailyReportAttachmentList attachments={report.attachments} />
                         {uiComments.length > 0 && (
                             <div className="flex flex-col gap-2">
                                 <span className="font-semibold text-slate-500 text-xs uppercase tracking-wide">{fieldLabels.comments}</span>

package/src/client/components/daily-report-list.tsx

@@ -13,9 +13,11 @@ import { useDailyReportActionContext } from "../contexts/daily-report-action-con
 import { useDailyReportDetail } from "../hooks/use-daily-report"
 import { useDailyReportComments } from "../hooks/use-daily-report-comments"
 import { useDynamicViewportHeight } from "../hooks/use-dynamic-viewport-height"
+import { useIsMobileLayout } from "../hooks/use-responsive-layout"
 import { cn } from "../ui/cn"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
 import {
+    CONTENT_DRAG_POINTER_INPUTS,
     DEFAULT_ITEM_HEIGHT,
     EMPTY_DETAIL,
     EMPTY_ITEM,
@@ -30,6 +32,8 @@ import {
     WHEEL_RESET_TIMEOUT_MS,
 } from "../utils/constants"
 import { BusinessDayThumbOverlay } from "./business-day-thumb-overlay"
+import { DailyReportAttachmentIndicator } from "./daily-report-attachment-indicator"
+import { DailyReportAttachmentList } from "./daily-report-attachment-list"
 import { DailyReportCommentForm, DailyReportCommentList } from "./daily-report-comment-section"
 import { DailyReportEditForm } from "./daily-report-edit-form"
 import { UnreadIndicator } from "./unread-indicator"
@@ -236,7 +240,7 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
     const { viewportHeight, updateViewportHeight } = useDynamicViewportHeight(scrollContainerRef)
     const [overlayLabel, setOverlayLabel] = useState<string>("")
     const [isWheelScrollActive, setIsWheelScrollActive] = useState(false)
-    const [isMobileLayout, setIsMobileLayout] = useState(false)
+    const isMobileLayout = useIsMobileLayout()
     const wheelResetTimerRef = useRef<number | null>(null)
     const appliedInitialSignatureRef = useRef<string | null>(null)
     const itemCount = dailyReportItems.length
@@ -247,21 +251,17 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
     const columnHeightStyle = useMemo<CSSProperties | undefined>(() => (Number.isFinite(viewportHeight) && viewportHeight > 0 ? { height: viewportHeight } : undefined), [viewportHeight])
 
     /**
-     * Manages global event listeners (Media Query, Wheel, Resize).
-     * メディアクエリ、ホイール、リサイズなどのグローバルイベントリスナーを管理する副作用。
+     * Manages global event listeners (Wheel, Resize).
+     * ホイール・リサイズのグローバルイベントリスナーを管理する副作用。
      *
-     * Purpose: To handle responsive layout changes and scroll interactions.
+     * Purpose: To keep the viewport height in sync and to detect wheel scrolling.
+     * (レスポンシブ判定は use-responsive-layout のフックが担当する。)
      * Dependencies: [updateViewportHeight]
      * Cleanup: Removes all event listeners and clears timers.
      */
     useEffect(() => {
         if (typeof window === "undefined") return
 
-        const mq = window.matchMedia("(max-width: 639px)")
-        const onMediaChange = (e: MediaQueryListEvent) => setIsMobileLayout(e.matches)
-        setIsMobileLayout(mq.matches)
-        mq.addEventListener("change", onMediaChange)
-
         const onResize = () => requestAnimationFrame(updateViewportHeight)
         window.addEventListener("resize", onResize)
         updateViewportHeight()
@@ -278,7 +278,6 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
         el?.addEventListener("wheel", onWheel, { passive: true })
 
         return () => {
-            mq.removeEventListener("change", onMediaChange)
             window.removeEventListener("resize", onResize)
             el?.removeEventListener("wheel", onWheel)
             if (wheelResetTimerRef.current) clearTimeout(wheelResetTimerRef.current)
@@ -453,6 +452,9 @@ export const DailyReportList = ({ dailyReportItems, initialSelectedBusinessDate
                             renderThumbOverlay: renderThumbOverlay,
                         }}
                         behaviorOptions={{
+                            // ドラッグスクロールは無効化せず、**ポインタ種別で絞る**。
+                            // 丸ごと切るとタッチ端末からスクロール手段が消える (定数の注記参照)
+                            pointerDragInputs: CONTENT_DRAG_POINTER_INPUTS,
                             inertiaOptions: FAST_SCROLL_INERTIA_OPTIONS,
                             wheelSpeedMultiplier: FAST_SCROLL_WHEEL_MULTIPLIER,
                         }}
@@ -811,6 +813,9 @@ const DailyReportDisplayPane = ({
                     )}
                 </div>
             </div>
+            {/* 添付節。DetailList タブと同じ位置 (面談者・本文の後、コメントの前) に置く。
+                片方のタブにしか出さないと、利用者は「添付が無い日報」と誤認する */}
+            {report && <DailyReportAttachmentList attachments={report.attachments} />}
             {report && (
                 <div className="fade-in animate-in space-y-2 border-slate-100 border-t pt-4 duration-500 dark:border-slate-800">
                     <div className="font-semibold text-slate-500 text-xs uppercase tracking-wide dark:text-slate-300">{fieldLabels.comments}</div>
@@ -934,7 +939,7 @@ const extractPreviewLines = (content: string | null): string[] => {
  * List タブ内で表示する日報サマリーカード。
  */
 const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; isActive: boolean; onSelect: (id: number) => void }) => {
-    const { sourceTypeConfigs } = useDailyReportConfig()
+    const { fieldLabels, sourceTypeConfigs } = useDailyReportConfig()
     const { toggleStar, toggleRead, removeStaleItem } = useDailyReportActionContext()
     const { report, error, isLoading, isRefetching } = useDailyReportDetail(item.reportHubId, item.businessDate)
 
@@ -1022,6 +1027,9 @@ const ListReportItem = ({ item, isActive, onSelect }: { item: DailyReportItem; i
                         <span className="truncate font-medium text-slate-900 dark:text-slate-100">{creator}</span>
                     </span>
                     <div className="ml-auto flex items-center gap-1.5">
+                        {/* 添付の有無を一覧で一目判別できるようにする。
+                            仕様書が定める [sourceType] [Star] [Read] の相対順は崩さず、その手前に置く */}
+                        <DailyReportAttachmentIndicator count={report.attachments.length} label={fieldLabels.attachments} />
                         {(() => {
                             const sourceType = item.sourceType ?? report?.sourceType
                             const sourceConfig = resolveSourceTypeConfig(sourceType, sourceTypeConfigs)

package/src/client/components/report-views.spec.tsx

@@ -0,0 +1,340 @@
+/**
+ * Rendering guards for the daily-report views (List / DetailList).
+ * 日報ビュー (List / DetailList) の描画ガード。
+ *
+ * 実際に起きた欠陥: 添付節を DetailList タブにだけ入れて List タブのサイドペインに入れ忘れ、
+ * List タブしか使わない利用者からは「添付が 1 件も無い」ように見えていた。型チェックでも
+ * 既存のどのテストでも検出できず、画面を開いて初めて分かる種類の抜けである。
+ *
+ * ❗ **ここはソース文字列の grep では守れない。** 以前の版は
+ * `expect(source).toContain("<DailyReportAttachmentList ... />")` というソース検査だったが、
+ * それでは `{false && ...}` や JSX コメントで**描画だけ止めた**場合に素通りする
+ * (= 上記の欠陥そのものを再現しても全 green)。逆に、属性の並べ替えや改行といった
+ * 挙動の変わらない整形で赤くなる。そこで実際に描画し、
+ * `VirtualScroll` へ渡した設定も差し替えたモックで捕まえて値を検査する。
+ *
+ * 添付 1 件分の見た目そのものは `daily-report-attachment-list.spec.tsx` が担当する。
+ */
+
+// biome-ignore lint/correctness/noNodejsModules: ビュー一覧の網羅性をディレクトリ走査で機械的に確かめるため (テスト専用)
+import { readdirSync, readFileSync } from "node:fs"
+// biome-ignore lint/correctness/noNodejsModules: 同上
+import { dirname, join } from "node:path"
+// biome-ignore lint/correctness/noNodejsModules: 同上
+import { fileURLToPath } from "node:url"
+import { act, render, screen } from "@testing-library/react"
+import type { ReactNode } from "react"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+import type { DailyReportDetail, DailyReportItem } from "../../shared/types"
+import { CONTENT_DRAG_POINTER_INPUTS, ITEM_VERTICAL_PADDING, TAP_SCROLL_CIRCLE_OPTIONS, VIRTUAL_SCROLL_OVERSCAN_COUNT } from "../utils/constants"
+
+/**
+ * `VirtualScroll` が受け取った props。ビューごとに 1 件積まれる。
+ *
+ * ❗ **代役は窓計算を捨てて全件描画するため、渡し忘れても描画結果が変わらない props がある。**
+ * それらは値を記録して個別に検査しないと「モックだから通る」状態になる
+ * (実際に `onRangeChange` を no-op へ差し替えると窓フェッチが止まり一覧が空になるが、
+ * 記録しなければテストは緑のまま)。
+ */
+type CapturedVirtualScrollProps = {
+    testId?: string
+    itemCount: number
+    behaviorOptions?: { pointerDragInputs?: unknown; enablePointerDrag?: unknown }
+    scrollBarOptions?: { tapScrollCircleOptions?: unknown; renderThumbOverlay?: (props: Record<string, unknown>) => ReactNode }
+    getItemKey?: unknown
+    getItemHeight?: unknown
+    viewportSize?: unknown
+    overscanCount?: unknown
+    onRangeChange?: unknown
+    onScroll?: unknown
+    contentInsets?: unknown
+}
+
+const captured: CapturedVirtualScrollProps[] = []
+
+/**
+ * Stand-in for VirtualScroll that renders every item and records its options.
+ * 全アイテムを描画しつつ設定を記録する `VirtualScroll` の代役。
+ *
+ * 本物は要素の実測高さに依存するため jsdom では 1 件も描画されない。
+ * 「どのペインに何が描かれるか」を検査したいので、窓の計算は捨てて全件描画する。
+ */
+vi.mock("@aiquants/virtualscroll", async () => {
+    const { forwardRef: fwd, useImperativeHandle: useHandle } = await import("react")
+    return {
+        tapScrollCircleSampleVisual: () => null,
+        VirtualScroll: fwd(
+            (
+                props: {
+                    itemCount: number
+                    getItem: (index: number) => unknown
+                    children: (item: unknown, index: number) => ReactNode
+                } & CapturedVirtualScrollProps,
+                ref: React.Ref<unknown>,
+            ) => {
+                captured.push({
+                    testId: props.testId,
+                    itemCount: props.itemCount,
+                    behaviorOptions: props.behaviorOptions,
+                    scrollBarOptions: props.scrollBarOptions,
+                    getItemKey: props.getItemKey,
+                    getItemHeight: props.getItemHeight,
+                    viewportSize: props.viewportSize,
+                    overscanCount: props.overscanCount,
+                    onRangeChange: props.onRangeChange,
+                    onScroll: props.onScroll,
+                    contentInsets: props.contentInsets,
+                })
+                useHandle(ref, () => ({ scrollTo: () => 0, scrollToIndex: () => {}, getScrollPosition: () => 0, getContentSize: () => 0, getViewportSize: () => 0, updateItemSize: () => {}, focusItemAtIndex: () => {} }))
+                return (
+                    <div data-testid={props.testId}>
+                        {Array.from({ length: props.itemCount }, (_, index) => (
+                            // biome-ignore lint/suspicious/noArrayIndexKey: 代役なので index キーで十分
+                            <div key={index}>{props.children(props.getItem(index), index)}</div>
+                        ))}
+                    </div>
+                )
+            },
+        ),
+    }
+})
+
+/** 日報アクションはネットワーク/ルーターに依存するため、呼び出しを受け止めるだけの代役にする。 */
+vi.mock("../contexts/daily-report-action-context", async (importOriginal) => {
+    const actual = await importOriginal<typeof import("../contexts/daily-report-action-context")>()
+    const noop = async () => {}
+    return {
+        ...actual,
+        useDailyReportActionContext: () => ({
+            // 楽観的更新の台帳はすべて ref。1 つでも欠けると描画が例外で落ちる
+            pendingAddCommentIds: { current: new Map() },
+            pendingDeleteCommentIds: { current: new Map() },
+            pendingReadUpdates: { current: new Map() },
+            pendingStarUpdates: { current: new Map() },
+            resolvedIdMap: { current: new Map() },
+            version: 0,
+            items: [],
+            user: null,
+            isSseEnabled: false,
+            toggleSse: () => {},
+            addComment: noop,
+            deleteComment: noop,
+            toggleStar: noop,
+            toggleRead: noop,
+            createReport: async () => 0,
+            updateReport: noop,
+            publishReport: noop,
+            deleteReport: noop,
+            removeStaleItem: () => {},
+            refetchData: noop,
+            clearCacheAndRefetch: noop,
+        }),
+    }
+})
+
+/** 詳細取得はキャッシュ層ごと差し替え、常に用意した 1 件を返す。 */
+const detailRef: { current: DailyReportDetail | null } = { current: null }
+vi.mock("../hooks/use-daily-report", async (importOriginal) => {
+    const actual = await importOriginal<typeof import("../hooks/use-daily-report")>()
+    return {
+        ...actual,
+        useDailyReportDetail: () => ({ report: detailRef.current, error: null, isLoading: false, isRefetching: false }),
+        useDailyReportPrefetch: () => () => {},
+    }
+})
+
+const { DailyReportList } = await import("./daily-report-list")
+const { DailyReportDetailList } = await import("./daily-report-detail-list")
+const { DailyReportConfigProvider } = await import("../config-context")
+
+const componentsDir = dirname(fileURLToPath(import.meta.url))
+
+/**
+ * 日報の詳細を描画するビューの一覧。**すべての検査はこの表から導出する。**
+ *
+ * ❗ 追加したらここへ足すこと。足し忘れは下の網羅テストが検知し、足せば
+ * 添付節・マーカー・スクロール結線の全検査が自動的にそのビューへ適用される
+ * (表への登録だけで黙らせられる、という抜け道を作らない)。
+ */
+const REPORT_DETAIL_VIEWS = [
+    { file: "daily-report-list.tsx", testId: "daily-report-list", render: () => <DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} /> },
+    { file: "daily-report-detail-list.tsx", testId: "daily-report-detail-list", render: () => <DailyReportDetailList dailyReportItems={[item]} /> },
+] as const
+
+/** `it.each` のタイトル用に (名前, 定義) の組へ落とす。 */
+const VIEW_CASES = REPORT_DETAIL_VIEWS.map((view) => [view.file, view] as const)
+
+const REPORT_HUB_ID = 1
+
+const item: DailyReportItem = { reportHubId: REPORT_HUB_ID, businessDate: "2026-07-31" }
+
+/** 添付 1 件を持つ日報詳細。 */
+const buildDetail = (): DailyReportDetail => ({
+    reportHubId: REPORT_HUB_ID,
+    date: "2026-07-31",
+    interviewers: [],
+    comments: [],
+    isRead: false,
+    isStarred: false,
+    labels: [],
+    commentItems: [],
+    attachments: [{ id: "TOKEN1", fileName: "report.png", fileType: "image/png", fileSize: 2048, createdAt: "2026-07-31 00:00:00", state: "unknown" }],
+})
+
+/** 設定コンテキストを与えて描画する。 */
+const renderView = (node: ReactNode) =>
+    render(
+        <DailyReportConfigProvider
+            config={{
+                apiBasePath: "/daily_report/api",
+                fieldLabels: { attachments: "添付ファイル", attachmentMissing: "実体が見つかりません", attachmentDownload: "ダウンロード" },
+            }}>
+            {node}
+        </DailyReportConfigProvider>,
+    )
+
+/**
+ * 指定 testId のビューが受け取った `VirtualScroll` の props (最新のレンダー分)。
+ *
+ * ❗ 再レンダーのたびに積まれるので**最後の 1 件**を返す。先頭を返すと、
+ * 状態更新後に渡し直されたコールバックではなく古いクロージャを掴んでしまう。
+ */
+const optionsOf = (testId: string) => {
+    const props = [...captured].reverse().find((entry) => entry.testId === testId)
+    if (!props) throw new Error(`VirtualScroll props for ${testId} were not captured`)
+    return props
+}
+
+beforeEach(() => {
+    captured.length = 0
+    detailRef.current = buildDetail()
+    // DetailList は行の実測に ResizeObserver を使う (jsdom には無い)
+    vi.stubGlobal(
+        "ResizeObserver",
+        class {
+            observe() {}
+            unobserve() {}
+            disconnect() {}
+        },
+    )
+    vi.stubGlobal(
+        "matchMedia",
+        vi.fn((query: string) => ({ matches: false, media: query, onchange: null, addEventListener: vi.fn(), removeEventListener: vi.fn(), addListener: vi.fn(), removeListener: vi.fn(), dispatchEvent: vi.fn() })),
+    )
+})
+
+describe("日報ビューの描画と結線", () => {
+    it.each(VIEW_CASES)("%s は添付節を描画する", (_file, view) => {
+        renderView(view.render())
+        expect(screen.getAllByTestId("daily-report-attachment-section").length).toBeGreaterThan(0)
+        expect(screen.getAllByTestId("daily-report-attachment-item").length).toBe(1)
+    })
+
+    it.each(VIEW_CASES)("%s は添付マーカーを描画する", (_file, view) => {
+        // 節そのものはカードを開かないと見えないため、スクロールしながら判別できる目印が要る
+        renderView(view.render())
+        expect(screen.getAllByTestId("daily-report-attachment-indicator").length).toBeGreaterThan(0)
+    })
+
+    it("添付が 0 件のときは節もマーカーも描画されない (誤検知の裏取り)", () => {
+        detailRef.current = { ...buildDetail(), attachments: [] }
+        renderView(<DailyReportDetailList dailyReportItems={[item]} />)
+        expect(screen.queryByTestId("daily-report-attachment-section")).toBeNull()
+        expect(screen.queryByTestId("daily-report-attachment-indicator")).toBeNull()
+    })
+
+    it.each(VIEW_CASES)("%s はドラッグを無効化せずポインタ種別で絞る", (_file, view) => {
+        const [testId, renderNode] = [view.testId, view.render]
+        // ❗ `enablePointerDrag` を切ってはならない。ScrollPane は transform 描画で
+        // ネイティブのスクロール領域を持たないため、切るとタッチ端末から
+        // スクロール手段が完全に消える。マウスのドラッグだけを外すのが正しい
+        renderView(renderNode())
+        const { behaviorOptions } = optionsOf(testId)
+        expect(behaviorOptions?.pointerDragInputs).toBe(CONTENT_DRAG_POINTER_INPUTS)
+        expect(behaviorOptions?.enablePointerDrag).toBeUndefined()
+    })
+
+    it.each(VIEW_CASES)("%s は共有のタップスクロール設定を使う", (_file, view) => {
+        const [testId, renderNode] = [view.testId, view.render]
+        // 片方だけ独自定義にすると、同じ指の位置でタブごとに速度が何十倍も違う
+        // (是正前は実測で最大 77 倍の差があった)
+        renderView(renderNode())
+        expect(optionsOf(testId).scrollBarOptions?.tapScrollCircleOptions).toBe(TAP_SCROLL_CIRCLE_OPTIONS)
+    })
+
+    it.each(VIEW_CASES)("%s は仮想スクロールの必須結線を渡している", (_file, view) => {
+        const [testId, renderNode] = [view.testId, view.render]
+        // 代役は全件描画するため、これらを壊しても描画結果は変わらない。値そのものを検査する
+        renderView(renderNode())
+        const props = optionsOf(testId)
+        // 窓フェッチとプリフェッチの起点。no-op にすると一覧が空のままになる
+        expect(typeof props.onRangeChange).toBe("function")
+        expect(typeof props.onScroll).toBe("function")
+        expect(typeof props.getItemHeight).toBe("function")
+        // 白飛び防止のオーバースキャン。0 にするとスクロール中に空白が出る
+        expect(props.overscanCount).toBe(VIRTUAL_SCROLL_OVERSCAN_COUNT)
+        expect(props.viewportSize).toEqual(expect.any(Number))
+    })
+
+    it("❗ onRangeChange は実際のハンドラである (型が function なだけでは足りない)", () => {
+        // no-op へ差し替えると窓の日付表示が止まる。`typeof === "function"` は
+        // no-op も通してしまうので、**呼んだ結果が観測できること**まで確かめる
+        const second: DailyReportItem = { reportHubId: 2, businessDate: "2026-08-05" }
+        renderView(<DailyReportList dailyReportItems={[item, second]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+
+        /** つまみのバブルに出ている文言。 */
+        const overlayText = () => {
+            const renderThumbOverlay = optionsOf("daily-report-list").scrollBarOptions?.renderThumbOverlay
+            if (typeof renderThumbOverlay !== "function") throw new Error("renderThumbOverlay was not captured")
+            const view = render(<div>{renderThumbOverlay({ orientation: "vertical", thumbCenter: 0, isDragging: true, isTapScrollActive: false })}</div>)
+            const text = view.container.textContent ?? ""
+            view.unmount()
+            return text
+        }
+
+        expect(overlayText()).not.toContain("2026-08-05")
+
+        act(() => {
+            ;(optionsOf("daily-report-list").onRangeChange as (range: { visibleStartIndex: number }) => void)({ visibleStartIndex: 1 })
+        })
+
+        // no-op へ差し替えると、ここが古い日付のまま変わらない
+        expect(overlayText()).toContain("2026-08-05")
+    })
+
+    it("DetailList は行の同一性を保つキーを渡している (React の再利用が壊れない)", () => {
+        // 可変高さのカードは key が潰れると再利用が壊れ、実測高さが別の行へ付く
+        renderView(<DailyReportDetailList dailyReportItems={[item]} />)
+        const { getItemKey } = optionsOf("daily-report-detail-list")
+        expect(typeof getItemKey).toBe("function")
+        expect((getItemKey as (index: number) => unknown)(0)).toBe(REPORT_HUB_ID)
+    })
+
+    it("List は上下のインセットを渡している (先頭・末尾の行が縁に貼り付かない)", () => {
+        renderView(<DailyReportList dailyReportItems={[item]} selectedReportHubId={REPORT_HUB_ID} onSelectItem={() => {}} />)
+        expect(optionsOf("daily-report-list").contentInsets).toEqual({ top: ITEM_VERTICAL_PADDING, bottom: ITEM_VERTICAL_PADDING })
+    })
+
+    it("レイアウト判定の閾値を各ビューが独自に持たない (単一の情報源にする)", () => {
+        // 空白の有無に左右されないよう、空白を除去してから照合する
+        for (const view of REPORT_DETAIL_VIEWS) {
+            const source = readFileSync(join(componentsDir, view.file), "utf8").replace(/\s+/g, "")
+            expect(source, view.file).not.toContain("max-width:639px")
+        }
+    })
+
+    it("詳細を描画するビューを網羅している (新しいビューの追加を検知する)", () => {
+        // ❗ 走査対象はディレクトリの実体。登録済みリストを絞り込む書き方だと
+        // 「新しく増えたファイル」は原理的に視界へ入らない。
+        //
+        // 判定は **`use-daily-report-comments` を import しているか**で行う。
+        // 日報のコメントを取りに行くのは「その日報の詳細を描画するビュー」だけであり、
+        // import 文なので `fieldLabels.comments` のような字面の揺れ
+        // (`fieldLabels["comments"]` / 分割代入) に左右されない
+        const detailViews = readdirSync(componentsDir)
+            .filter((file) => file.endsWith(".tsx") && !file.endsWith(".spec.tsx"))
+            .filter((file) => readFileSync(join(componentsDir, file), "utf8").includes('from "../hooks/use-daily-report-comments"'))
+            .sort()
+        expect(detailViews).toEqual(REPORT_DETAIL_VIEWS.map((view) => view.file).sort())
+    })
+})

package/src/client/config-context.tsx

@@ -33,6 +33,11 @@ export type DailyReportFieldLabels = {
     content: string
     interviewers: string
     comments: string
+    attachments: string
+    /** 実体の消失が確認された添付に添える注記。 */
+    attachmentMissing: string
+    /** 添付をダウンロードするリンクのラベル。 */
+    attachmentDownload: string
     tabArticle: string
     tabRelations: string
     relationsEmpty: string
@@ -92,6 +97,9 @@ export const defaultDailyReportFieldLabels: DailyReportFieldLabels = {
     content: "Content",
     interviewers: "Attendees",
     comments: "Comments",
+    attachments: "Attachments",
+    attachmentMissing: "File is missing",
+    attachmentDownload: "Download",
     tabArticle: "Overview",
     tabRelations: "Related",
     relationsEmpty: "No related view configured yet.",

package/src/client/contexts/daily-report-action-context.tsx

@@ -773,6 +773,8 @@ export const DailyReportActionProvider = ({ children, user, initialItems = [], u
             isStarred: false,
             labels: [{ id: 0, name: draftLabelName, color: "#9ca3af" }],
             commentItems: [],
+            // 楽観更新の仮レポート。作成直後に添付は存在しない
+            attachments: [],
         }
         writeCache(dummyReport, Date.now() + 300000, false)
 

package/src/client/hooks/use-responsive-layout.spec.ts

@@ -0,0 +1,74 @@
+/**
+ * Tests for the shared responsive-layout hooks.
+ * 共有のレスポンシブ判定フックのテスト。
+ *
+ * 閾値は 1 箇所でだけ定義する。各ビューが独自に `matchMedia` を持つと、片方だけ変更されて
+ * レイアウト分岐が食い違う。
+ *
+ * ❗ スクロール操作の可否はここで決めない (画面幅では「主入力がマウスのタッチ対応ノート」を
+ * 取りこぼす)。ドラッグはポインタ種別ごとに `pointerDragInputs` で制御する。
+ */
+import { act, renderHook } from "@testing-library/react"
+import { afterEach, describe, expect, it, vi } from "vitest"
+import { MOBILE_LAYOUT_MEDIA_QUERY, useIsMobileLayout } from "./use-responsive-layout"
+
+/** 購読中のリスナー。`change` を発火させて再評価させるために保持する。 */
+type Listener = () => void
+
+/**
+ * Installs a `matchMedia` stub whose result is driven by the given query set.
+ * 指定したクエリ集合で結果が決まる `matchMedia` スタブを差し込む処理。
+ *
+ * @param matching Queries that should report a match. 一致させるクエリ群。
+ * @returns A setter to change the matching set and re-notify. 一致集合を差し替えて再通知するための関数。
+ */
+const stubMatchMedia = (matching: string[]) => {
+    let current = new Set(matching)
+    const listeners: Listener[] = []
+
+    vi.stubGlobal("matchMedia", (query: string) => ({
+        get matches() {
+            return current.has(query)
+        },
+        media: query,
+        addEventListener: (_type: string, listener: Listener) => listeners.push(listener),
+        removeEventListener: (_type: string, listener: Listener) => {
+            const index = listeners.indexOf(listener)
+            if (index >= 0) listeners.splice(index, 1)
+        },
+    }))
+
+    return {
+        set: (next: string[]) => {
+            current = new Set(next)
+            act(() => {
+                for (const listener of [...listeners]) listener()
+            })
+        },
+        listenerCount: () => listeners.length,
+    }
+}
+
+afterEach(() => {
+    vi.unstubAllGlobals()
+})
+
+describe("useIsMobileLayout", () => {
+    it("ビューポートが閾値以下ならモバイルレイアウトと判定する", () => {
+        stubMatchMedia([MOBILE_LAYOUT_MEDIA_QUERY])
+        expect(renderHook(() => useIsMobileLayout()).result.current).toBe(true)
+    })
+
+    it("閾値を超えるならデスクトップレイアウトと判定する", () => {
+        stubMatchMedia([])
+        expect(renderHook(() => useIsMobileLayout()).result.current).toBe(false)
+    })
+
+    it("リサイズ (change) に追随する", () => {
+        const media = stubMatchMedia([])
+        const { result } = renderHook(() => useIsMobileLayout())
+        expect(result.current).toBe(false)
+        media.set([MOBILE_LAYOUT_MEDIA_QUERY])
+        expect(result.current).toBe(true)
+    })
+})