refactor: clean up console logs and improve UI consistency

- Removed unnecessary console log statements from various components including TextInputPanel, FormatSection, and FormattedOutput to enhance code clarity.
- Updated text in integration tests for better accuracy in progress indicators.
- Refactored className formatting in WorkspacePage for improved readability and consistency in UI elements.

Author: simandebvu

src/__tests__/integration/component-integration.test.tsx

@@ -97,8 +97,8 @@ describe('Component Integration Tests', () => {
       )
 
       // Should show progress indicator
-      expect(screen.getByText(/Generating Formats \(/)).toBeInTheDocument()
-      expect(screen.getByText(/1\/3/)).toBeInTheDocument()
+      expect(screen.getByText(/Generating Formats \(Format/)).toBeInTheDocument()
+      expect(screen.getByText(/Format 1 of 3/)).toBeInTheDocument()
 
       // Should show currently processing format
       expect(screen.getByText(/Currently processing: paragraphs/)).toBeInTheDocument()

src/components/input/TextInputPanel.tsx

@@ -249,12 +249,8 @@ export const TextInputPanel = ({
           text,
           selectedFormats,
           (format, content, isComplete) => {
-            console.log('[TextInputPanel] Streaming callback:', format, 'isComplete:', isComplete, 'content length:', content.length)
             if (isComplete) {
               aggregatedResults[format] = content
-              console.log('[TextInputPanel] ✅ Format SAVED to aggregatedResults:', format, 'Content length:', content.length)
-            } else {
-              console.log('[TextInputPanel] ⏳ Format streaming (not saved yet):', format)
             }
             // Pass streaming updates to parent
             onStreamingUpdate?.(format, content, isComplete)
@@ -518,13 +514,12 @@ export const TextInputPanel = ({
           <div className="ml-auto flex flex-col items-end gap-1">
             <div className="flex items-center gap-2 text-sm text-neutral-600">
               <span
-                className={`h-2.5 w-2.5 rounded-full ${
-                  formatTransform.availability === 'available' || formatTransform.availability === 'readily'
-                    ? 'bg-green-500'
-                    : formatTransform.availability === 'downloadable'
-                      ? 'bg-yellow-500 animate-pulse'
-                      : 'bg-red-500'
-                }`}
+                className={`h-2.5 w-2.5 rounded-full ${formatTransform.availability === 'available' || formatTransform.availability === 'readily'
+                  ? 'bg-green-500'
+                  : formatTransform.availability === 'downloadable'
+                    ? 'bg-yellow-500 animate-pulse'
+                    : 'bg-red-500'
+                  }`}
                 aria-hidden="true"
               />
               <span>

src/components/output/FormatSection.tsx

@@ -58,12 +58,10 @@ const FormatSectionComponent = ({
   onToggle,
   onCopy,
 }: FormatSectionProps) => {
-  console.log(`[FormatSection ${format}] RENDER - content length: ${content?.length || 0}, isLoading: ${isLoading}, isExpanded: ${isExpanded}`)
 
   const [copySuccess, setCopySuccess] = useState(false)
   const formatConfig = useMemo(() => getFormatConfig(format), [format])
 
-  console.log(`[FormatSection ${format}] formatConfig:`, formatConfig ? 'found' : 'NOT FOUND')
 
   const handleCopy = useCallback(async () => {
     onCopy()
@@ -130,7 +128,7 @@ const FormatSectionComponent = ({
                 <path
                   className="opacity-75"
                   fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 714 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                 />
               </svg>
               <span className="font-medium">Processing...</span>
@@ -155,9 +153,8 @@ const FormatSectionComponent = ({
             </div>
           ) : (
             <svg
-              className={`h-5 w-5 text-neutral-400 transition-transform dark:text-neutral-500 ${
-                isExpanded ? 'rotate-180' : ''
-              }`}
+              className={`h-5 w-5 text-neutral-400 transition-transform dark:text-neutral-500 ${isExpanded ? 'rotate-180' : ''
+                }`}
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"

src/components/output/FormattedOutput.tsx

@@ -409,8 +409,6 @@ export const FormattedOutput = ({
           const isFormatLoading = isLoading?.get(format) ?? false
           const isFormatExpanded = expandedFormats.has(format)
 
-          console.log(`[FormattedOutput RENDER FormatSection] format: ${format}, content length: ${content.length}, isLoading: ${isFormatLoading}, isExpanded: ${isFormatExpanded}`)
-
           return (
             <FormatSection
               key={format}

src/lib/chrome-ai/services/FormatTransformService.ts

@@ -354,9 +354,6 @@ export class FormatTransformService {
       for await (const chunk of this.transformToFormatStreaming(content, format, options)) {
         fullContent += chunk
         chunkCount++
-
-        console.log(`[FormatTransform] ${format} chunk ${chunkCount}: length=${chunk.length}, total=${fullContent.length}`)
-
         // Always split chunks for consistent streaming (more aggressive)
         // Even small chunks get split for smooth progressive display
         if (chunk.length > 20) {
@@ -378,7 +375,6 @@ export class FormatTransformService {
         }
       }
 
-      console.log(`[FormatTransform] ${format} complete: ${chunkCount} chunks, ${fullContent.length} chars total`)
       yield { format, content: fullContent, isComplete: true }
     }
   }