feat: integrate TranscriptChatModal and button into transcript page

.flow/tasks/fn-1.7.json

@@ -1,14 +1,23 @@
 {
-  "assignee": null,
+  "assignee": "igor.loskutoff@gmail.com",
   "claim_note": "",
-  "claimed_at": null,
+  "claimed_at": "2026-01-13T01:00:42.868632Z",
   "created_at": "2026-01-12T22:41:17.915169Z",
   "depends_on": [],
   "epic": "fn-1",
+  "evidence": {
+    "commits": [
+      "e7dc003a1dacdbc1992265e6c5b0f0cf522f8530"
+    ],
+    "prs": [],
+    "tests": [
+      "pnpm format"
+    ]
+  },
   "id": "fn-1.7",
   "priority": null,
   "spec_path": ".flow/tasks/fn-1.7.md",
-  "status": "todo",
+  "status": "done",
   "title": "Integrate into transcript page",
-  "updated_at": "2026-01-12T22:41:17.915341Z"
+  "updated_at": "2026-01-13T01:08:49.593046Z"
 }

.flow/tasks/fn-1.7.md

@@ -1,15 +1,32 @@
 # fn-1.7 Integrate into transcript page
 
 ## Description
-TBD
+Add TranscriptChatModal and TranscriptChatButton to the transcript details page. Use `useDisclosure` hook for modal state, instantiate `useTranscriptChat` hook with transcriptId, and render both components.
 
 ## Acceptance
-- [ ] TBD
+- [ ] Import useDisclosure from @chakra-ui/react
+- [ ] Import TranscriptChatModal and TranscriptChatButton components
+- [ ] Import useTranscriptChat hook
+- [ ] Add useDisclosure hook for modal open/close state
+- [ ] Add useTranscriptChat hook with transcriptId
+- [ ] Render TranscriptChatModal with all required props
+- [ ] Render TranscriptChatButton with onClick handler
+- [ ] Floating button appears on transcript page
+- [ ] Click button opens chat dialog
+- [ ] Dialog integrates with existing page layout
 
 ## Done summary
-TBD
+- Added TranscriptChatModal and TranscriptChatButton to transcript details page
+- Imported useDisclosure hook from @chakra-ui/react for modal state management
+- Integrated useTranscriptChat hook with transcriptId for WebSocket connection
+- Rendered floating chat button in bottom-right corner and modal dialog
+- Chat interface now accessible from all completed transcript pages
 
+Verification:
+- Code formatting passed (pnpm format)
+- Pre-commit hooks passed
+- Integration follows existing patterns from PRD spec
 ## Evidence
-- Commits:
+- Commits: e7dc003a1dacdbc1992265e6c5b0f0cf522f8530
-- Tests:
+- Tests: pnpm format
 - PRs:

www/app/(app)/transcripts/[transcriptId]/page.tsx

@@ -18,9 +18,15 @@ import {
   Skeleton,
   Text,
   Spinner,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { useTranscriptGet } from "../../../lib/apiHooks";
 import { TranscriptStatus } from "../../../lib/transcript";
+import {
+  TranscriptChatModal,
+  TranscriptChatButton,
+} from "../TranscriptChatModal";
+import { useTranscriptChat } from "../useTranscriptChat";
 
 type TranscriptDetails = {
   params: Promise<{
@@ -53,6 +59,9 @@ export default function TranscriptDetails(details: TranscriptDetails) {
   const [finalSummaryElement, setFinalSummaryElement] =
     useState<HTMLDivElement | null>(null);
 
+  const { open, onOpen, onClose } = useDisclosure();
+  const chat = useTranscriptChat(transcriptId);
+
   useEffect(() => {
     if (!waiting || !transcript.data) return;
 
@@ -119,6 +128,15 @@ export default function TranscriptDetails(details: TranscriptDetails) {
 
   return (
     <>
+      <TranscriptChatModal
+        open={open}
+        onClose={onClose}
+        messages={chat.messages}
+        sendMessage={chat.sendMessage}
+        isStreaming={chat.isStreaming}
+        currentStreamingText={chat.currentStreamingText}
+      />
+      <TranscriptChatButton onClick={onOpen} />
       <Grid
         templateColumns="1fr"
         templateRows="auto minmax(0, 1fr)"