@jlongo78/agent-spaces 0.7.7 → 0.8.0

package/.next/standalone/src/components/cortex/marketplace-card.tsx

@@ -1,126 +1,126 @@
-'use client';
-
-import { useState } from 'react';
-import { Package, ChevronDown, ChevronUp } from 'lucide-react';
-
-interface MarketplaceCardProps {
-  filename: string;
-  manifest: any;
-  onImport: (filename: string, manifest: any) => void;
-}
-
-export function MarketplaceCard({ filename, manifest, onImport }: MarketplaceCardProps) {
-  const [previewOpen, setPreviewOpen] = useState(false);
-
-  const meta = manifest.marketplace ?? {};
-  const name = meta.name || filename;
-  const version = manifest.version || meta.version || '0.0.0';
-  const author = meta.author || manifest.author || 'Unknown';
-  const description = meta.description || manifest.description || '';
-  const tags: string[] = meta.tags || manifest.tags || [];
-  const license: string = meta.license || manifest.license || '';
-  const coverage: number = typeof meta.coverage_score === 'number' ? meta.coverage_score : -1;
-  const unitCount: number =
-    typeof manifest.unit_count === 'number'
-      ? manifest.unit_count
-      : Array.isArray(manifest.units)
-      ? manifest.units.length
-      : 0;
-  const preview: string = meta.preview || manifest.preview || '';
-
-  const coverageColor =
-    coverage < 0
-      ? 'text-gray-500'
-      : coverage > 0.7
-      ? 'text-green-400'
-      : coverage > 0.3
-      ? 'text-amber-400'
-      : 'text-red-400';
-
-  const coverageLabel =
-    coverage < 0 ? 'N/A' : `${Math.round(coverage * 100)}%`;
-
-  return (
-    <div className="border border-white/10 rounded-xl p-4 bg-white/[0.02] flex flex-col gap-3 hover:border-white/20 transition-colors">
-      {/* Header row */}
-      <div className="flex items-start gap-3">
-        <div className="shrink-0 w-9 h-9 rounded-lg bg-purple-500/10 flex items-center justify-center">
-          <Package className="w-4 h-4 text-purple-400" />
-        </div>
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-sm font-semibold text-gray-100 truncate">{name}</span>
-            <span className="text-[10px] px-1.5 py-0.5 rounded bg-white/5 text-gray-400 font-mono shrink-0">
-              v{version}
-            </span>
-          </div>
-          <p className="text-[11px] text-gray-500 mt-0.5">{author}</p>
-        </div>
-      </div>
-
-      {/* Description */}
-      {description && (
-        <p className="text-xs text-gray-400 leading-relaxed line-clamp-2">{description}</p>
-      )}
-
-      {/* Tags + license */}
-      <div className="flex flex-wrap items-center gap-1.5">
-        {tags.map(tag => (
-          <span
-            key={tag}
-            className="text-[10px] px-1.5 py-0.5 rounded bg-white/5 text-gray-400 border border-white/5"
-          >
-            {tag}
-          </span>
-        ))}
-        {license && (
-          <span className="text-[10px] px-1.5 py-0.5 rounded bg-purple-500/10 text-purple-400 border border-purple-500/20 font-medium">
-            {license}
-          </span>
-        )}
-      </div>
-
-      {/* Stats row */}
-      <div className="flex items-center gap-4 text-[11px]">
-        <div className="flex items-center gap-1">
-          <span className="text-gray-600">Coverage:</span>
-          <span className={`font-semibold tabular-nums ${coverageColor}`}>{coverageLabel}</span>
-        </div>
-        <div className="flex items-center gap-1">
-          <span className="text-gray-600">Units:</span>
-          <span className="text-gray-300 font-semibold tabular-nums">{unitCount}</span>
-        </div>
-      </div>
-
-      {/* Expandable preview */}
-      {preview && (
-        <div>
-          <button
-            onClick={() => setPreviewOpen(v => !v)}
-            className="flex items-center gap-1 text-[11px] text-gray-500 hover:text-gray-300 transition-colors"
-          >
-            {previewOpen ? (
-              <ChevronUp className="w-3 h-3" />
-            ) : (
-              <ChevronDown className="w-3 h-3" />
-            )}
-            {previewOpen ? 'Hide preview' : 'Show preview'}
-          </button>
-          {previewOpen && (
-            <pre className="mt-2 text-[10px] text-gray-400 bg-white/[0.03] border border-white/5 rounded-lg p-3 overflow-x-auto whitespace-pre-wrap break-all">
-              {preview}
-            </pre>
-          )}
-        </div>
-      )}
-
-      {/* Import button */}
-      <button
-        onClick={() => onImport(filename, manifest)}
-        className="w-full py-2 text-sm font-medium bg-purple-600 hover:bg-purple-500 text-white rounded-lg transition-colors"
-      >
-        Import
-      </button>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { Package, ChevronDown, ChevronUp } from 'lucide-react';
+
+interface MarketplaceCardProps {
+  filename: string;
+  manifest: any;
+  onImport: (filename: string, manifest: any) => void;
+}
+
+export function MarketplaceCard({ filename, manifest, onImport }: MarketplaceCardProps) {
+  const [previewOpen, setPreviewOpen] = useState(false);
+
+  const meta = manifest.marketplace ?? {};
+  const name = meta.name || filename;
+  const version = manifest.version || meta.version || '0.0.0';
+  const author = meta.author || manifest.author || 'Unknown';
+  const description = meta.description || manifest.description || '';
+  const tags: string[] = meta.tags || manifest.tags || [];
+  const license: string = meta.license || manifest.license || '';
+  const coverage: number = typeof meta.coverage_score === 'number' ? meta.coverage_score : -1;
+  const unitCount: number =
+    typeof manifest.unit_count === 'number'
+      ? manifest.unit_count
+      : Array.isArray(manifest.units)
+      ? manifest.units.length
+      : 0;
+  const preview: string = meta.preview || manifest.preview || '';
+
+  const coverageColor =
+    coverage < 0
+      ? 'text-gray-500'
+      : coverage > 0.7
+      ? 'text-green-400'
+      : coverage > 0.3
+      ? 'text-amber-400'
+      : 'text-red-400';
+
+  const coverageLabel =
+    coverage < 0 ? 'N/A' : `${Math.round(coverage * 100)}%`;
+
+  return (
+    <div className="border border-white/10 rounded-xl p-4 bg-white/[0.02] flex flex-col gap-3 hover:border-white/20 transition-colors">
+      {/* Header row */}
+      <div className="flex items-start gap-3">
+        <div className="shrink-0 w-9 h-9 rounded-lg bg-purple-500/10 flex items-center justify-center">
+          <Package className="w-4 h-4 text-purple-400" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-sm font-semibold text-gray-100 truncate">{name}</span>
+            <span className="text-[10px] px-1.5 py-0.5 rounded bg-white/5 text-gray-400 font-mono shrink-0">
+              v{version}
+            </span>
+          </div>
+          <p className="text-[11px] text-gray-500 mt-0.5">{author}</p>
+        </div>
+      </div>
+
+      {/* Description */}
+      {description && (
+        <p className="text-xs text-gray-400 leading-relaxed line-clamp-2">{description}</p>
+      )}
+
+      {/* Tags + license */}
+      <div className="flex flex-wrap items-center gap-1.5">
+        {tags.map(tag => (
+          <span
+            key={tag}
+            className="text-[10px] px-1.5 py-0.5 rounded bg-white/5 text-gray-400 border border-white/5"
+          >
+            {tag}
+          </span>
+        ))}
+        {license && (
+          <span className="text-[10px] px-1.5 py-0.5 rounded bg-purple-500/10 text-purple-400 border border-purple-500/20 font-medium">
+            {license}
+          </span>
+        )}
+      </div>
+
+      {/* Stats row */}
+      <div className="flex items-center gap-4 text-[11px]">
+        <div className="flex items-center gap-1">
+          <span className="text-gray-600">Coverage:</span>
+          <span className={`font-semibold tabular-nums ${coverageColor}`}>{coverageLabel}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          <span className="text-gray-600">Units:</span>
+          <span className="text-gray-300 font-semibold tabular-nums">{unitCount}</span>
+        </div>
+      </div>
+
+      {/* Expandable preview */}
+      {preview && (
+        <div>
+          <button
+            onClick={() => setPreviewOpen(v => !v)}
+            className="flex items-center gap-1 text-[11px] text-gray-500 hover:text-gray-300 transition-colors"
+          >
+            {previewOpen ? (
+              <ChevronUp className="w-3 h-3" />
+            ) : (
+              <ChevronDown className="w-3 h-3" />
+            )}
+            {previewOpen ? 'Hide preview' : 'Show preview'}
+          </button>
+          {previewOpen && (
+            <pre className="mt-2 text-[10px] text-gray-400 bg-white/[0.03] border border-white/5 rounded-lg p-3 overflow-x-auto whitespace-pre-wrap break-all">
+              {preview}
+            </pre>
+          )}
+        </div>
+      )}
+
+      {/* Import button */}
+      <button
+        onClick={() => onImport(filename, manifest)}
+        className="w-full py-2 text-sm font-medium bg-purple-600 hover:bg-purple-500 text-white rounded-lg transition-colors"
+      >
+        Import
+      </button>
+    </div>
+  );
+}

package/.next/standalone/src/components/cortex/marketplace-tab.tsx

@@ -1,113 +1,113 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-import { FolderOpen, RefreshCw } from 'lucide-react';
-import { api } from '@/lib/api';
-import { MarketplaceCard } from './marketplace-card';
-import { ImportDialog } from './import-dialog';
-
-interface PackEntry {
-  filename: string;
-  manifest: any;
-}
-
-interface BrowseResponse {
-  packs?: PackEntry[];
-  directory?: string;
-}
-
-export function MarketplaceTab() {
-  const [packs, setPacks] = useState<PackEntry[]>([]);
-  const [directory, setDirectory] = useState<string>('');
-  const [loading, setLoading] = useState(false);
-  const [importTarget, setImportTarget] = useState<PackEntry | null>(null);
-
-  const fetchPacks = useCallback(async () => {
-    setLoading(true);
-    try {
-      const res = await fetch(api('/api/cortex/marketplace/browse'));
-      if (res.ok) {
-        const data: BrowseResponse = await res.json();
-        setPacks(data.packs ?? []);
-        if (data.directory) setDirectory(data.directory);
-      }
-    } catch {}
-    setLoading(false);
-  }, []);
-
-  useEffect(() => {
-    fetchPacks();
-  }, [fetchPacks]);
-
-  const handleImportClick = (filename: string, manifest: any) => {
-    setImportTarget({ filename, manifest });
-  };
-
-  const handleImportComplete = () => {
-    setImportTarget(null);
-    fetchPacks();
-  };
-
-  const hasDomainContext =
-    importTarget?.manifest?.marketplace?.domain_context != null ||
-    importTarget?.manifest?.domain_context != null;
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="p-4 border-b border-white/5 flex items-center justify-between gap-3">
-        <div>
-          <h2 className="text-sm font-semibold text-gray-100">Marketplace</h2>
-          {directory && (
-            <p className="text-[11px] text-gray-600 font-mono mt-0.5 truncate">{directory}</p>
-          )}
-        </div>
-        <button
-          onClick={fetchPacks}
-          disabled={loading}
-          className="flex items-center gap-1.5 text-xs text-gray-400 hover:text-gray-200 transition-colors disabled:opacity-50"
-        >
-          <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />
-          Refresh
-        </button>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto p-4">
-        {loading && packs.length === 0 && (
-          <p className="text-sm text-gray-500 text-center py-12">Loading...</p>
-        )}
-
-        {!loading && packs.length === 0 && (
-          <div className="flex flex-col items-center justify-center gap-3 py-16 text-gray-600">
-            <FolderOpen className="w-8 h-8" />
-            <p className="text-sm">No .cortexpack files found</p>
-          </div>
-        )}
-
-        {packs.length > 0 && (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            {packs.map(pack => (
-              <MarketplaceCard
-                key={pack.filename}
-                filename={pack.filename}
-                manifest={pack.manifest}
-                onImport={handleImportClick}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Import dialog */}
-      {importTarget && (
-        <ImportDialog
-          filename={importTarget.filename}
-          hasDomainContext={hasDomainContext}
-          onClose={() => setImportTarget(null)}
-          onComplete={handleImportComplete}
-        />
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { FolderOpen, RefreshCw } from 'lucide-react';
+import { api } from '@/lib/api';
+import { MarketplaceCard } from './marketplace-card';
+import { ImportDialog } from './import-dialog';
+
+interface PackEntry {
+  filename: string;
+  manifest: any;
+}
+
+interface BrowseResponse {
+  packs?: PackEntry[];
+  directory?: string;
+}
+
+export function MarketplaceTab() {
+  const [packs, setPacks] = useState<PackEntry[]>([]);
+  const [directory, setDirectory] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+  const [importTarget, setImportTarget] = useState<PackEntry | null>(null);
+
+  const fetchPacks = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(api('/api/cortex/marketplace/browse'));
+      if (res.ok) {
+        const data: BrowseResponse = await res.json();
+        setPacks(data.packs ?? []);
+        if (data.directory) setDirectory(data.directory);
+      }
+    } catch {}
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchPacks();
+  }, [fetchPacks]);
+
+  const handleImportClick = (filename: string, manifest: any) => {
+    setImportTarget({ filename, manifest });
+  };
+
+  const handleImportComplete = () => {
+    setImportTarget(null);
+    fetchPacks();
+  };
+
+  const hasDomainContext =
+    importTarget?.manifest?.marketplace?.domain_context != null ||
+    importTarget?.manifest?.domain_context != null;
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="p-4 border-b border-white/5 flex items-center justify-between gap-3">
+        <div>
+          <h2 className="text-sm font-semibold text-gray-100">Marketplace</h2>
+          {directory && (
+            <p className="text-[11px] text-gray-600 font-mono mt-0.5 truncate">{directory}</p>
+          )}
+        </div>
+        <button
+          onClick={fetchPacks}
+          disabled={loading}
+          className="flex items-center gap-1.5 text-xs text-gray-400 hover:text-gray-200 transition-colors disabled:opacity-50"
+        >
+          <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} />
+          Refresh
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4">
+        {loading && packs.length === 0 && (
+          <p className="text-sm text-gray-500 text-center py-12">Loading...</p>
+        )}
+
+        {!loading && packs.length === 0 && (
+          <div className="flex flex-col items-center justify-center gap-3 py-16 text-gray-600">
+            <FolderOpen className="w-8 h-8" />
+            <p className="text-sm">No .cortexpack files found</p>
+          </div>
+        )}
+
+        {packs.length > 0 && (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {packs.map(pack => (
+              <MarketplaceCard
+                key={pack.filename}
+                filename={pack.filename}
+                manifest={pack.manifest}
+                onImport={handleImportClick}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Import dialog */}
+      {importTarget && (
+        <ImportDialog
+          filename={importTarget.filename}
+          hasDomainContext={hasDomainContext}
+          onClose={() => setImportTarget(null)}
+          onComplete={handleImportComplete}
+        />
+      )}
+    </div>
+  );
+}

package/.next/standalone/src/components/dashboard/activity-chart.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';
+import type { DailyActivity } from '@/types/claude';
+
+interface ActivityChartProps {
+  dailyActivity: DailyActivity[];
+}
+
+export function ActivityChart({ dailyActivity }: ActivityChartProps) {
+  const data = (dailyActivity || []).slice(-30).map((d) => ({
+    date: new Date(d.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+    messages: d.messageCount,
+    sessions: d.sessionCount,
+  }));
+
+  return (
+    <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-4">
+      <h3 className="font-semibold mb-4">Daily Activity (Last 30 Days)</h3>
+      {data.length === 0 ? (
+        <p className="text-sm text-muted-foreground h-[200px] flex items-center justify-center">No activity data</p>
+      ) : (
+        <ResponsiveContainer width="100%" height={200}>
+          <BarChart data={data}>
+            <XAxis dataKey="date" tick={{ fontSize: 11 }} />
+            <YAxis tick={{ fontSize: 11 }} />
+            <Tooltip
+              contentStyle={{
+                background: 'var(--background)',
+                border: '1px solid var(--border)',
+                borderRadius: '0.5rem',
+                fontSize: '12px',
+              }}
+            />
+            <Bar dataKey="messages" fill="#6366f1" radius={[2, 2, 0, 0]} />
+          </BarChart>
+        </ResponsiveContainer>
+      )}
+    </div>
+  );
+}

package/.next/standalone/src/components/dashboard/model-usage-chart.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
+import type { ModelUsage } from '@/types/claude';
+import { getModelDisplayName } from '@/lib/cost-calculator';
+
+interface ModelUsageChartProps {
+  modelUsage: Record<string, ModelUsage>;
+}
+
+const COLORS = ['#6366f1', '#8b5cf6', '#a78bfa', '#c4b5fd', '#ddd6fe'];
+
+export function ModelUsageChart({ modelUsage }: ModelUsageChartProps) {
+  const data = Object.entries(modelUsage || {}).map(([model, usage]) => ({
+    name: getModelDisplayName(model),
+    tokens: usage.inputTokens + usage.outputTokens,
+  })).sort((a, b) => b.tokens - a.tokens);
+
+  return (
+    <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-4">
+      <h3 className="font-semibold mb-4">Model Usage</h3>
+      {data.length === 0 ? (
+        <p className="text-sm text-muted-foreground h-[200px] flex items-center justify-center">No model data</p>
+      ) : (
+        <ResponsiveContainer width="100%" height={200}>
+          <PieChart>
+            <Pie
+              data={data}
+              cx="50%"
+              cy="50%"
+              innerRadius={50}
+              outerRadius={80}
+              paddingAngle={2}
+              dataKey="tokens"
+              nameKey="name"
+            >
+              {data.map((_, index) => (
+                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+              ))}
+            </Pie>
+            <Tooltip
+              formatter={(value) => {
+                const v = Number(value);
+                if (v >= 1_000_000) return `${(v / 1_000_000).toFixed(1)}M tokens`;
+                if (v >= 1_000) return `${(v / 1_000).toFixed(0)}K tokens`;
+                return `${v} tokens`;
+              }}
+              contentStyle={{
+                background: 'var(--background)',
+                border: '1px solid var(--border)',
+                borderRadius: '0.5rem',
+                fontSize: '12px',
+              }}
+            />
+            <Legend formatter={(value) => <span className="text-xs">{value}</span>} />
+          </PieChart>
+        </ResponsiveContainer>
+      )}
+    </div>
+  );
+}

package/.next/standalone/src/components/dashboard/recent-sessions.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import Link from 'next/link';
+import { formatRelativeTime, truncate } from '@/lib/utils';
+import type { SessionWithMeta } from '@/types/claude';
+import { MessageSquare, Star, GitBranch } from 'lucide-react';
+
+interface RecentSessionsProps {
+  sessions: SessionWithMeta[];
+}
+
+export function RecentSessions({ sessions }: RecentSessionsProps) {
+  if (!sessions?.length) {
+    return (
+      <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-6">
+        <h2 className="font-semibold mb-4">Recent Sessions</h2>
+        <p className="text-sm text-muted-foreground">No sessions found.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg">
+      <div className="p-4 border-b border-zinc-200 dark:border-zinc-800">
+        <h2 className="font-semibold">Recent Sessions</h2>
+      </div>
+      <div className="divide-y divide-zinc-200 dark:divide-zinc-800">
+        {sessions.map((session) => (
+          <Link
+            key={session.id}
+            href={`/sessions/${session.id}`}
+            className="flex items-start gap-3 p-4 hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors"
+          >
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                {session.starred && <Star className="w-3 h-3 text-amber-500 fill-amber-500 flex-shrink-0" />}
+                <p className="text-sm font-medium truncate">
+                  {session.customName || session.summary || truncate(session.firstPrompt, 80)}
+                </p>
+              </div>
+              <div className="flex items-center gap-3 mt-1 text-xs text-muted-foreground">
+                <span className="truncate">{session.projectName}</span>
+                {session.gitBranch && (
+                  <span className="flex items-center gap-1">
+                    <GitBranch className="w-3 h-3" />
+                    {session.gitBranch}
+                  </span>
+                )}
+                <span className="flex items-center gap-1">
+                  <MessageSquare className="w-3 h-3" />
+                  {session.messageCount}
+                </span>
+              </div>
+            </div>
+            <span className="text-xs text-muted-foreground whitespace-nowrap">
+              {formatRelativeTime(session.modified)}
+            </span>
+          </Link>
+        ))}
+      </div>
+      <div className="p-3 border-t border-zinc-200 dark:border-zinc-800">
+        <Link href="/sessions" className="text-sm text-indigo-500 hover:text-indigo-600">
+          View all sessions
+        </Link>
+      </div>
+    </div>
+  );
+}