fix: transcription segment dedup, store finalisation, and panel colours

- transcriptionService: track finalizedSegmentCount so only newly-final
  segments are emitted per WS message (was re-processing full array each
  time, causing the live segment to freeze in the completed list)
- transcriptionStore: saveSegment isFinal branch now appends the passed
  text directly instead of currentSegment (currentSegment was stale
  relative to the incoming final)
- CCTranscriptionPanel: record button colour changed from var(--color-text)
  to explicit #2563eb so it is visible in dark mode; completed segment
  backgrounds changed from hardcoded #fff to var(--color-muted) so text
  is readable in both themes; keyword Add button gets same blue fix

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

src/utils/tldraw/ui-overrides/components/shared/CCTranscriptionPanel.tsx

@@ -365,7 +365,7 @@ export const CCTranscriptionPanel: React.FC = () => {
                 fontSize: "14px",
                 fontWeight: 600,
                 color: "#fff",
-                backgroundColor: isRecording ? "#ef4444" : "var(--color-text)",
+                backgroundColor: isRecording ? "#ef4444" : "#2563eb",
                 transition: "background-color 200ms ease",
               }}
             >
@@ -538,7 +538,7 @@ export const CCTranscriptionPanel: React.FC = () => {
                 key={"completed-" + i}
                 style={{
                   padding: "8px 10px",
-                  backgroundColor: "#fff",
+                  backgroundColor: "var(--color-muted)",
                   borderRadius: "4px",
                   border: "1px solid var(--color-divider)",
                   fontSize: "13px",
@@ -614,7 +614,7 @@ export const CCTranscriptionPanel: React.FC = () => {
                   key={session.id}
                   style={{
                     padding: "10px",
-                    backgroundColor: "#fff",
+                    backgroundColor: "var(--color-muted)",
                     borderRadius: "4px",
                     border: "1px solid var(--color-divider)",
                   }}
@@ -694,7 +694,7 @@ export const CCTranscriptionPanel: React.FC = () => {
                   padding: "6px 10px",
                   border: "none",
                   borderRadius: "4px",
-                  backgroundColor: newKeyword.trim() ? "var(--color-text)" : "var(--color-divider)",
+                  backgroundColor: newKeyword.trim() ? "#2563eb" : "var(--color-divider)",
                   color: "#fff",
                   cursor: newKeyword.trim() ? "pointer" : "not-allowed",
                   fontSize: "13px",
@@ -722,7 +722,7 @@ export const CCTranscriptionPanel: React.FC = () => {
                     alignItems: "center",
                     justifyContent: "space-between",
                     padding: "6px 10px",
-                    backgroundColor: "#fff",
+                    backgroundColor: "var(--color-muted)",
                     borderRadius: "4px",
                     border: "1px solid var(--color-divider)",
                   }}