Teach Mode - fixes (#127)

* editable goal

* editable goal UI + saving updates to workflow

* show details when view processing is done

* fix: processing title

* fix: progress counter in preprocessing agent

* UI: hide pause/reset in teach mode

* UI: background and other consistency fixes

* remove un-used components

Author: shadowfax92

src/background/handlers/TeachModeHandler.ts

@@ -359,4 +359,29 @@ export class TeachModeHandler {
       })
     }
   }
+
+  /**
+   * Handle update workflow request
+   */
+  async handleTeachModeUpdateWorkflow(
+    message: PortMessage,
+    port: chrome.runtime.Port
+  ): Promise<void> {
+    try {
+      const { recordingId, updates } = message.payload as any
+      const success = await this.teachModeService.updateWorkflow(recordingId, updates)
+      port.postMessage({
+        type: MessageType.TEACH_MODE_UPDATE_WORKFLOW,
+        payload: { success },
+        id: message.id
+      })
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      port.postMessage({
+        type: MessageType.TEACH_MODE_UPDATE_WORKFLOW,
+        payload: { success: false, error: errorMessage },
+        id: message.id
+      })
+    }
+  }
 }

src/background/index.ts

@@ -197,6 +197,11 @@ function registerHandlers(): void {
     (msg, port) => teachModeHandler.handleTeachModeGetWorkflow(msg, port)
   )
 
+  messageRouter.registerHandler(
+    MessageType.TEACH_MODE_UPDATE_WORKFLOW,
+    (msg, port) => teachModeHandler.handleTeachModeUpdateWorkflow(msg, port)
+  )
+
   // Log handler
   messageRouter.registerHandler(
     MessageType.LOG_MESSAGE,

src/lib/agent/PreprocessAgent.ts

@@ -66,21 +66,25 @@ export class PreprocessAgent {
       const validatedRecording = TeachModeRecordingSchema.parse(recording);
       Logging.log("PreprocessAgent", `Processing recording with ${validatedRecording.events.length} events`, "info");
 
+      // Filter out session events for processing count
+      const eventsToProcess = validatedRecording.events.filter(
+        e => e.action.type !== 'session_start' && e.action.type !== 'session_end'
+      );
+
       // Emit preprocessing started
       this._emitProgress('preprocessing_started', {
-        totalEvents: validatedRecording.events.filter(
-          e => e.action.type !== 'session_start' && e.action.type !== 'session_end'
-        ).length
+        totalEvents: eventsToProcess.length
       });
 
       // Transcribe audio if present and narration not already set
       let transcript = validatedRecording.narration?.transcript || "";
       if (!transcript && validatedRecording.audio) {
         Logging.log("PreprocessAgent", "Transcribing audio recording...", "info");
 
-        // Emit progress for transcription stage
         this._emitProgress('preprocessing_progress', {
           stage: 'transcription',
+          current: 0,
+          total: eventsToProcess.length,
           message: 'Transcribing audio narration...'
         });
 
@@ -91,17 +95,19 @@ export class PreprocessAgent {
           // Emit debug info for transcript
           this._emitDebug('Transcript extracted', transcript);
 
-          // Emit progress with transcription complete
           this._emitProgress('preprocessing_progress', {
             stage: 'transcription',
+            current: 0,
+            total: eventsToProcess.length,
             message: 'Transcription completed',
             transcript
           });
         } catch (error) {
           Logging.log("PreprocessAgent", `Transcription failed: ${error}`, "warning");
-          // Continue without transcript - no special error event needed
           this._emitProgress('preprocessing_progress', {
             stage: 'transcription',
+            current: 0,
+            total: eventsToProcess.length,
             message: 'Continuing without transcription',
             error: String(error)
           });
@@ -118,11 +124,6 @@ export class PreprocessAgent {
       const steps: SemanticWorkflow['steps'] = [];
       let previousState: StateSnapshot | undefined;
 
-      // Filter out session events for processing count
-      const eventsToProcess = validatedRecording.events.filter(
-        e => e.action.type !== 'session_start' && e.action.type !== 'session_end'
-      );
-
       let processedCount = 0;
       for (let i = 0; i < validatedRecording.events.length; i++) {
         const event = validatedRecording.events[i];

src/lib/services/TeachModeService.ts

@@ -412,10 +412,15 @@ export class TeachModeService {
     try {
       const storage = RecordingStorage.getInstance()
 
-      // Generate title based on URL and time
+      // Generate title with processing indicator
       const url = new URL(recording.session.url)
       const date = new Date(recording.session.startTimestamp)
-      const title = `${url.hostname} - ${date.toLocaleString()}`
+      const timeString = date.toLocaleTimeString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+      })
+      const title = `Processing - ${url.hostname} ${timeString}`
 
       // Save recording to storage immediately
       const recordingId = await storage.save(recording, title)
@@ -424,12 +429,6 @@ export class TeachModeService {
       // Start async preprocessing - fire and forget
       this._startAsyncPreprocessing(recordingId, recording)
 
-      // Optionally export immediately
-      if (await this._shouldAutoExport()) {
-        await storage.export(recordingId)
-        Logging.log('TeachModeService', `Auto-exported recording ${recordingId}`)
-      }
-
       return recordingId
     } catch (error) {
       Logging.log('TeachModeService', `Failed to save recording: ${error}`, 'error')
@@ -492,18 +491,6 @@ export class TeachModeService {
     }
   }
 
-  /**
-   * Check if auto-export is enabled
-   */
-  private async _shouldAutoExport(): Promise<boolean> {
-    try {
-      const result = await chrome.storage.local.get('teachMode_autoExport')
-      return result.teachMode_autoExport === true
-    } catch {
-      return false
-    }
-  }
-
   /**
    * Cleanup when tab is closed
    */
@@ -562,6 +549,14 @@ export class TeachModeService {
     return await storage.getWorkflow(recordingId)
   }
 
+  /**
+   * Update workflow for a recording with partial changes
+   */
+  async updateWorkflow(recordingId: string, updates: any): Promise<boolean> {
+    const storage = RecordingStorage.getInstance()
+    return await storage.updateWorkflow(recordingId, updates)
+  }
+
   /**
    * Delete workflow for a recording
    */

src/lib/teach-mode/storage/RecordingStorage.ts

@@ -132,6 +132,40 @@ export class RecordingStorage {
     }
   }
 
+  /**
+   * Update an existing workflow with partial changes
+   */
+  async updateWorkflow(recordingId: string, updates: Partial<SemanticWorkflow>): Promise<boolean> {
+    try {
+      // Get existing workflow
+      const existingWorkflow = await this.getWorkflow(recordingId)
+      if (!existingWorkflow) {
+        Logging.log('RecordingStorage', `Workflow for recording ${recordingId} not found`, 'warning')
+        return false
+      }
+
+      // Deep merge updates with existing workflow
+      const updatedWorkflow: SemanticWorkflow = {
+        ...existingWorkflow,
+        metadata: {
+          ...existingWorkflow.metadata,
+          ...(updates.metadata || {})
+        },
+        steps: updates.steps || existingWorkflow.steps
+      }
+
+      // Save the updated workflow
+      await this.saveWorkflow(recordingId, updatedWorkflow)
+
+      Logging.log('RecordingStorage', `Updated workflow for recording ${recordingId}`)
+      return true
+
+    } catch (error) {
+      Logging.log('RecordingStorage', `Failed to update workflow for ${recordingId}: ${error}`, 'error')
+      return false
+    }
+  }
+
   /**
    * Get a recording by ID
    */

src/lib/types/messaging.ts

@@ -52,6 +52,7 @@ export enum MessageType {
   TEACH_MODE_STATS = 'TEACH_MODE_STATS',
   TEACH_MODE_SEARCH = 'TEACH_MODE_SEARCH',
   TEACH_MODE_GET_WORKFLOW = 'TEACH_MODE_GET_WORKFLOW',
+  TEACH_MODE_UPDATE_WORKFLOW = 'TEACH_MODE_UPDATE_WORKFLOW',
   EXECUTE_TEACH_MODE_WORKFLOW = 'EXECUTE_TEACH_MODE_WORKFLOW',
 }
 

src/sidepanel/App.tsx

@@ -86,6 +86,7 @@ export function App() {
           }}
           showReset={messages.length > 0 || (appMode === 'teach' && teachModeState !== 'idle')}
           isProcessing={isExecuting}
+          isTeachMode={appMode === 'teach'}
         />
 
         {/* Main content area - changes based on mode */}

src/sidepanel/components/Header.tsx

@@ -22,14 +22,15 @@ interface HeaderProps {
   onReset: () => void
   showReset: boolean  // This now means "has messages to reset"
   isProcessing: boolean
+  isTeachMode?: boolean  // Hide pause/reset buttons in teach mode
 }
 
 /**
  * Header component for the sidepanel
  * Displays title, connection status, and action buttons (pause/reset)
  * Memoized to prevent unnecessary re-renders
  */
-export const Header = memo(function Header({ onReset, showReset, isProcessing }: HeaderProps) {
+export const Header = memo(function Header({ onReset, showReset, isProcessing, isTeachMode = false }: HeaderProps) {
   const { sendMessage, connected, addMessageListener, removeMessageListener } = useSidePanelPortMessaging()
   const { trackClick } = useAnalytics()
   const [showSettings, setShowSettings] = useState(false)
@@ -308,8 +309,8 @@ export const Header = memo(function Header({ onReset, showReset, isProcessing }:
             </div>
           )}
 
-          {/* Show Pause button if processing */}
-          {isProcessing && (
+          {/* Show Pause button if processing and NOT in teach mode */}
+          {isProcessing && !isTeachMode && (
             <Button
               onClick={handleCancel}
               variant="ghost"
@@ -321,9 +322,9 @@ export const Header = memo(function Header({ onReset, showReset, isProcessing }:
               <Pause className="w-4 h-4" />
             </Button>
           )}
-          
-          {/* Show Reset button if has messages */}
-          {showReset && (
+
+          {/* Show Reset button if has messages and NOT in teach mode */}
+          {showReset && !isTeachMode && (
             <Button
               onClick={handleReset}
               variant="ghost"