feat(listen): add transcript analysis UI panel

Add UI integration for the transcript analysis feature:
- Add TranscriptSaved WebSocket message type to notify client when transcript is saved
- Create TranscriptAnalysisPanel component to display analysis results
  - Shows requirements grouped by category, decisions, action items with priorities
  - Displays speaker statistics and suggested contract name/description
  - Provides buttons to create new contract or add to existing contract
- Update Listen page to show analysis panel as modal overlay after recording stops
- Update useWebSocket hook to handle transcriptSaved message

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

1 files changed, 9 insertions, 4 deletions

diff --git a/makima/frontend/src/hooks/useWebSocket.ts b/makima/frontend/src/hooks/useWebSocket.ts
index c593621..8a8616d 100644
--- a/makima/frontend/src/hooks/useWebSocket.ts
+++ b/makima/frontend/src/hooks/useWebSocket.ts
@@ -24,10 +24,11 @@ interface UseWebSocketOptions {
   onTranscript?: (transcript: TranscriptEntry) => void;
   onError?: (code: string, message: string) => void;
   onStopped?: (reason: string) => void;
+  onTranscriptSaved?: (fileId: string, contractId: string) => void;
 }
 
 export function useWebSocket(options: UseWebSocketOptions = {}) {
-  const { onReady, onTranscript, onError, onStopped } = options;
+  const { onReady, onTranscript, onError, onStopped, onTranscriptSaved } = options;
 
   const [state, setState] = useState<WebSocketState>({
     status: "disconnected",
@@ -42,10 +43,10 @@ export function useWebSocket(options: UseWebSocketOptions = {}) {
   const pendingDisconnectRef = useRef(false);
 
   // Store callbacks in refs to avoid recreating handlers
-  const callbacksRef = useRef({ onReady, onTranscript, onError, onStopped });
+  const callbacksRef = useRef({ onReady, onTranscript, onError, onStopped, onTranscriptSaved });
   useEffect(() => {
-    callbacksRef.current = { onReady, onTranscript, onError, onStopped };
-  }, [onReady, onTranscript, onError, onStopped]);
+    callbacksRef.current = { onReady, onTranscript, onError, onStopped, onTranscriptSaved };
+  }, [onReady, onTranscript, onError, onStopped, onTranscriptSaved]);
 
   const connect = useCallback((): Promise<boolean> => {
     return new Promise((resolve) => {
@@ -138,6 +139,10 @@ export function useWebSocket(options: UseWebSocketOptions = {}) {
                   }
                 }
                 break;
+
+              case "transcriptSaved":
+                callbacksRef.current.onTranscriptSaved?.(message.fileId, message.contractId);
+                break;
             }
           } catch {
             console.error("Failed to parse WebSocket message:", event.data);