feat: enhance workflows UI and functionality

- Added WorkflowInputPanel component for user input with example prompts and quick run functionality.
- Integrated WorkflowInputPanel into WorkflowCanvas for seamless user interaction.
- Updated WorkflowHeader to include status indicators for running, paused, completed, and error states.
- Refactored WorkflowOutput to display dynamic status icons and messages based on workflow state.
- Improved WorkflowInfoPanel to show error steps and enhanced status display.
- Implemented collapsible WorkflowLegend for better UI organization and accessibility.
- Updated workflow context to handle input data mapping based on selected workflow.
- Removed deprecated acp-providers configuration file.
- Registered all workflows with streaming enabled in the Mastra server routes.
- Updated documentation in memory bank to reflect new workflows and UI components.

Author: ssdeanx

.github/copilot-instructions.md

@@ -8,7 +8,8 @@ applyTo: '**'
 - 🔒 Follow security & style rules in `copilot-rules.md`.
 - 📝 On "/update memory bank", refresh activeContext.md & progress.md.
 - ✅ Confirm memory bank loaded with `[Memory Bank: Active]` or warn with `[Memory Bank: Missing]`.
-
+- 🎯 Always use [`#problem`] tool for debugging, to ensure code quality.
+- 📚 Always sync `#AGENTS.md` in dir your working on so we have up to date info.
 - 🔍 For research, use [#web] or [#websearch] tool and to make sure you have no knowledge gaps.
 - 🤖 Check if there is a problem, use [#problem] tool to check code for errors.
   - This tool will help you identify issues and suggest fixes.

app/workflows/AGENTS.md

@@ -1,5 +1,7 @@
 # Workflows Feature
 
+<!-- AGENTS-META {"title":"Workflows Visualization","version":"1.1.0","applies_to":"app/workflows/","last_updated":"2025-12-04T00:00:00Z","status":"stable"} -->
+
 ## Overview
 
 The workflows page provides an interactive visualization of Mastra workflows using AI Elements components (Canvas, Node, Edge, Panel, Controls, Toolbar, Connection) with real-time streaming via `@ai-sdk/react` and `@mastra/ai-sdk`.
@@ -10,67 +12,145 @@ Follows the same modular pattern as the chat feature:
 
 ```text
 app/workflows/
-├── page.tsx              # Main page component (clean, minimal)
+├── page.tsx                      # Main page component (clean, minimal)
+├── AGENTS.md                     # This documentation file
 ├── config/
-│   └── workflows.ts      # Workflow definitions and types
+│   └── workflows.ts              # Workflow definitions and types (10 workflows)
 ├── providers/
-│   └── workflow-context.tsx  # State management with useChat
+│   └── workflow-context.tsx      # State management with useChat + DefaultChatTransport
 └── components/
-    ├── workflow-header.tsx   # Header with workflow selector
-    ├── workflow-canvas.tsx   # React Flow canvas wrapper
-    ├── workflow-node.tsx     # Custom node component
-    ├── workflow-info-panel.tsx   # Info panel (top-left)
-    ├── workflow-legend.tsx   # Legend panel (bottom-left)
-    ├── workflow-actions.tsx  # Actions panel (top-right)
-    └── workflow-output.tsx   # Streaming output panel (bottom-right)
+    ├── workflow-header.tsx       # Header with workflow selector + status badges
+    ├── workflow-canvas.tsx       # React Flow canvas wrapper
+    ├── workflow-node.tsx         # Custom node component with status indicators
+    ├── workflow-info-panel.tsx   # Info panel (top-left) - name, description, progress
+    ├── workflow-legend.tsx       # Collapsible legend panel (top-right)
+    ├── workflow-actions.tsx      # Actions panel (top-right) - fit view, export, code
+    ├── workflow-input-panel.tsx  # Input panel (bottom-left) - query input + examples
+    └── workflow-output.tsx       # Streaming output panel (bottom-right)
 ```
 
 ## AI SDK Integration
 
-Uses `useChat` from `@ai-sdk/react` with `DefaultChatTransport` to connect to Mastra's `/workflow` route:
+Uses `useChat` from `@ai-sdk/react` with `DefaultChatTransport` to connect to Mastra's `/workflow/:workflowId` routes:
 
 ```tsx
 import { useChat } from "@ai-sdk/react"
 import { DefaultChatTransport } from "ai"
 
 const { messages, sendMessage, stop, status } = useChat({
   transport: new DefaultChatTransport({
-    api: "http://localhost:4111/workflow",
+    api: `http://localhost:4111/workflow/${selectedWorkflow}`,
     prepareSendMessagesRequest({ messages }) {
-      return {
-        body: {
-          inputData: { workflowId, input: messages[messages.length - 1]?.parts?.[0]?.text },
-        },
-      }
+      const inputText = messages[messages.length - 1]?.parts?.[0]?.text ?? ""
+      const inputData = buildWorkflowInputData(selectedWorkflow, inputText)
+      return { body: { inputData } }
     },
   }),
 })
 ```
 
-## AI Elements Used
-
-- **Canvas**: React Flow wrapper with pre-configured defaults
-- **Node**: Card-based node with header, content, footer
-- **Edge**: Animated and temporary edge types
-- **Panel**: Positioned panels for UI overlays
-- **Controls**: Zoom/pan controls
-- **Toolbar**: Node-attached toolbar with actions
-- **Connection**: Custom bezier curve connection lines
+### Input Data Mapping
+
+Each workflow expects specific input fields:
+
+| Workflow | Input Field | Example |
+|----------|-------------|---------|
+| weatherWorkflow | `{ city }` | "San Francisco" |
+| contentStudioWorkflow | `{ topic }` | "AI trends 2025" |
+| stockAnalysisWorkflow | `{ symbol }` | "AAPL" |
+| financialReportWorkflow | `{ symbol }` | "TSLA" |
+| researchSynthesisWorkflow | `{ topic }` | "ML best practices" |
+| documentProcessingWorkflow | `{ documentPath }` | "./docs/report.pdf" |
+| telephoneGameWorkflow | `{ message }` | "Hello world" |
+| changelogWorkflow | `{ repository }` | "main..HEAD" |
+| contentReviewWorkflow | `{ content }` | "Your content here" |
+| learningExtractionWorkflow | `{ content }` | "Text to analyze" |
+
+## AI Elements Components Used
+
+| Component | Purpose |
+|-----------|---------|
+| **Canvas** | React Flow wrapper with pre-configured defaults |
+| **Node** | Card-based node with header, content, footer |
+| **Edge** | Animated (active) and temporary (pending) edge types |
+| **Panel** | Positioned panels for UI overlays |
+| **Controls** | Zoom/pan controls |
+| **Toolbar** | Node-attached toolbar with actions |
+| **Connection** | Custom bezier curve connection lines |
 
 ## Workflow Configuration
 
 All 10 Mastra workflows are configured in `config/workflows.ts`:
 
-- weatherWorkflow
-- contentStudioWorkflow
-- contentReviewWorkflow
-- documentProcessingWorkflow
-- financialReportWorkflow
-- learningExtractionWorkflow
-- researchSynthesisWorkflow
-- stockAnalysisWorkflow
-- telephoneGameWorkflow
-- changelogWorkflow
+| Workflow | Category | Steps |
+|----------|----------|-------|
+| weatherWorkflow | utility | 2 |
+| contentStudioWorkflow | content | 8 |
+| contentReviewWorkflow | content | 3 |
+| documentProcessingWorkflow | data | 4 |
+| financialReportWorkflow | financial | 4 |
+| learningExtractionWorkflow | research | 3 |
+| researchSynthesisWorkflow | research | 4 |
+| stockAnalysisWorkflow | financial | 4 |
+| telephoneGameWorkflow | utility | 5 |
+| changelogWorkflow | utility | 3 |
+
+## Context API
+
+`useWorkflowContext()` provides:
+
+```tsx
+interface WorkflowContextValue {
+  // State
+  selectedWorkflow: WorkflowId
+  workflowConfig: WorkflowConfig | undefined
+  workflowStatus: "idle" | "running" | "paused" | "completed" | "error"
+  currentRun: WorkflowRun | null
+  activeStepIndex: number
+  
+  // Actions
+  selectWorkflow: (workflowId: WorkflowId) => void
+  runWorkflow: (inputData?: Record<string, unknown>) => void
+  pauseWorkflow: () => void
+  resumeWorkflow: () => void
+  stopWorkflow: () => void
+  runStep: (stepId: string) => Promise<void>
+  getStepStatus: (stepId: string) => StepStatus
+  
+  // React Flow data
+  nodes: WorkflowNode[]
+  edges: WorkflowEdge[]
+  
+  // Streaming
+  messages: UIMessage[]
+  streamingOutput: string
+}
+```
+
+## Panel Layout
+
+```text
+┌─────────────────────────────────────────────────────────────┐
+│ [Info Panel]                              [Actions] [Legend] │
+│  - Workflow name                           Fit / Export      │
+│  - Description                             Code / Legend     │
+│  - Progress & status                                         │
+├─────────────────────────────────────────────────────────────┤
+│                                                             │
+│                    [Canvas with Nodes]                      │
+│                                                             │
+│    ┌─────┐      ┌─────┐      ┌─────┐      ┌─────┐          │
+│    │Step │ ──── │Step │ ──── │Step │ ──── │Step │          │
+│    │  1  │      │  2  │      │  3  │      │  N  │          │
+│    └─────┘      └─────┘      └─────┘      └─────┘          │
+│                                                             │
+├─────────────────────────────────────────────────────────────┤
+│ [Input Panel]                              [Output Panel]    │
+│  - Placeholder by category                 - Status icon     │
+│  - Example inputs                          - Streaming text  │
+│  - Quick Run button                        - Message history │
+└─────────────────────────────────────────────────────────────┘
+```
 
 ## Usage
 
@@ -79,21 +159,30 @@ import { WorkflowProvider } from "./providers/workflow-context"
 import { WorkflowHeader } from "./components/workflow-header"
 import { WorkflowCanvas } from "./components/workflow-canvas"
 
-<WorkflowProvider defaultWorkflow="contentStudioWorkflow">
-  <WorkflowHeader />
-  <WorkflowCanvas />
-</WorkflowProvider>
+export default function WorkflowsPage() {
+  return (
+    <WorkflowProvider defaultWorkflow="contentStudioWorkflow">
+      <main className="flex h-screen flex-col bg-background">
+        <WorkflowHeader />
+        <WorkflowCanvas />
+      </main>
+    </WorkflowProvider>
+  )
+}
 ```
 
-## Context API
+## Server Routes (Mastra)
 
-`useWorkflowContext()` provides:
+The workflows connect to these routes in `src/mastra/index.ts`:
+
+```typescript
+workflowRoute({
+  path: "/workflow",
+  workflow: "weatherWorkflow",
+  includeTextStreamParts: true,
+}),
+// ... repeated for all 10 workflows
+```
 
-- `selectedWorkflow` - Currently selected workflow ID
-- `workflowConfig` - Current workflow configuration
-- `workflowStatus` - idle | running | paused | completed | error
-- `nodes` / `edges` - Generated React Flow nodes and edges
-- `runWorkflow(inputData?)` - Execute via AI SDK streaming
-- `stopWorkflow()` - Stop the streaming workflow
-- `messages` - AI SDK message history
-- `streamingOutput` - Current streaming text output
+---
+Last updated: 2025-12-04

app/workflows/components/workflow-actions.tsx

@@ -3,41 +3,70 @@
 import { Panel } from "@/src/components/ai-elements/panel"
 import { Button } from "@/ui/button"
 import { useWorkflowContext } from "@/app/workflows/providers/workflow-context"
-import { DownloadIcon, CodeIcon } from "lucide-react"
+import { DownloadIcon, CodeIcon, ExternalLinkIcon } from "lucide-react"
+import { useCallback } from "react"
+import { useReactFlow } from "@xyflow/react"
 
 export function WorkflowActions() {
   const { workflowConfig } = useWorkflowContext()
 
-  const handleExportSvg = () => {
-    // TODO: Implement SVG export using React Flow's toSvg method
-    console.log("Export SVG for:", workflowConfig?.id)
+  let reactFlowInstance: ReturnType<typeof useReactFlow> | null = null
+  try {
+    reactFlowInstance = useReactFlow()
+  } catch {
+    // Not inside ReactFlow context yet
   }
 
-  const handleViewCode = () => {
-    // TODO: Open code modal or navigate to code view
-    console.log("View code for:", workflowConfig?.id)
-  }
+  const handleExportSvg = useCallback(() => {
+    if (!workflowConfig) return
+    // Use React Flow's built-in export if available
+    console.log("Export SVG for:", workflowConfig.id)
+    // TODO: Implement actual SVG export
+  }, [workflowConfig])
+
+  const handleViewCode = useCallback(() => {
+    if (!workflowConfig) return
+    // Open workflow source code
+    const workflowPath = `/src/mastra/workflows/${workflowConfig.id.replace(/([A-Z])/g, '-$1').toLowerCase().replace(/^-/, '')}.ts`
+    window.open(`vscode://file${workflowPath}`, '_blank')
+  }, [workflowConfig])
+
+  const handleFitView = useCallback(() => {
+    reactFlowInstance?.fitView({ padding: 0.3, duration: 300 })
+  }, [reactFlowInstance])
 
   return (
     <Panel position="top-right" className="p-2">
       <div className="flex gap-2">
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={handleFitView}
+          className="h-8"
+          title="Fit to view"
+        >
+          <ExternalLinkIcon className="size-3 mr-1" />
+          Fit View
+        </Button>
         <Button
           size="sm"
           variant="outline"
           onClick={handleExportSvg}
           className="h-8"
+          title="Export as SVG"
         >
           <DownloadIcon className="size-3 mr-1" />
-          Export SVG
+          Export
         </Button>
         <Button
           size="sm"
           variant="outline"
           onClick={handleViewCode}
           className="h-8"
+          title="View workflow source code"
         >
           <CodeIcon className="size-3 mr-1" />
-          View Code
+          Code
         </Button>
       </div>
     </Panel>

app/workflows/components/workflow-canvas.tsx

@@ -10,6 +10,7 @@ import { WorkflowInfoPanel } from "./workflow-info-panel"
 import { WorkflowLegend } from "./workflow-legend"
 import { WorkflowActions } from "./workflow-actions"
 import { WorkflowOutput } from "./workflow-output"
+import { WorkflowInputPanel } from "./workflow-input-panel"
 import type { ReactNode } from "react"
 
 const edgeTypes = {
@@ -40,6 +41,7 @@ export function WorkflowCanvas({ children }: WorkflowCanvasProps) {
         <WorkflowLegend />
         <WorkflowActions />
         <WorkflowOutput />
+        <WorkflowInputPanel />
         {children}
       </Canvas>
     </div>