@jlongo78/agent-spaces 0.7.6 → 0.8.0

package/.next/standalone/src/app/(desktop)/terminal/pane/[id]/page.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { Loader2 } from 'lucide-react';
+import { TerminalPane } from '@/components/terminal/terminal-pane';
+import { TotpGate } from '@/components/auth/totp-gate';
+import type { PaneData } from '@/lib/db/queries';
+import { api } from '@/lib/api';
+
+const SAVE_INTERVAL = 2000;
+
+export default function PopoutPanePage({ params }: { params: Promise<{ id: string }> }) {
+  return (
+    <TotpGate>
+      {(terminalToken) => <PopoutPaneInner params={params} terminalToken={terminalToken} />}
+    </TotpGate>
+  );
+}
+
+function PopoutPaneInner({ params, terminalToken }: { params: Promise<{ id: string }>; terminalToken: string }) {
+  const [pane, setPane] = useState<PaneData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [paneId, setPaneId] = useState<string | null>(null);
+  const channelRef = useRef<BroadcastChannel | null>(null);
+  // When true, the window is closing because the workspace was closed/switched,
+  // so we keep isPopout=true in the DB for restore next time.
+  const workspaceCloseRef = useRef(false);
+
+  // Resolve params
+  useEffect(() => {
+    params.then(p => setPaneId(p.id));
+  }, [params]);
+
+  // Load pane data
+  useEffect(() => {
+    if (!paneId) return;
+    fetch(api(`/api/panes/${paneId}`))
+      .then(r => r.json())
+      .then(data => { setPane(data); setLoading(false); })
+      .catch(() => setLoading(false));
+  }, [paneId]);
+
+  // Set up BroadcastChannel for cross-window communication
+  useEffect(() => {
+    if (!paneId) return;
+    const channel = new BroadcastChannel('spaces-panes');
+    channelRef.current = channel;
+
+    // Notify main window we're open
+    channel.postMessage({ type: 'popout-opened', paneId });
+
+    // Mark pane as popped out in DB
+    fetch(api(`/api/panes/${paneId}`), {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        isPopout: true,
+        winX: window.screenX,
+        winY: window.screenY,
+        winWidth: window.innerWidth,
+        winHeight: window.innerHeight,
+      }),
+    });
+
+    // Listen for close command from main window (workspace switch/close)
+    channel.onmessage = (event) => {
+      if (event.data.type === 'close-popouts') {
+        // Flag so beforeunload keeps isPopout=true for restore
+        workspaceCloseRef.current = true;
+        // Save final position, keep isPopout=true so it restores next time
+        navigator.sendBeacon(
+          api(`/api/panes/${paneId}`),
+          new Blob([JSON.stringify({
+            isPopout: true,
+            winX: window.screenX,
+            winY: window.screenY,
+            winWidth: window.innerWidth,
+            winHeight: window.innerHeight,
+          })], { type: 'application/json' })
+        );
+        window.close();
+      }
+    };
+
+    return () => {
+      channel.close();
+    };
+  }, [paneId]);
+
+  // Track window position/size changes
+  useEffect(() => {
+    if (!paneId) return;
+
+    let saveTimer: ReturnType<typeof setTimeout>;
+    const savePosition = () => {
+      clearTimeout(saveTimer);
+      saveTimer = setTimeout(() => {
+        fetch(api(`/api/panes/${paneId}`), {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            winX: window.screenX,
+            winY: window.screenY,
+            winWidth: window.innerWidth,
+            winHeight: window.innerHeight,
+          }),
+        });
+      }, SAVE_INTERVAL);
+    };
+
+    window.addEventListener('resize', savePosition);
+
+    // Also save position on move (approximate via interval since there's no move event)
+    let lastX = window.screenX;
+    let lastY = window.screenY;
+    const moveInterval = setInterval(() => {
+      if (window.screenX !== lastX || window.screenY !== lastY) {
+        lastX = window.screenX;
+        lastY = window.screenY;
+        savePosition();
+      }
+    }, 1000);
+
+    return () => {
+      window.removeEventListener('resize', savePosition);
+      clearInterval(moveInterval);
+      clearTimeout(saveTimer);
+    };
+  }, [paneId]);
+
+  // On window close, notify main window
+  useEffect(() => {
+    if (!paneId) return;
+
+    const handleUnload = () => {
+      if (workspaceCloseRef.current) {
+        // Workspace-triggered close: position already saved with isPopout=true
+        // Just notify main window the popout is gone (runtime state)
+        channelRef.current?.postMessage({ type: 'popout-closed', paneId });
+        return;
+      }
+      // Manual close by user: mark isPopout=false so it doesn't auto-restore
+      navigator.sendBeacon(
+        api(`/api/panes/${paneId}`),
+        new Blob([JSON.stringify({
+          isPopout: false,
+          winX: window.screenX,
+          winY: window.screenY,
+          winWidth: window.innerWidth,
+          winHeight: window.innerHeight,
+        })], { type: 'application/json' })
+      );
+      channelRef.current?.postMessage({ type: 'popout-closed', paneId });
+    };
+
+    window.addEventListener('beforeunload', handleUnload);
+    return () => window.removeEventListener('beforeunload', handleUnload);
+  }, [paneId]);
+
+  // Set window title
+  useEffect(() => {
+    if (pane) {
+      document.title = `${pane.title} - Spaces`;
+    }
+  }, [pane?.title]);
+
+  const handleClose = useCallback(async (id: string) => {
+    // User explicitly closed via the X button in the terminal pane header
+    await fetch(api(`/api/panes/${id}`), {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ isPopout: false }),
+    });
+    channelRef.current?.postMessage({ type: 'popout-closed', paneId: id });
+    // Set flag so beforeunload doesn't double-write isPopout: false
+    workspaceCloseRef.current = true;
+    window.close();
+  }, []);
+
+  const handleUpdate = useCallback(async (id: string, data: Partial<PaneData>) => {
+    await fetch(api(`/api/panes/${id}`), {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+    setPane(prev => prev ? { ...prev, ...data } : null);
+    // Broadcast updates to main window
+    channelRef.current?.postMessage({ type: 'pane-updated', paneId: id, data });
+  }, []);
+
+  if (loading || !pane) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-zinc-950">
+        <Loader2 className="w-6 h-6 animate-spin text-indigo-500" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen bg-zinc-950">
+      <TerminalPane
+        pane={pane}
+        onClose={handleClose}
+        onUpdate={handleUpdate}
+        isMaximized={true}
+        onToggleMaximize={() => {}}
+        terminalToken={terminalToken}
+      />
+    </div>
+  );
+}

package/.next/standalone/src/app/(desktop)/terminal/remote/[nodeId]/[workspaceId]/page.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Loader2, ArrowLeft, Globe, Terminal, AlertCircle, Plus,
+} from 'lucide-react';
+import { TerminalPane } from '@/components/terminal/terminal-pane';
+import { TotpGate } from '@/components/auth/totp-gate';
+import type { PaneData } from '@/lib/db/queries';
+import { api } from '@/lib/api';
+
+export default function RemoteWorkspacePage({
+  params,
+}: {
+  params: Promise<{ nodeId: string; workspaceId: string }>;
+}) {
+  return (
+    <TotpGate>
+      {(terminalToken) => <RemoteWorkspaceInner params={params} terminalToken={terminalToken} />}
+    </TotpGate>
+  );
+}
+
+function RemoteWorkspaceInner({
+  params,
+  terminalToken,
+}: {
+  params: Promise<{ nodeId: string; workspaceId: string }>;
+  terminalToken: string;
+}) {
+  const router = useRouter();
+  const [nodeId, setNodeId] = useState<string | null>(null);
+  const [workspaceId, setWorkspaceId] = useState<string | null>(null);
+  const [panes, setPanes] = useState<PaneData[]>([]);
+  const [workspaceName, setWorkspaceName] = useState<string>('');
+  const [workspaceColor, setWorkspaceColor] = useState<string>('#6366f1');
+  const [nodeName, setNodeName] = useState<string>('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [maximized, setMaximized] = useState<string | null>(null);
+
+  // Resolve params
+  useEffect(() => {
+    params.then(p => {
+      setNodeId(p.nodeId);
+      setWorkspaceId(p.workspaceId);
+    });
+  }, [params]);
+
+  // Fetch workspace data from remote node via proxy
+  useEffect(() => {
+    if (!nodeId || !workspaceId) return;
+
+    const fetchPanes = fetch(api(`/api/network/proxy/${nodeId}/workspaces/${workspaceId}`))
+      .then(r => {
+        if (!r.ok) throw new Error(`Failed to fetch workspace (${r.status})`);
+        return r.json();
+      });
+
+    const fetchWorkspaces = fetch(api(`/api/network/proxy/${nodeId}/workspaces`))
+      .then(r => {
+        if (!r.ok) throw new Error(`Failed to fetch workspaces (${r.status})`);
+        return r.json();
+      });
+
+    Promise.all([fetchPanes, fetchWorkspaces])
+      .then(([panesData, wsData]) => {
+        // Always pass nodeId for remote panes so the terminal server
+        // proxies the connection to the remote node.
+        const remotePanes: PaneData[] = (panesData.panes || []).map((p: any) => ({
+          ...p,
+          nodeId: nodeId,
+          // Ensure booleans are correct types from the JSON
+          isPopout: !!p.isPopout,
+        }));
+        setPanes(remotePanes);
+        const ws = wsData.workspaces?.find(
+          (w: any) => String(w.id) === workspaceId
+        );
+        if (ws) {
+          setWorkspaceName(ws.name);
+          setWorkspaceColor(ws.color);
+          setNodeName(ws.nodeName || '');
+        }
+        setLoading(false);
+      })
+      .catch((e) => {
+        setError(e.message);
+        setLoading(false);
+      });
+  }, [nodeId, workspaceId]);
+
+  // No-op handlers for remote panes (read-only, can't modify remote DB)
+  const handleClose = useCallback(() => {}, []);
+  const handleUpdate = useCallback(() => {}, []);
+  const toggleMaximize = useCallback((id: string) => {
+    setMaximized(prev => prev === id ? null : id);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-screen bg-zinc-950">
+        <Loader2 className="w-6 h-6 animate-spin text-indigo-500" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="h-screen flex flex-col items-center justify-center bg-zinc-950 text-zinc-100">
+        <AlertCircle className="w-8 h-8 text-red-500 mb-3" />
+        <p className="text-sm text-zinc-400 mb-4">{error}</p>
+        <button
+          onClick={() => router.push('/terminal')}
+          className="flex items-center gap-2 px-4 py-2 text-sm border border-zinc-700 text-zinc-400 rounded-lg hover:text-white hover:border-zinc-500 transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Back to Spaces
+        </button>
+      </div>
+    );
+  }
+
+  const visiblePanes = panes.filter(p => !p.isPopout);
+
+  return (
+    <div className="h-screen flex flex-col bg-zinc-950 text-zinc-100">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-zinc-800 flex-shrink-0">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push('/terminal')}
+            className="p-1.5 -ml-1 text-zinc-500 hover:text-white hover:bg-zinc-800 rounded-md transition-colors"
+            title="Back to Spaces"
+          >
+            <ArrowLeft className="w-4 h-4" />
+          </button>
+          <div className="w-px h-4 bg-zinc-800" />
+          <Globe className="w-3.5 h-3.5 text-zinc-500" />
+          <span
+            className="w-2.5 h-2.5 rounded-full flex-shrink-0"
+            style={{ backgroundColor: workspaceColor }}
+          />
+          <span className="text-sm font-semibold">{workspaceName || 'Remote Workspace'}</span>
+          {nodeName && (
+            <span className="text-xs text-zinc-500">on {nodeName}</span>
+          )}
+          <span className="text-[11px] text-zinc-500">
+            {visiblePanes.length} pane{visiblePanes.length !== 1 ? 's' : ''}
+          </span>
+        </div>
+      </div>
+
+      {/* Terminal grid */}
+      {visiblePanes.length === 0 ? (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center space-y-2">
+            <Terminal className="w-10 h-10 text-zinc-700 mx-auto" />
+            <p className="text-zinc-500 text-sm">This remote workspace has no panes.</p>
+          </div>
+        </div>
+      ) : (
+        <div
+          className="flex-1 p-2 gap-2 overflow-auto"
+          style={{
+            display: 'grid',
+            gridTemplateColumns: visiblePanes.length === 1 ? '1fr'
+              : visiblePanes.length <= 2 ? 'repeat(2, 1fr)'
+              : visiblePanes.length <= 4 ? 'repeat(2, 1fr)'
+              : 'repeat(3, 1fr)',
+            gridAutoRows: visiblePanes.length <= 2 ? '1fr' : 'minmax(300px, 1fr)',
+          }}
+        >
+          {visiblePanes.map((pane) => (
+            maximized && maximized !== pane.id ? null : (
+              <TerminalPane
+                key={pane.id}
+                pane={pane}
+                onClose={handleClose}
+                onUpdate={handleUpdate}
+                isMaximized={maximized === pane.id}
+                onToggleMaximize={toggleMaximize}
+                terminalToken={terminalToken}
+              />
+            )
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function WorkspacesRedirect() {
+  const router = useRouter();
+  useEffect(() => {
+    router.replace('/terminal');
+  }, [router]);
+  return null;
+}

package/.next/standalone/src/app/api/admin/analytics/route.ts

@@ -0,0 +1,10 @@
+import { NextRequest } from 'next/server';
+import { getTeams } from '@/lib/teams';
+
+const notAvailable = () =>
+  Response.json({ error: 'Requires @spaces/teams' }, { status: 404 });
+
+export async function GET(req: NextRequest) {
+  const teams = getTeams();
+  return teams?.admin.api.analytics.GET(req) ?? notAvailable();
+}

package/.next/standalone/src/app/api/admin/users/[id]/route.ts

@@ -0,0 +1,20 @@
+import { NextRequest } from 'next/server';
+import { getTeams } from '@/lib/teams';
+
+const notAvailable = () =>
+  Response.json({ error: 'Requires @spaces/teams' }, { status: 404 });
+
+export async function GET(req: NextRequest, ctx: { params: Promise<{ id: string }> }) {
+  const teams = getTeams();
+  return teams?.admin.api.usersById.GET(req, ctx) ?? notAvailable();
+}
+
+export async function PUT(req: NextRequest, ctx: { params: Promise<{ id: string }> }) {
+  const teams = getTeams();
+  return teams?.admin.api.usersById.PUT(req, ctx) ?? notAvailable();
+}
+
+export async function DELETE(req: NextRequest, ctx: { params: Promise<{ id: string }> }) {
+  const teams = getTeams();
+  return teams?.admin.api.usersById.DELETE(req, ctx) ?? notAvailable();
+}

package/.next/standalone/src/app/api/admin/users/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest } from 'next/server';
+import { getTeams } from '@/lib/teams';
+
+const notAvailable = () =>
+  Response.json({ error: 'Requires @spaces/teams' }, { status: 404 });
+
+export async function GET(req: NextRequest) {
+  const teams = getTeams();
+  return teams?.admin.api.users.GET(req) ?? notAvailable();
+}
+
+export async function POST(req: NextRequest) {
+  const teams = getTeams();
+  return teams?.admin.api.users.POST(req) ?? notAvailable();
+}

package/.next/standalone/src/app/api/analytics/overview/route.ts

@@ -0,0 +1,80 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getAuthUser, withUser } from '@/lib/auth';
+import { ensureInitialized } from '@/lib/db/init';
+import { getAnalyticsOverview, getSessions, getDailyActivity } from '@/lib/db/queries';
+import { getOrComputeStats } from '@/lib/claude/stats';
+import { calculateCost } from '@/lib/cost-calculator';
+import type { DailyActivity, DailyModelTokens } from '@/types/claude';
+
+/** Fill date gaps so charts show every day through today */
+function fillDailyGaps<T extends { date: string }>(
+  data: T[],
+  days: number,
+  defaults: Omit<T, 'date'>,
+): T[] {
+  const map = new Map(data.map(d => [d.date, d]));
+  const result: T[] = [];
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  for (let i = days - 1; i >= 0; i--) {
+    const d = new Date(today);
+    d.setDate(d.getDate() - i);
+    const key = d.toISOString().slice(0, 10);
+    result.push(map.get(key) || { date: key, ...defaults } as T);
+  }
+  return result;
+}
+
+export async function GET(request: NextRequest) {
+  const user = getAuthUser(request);
+  return withUser(user, async () => {
+    await ensureInitialized();
+
+    const overview = getAnalyticsOverview();
+    const { sessions: recentSessions } = getSessions({ limit: 5, sortBy: 'modified', sortDir: 'DESC' });
+    const dbActivity = getDailyActivity(30);
+
+    // Compute fresh stats from JSONL session files (cached for 1h)
+    const stats = getOrComputeStats(user);
+    const estimatedCost = stats?.modelUsage ? calculateCost(stats.modelUsage) : 0;
+
+    // Merge JSONL-computed stats with DB activity
+    const statsActivity: DailyActivity[] = stats?.dailyActivity || [];
+    const statsMap = new Map(statsActivity.map((d: DailyActivity) => [d.date, d]));
+    const mergedActivity = dbActivity.map(d => {
+      const cached = statsMap.get(d.date);
+      return {
+        ...d,
+        toolCallCount: cached?.toolCallCount ?? d.toolCallCount,
+        messageCount: cached?.messageCount ?? d.messageCount,
+      };
+    });
+    // Add stats-only dates not in DB
+    for (const s of statsActivity) {
+      if (!mergedActivity.find(d => d.date === s.date)) {
+        mergedActivity.push(s);
+      }
+    }
+    mergedActivity.sort((a, b) => a.date.localeCompare(b.date));
+
+    // Fill gaps through today
+    const dailyActivity = fillDailyGaps(mergedActivity, 30, {
+      sessionCount: 0, messageCount: 0, toolCallCount: 0,
+    } as any);
+
+    const rawTokens: DailyModelTokens[] = stats?.dailyModelTokens || [];
+    const dailyModelTokens = fillDailyGaps(rawTokens, 30, {
+      tokensByModel: {},
+    } as any);
+
+    return NextResponse.json({
+      ...overview,
+      estimatedCost,
+      recentSessions,
+      dailyActivity,
+      dailyModelTokens,
+      modelUsage: stats?.modelUsage || {},
+    });
+  });
+}

package/.next/standalone/src/app/api/auth/login/route.ts

@@ -0,0 +1,10 @@
+import { NextRequest } from 'next/server';
+import { getTeams } from '@/lib/teams';
+
+const notAvailable = () =>
+  Response.json({ error: 'Requires @spaces/teams' }, { status: 404 });
+
+export async function POST(req: NextRequest) {
+  const teams = getTeams();
+  return teams?.auth.api.login.POST(req) ?? notAvailable();
+}

package/.next/standalone/src/app/api/auth/logout/route.ts

@@ -0,0 +1,9 @@
+import { getTeams } from '@/lib/teams';
+
+const notAvailable = () =>
+  Response.json({ error: 'Requires @spaces/teams' }, { status: 404 });
+
+export async function POST() {
+  const teams = getTeams();
+  return teams?.auth.api.logout.POST() ?? notAvailable();
+}

package/.next/standalone/src/app/api/auth/me/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from 'next/server';
+import os from 'os';
+import { HAS_AUTH } from '@/lib/tier';
+import { getTeams } from '@/lib/teams';
+
+export async function GET(request: NextRequest) {
+  if (!HAS_AUTH) {
+    // Desktop mode: return local OS user as admin
+    return NextResponse.json({
+      username: os.userInfo().username,
+      role: 'admin',
+      displayName: os.userInfo().username,
+    });
+  }
+
+  const teams = getTeams();
+  if (!teams) {
+    return Response.json({ error: 'Requires @spaces/teams' }, { status: 404 });
+  }
+
+  return teams.auth.api.me.GET(request);
+}

package/.next/standalone/src/app/api/auth/totp/setup/route.ts

@@ -0,0 +1,10 @@
+import { NextRequest } from 'next/server';
+import { getTeams } from '@/lib/teams';
+
+const notAvailable = () =>
+  Response.json({ error: 'Requires @spaces/teams' }, { status: 404 });
+
+export async function POST(req: NextRequest) {
+  const teams = getTeams();
+  return teams?.auth.api.totpSetup.POST(req) ?? notAvailable();
+}

package/.next/standalone/src/app/api/auth/totp/status/route.ts

@@ -0,0 +1,10 @@
+import { NextRequest } from 'next/server';
+import { getTeams } from '@/lib/teams';
+
+const notAvailable = () =>
+  Response.json({ error: 'Requires @spaces/teams' }, { status: 404 });
+
+export async function GET(req: NextRequest) {
+  const teams = getTeams();
+  return teams?.auth.api.totpStatus.GET(req) ?? notAvailable();
+}

package/.next/standalone/src/app/api/auth/totp/verify/route.ts

@@ -0,0 +1,10 @@
+import { NextRequest } from 'next/server';
+import { getTeams } from '@/lib/teams';
+
+const notAvailable = () =>
+  Response.json({ error: 'Requires @spaces/teams' }, { status: 404 });
+
+export async function POST(req: NextRequest) {
+  const teams = getTeams();
+  return teams?.auth.api.totpVerify.POST(req) ?? notAvailable();
+}

package/.next/standalone/src/app/api/benchmark/lobes/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+import { getAuthUser, withUser } from '@/lib/auth';
+import { getBenchmarkAccess } from '@/lib/cortex/benchmark';
+
+export async function GET(request: NextRequest) {
+  const user = getAuthUser(request);
+  return withUser(user, async () => {
+    const access = getBenchmarkAccess();
+    if (!access) {
+      return NextResponse.json({ error: 'Benchmark data not available' }, { status: 404 });
+    }
+    const lobes = access.listLobeScores();
+    return NextResponse.json({ lobes });
+  });
+}