@jlongo78/agent-spaces 0.7.6 → 0.8.0

package/.next/standalone/src/app/(desktop)/cortex/page.tsx

@@ -1,78 +1,81 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import dynamic from 'next/dynamic';
-import { api } from '@/lib/api';
-import { KnowledgeTab } from '@/components/cortex/knowledge-tab';
-import { CortexSettings } from '@/components/cortex/cortex-settings';
-import { CortexDashboard } from '@/components/cortex/cortex-dashboard';
-import { CurationTab } from '@/components/cortex/curation-tab';
-import { MarketplaceTab } from '@/components/cortex/marketplace-tab';
-
-const EntityGraphView = dynamic(
-  () => import('@/components/cortex/entity-graph').then(m => ({ default: m.EntityGraphView })),
-  { ssr: false, loading: () => <div className="flex-1 flex items-center justify-center text-gray-500 text-sm">Loading graph...</div> }
-);
-
-type Tab = 'dashboard' | 'graph' | 'knowledge' | 'curation' | 'marketplace' | 'settings';
-
-export default function CortexPage() {
-  const [tab, setTab] = useState<Tab>('dashboard');
-  const [stats, setStats] = useState<any>(null);
-  useEffect(() => {
-    fetch(api('/api/cortex/status'))
-      .then(r => r.json())
-      .then(setStats)
-      .catch(() => {});
-  }, []);
-
-  const tabs: { key: Tab; label: string }[] = [
-    { key: 'dashboard', label: 'Dashboard' },
-    { key: 'graph', label: 'Graph' },
-    { key: 'knowledge', label: 'Knowledge' },
-    { key: 'curation', label: 'Curation' },
-    { key: 'marketplace', label: 'Marketplace' },
-    { key: 'settings', label: 'Settings' },
-  ];
-
-  const totalKnowledge = stats
-    ? Object.values(stats.layers || {}).reduce((sum: number, l: any) => sum + (l.count || 0), 0)
-    : 0;
-
-  return (
-    <div className="flex flex-col h-screen bg-gray-950">
-      <div className="flex items-center border-b border-white/5 px-4 shrink-0">
-        <div className="flex">
-          {tabs.map(t => (
-            <button
-              key={t.key}
-              onClick={() => setTab(t.key)}
-              className={`px-5 py-3 text-sm font-medium transition-colors border-b-2 ${
-                tab === t.key
-                  ? 'text-purple-400 border-purple-400'
-                  : 'text-gray-500 border-transparent hover:text-gray-300'
-              }`}
-            >
-              {t.label}
-            </button>
-          ))}
-        </div>
-        <div className="ml-auto text-xs text-gray-600">
-          {totalKnowledge} knowledge units
-        </div>
-      </div>
-      <div className="flex-1 overflow-y-auto">
-        {tab === 'dashboard' && <CortexDashboard />}
-        {tab === 'graph' && <EntityGraphView />}
-        {tab === 'knowledge' && <KnowledgeTab />}
-        {tab === 'curation' && <CurationTab />}
-        {tab === 'marketplace' && <MarketplaceTab />}
-        {tab === 'settings' && (
-          <div className="p-6 max-w-2xl space-y-8">
-            <CortexSettings />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState, useEffect } from 'react';
+import dynamic from 'next/dynamic';
+import { api } from '@/lib/api';
+import { KnowledgeTab } from '@/components/cortex/knowledge-tab';
+import { CortexSettings } from '@/components/cortex/cortex-settings';
+import { CortexDashboard } from '@/components/cortex/cortex-dashboard';
+import { CurationTab } from '@/components/cortex/curation-tab';
+import { MarketplaceTab } from '@/components/cortex/marketplace-tab';
+import { BenchmarkTab } from '@/components/cortex/benchmark-tab';
+
+const EntityGraphView = dynamic(
+  () => import('@/components/cortex/entity-graph').then(m => ({ default: m.EntityGraphView })),
+  { ssr: false, loading: () => <div className="flex-1 flex items-center justify-center text-gray-500 text-sm">Loading graph...</div> }
+);
+
+type Tab = 'dashboard' | 'graph' | 'knowledge' | 'curation' | 'marketplace' | 'benchmark' | 'settings';
+
+export default function CortexPage() {
+  const [tab, setTab] = useState<Tab>('dashboard');
+  const [stats, setStats] = useState<any>(null);
+  useEffect(() => {
+    fetch(api('/api/cortex/status'))
+      .then(r => r.json())
+      .then(setStats)
+      .catch(() => {});
+  }, []);
+
+  const tabs: { key: Tab; label: string }[] = [
+    { key: 'dashboard', label: 'Dashboard' },
+    { key: 'graph', label: 'Graph' },
+    { key: 'knowledge', label: 'Knowledge' },
+    { key: 'curation', label: 'Curation' },
+    { key: 'marketplace', label: 'Marketplace' },
+    { key: 'benchmark', label: 'Benchmark' },
+    { key: 'settings', label: 'Settings' },
+  ];
+
+  const totalKnowledge = stats
+    ? Object.values(stats.layers || {}).reduce((sum: number, l: any) => sum + (l.count || 0), 0)
+    : 0;
+
+  return (
+    <div className="flex flex-col h-screen bg-gray-950">
+      <div className="flex items-center border-b border-white/5 px-4 shrink-0">
+        <div className="flex">
+          {tabs.map(t => (
+            <button
+              key={t.key}
+              onClick={() => setTab(t.key)}
+              className={`px-5 py-3 text-sm font-medium transition-colors border-b-2 ${
+                tab === t.key
+                  ? 'text-purple-400 border-purple-400'
+                  : 'text-gray-500 border-transparent hover:text-gray-300'
+              }`}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+        <div className="ml-auto text-xs text-gray-600">
+          {totalKnowledge} knowledge units
+        </div>
+      </div>
+      <div className="flex-1 overflow-y-auto">
+        {tab === 'dashboard' && <CortexDashboard />}
+        {tab === 'graph' && <EntityGraphView />}
+        {tab === 'knowledge' && <KnowledgeTab />}
+        {tab === 'curation' && <CurationTab />}
+        {tab === 'marketplace' && <MarketplaceTab />}
+        {tab === 'benchmark' && <BenchmarkTab />}
+        {tab === 'settings' && (
+          <div className="p-6 max-w-2xl space-y-8">
+            <CortexSettings />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/.next/standalone/src/app/(desktop)/dashboard-client.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useAnalytics } from '@/hooks/use-sessions';
+import { StatsCards } from '@/components/dashboard/stats-cards';
+import { RecentSessions } from '@/components/dashboard/recent-sessions';
+import { ActivityChart } from '@/components/dashboard/activity-chart';
+import { ModelUsageChart } from '@/components/dashboard/model-usage-chart';
+import { Loader2 } from 'lucide-react';
+
+export default function DashboardClient() {
+  const { data, isLoading, error } = useAnalytics();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="flex flex-col items-center gap-3">
+          <Loader2 className="w-8 h-8 animate-spin text-indigo-500" />
+          <p className="text-sm text-muted-foreground">Loading dashboard...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-8">
+        <p className="text-red-500">Failed to load dashboard. Make sure at least one agent data directory exists (~/.claude/, ~/.codex/, or ~/.gemini/).</p>
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  return (
+    <div className="p-6 space-y-6 max-w-7xl">
+      <div>
+        <h1 className="text-2xl font-bold">Dashboard</h1>
+        <p className="text-muted-foreground text-sm mt-1">Your agent activity at a glance</p>
+      </div>
+
+      <StatsCards
+        totalSessions={data.totalSessions}
+        totalMessages={data.totalMessages}
+        totalProjects={data.totalProjects}
+        estimatedCost={data.estimatedCost}
+      />
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <ActivityChart dailyActivity={data.dailyActivity} />
+        <ModelUsageChart modelUsage={data.modelUsage} />
+      </div>
+
+      <RecentSessions sessions={data.recentSessions} />
+    </div>
+  );
+}

package/.next/standalone/src/app/(desktop)/layout.tsx

@@ -0,0 +1,18 @@
+import { Sidebar } from "@/components/layout/sidebar";
+import { UpdateBanner } from "@/components/layout/update-banner";
+
+export default function DesktopLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <main className="flex-1 ml-56 flex flex-col">
+        <UpdateBanner />
+        <div className="flex-1">{children}</div>
+      </main>
+    </div>
+  );
+}

package/.next/standalone/src/app/(desktop)/network/page.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useState } from 'react';
+import { useNodeIdentity, useUpdateNodeName } from '@/hooks/use-network';
+import { NodeList } from '@/components/network/node-list';
+import { ApiKeyList } from '@/components/network/api-key-list';
+import { ConnectionRequests } from '@/components/network/connection-requests';
+import { Pencil, Check, X, Loader2, Copy } from 'lucide-react';
+
+export default function NetworkPage() {
+  const { data: identity, isLoading } = useNodeIdentity();
+  const updateName = useUpdateNodeName();
+
+  const [editing, setEditing] = useState(false);
+  const [nameValue, setNameValue] = useState('');
+  const [copiedId, setCopiedId] = useState(false);
+
+  const saveName = () => {
+    if (nameValue.trim()) {
+      updateName.mutate(nameValue.trim());
+    }
+    setEditing(false);
+  };
+
+  const copyNodeId = () => {
+    if (identity?.nodeId) {
+      navigator.clipboard.writeText(identity.nodeId);
+      setCopiedId(true);
+      setTimeout(() => setCopiedId(false), 2000);
+    }
+  };
+
+  return (
+    <div className="p-6 max-w-4xl">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold">Network</h1>
+        <p className="text-muted-foreground text-sm mt-1">
+          Connect to other Spaces instances and manage API keys
+        </p>
+      </div>
+
+      {/* This Node */}
+      <section className="mb-8">
+        <h2 className="text-sm font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-3">
+          This Node
+        </h2>
+
+        {isLoading ? (
+          <div className="flex items-center gap-2 py-4">
+            <Loader2 className="w-4 h-4 animate-spin text-zinc-400" />
+            <span className="text-sm text-zinc-400">Loading...</span>
+          </div>
+        ) : identity ? (
+          <div className="border border-zinc-200 dark:border-zinc-800 rounded-lg p-4 space-y-2">
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-zinc-500 w-16">Name</span>
+              {editing ? (
+                <div className="flex items-center gap-1">
+                  <input
+                    autoFocus
+                    value={nameValue}
+                    onChange={(e) => setNameValue(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') saveName();
+                      if (e.key === 'Escape') setEditing(false);
+                    }}
+                    className="px-2 py-0.5 text-sm bg-white dark:bg-zinc-950 border border-indigo-400 rounded focus:outline-none"
+                  />
+                  <button onClick={saveName} className="text-green-500 hover:text-green-400 p-0.5">
+                    <Check className="w-3.5 h-3.5" />
+                  </button>
+                  <button onClick={() => setEditing(false)} className="text-zinc-400 hover:text-zinc-300 p-0.5">
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              ) : (
+                <div className="flex items-center gap-1 group">
+                  <span className="text-sm font-medium">{identity.nodeName}</span>
+                  <button
+                    onClick={() => { setNameValue(identity.nodeName); setEditing(true); }}
+                    className="opacity-0 group-hover:opacity-100 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 p-0.5"
+                  >
+                    <Pencil className="w-3 h-3" />
+                  </button>
+                </div>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-zinc-500 w-16">Node ID</span>
+              <span className="text-sm font-mono text-zinc-600 dark:text-zinc-400">{identity.nodeId}</span>
+              <button
+                onClick={copyNodeId}
+                className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 p-0.5"
+                title="Copy node ID"
+              >
+                {copiedId ? <Check className="w-3 h-3 text-green-500" /> : <Copy className="w-3 h-3" />}
+              </button>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-zinc-500 w-16">Version</span>
+              <span className="text-sm text-zinc-600 dark:text-zinc-400">{identity.version}</span>
+            </div>
+          </div>
+        ) : null}
+      </section>
+
+      {/* Connection Requests */}
+      <section className="mb-8">
+        <ConnectionRequests />
+      </section>
+
+      {/* API Keys */}
+      <section className="mb-8">
+        <h2 className="text-sm font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-3">
+          API Keys
+        </h2>
+        <p className="text-xs text-zinc-400 mb-3">
+          Share an API key with other nodes so they can connect to this instance.
+        </p>
+        <ApiKeyList />
+      </section>
+
+      {/* Nodes */}
+      <section>
+        <h2 className="text-sm font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider mb-3">
+          Nodes
+        </h2>
+        <p className="text-xs text-zinc-400 mb-3">
+          Remote Spaces instances on your network. Connect with an API key to share sessions and terminals.
+        </p>
+        <NodeList />
+      </section>
+    </div>
+  );
+}

package/.next/standalone/src/app/(desktop)/page.tsx

@@ -0,0 +1,17 @@
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+import DashboardClient from './dashboard-client';
+import { HAS_AUTH } from '@/lib/tier';
+
+export const dynamic = 'force-dynamic';
+
+export default async function DashboardPage() {
+  if (HAS_AUTH) {
+    const cookieStore = await cookies();
+    if (!cookieStore.get('spaces-session')) {
+      redirect('/login');
+    }
+  }
+
+  return <DashboardClient />;
+}

package/.next/standalone/src/app/(desktop)/projects/page.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useProjects } from '@/hooks/use-sessions';
+import { FolderOpen, MessageSquare, Clock, Loader2 } from 'lucide-react';
+import { formatRelativeTime, formatNumber } from '@/lib/utils';
+import Link from 'next/link';
+
+export default function ProjectsPage() {
+  const { data: projects, isLoading } = useProjects();
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <Loader2 className="w-6 h-6 animate-spin text-indigo-500" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 max-w-7xl">
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold">Projects</h1>
+        <p className="text-muted-foreground text-sm mt-1">
+          Auto-detected from your agent session history
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {(projects || []).map((project) => (
+          <Link
+            key={project.id}
+            href={`/sessions?projectId=${project.id}`}
+            className="bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg p-5 hover:border-indigo-300 dark:hover:border-indigo-700 transition-colors"
+          >
+            <div className="flex items-start gap-3">
+              <div className="w-10 h-10 rounded-lg bg-indigo-50 dark:bg-indigo-950 flex items-center justify-center flex-shrink-0">
+                <FolderOpen className="w-5 h-5 text-indigo-500" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h3 className="font-semibold text-sm truncate">{project.name}</h3>
+                <p className="text-xs text-muted-foreground mt-0.5 truncate">{project.path}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4 mt-4 text-xs text-muted-foreground">
+              <span className="flex items-center gap-1">
+                <MessageSquare className="w-3 h-3" />
+                {formatNumber(project.sessionCount)} sessions
+              </span>
+              {project.lastActivity && (
+                <span className="flex items-center gap-1">
+                  <Clock className="w-3 h-3" />
+                  {formatRelativeTime(project.lastActivity)}
+                </span>
+              )}
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      {(!projects || projects.length === 0) && (
+        <div className="text-center py-20 text-muted-foreground">
+          <FolderOpen className="w-12 h-12 mx-auto mb-3 opacity-30" />
+          <p>No projects found. Start using an agent to see projects here.</p>
+        </div>
+      )}
+    </div>
+  );
+}