initial commit

src/renderer/components/Panel/Panel.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useAppStore } from '../../store';
+import './Panel.css';
+
+export const Panel: React.FC = () => {
+  const { panelVisible, tasks } = useAppStore();
+
+  if (!panelVisible) {
+    return null;
+  }
+
+  const recentTasks = tasks.slice(-10).reverse();
+
+  return (
+    <div className="panel">
+      <div className="panel-header">
+        <div className="panel-tabs">
+          <div className="panel-tab active">Tasks</div>
+          <div className="panel-tab">Output</div>
+          <div className="panel-tab">Sync Log</div>
+        </div>
+        <button 
+          className="panel-close"
+          onClick={() => useAppStore.getState().togglePanel()}
+          title="Close Panel"
+        >
+          ×
+        </button>
+      </div>
+      <div className="panel-content">
+        {recentTasks.length === 0 ? (
+          <div className="panel-empty">No recent tasks</div>
+        ) : (
+          <div className="task-list">
+            {recentTasks.map(task => (
+              <div key={task.taskId} className={`task-item status-${task.status}`}>
+                <div className="task-status">
+                  {task.status === 'running' && <span className="task-spinner" />}
+                  {task.status === 'completed' && <span className="task-check">✓</span>}
+                  {task.status === 'failed' && <span className="task-error">✗</span>}
+                  {task.status === 'pending' && <span className="task-pending">○</span>}
+                </div>
+                <div className="task-info">
+                  <div className="task-message">{task.message}</div>
+                  {task.status === 'running' && (
+                    <div className="task-progress-bar">
+                      <div 
+                        className="task-progress-fill" 
+                        style={{ width: `${task.progress}%` }}
+                      />
+                    </div>
+                  )}
+                </div>
+                {task.status === 'running' && (
+                  <button 
+                    className="task-cancel"
+                    onClick={() => window.electronAPI?.tasks.cancel(task.taskId)}
+                  >
+                    Cancel
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};