feat: complete Phase 1 MVP - add agent panel, email notifications, and PDF invoicing

Agent Panel UI:
- Visual dashboard showing all agents with status (idle/working)
- Agent cards with stats: total tasks, completed tasks
- Capabilities display for each agent
- Execution log showing recent agent activity
- Real-time updates (refreshes every 10 seconds)
- Click agent to filter execution log
- Status indicators: pending, running, completed, failed, pending_approval

Email Notifications:
- SMTP email service with HTML templates
- Task assignment notifications
- Agent approval request emails with action details
- Agent completion notifications
- Configurable via environment variables (SMTP_HOST, SMTP_USER, SMTP_PASSWORD, SMTP_TO)
- Integrated with agent executor service

PDF Invoice Generation:
- Professional PDF invoices using ReportLab
- Generate from time entries by project
- Client information and company branding
- Itemized time entries with hours, rates, amounts
- Automatic totals calculation
- Download as PDF attachment
- API endpoints: /api/opc/invoices/generate
- Projects and clients management endpoints

Additional Features:
- Projects CRUD API
- Clients CRUD API
- Project time tracking summary
- Billable vs non-billable hours tracking

Phase 1 MVP 100% Complete:
✅ PostgreSQL database with full schema
✅ Task CRUD API with automatic time tracking
✅ Kanban board with drag-and-drop
✅ Agent executor service with LLM integration
✅ WebSocket real-time updates
✅ 3 core agents (PM, CTO, COO)
✅ Agent panel UI with execution logs
✅ Email notifications (Telegram + Email)
✅ PDF invoice generation

All 12 tasks completed!

dashboard/frontend/src/routes/OPC.svelte

@@ -2,6 +2,7 @@
   import { onMount, onDestroy } from "svelte";
   import KanbanBoard from "../components/opc/KanbanBoard.svelte";
   import TaskModal from "../components/opc/TaskModal.svelte";
+  import AgentPanel from "../components/opc/AgentPanel.svelte";
   import { getTasks, getAgents } from "../lib/opc-api.js";
   import * as opcWs from "../lib/opc-ws.js";
 
@@ -10,6 +11,7 @@
   let loading = $state(true);
   let showTaskModal = $state(false);
   let editingTask = $state(null);
+  let showAgentPanel = $state(false);
   let unsubscribe = null;
 
   async function loadData() {
@@ -112,13 +114,22 @@
         Manage your tasks with AI agents
       </p>
     </div>
-    <button
-      onclick={handleCreateTask}
-      class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 flex items-center gap-2"
-    >
-      <span>➕</span>
-      <span>New Task</span>
-    </button>
+    <div class="flex gap-2">
+      <button
+        onclick={() => showAgentPanel = !showAgentPanel}
+        class="px-4 py-2 bg-surface-200 dark:bg-surface-700 text-surface-900 dark:text-surface-100 rounded-lg hover:bg-surface-300 dark:hover:bg-surface-600 flex items-center gap-2"
+      >
+        <span>🤖</span>
+        <span>{showAgentPanel ? "Hide" : "Show"} Agents</span>
+      </button>
+      <button
+        onclick={handleCreateTask}
+        class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 flex items-center gap-2"
+      >
+        <span>➕</span>
+        <span>New Task</span>
+      </button>
+    </div>
   </div>
 
   <!-- Stats -->
@@ -166,6 +177,13 @@
       />
     </div>
   {/if}
+
+  <!-- Agent Panel -->
+  {#if showAgentPanel}
+    <div class="mt-6">
+      <AgentPanel />
+    </div>
+  {/if}
 </div>
 
 <!-- Task Modal -->