feat: cycle time activate check friend

src/components/friend/frontend/App.tsx

@@ -75,7 +75,7 @@ export default function App() {
   const [screenObserve, setScreenObserve] = useState(false)
   const [screenObserveInterval, setScreenObserveInterval] = useState(60)
   const [language, setLanguage] = useState<'zh' | 'en'>(() => navigator.language.startsWith('zh') ? 'zh' : 'en')
-  const [sttProvider, setSttProvider] = useState<'browser' | 'anthropic' | 'local' | 'doubao'>('browser')
+  const [sttProvider, setSttProvider] = useState<'browser' | 'groq' | 'anthropic' | 'local' | 'doubao'>('browser')
   const t = (zh: string, en: string) => language === 'en' ? en : zh
   usePassThrough(!settingsOpen && !historyOpen)
 

src/components/friend/frontend/components/TextBubble.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, useRef, useCallback } from 'react'
+import { marked } from 'marked'
 import { FRIEND_API } from '../api'
 import { LipSync } from '../lip-sync'
 
@@ -50,6 +51,7 @@ export function TextBubble({ onMessage, enabled = true, ttsEnabled = true }: { o
   const [thinking, setThinking] = useState(false)
   const [imageUrl, setImageUrl] = useState<string | null>(null)
   const [zoomedSrc, setZoomedSrc] = useState<string | null>(null)
+  const [renderedHtml, setRenderedHtml] = useState('')
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const typewriterRef = useRef<ReturnType<typeof setInterval> | null>(null)
   const scrollRef = useRef<HTMLDivElement>(null)
@@ -90,10 +92,25 @@ export function TextBubble({ onMessage, enabled = true, ttsEnabled = true }: { o
     }
   }, [charCount])
 
+  // Render markdown when all text is revealed (typewriter complete)
+  useEffect(() => {
+    if (charCount >= chars.current.length && chars.current.length > 0) {
+      try {
+        const html = marked.parse(fullTextRef.current)
+        setRenderedHtml(typeof html === 'string' ? html : String(html))
+      } catch {
+        setRenderedHtml('')
+      }
+    } else if (!text) {
+      setRenderedHtml('')
+    }
+  }, [charCount, text])
+
   const hideBubble = useCallback(() => {
     setVisible(false)
     setText('')
     setCharCount(0)
+    setRenderedHtml('')
     setImageUrl(null)
     setThinking(false)
     chars.current = []
@@ -443,11 +460,31 @@ export function TextBubble({ onMessage, enabled = true, ttsEnabled = true }: { o
             )}
             {text && (
               <div style={textStyle}>
-                {chars.current.map((ch, i) => (
-                  i < charCount ? (
-                    <span key={i} style={popCharStyle}>{ch === '\n' ? <br /> : ch}</span>
-                  ) : null
-                ))}
+                {renderedHtml && charCount >= chars.current.length ? (
+                  <>
+                    <style>{`
+                      .rendered-markdown p { margin: 0.3em 0; }
+                      .rendered-markdown ul, .rendered-markdown ol { margin: 0.3em 0; padding-left: 1.5em; }
+                      .rendered-markdown li { margin: 0.1em 0; }
+                      .rendered-markdown code { background: rgba(255,255,255,0.12); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
+                      .rendered-markdown pre { background: rgba(0,0,0,0.35); padding: 10px; border-radius: 8px; overflow-x: auto; margin: 0.4em 0; }
+                      .rendered-markdown pre code { background: none; padding: 0; border-radius: 0; }
+                      .rendered-markdown strong { color: rgba(160,200,255,0.9); }
+                      .rendered-markdown em { color: rgba(200,200,255,0.8); }
+                      .rendered-markdown h1, .rendered-markdown h2, .rendered-markdown h3, .rendered-markdown h4 { margin: 0.4em 0 0.2em; }
+                      .rendered-markdown a { color: rgba(100,160,255,0.9); text-decoration: underline; }
+                      .rendered-markdown blockquote { border-left: 3px solid rgba(100,160,255,0.5); padding-left: 10px; margin: 0.4em 0; color: rgba(255,255,255,0.7); }
+                      .rendered-markdown hr { border: none; border-top: 1px solid rgba(255,255,255,0.15); margin: 0.5em 0; }
+                    `}</style>
+                    <div dangerouslySetInnerHTML={{ __html: renderedHtml }} className="rendered-markdown" />
+                  </>
+                ) : (
+                  chars.current.map((ch, i) => (
+                    i < charCount ? (
+                      <span key={i} style={popCharStyle}>{ch === '\n' ? <br /> : ch}</span>
+                    ) : null
+                  ))
+                )}
               </div>
             )}
           </div>

src/components/friend/frontend/hooks/useServerStt.ts

@@ -1,5 +1,5 @@
 /**
- * Hook for using server-side STT (Anthropic Voice Stream, Local Whisper, Doubao)
+ * Hook for using server-side STT (Groq Whisper, Anthropic Voice Stream, Local Whisper, Doubao)
  * in the Friend Tauri app.
  *
  * Audio capture is done server-side via cpal (in-process native addon)
@@ -8,7 +8,10 @@
  *
  * Two modes:
  *   - push-to-talk: POST /voice/start → capture → POST /voice/stop → get text
- *   - streaming:    POST /voice/start → poll /voice/status → POST /voice/stop
+ *   - streaming:    POST /voice/start → poll /voice/status + auto-cycle every 3s
+ *
+ * The auto-cycle in streaming mode ensures batch STT providers (Groq, local Whisper)
+ * produce regular final transcripts even though they don't support interim results.
  */
 import { useRef, useCallback, useState } from 'react'
 
@@ -18,10 +21,13 @@ export type SttProvider = 'browser' | 'groq' | 'anthropic' | 'local' | 'doubao'
 
 export function useServerStt() {
   const [connected, setConnected] = useState(false)
+  const cycleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const cycleAccumRef = useRef('')
+  const streamingGenRef = useRef(0) // generation counter to prevent stale callbacks
 
   // ── Push-to-talk ──────────────────────────────────────────────────────
 
-  /** Start push-to-talk: tell backend to start audio capture via cpal. */
+  /** Start push-to-talk: tell backend to start audio capture. */
   const startPushToTalk = useCallback(
     async (_provider: SttProvider, _language: string): Promise<void> => {
       const res = await fetch(`${FRIEND_API_BASE}/voice/start`, {
@@ -47,11 +53,48 @@ export function useServerStt() {
     return data.text || ''
   }, [])
 
-  // ── Streaming (voice call) ────────────────────────────────────────────
+  // ── Streaming (voice call) with auto-cycle ────────────────────────────
+
+  const doCycle = useCallback(
+    (onTranscript: (text: string, isFinal: boolean) => void, gen: number): void => {
+      const isStale = () => streamingGenRef.current !== gen
+      fetch(`${FRIEND_API_BASE}/voice/stop`, { method: 'POST' })
+        .then(async (res) => {
+          if (isStale()) return
+          if (!res.ok) return
+          const data = await res.json()
+          if (data.text?.trim()) {
+            cycleAccumRef.current += data.text
+            onTranscript(cycleAccumRef.current, true)
+          }
+        })
+        .then(() => {
+          if (isStale()) return
+          // Restart capture for next cycle
+          return fetch(`${FRIEND_API_BASE}/voice/start`, { method: 'POST' })
+        })
+        .then(async (res) => {
+          if (isStale()) return
+          if (!res?.ok) {
+            setConnected(false)
+            return
+          }
+          setConnected(true)
+          // Schedule next cycle in 3s
+          cycleTimerRef.current = setTimeout(
+            () => doCycle(onTranscript, gen),
+            3000,
+          )
+        })
+        .catch(() => {})
+    },
+    [],
+  )
 
   /**
    * Start streaming STT for voice call mode.
-   * Transcripts arrive via polling /voice/status.
+   * Polls interim results every 500ms AND auto-cycles every 3s to get
+   * final transcripts from batch STT providers (Groq, local Whisper).
    */
   const startStreaming = useCallback(
     (
@@ -60,18 +103,26 @@ export function useServerStt() {
       onError: (err: string) => void,
       _language = 'zh',
     ) => {
-      // Start capture
+      // Clean up any existing state and bump generation
+      cycleAccumRef.current = ''
+      const myGen = ++streamingGenRef.current
+      const existingPollId = (window as any).__friendSttPollId
+      if (existingPollId) { clearInterval(existingPollId); delete (window as any).__friendSttPollId }
+      if (cycleTimerRef.current) { clearTimeout(cycleTimerRef.current); cycleTimerRef.current = null }
+
       fetch(`${FRIEND_API_BASE}/voice/start`, { method: 'POST' })
         .then(async (res) => {
+          if (streamingGenRef.current !== myGen) return
           if (!res.ok) {
             const body = await res.json().catch(() => ({}))
             throw new Error(body.error || 'STT start failed')
           }
           setConnected(true)
 
-          // Poll for interim results every 500ms
+          // Poll for interim results every 500ms (works with streaming STT providers)
           const pollId = setInterval(async () => {
             try {
+              if (streamingGenRef.current !== myGen) { clearInterval(pollId); return }
               const statusRes = await fetch(`${FRIEND_API_BASE}/voice/status`, {
                 method: 'POST',
               })
@@ -84,30 +135,43 @@ export function useServerStt() {
               // poll failed, ignore
             }
           }, 500)
-
-          // Store poll ID for cleanup
           ;(window as any).__friendSttPollId = pollId
+
+          // Schedule first auto-cycle in 3s (for batch STT providers like Groq)
+          cycleTimerRef.current = setTimeout(
+            () => doCycle(onTranscript, myGen),
+            3000,
+          )
         })
         .catch((err) => {
-          onError(err.message)
+          if (streamingGenRef.current === myGen) {
+            onError(err.message)
+          }
         })
     },
-    [],
+    [doCycle],
   )
 
   /**
    * Stop streaming STT.
-   * Returns the final transcript text from the server.
+   * Cleans up poll interval and auto-cycle, then returns the final transcript.
    */
   const stopStreaming = useCallback(async (): Promise<string> => {
-    // Stop polling
+    // Stop all activity by bumping generation counter
+    streamingGenRef.current++
     const pollId = (window as any).__friendSttPollId
     if (pollId) {
       clearInterval(pollId)
       delete (window as any).__friendSttPollId
     }
 
-    // Stop capture and get final transcript
+    // Stop auto-cycle
+    if (cycleTimerRef.current) {
+      clearTimeout(cycleTimerRef.current)
+      cycleTimerRef.current = null
+    }
+    cycleAccumRef.current = ''
+
     const res = await fetch(`${FRIEND_API_BASE}/voice/stop`, { method: 'POST' })
     setConnected(false)
     if (!res.ok) return ''

src/components/friend/frontend/package-lock.json

@@ -12,6 +12,7 @@
         "@pixiv/three-vrm-animation": "^3.5.0",
         "@pixiv/three-vrm-core": "^3.5.1",
         "lucide-react": "^0.577.0",
+        "marked": "^18.0.5",
         "mmd-parser": "^1.0.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -2005,6 +2006,18 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/marked": {
+      "version": "18.0.5",
+      "resolved": "https://registry.npmmirror.com/marked/-/marked-18.0.5.tgz",
+      "integrity": "sha512-S6GcvALHg6K4ohtu4E7x0a1AqhAjp6cV8KhLSyN9qVapnzJkusVBxZRcIU9AeYsbe6P1hKDusSbEOzGyyuce6w==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/meshoptimizer": {
       "version": "0.18.1",
       "resolved": "https://registry.npmmirror.com/meshoptimizer/-/meshoptimizer-0.18.1.tgz",

src/components/friend/frontend/package.json

@@ -12,6 +12,7 @@
     "@pixiv/three-vrm-animation": "^3.5.0",
     "@pixiv/three-vrm-core": "^3.5.1",
     "lucide-react": "^0.577.0",
+    "marked": "^18.0.5",
     "mmd-parser": "^1.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",