@agent-relay/dashboard 2.0.82 → 2.0.84

package/src/app/cloud/link/page.tsx

@@ -7,7 +7,7 @@
  * 1. User runs `agent-relay cloud link` in terminal
  * 2. CLI opens this page with ?code=<temp>&machine=<id>&name=<name>
  * 3. User confirms machine details and clicks "Link Machine"
- * 4. Server generates API key via POST /api/daemons/link
+ * 4. Server generates API key via POST /api/brokers/link
  * 5. User copies API key back to terminal
  */
 
@@ -31,7 +31,7 @@ interface Workspace {
 
 interface LinkResult {
   apiKey: string;
-  daemonId: string;
+  brokerId: string;
   workspaceId: string | null;
 }
 
@@ -108,7 +108,7 @@ function CloudLinkContent() {
     setError('');
 
     try {
-      const result = await api.post<{ apiKey: string; daemonId: string; workspaceId: string | null }>('/api/daemons/link', {
+      const payload = {
         machineId: machineInfo.machineId,
         name: machineInfo.machineName,
         workspaceId: selectedWorkspaceId,
@@ -116,17 +116,25 @@ function CloudLinkContent() {
           linkedVia: 'cli',
           userAgent: navigator.userAgent,
         },
-      });
+      };
+      const result = await api.post<{ apiKey: string; brokerId: string; workspaceId: string | null }>('/api/brokers/link', payload);
 
       setLinkResult({
         apiKey: result.apiKey,
-        daemonId: result.daemonId,
+        brokerId: result.brokerId,
         workspaceId: result.workspaceId,
       });
       setState('success');
     } catch (err: any) {
       console.error('Link failed:', err);
-      setError(err.message || 'Failed to link machine. Please try again.');
+      const message = err?.message || 'Failed to link machine. Please try again.';
+      if (typeof message === 'string' && message.includes('HTTP 404')) {
+        setError(
+          'BREAKING CHANGE: daemon link endpoints were removed. Cloud API must expose POST /api/brokers/link.'
+        );
+      } else {
+        setError(message);
+      }
       setState('error');
     }
   };

package/src/app/connect-repos/page.tsx

@@ -161,10 +161,16 @@ export default function ConnectReposPage() {
       const error = err as Error & { type?: string };
       console.error('GitHub App auth error:', error);
 
-      // Don't show error for user-cancelled auth
-      if (error.type === 'user_cancelled' || error.message?.includes('closed')) {
+      // Don't show error for user-cancelled auth or stale OAuth state
+      const isUserCancelled = error.type === 'user_cancelled' || error.message?.includes('closed');
+      const isStaleState = error.message?.includes('invalid_oauth_state');
+
+      if (isUserCancelled || isStaleState) {
         setStatusMessage('');
-        // Re-initialize for next attempt
+        if (isStaleState) {
+          setError('Session expired. Click Connect to try again.');
+        }
+        // Re-initialize Nango session for next attempt
         fetch('/api/auth/nango/repo-session', { credentials: 'include' })
           .then(res => res.json())
           .then(data => {

package/src/app/dev/cli-tools/page.tsx

@@ -0,0 +1,130 @@
+/**
+ * /dev/cli-tools
+ *
+ * Isolated, manually testable CLI tool harness page.
+ * Each card is independent and uses real `/api/spawn`, `/api/spawned/:name`,
+ * and websocket log streaming. No mocked fixtures are used.
+ */
+
+'use client';
+
+import React, { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { CliToolHarness, type CliToolHarnessConfig } from '../../../components/CliToolHarness';
+
+const CLI_TOOLS: CliToolHarnessConfig[] = [
+  {
+    id: 'claude',
+    name: 'Claude',
+    command: 'claude',
+    description: 'Spawns a real Claude CLI tool and streams its process logs.',
+  },
+  {
+    id: 'codex',
+    name: 'Codex',
+    command: 'codex',
+    description: 'Spawns a real Codex CLI tool and streams its process logs.',
+  },
+  {
+    id: 'gemini',
+    name: 'Gemini',
+    command: 'gemini',
+    description: 'Spawns a real Gemini CLI tool and streams its process logs.',
+  },
+  {
+    id: 'cursor',
+    name: 'Cursor',
+    command: 'cursor',
+    description: 'Spawns a real Cursor CLI tool and streams its process logs.',
+  },
+  {
+    id: 'opencode',
+    name: 'OpenCode',
+    command: 'opencode',
+    description: 'Spawns a real OpenCode CLI tool and streams its process logs.',
+  },
+  {
+    id: 'droid',
+    name: 'Droid',
+    command: 'droid',
+    description: 'Spawns a real Droid CLI tool and streams its process logs.',
+  },
+];
+
+function CliToolsHarnessContent() {
+  const searchParams = useSearchParams();
+  const selectedTool = searchParams.get('tool') || searchParams.get('cli');
+  const normalizedTool = selectedTool?.trim().toLowerCase();
+  const selectedTools = normalizedTool
+    ? CLI_TOOLS.filter((tool) =>
+        tool.id === normalizedTool ||
+        tool.command.toLowerCase() === normalizedTool ||
+        tool.name.toLowerCase() === normalizedTool
+      )
+    : CLI_TOOLS;
+  const toolsToRender = selectedTools.length === 0 ? CLI_TOOLS : selectedTools;
+
+  return (
+    <div className="min-h-screen bg-[#0a0c10] text-[#c9d1d9]">
+      <div className="border-b border-[#21262d] bg-[#0d1117]">
+        <div className="mx-auto max-w-[1400px] px-6 py-5">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <h1 className="text-lg font-semibold text-white flex items-center gap-2">
+                <span className="w-2.5 h-2.5 rounded-full bg-[#58a6ff]" />
+                CLI Tool Harness
+              </h1>
+              <p className="mt-1 text-sm text-[#8b949e]">
+                {selectedTool ? `Focused tool: ${selectedTool}` : 'Real CLI launch + live XTerm log stream per tool.'} No mocks.
+              </p>
+            </div>
+            <span className="rounded-md bg-[#3fb950]/20 px-2.5 py-1 text-xs font-medium text-[#3fb950]">
+              Manual + integration testing
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <main className="mx-auto max-w-[1400px] px-6 py-6">
+        <div className="grid gap-4 md:grid-cols-2">
+          {selectedTools.length === 0 && (
+            <div className="rounded-lg border border-[#3fb950]/40 bg-[#1f2937] px-3 py-4 text-sm text-[#7c8594]">
+              No matching tool found for "{selectedTool}". Showing all available tools.
+            </div>
+          )}
+          {toolsToRender.map((tool) => (
+            <CliToolHarness key={tool.id} tool={tool} />
+          ))}
+        </div>
+      </main>
+    </div>
+  );
+}
+
+function CliToolsLoadingFallback() {
+  return (
+    <div className="min-h-screen bg-[#0a0c10] text-[#c9d1d9]">
+      <div className="border-b border-[#21262d] bg-[#0d1117]">
+        <div className="mx-auto max-w-[1400px] px-6 py-5">
+          <h1 className="text-lg font-semibold text-white flex items-center gap-2">
+            <span className="w-2.5 h-2.5 rounded-full bg-[#58a6ff]" />
+            CLI Tool Harness
+          </h1>
+        </div>
+      </div>
+      <main className="mx-auto max-w-[1400px] px-6 py-6">
+        <div className="rounded-lg border border-[#58a6ff]/30 bg-[#1f2937] px-3 py-4 text-sm text-[#7c8594]">
+          Initializing CLI tools…
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default function CliToolsHarnessPage() {
+  return (
+    <Suspense fallback={<CliToolsLoadingFallback />}>
+      <CliToolsHarnessContent />
+    </Suspense>
+  );
+}

package/src/app/dev/log-viewer/MockLogViewer.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+/**
+ * InlineMockViewer — Standalone inline log viewer for testing.
+ *
+ * Renders sanitized log content (ANSI stripped) with direct data injection.
+ * Used on the /dev/log-viewer test page alongside the production XTermLogViewer
+ * (in mock mode) for side-by-side comparison.
+ */
+
+import React, { useRef, useEffect, useState } from 'react';
+import { sanitizeLogContent, isSpinnerFragment } from '../../../lib/sanitize-logs';
+import type { LogFixtureLine, LogFixture } from './fixtures';
+
+interface InlineMockViewerProps {
+  fixture: LogFixture;
+  streaming?: boolean;
+}
+
+export function InlineMockViewer({ fixture, streaming = false }: InlineMockViewerProps) {
+  const [lines, setLines] = useState<LogFixtureLine[]>([]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    if (!streaming) {
+      setLines(fixture.lines);
+      return;
+    }
+
+    // Streaming mode: feed lines with delays
+    setLines([]);
+    (async () => {
+      for (const line of fixture.lines) {
+        if (cancelled) break;
+        if (line.delay) {
+          await new Promise((r) => setTimeout(r, line.delay));
+        }
+        if (cancelled) break;
+        setLines((prev) => [...prev, line]);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [fixture, streaming]);
+
+  // Auto-scroll
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [lines]);
+
+  const filteredLines = lines.filter((line) => {
+    const stripped = sanitizeLogContent(line.content).trim();
+    if (stripped.length === 0) return false;
+    if (isSpinnerFragment(stripped)) return false;
+    return true;
+  });
+
+  return (
+    <div
+      className="rounded-lg overflow-hidden border border-[#2a2d35]"
+      style={{
+        background: 'linear-gradient(180deg, #0d0f14 0%, #12151c 100%)',
+        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.02), 0 4px 12px rgba(0,0,0,0.3)',
+      }}
+    >
+      <div
+        className="flex items-center justify-between px-3 py-2 border-b border-[#2a2d35]"
+        style={{
+          background: 'linear-gradient(180deg, #161b22 0%, #0d1117 100%)',
+        }}
+      >
+        <div className="flex items-center gap-2">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="text-[#8b949e]"
+          >
+            <polyline points="4 17 10 11 4 5" />
+            <line x1="12" y1="19" x2="20" y2="19" />
+          </svg>
+          <span className="text-xs font-medium text-accent-cyan">
+            Inline Mode
+          </span>
+          <span className="px-1.5 py-0.5 rounded-full bg-[#238636]/20 text-[10px] text-[#3fb950] uppercase tracking-wider">
+            mock
+          </span>
+        </div>
+        <span className="text-[10px] text-[#6e7681] font-mono">
+          {filteredLines.length} lines
+        </span>
+      </div>
+      <div
+        ref={scrollRef}
+        className="font-mono text-xs leading-relaxed p-3 overflow-y-auto"
+        style={{ maxHeight: '400px' }}
+      >
+        {filteredLines.map((line, idx) => {
+          const sanitized = sanitizeLogContent(line.content);
+          const typeClass =
+            line.type === 'stderr'
+              ? 'text-[#f85149]'
+              : line.type === 'system'
+              ? 'text-[#58a6ff] italic'
+              : 'text-[#c9d1d9]';
+          return (
+            <div key={idx} className={`${typeClass} leading-5 whitespace-pre-wrap break-all`}>
+              {sanitized}
+            </div>
+          );
+        })}
+        {filteredLines.length === 0 && (
+          <div className="text-[#484f58] italic flex items-center gap-2">
+            <span className="w-1.5 h-1.5 rounded-full bg-[#484f58] animate-pulse" />
+            {streaming ? 'Streaming...' : 'No output'}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/app/dev/log-viewer/fixtures.ts

@@ -0,0 +1,110 @@
+/**
+ * CLI output fixtures for the isolated log viewer test page.
+ *
+ * Static fixtures for edge-case testing + dynamic loading of real log files
+ * from the dashboard server's /api/logs endpoint.
+ */
+
+export interface LogFixtureLine {
+  content: string;
+  type: 'stdout' | 'stderr' | 'system';
+  delay?: number;
+}
+
+export interface LogFixture {
+  name: string;
+  description: string;
+  lines: LogFixtureLine[];
+}
+
+// ── Edge cases fixture (static) ─────────────────────────────────────
+
+export const edgeCaseFixture: LogFixture = {
+  name: 'Edge Cases',
+  description: 'Malformed escapes, Unicode, long lines, stderr, spinners',
+  lines: [
+    // stderr output
+    { content: 'Warning: deprecated API usage\n', type: 'stderr' },
+    { content: 'Error: ENOENT: no such file or directory\n', type: 'stderr', delay: 100 },
+
+    // system messages
+    { content: '[Connected to agent log stream]\n', type: 'system' },
+
+    // Orphaned/degraded ANSI (lost ESC byte)
+    { content: '[38;5;216mThis had a color code[0m but ESC bytes were stripped\n', type: 'stdout', delay: 100 },
+    { content: '[?25hCursor show command leaked\n', type: 'stdout', delay: 100 },
+    { content: '[2KLine erase leaked\n', type: 'stdout', delay: 100 },
+
+    // Unicode and emoji
+    { content: '🚀 Deploying to production...\n', type: 'stdout', delay: 200 },
+    { content: '✅ Deploy complete! 🎉 (took 2.3s)\n', type: 'stdout', delay: 200 },
+    { content: '日本語テスト: 成功\n', type: 'stdout', delay: 100 },
+    { content: '中文测试: 通过\n', type: 'stdout', delay: 100 },
+
+    // Very long line
+    { content: 'Long line: ' + 'abcdefghij'.repeat(50) + '\n', type: 'stdout', delay: 100 },
+
+    // Rapid carriage returns (progress simulation)
+    { content: 'Downloading... 10%\r', type: 'stdout', delay: 50 },
+    { content: 'Downloading... 30%\r', type: 'stdout', delay: 50 },
+    { content: 'Downloading... 50%\r', type: 'stdout', delay: 50 },
+    { content: 'Downloading... 70%\r', type: 'stdout', delay: 50 },
+    { content: 'Downloading... 90%\r', type: 'stdout', delay: 50 },
+    { content: 'Downloading... 100%\n', type: 'stdout', delay: 50 },
+
+    // Spinner sequences
+    { content: '⠋', type: 'stdout', delay: 80 },
+    { content: '\r⠙', type: 'stdout', delay: 80 },
+    { content: '\r⠹', type: 'stdout', delay: 80 },
+    { content: '\r⠸', type: 'stdout', delay: 80 },
+    { content: '\r⠼', type: 'stdout', delay: 80 },
+    { content: '\r\x1b[2K', type: 'stdout' },
+    { content: 'Done!\n', type: 'stdout' },
+
+    // Backspace overwrites
+    { content: 'Typo\x08\x08\x08\x08Fixed text here\n', type: 'stdout', delay: 100 },
+
+    // Mixed ANSI with content
+    { content: '\x1b[1m\x1b[4mBold and underlined\x1b[0m normal \x1b[31mred\x1b[0m \x1b[42mgreen bg\x1b[0m\n', type: 'stdout' },
+
+    // Nested 256-color
+    { content: '\x1b[38;5;196m\x1b[48;5;232m Red on dark \x1b[0m \x1b[38;5;46m\x1b[48;5;17m Green on navy \x1b[0m\n', type: 'stdout' },
+  ],
+};
+
+// ── Streaming simulation fixture (static) ───────────────────────────
+
+export const streamingFixture: LogFixture = {
+  name: 'Streaming',
+  description: 'Simulates real-time streaming with delays to test auto-scroll and buffering',
+  lines: Array.from({ length: 50 }, (_, i) => ({
+    content: `\x1b[2m${String(i + 1).padStart(3, '0')}\x1b[22m \x1b[${
+      i % 2 === 0 ? '36' : '33'
+    }m[${new Date(Date.now() + i * 200).toISOString().slice(11, 23)}]\x1b[0m Processing item ${i + 1}/50...\n`,
+    type: 'stdout' as const,
+    delay: 200,
+  })),
+};
+
+/** Static fixtures that don't need a server */
+export const STATIC_FIXTURES: LogFixture[] = [
+  edgeCaseFixture,
+  streamingFixture,
+];
+
+/**
+ * Convert raw log file content (single string) into LogFixtureLine array.
+ * Each line of the file becomes a separate fixture line.
+ */
+export function rawLogToFixture(name: string, rawContent: string): LogFixture {
+  const lines = rawContent.split('\n').map((line) => ({
+    content: line + '\n',
+    type: 'stdout' as const,
+  }));
+
+  return {
+    name,
+    description: `Real log output from ${name} worker`,
+    lines,
+  };
+}