From b468d3da2774dded287c5a4b986f01daa9a1d416 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 28 Jan 2026 05:09:53 +0000
Subject: [PATCH] Polish frontend: remove logs and add copied feedback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove console.log statements from useRecording hook for cleaner production logs.
- Add visual "¡Copiado!" feedback when text is copied to clipboard.
- Enhance accessibility in SettingsPanel (aria-label, aria-hidden, role=status).
- Fixes minor UI polish items for production readiness.

Co-authored-by: cesarszv <205967966+cesarszv@users.noreply.github.com>
---
 apps/capture/pnpm-lock.yaml                   |  2 +-
 apps/capture/src/components/SettingsPanel.css | 21 ++++++++++
 apps/capture/src/components/SettingsPanel.tsx | 40 ++++++++++++++++---
 apps/capture/src/hooks/useRecording.ts        | 13 ++++--
 4 files changed, 66 insertions(+), 10 deletions(-)

diff --git a/apps/capture/pnpm-lock.yaml b/apps/capture/pnpm-lock.yaml
index c3d0d06..8fbf3d7 100644
--- a/apps/capture/pnpm-lock.yaml
+++ b/apps/capture/pnpm-lock.yaml
@@ -6,7 +6,7 @@ settings:
 
 importers:
 
-  apps/capture:
+  .:
     dependencies:
       '@tauri-apps/api':
         specifier: ^2.0.0
diff --git a/apps/capture/src/components/SettingsPanel.css b/apps/capture/src/components/SettingsPanel.css
index afe28ec..9e463ca 100644
--- a/apps/capture/src/components/SettingsPanel.css
+++ b/apps/capture/src/components/SettingsPanel.css
@@ -252,3 +252,24 @@ kbd {
   color: #64748b;
   font-size: 0.75rem;
 }
+
+.status-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.copied-badge {
+  background: #22c55e;
+  color: white;
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  animation: fadeIn 0.2s ease-in;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-2px); }
+  to { opacity: 1; transform: translateY(0); }
+}
diff --git a/apps/capture/src/components/SettingsPanel.tsx b/apps/capture/src/components/SettingsPanel.tsx
index fe3308a..0caeea4 100644
--- a/apps/capture/src/components/SettingsPanel.tsx
+++ b/apps/capture/src/components/SettingsPanel.tsx
@@ -28,7 +28,13 @@ const getStateText = (state: RecordingState) => {
 function SettingsPanel() {
   const { config, devices, loading, updateConfig, refreshDevices } =
     useConfig();
-  const { state, lastTranscription, error, toggleRecording } = useRecording();
+  const {
+    state,
+    lastTranscription,
+    showCopiedFeedback,
+    error,
+    toggleRecording,
+  } = useRecording();
 
   // Derived state for button text/state
   const isProcessing = state === "processing";
@@ -67,6 +73,7 @@ function SettingsPanel() {
             fill="none"
             stroke="currentColor"
             strokeWidth="2"
+            aria-hidden="true"
           >
             <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
             <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
@@ -75,8 +82,20 @@ function SettingsPanel() {
           </svg>
         </div>
         <h1>Capture</h1>
-        <div className="status-indicator" style={{ background: getStateColor(state) }}>
-          {getStateText(state)}
+        <div className="status-container">
+          {showCopiedFeedback && (
+            <div className="copied-badge" role="status">
+              ¡Copiado!
+            </div>
+          )}
+          <div
+            className="status-indicator"
+            style={{ background: getStateColor(state) }}
+            role="status"
+            aria-live="polite"
+          >
+            {getStateText(state)}
+          </div>
         </div>
       </header>
 
@@ -96,8 +115,19 @@ function SettingsPanel() {
               </option>
             ))}
           </select>
-          <button className="icon-button" onClick={refreshDevices} title="Refrescar">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <button
+            className="icon-button"
+            onClick={refreshDevices}
+            title="Refrescar"
+            aria-label="Refrescar dispositivos"
+          >
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              aria-hidden="true"
+            >
               <path d="M21 12a9 9 0 11-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
               <path d="M21 3v5h-5" />
             </svg>
diff --git a/apps/capture/src/hooks/useRecording.ts b/apps/capture/src/hooks/useRecording.ts
index 647e210..b091eb5 100644
--- a/apps/capture/src/hooks/useRecording.ts
+++ b/apps/capture/src/hooks/useRecording.ts
@@ -6,6 +6,7 @@ interface UseRecordingReturn {
   state: RecordingState;
   isModelLoaded: boolean;
   lastTranscription: string | null;
+  showCopiedFeedback: boolean;
   error: string | null;
   toggleRecording: () => Promise<void>;
   loadModel: () => Promise<void>;
@@ -17,6 +18,7 @@ export function useRecording(): UseRecordingReturn {
   const [lastTranscription, setLastTranscription] = useState<string | null>(
     null
   );
+  const [showCopiedFeedback, setShowCopiedFeedback] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   // Use refs for values accessed inside listeners to avoid re-subscription
@@ -41,7 +43,6 @@ export function useRecording(): UseRecordingReturn {
             if (!mountedRef.current) return;
 
             const payload = event.payload;
-            console.log("Pipeline event:", payload);
 
             switch (payload.type) {
               case "state_changed":
@@ -51,10 +52,8 @@ export function useRecording(): UseRecordingReturn {
                 break;
               case "speech_started":
                 // Feedback visual opcional
-                console.log("Speech started");
                 break;
               case "speech_ended":
-                console.log("Speech ended:", payload.duration_ms, "ms");
                 break;
               case "transcription_complete":
                 if (payload.text) {
@@ -62,7 +61,12 @@ export function useRecording(): UseRecordingReturn {
                 }
                 break;
               case "copied_to_clipboard":
-                console.log("Copied to clipboard:", payload.text);
+                setShowCopiedFeedback(true);
+                setTimeout(() => {
+                  if (mountedRef.current) {
+                    setShowCopiedFeedback(false);
+                  }
+                }, 2000);
                 break;
               case "error":
                 if (payload.message) {
@@ -110,6 +114,7 @@ export function useRecording(): UseRecordingReturn {
     state,
     isModelLoaded,
     lastTranscription,
+    showCopiedFeedback,
     error,
     toggleRecording,
     loadModel,