@aiquants/daily-report 0.6.2 → 0.8.0

package/src/client/components/daily-report-resolved-content.tsx

@@ -2,35 +2,40 @@ import { Plus, RefreshCw, RotateCw } from "lucide-react"
 import type { ReactNode } from "react"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useSearchParams } from "react-router"
-import type { DailyReportItem } from "../../shared/types"
 import { useDailyReportConfig } from "../config-context"
 import { useDailyReportActionContext } from "../contexts/daily-report-action-context"
+import { useAnimatedNumber } from "../hooks/use-animated-number"
 import { Button } from "../ui/button"
 import { Label } from "../ui/label"
 import { Switch } from "../ui/switch"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"
 import { DAILY_REPORT_FETCH_DEBOUNCE_MS } from "../utils/constants"
 import { DailyReportDetailList } from "./daily-report-detail-list"
+import { DailyReportIdsStreamStatus } from "./daily-report-ids-stream-status"
 import { DailyReportList } from "./daily-report-list"
 
 const tabTriggerClass = "min-w-24 p-2 font-medium text-slate-600 text-xs transition-colors data-[state=active]:bg-white data-[state=active]:text-slate-900 sm:min-w-36 sm:text-sm dark:text-slate-300 dark:data-[state=active]:bg-slate-800 dark:data-[state=active]:text-slate-100"
 
 type DailyReportResolvedContentProps = {
-    dailyReportItems: DailyReportItem[]
     userId?: string | null
 }
 
 /**
- * Displays fetched daily reports with layout and tabbed virtual scroll views.
- * レイアウトとタブ付き仮想スクロールで取得済み日報を表示するコンポーネント。
+ * Displays streamed daily reports with layout and tabbed virtual scroll views.
+ * レイアウトとタブ付き仮想スクロールでストリーム受信済み日報を表示するコンポーネント。
+ *
+ * アイテムは Action Context (ストリームチャンクをマージ済み) から読む。
  */
-export const DailyReportResolvedContent = ({ dailyReportItems: _initialItems, userId }: DailyReportResolvedContentProps) => {
+export const DailyReportResolvedContent = ({ userId }: DailyReportResolvedContentProps) => {
     // 自動既読設定
     const [autoMarkRead, setAutoMarkRead] = useState(false)
     const { title, renderHeader, showDevControls } = useDailyReportConfig()
     const { isSseEnabled, toggleSse, createReport, items: dailyReportItems, refetchData, clearCacheAndRefetch } = useDailyReportActionContext()
     const [searchParams] = useSearchParams()
 
+    // 総件数の表示値 (チャンク到着ごとの跳びをイーズアウトで滑らかにする)
+    const animatedItemCount = useAnimatedNumber(dailyReportItems.length)
+
     // 各タブのスクロール位置をアンマウント後も保持する Ref
     const listScrollOffsetRef = useRef<number>(0)
     const detailListScrollOffsetRef = useRef<number>(0)
@@ -49,6 +54,24 @@ export const DailyReportResolvedContent = ({ dailyReportItems: _initialItems, us
         return dailyReportItems[0].reportHubId
     })
 
+    // 初回の自動選択を一度きりにするフラグ (ユーザーの明示的な選択解除を上書きしない)
+    const hasAutoSelectedRef = useRef(false)
+
+    /**
+     * 最初のアイテム到着時に先頭日報を一度だけ自動選択する副作用。
+     * useState 初期化子はマウント時点で context の items がまだ空のため実質機能せず、
+     * ストリーミングでは最初のチャンク到着後に選択を確定させる必要がある。
+     * モバイルのオーバーレイは isMobileDetailOpen (明示タップ) でのみ開くため、
+     * プログラム選択でオーバーレイが開くことはない。
+     * 依存配列: dailyReportItems (チャンク到着ごと)。クリーンアップ: なし。
+     */
+    useEffect(() => {
+        if (!hasAutoSelectedRef.current && dailyReportItems.length > 0) {
+            hasAutoSelectedRef.current = true
+            setSelectedItemId((prev) => prev ?? dailyReportItems[0].reportHubId)
+        }
+    }, [dailyReportItems])
+
     const handleReload = async () => {
         await refetchData()
     }
@@ -123,8 +146,9 @@ export const DailyReportResolvedContent = ({ dailyReportItems: _initialItems, us
             {renderHeader({
                 title,
                 annotation: (
-                    <div className="flex flex-wrap gap-2 leading-1">
-                        <span>総件数: {dailyReportItems.length.toLocaleString()} 件</span>
+                    <div className="flex flex-wrap items-center gap-2 leading-1">
+                        <DailyReportIdsStreamStatus />
+                        <span className="tabular-nums">総件数: {animatedItemCount.toLocaleString()} 件</span>
                         <span>デバウンス: {DAILY_REPORT_FETCH_DEBOUNCE_MS} ms</span>
                     </div>
                 ),

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.",