feat(export): implement ExportButton component

Dropdown with Tasks as JSON, Tasks as CSV, optional Metrics as JSON.
All 8 tests pass.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: h4x0r

src/features/observability/ExportButton.tsx

@@ -1,9 +1,46 @@
-// RED STUB
-import React from "react";
-import type { MetricsExport } from "../../lib/export";
+import React, { useState } from "react";
+import { useStore } from "../../store";
+import { exportTasksAsJson, exportTasksAsCsv, exportMetricsAsJson, triggerDownload, type MetricsExport } from "../../lib/export";
 
 interface Props {
   metrics?: MetricsExport;
 }
 
-export const ExportButton: React.FC<Props> = () => null;
+export const ExportButton: React.FC<Props> = ({ metrics }) => {
+  const [open, setOpen] = useState(false);
+  const tasks = useStore((s) => Object.values(s.tasks));
+
+  const handleJson = () => {
+    triggerDownload(exportTasksAsJson(tasks), `shepherd-tasks-${Date.now()}.json`, "application/json");
+    setOpen(false);
+  };
+  const handleCsv = () => {
+    triggerDownload(exportTasksAsCsv(tasks), `shepherd-tasks-${Date.now()}.csv`, "text/csv");
+    setOpen(false);
+  };
+  const handleMetrics = () => {
+    if (!metrics) return;
+    triggerDownload(exportMetricsAsJson(metrics), `shepherd-metrics-${Date.now()}.json`, "application/json");
+    setOpen(false);
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen((o) => !o)}
+        className="text-sm px-3 py-1.5 bg-shepherd-surface border border-shepherd-border rounded text-shepherd-text hover:bg-shepherd-hover"
+      >
+        Export
+      </button>
+      {open && (
+        <div className="absolute right-0 mt-1 w-44 bg-shepherd-surface border border-shepherd-border rounded shadow-lg z-10">
+          <button onClick={handleJson} className="block w-full text-left px-3 py-2 text-sm hover:bg-shepherd-hover">Tasks as JSON</button>
+          <button onClick={handleCsv} className="block w-full text-left px-3 py-2 text-sm hover:bg-shepherd-hover">Tasks as CSV</button>
+          {metrics && (
+            <button onClick={handleMetrics} className="block w-full text-left px-3 py-2 text-sm hover:bg-shepherd-hover">Metrics as JSON</button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};