@aion0/forge 0.6.0 → 0.6.3

package/.forge/worktrees/pipeline-d6a6ef23/components/TerminalLauncher.tsx

@@ -1,398 +0,0 @@
-'use client';
-
-/**
- * TerminalLauncher — unified terminal session picker and open utilities.
- *
- * Two main exports:
- * 1. TerminalSessionPicker — dialog component for choosing how to open a terminal.
- *    Shows: "Current Session" (highlighted), "New Session", expandable list of other sessions.
- *
- * 2. openWorkspaceTerminal / buildProjectTerminalConfig — helpers to open a terminal
- *    correctly depending on context (workspace smith vs project/VibeCoding).
- *
- * Workspace smiths:
- *   - Need FORGE env vars injected via the forge launch script.
- *   - Must go through open_terminal API → daemon creates tmux → FloatingTerminal attaches.
- *
- * Project / VibeCoding:
- *   - Build profileEnv client-side from agent profile.
- *   - FloatingTerminal creates a new tmux session and runs the CLI.
- */
-
-import { useState, useEffect } from 'react';
-
-// ─── Types ────────────────────────────────────────────────
-
-export interface SessionInfo {
-  id: string;
-  modified: string; // ISO string
-  size: number;     // bytes
-}
-
-/**
- * Selection result from TerminalSessionPicker.
- * mode='current'  → open with currentSessionId (resume)
- * mode='new'      → open a fresh session (no --resume)
- * mode='session'  → open with a specific sessionId (resume)
- */
-export type PickerSelection =
-  | { mode: 'current'; sessionId: string }
-  | { mode: 'new' }
-  | { mode: 'session'; sessionId: string };
-
-// ─── Session Fetchers ─────────────────────────────────────
-
-/**
- * Fetch sessions for a workspace agent (workDir-scoped, via workspace API).
- * Used by workspace smith Open Terminal.
- */
-export async function fetchAgentSessions(workspaceId: string, agentId: string): Promise<SessionInfo[]> {
-  try {
-    const res = await fetch(`/api/workspace/${workspaceId}/smith`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'sessions', agentId }),
-    });
-    const data = await res.json();
-    return data.sessions || [];
-  } catch {
-    return [];
-  }
-}
-
-/**
- * Fetch sessions for a project (project-level, via claude-sessions API).
- * Used by ProjectDetail terminal button and VibeCoding / SessionView.
- */
-export async function fetchProjectSessions(projectName: string): Promise<SessionInfo[]> {
-  try {
-    const res = await fetch(`/api/claude-sessions/${encodeURIComponent(projectName)}`);
-    const data = await res.json();
-    if (!Array.isArray(data)) return [];
-    return data.map((s: any) => ({
-      id: s.sessionId || s.id || '',
-      modified: s.modified || '',
-      size: s.fileSize || s.size || 0,
-    }));
-  } catch {
-    return [];
-  }
-}
-
-// ─── Formatting helpers ───────────────────────────────────
-
-function formatRelativeTime(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime();
-  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
-  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
-  return new Date(iso).toLocaleDateString();
-}
-
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes}B`;
-  if (bytes < 1_048_576) return `${(bytes / 1024).toFixed(0)}KB`;
-  return `${(bytes / 1_048_576).toFixed(1)}MB`;
-}
-
-// ─── SessionItem ──────────────────────────────────────────
-
-function SessionItem({ session, onSelect }: {
-  session: SessionInfo;
-  onSelect: () => void;
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const [copied, setCopied] = useState(false);
-
-  const copyId = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    navigator.clipboard.writeText(session.id).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1500);
-    });
-  };
-
-  return (
-    <div className="rounded border border-[#21262d] hover:border-[#30363d] hover:bg-[#161b22] transition-colors">
-      <div className="flex items-center gap-2 px-3 py-1.5 cursor-pointer" onClick={() => setExpanded(!expanded)}>
-        <span className="text-[8px] text-gray-600">{expanded ? '▼' : '▶'}</span>
-        <span className="text-[9px] text-gray-400 font-mono">{session.id.slice(0, 8)}</span>
-        <span className="text-[8px] text-gray-600">{formatRelativeTime(session.modified)}</span>
-        <span className="text-[8px] text-gray-600">{formatSize(session.size)}</span>
-        <button
-          onClick={e => { e.stopPropagation(); onSelect(); }}
-          className="ml-auto text-[8px] px-1.5 py-0.5 rounded bg-[#238636]/20 text-[#3fb950] hover:bg-[#238636]/40"
-        >
-          Resume
-        </button>
-      </div>
-      {expanded && (
-        <div className="px-3 pb-2 flex items-center gap-1.5">
-          <code className="text-[8px] text-gray-500 font-mono bg-[#161b22] px-1.5 py-0.5 rounded border border-[#21262d] select-all flex-1 overflow-hidden text-ellipsis">
-            {session.id}
-          </code>
-          <button
-            onClick={copyId}
-            className="text-[8px] px-1.5 py-0.5 rounded bg-[#30363d] text-gray-400 hover:text-white hover:bg-[#484f58] shrink-0"
-          >
-            {copied ? '✓' : 'Copy'}
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── TerminalSessionPicker ────────────────────────────────
-
-/**
- * Unified dialog for choosing how to open a terminal session.
- *
- * Props:
- *   agentLabel        — Display name for the agent / project (shown in title).
- *   currentSessionId  — Bound/fixed session to show as "Current Session". null → no current.
- *   sessions          — List of all available sessions (pre-fetched or lazy). If null, loading spinner shown.
- *   supportsSession   — Whether the agent supports claude --resume. Default true.
- *   onSelect          — Called with the picker result when user chooses an option.
- *   onCancel          — Called when user dismisses without selecting.
- */
-export function TerminalSessionPicker({
-  agentLabel,
-  currentSessionId,
-  sessions,
-  supportsSession = true,
-  onSelect,
-  onCancel,
-}: {
-  agentLabel: string;
-  currentSessionId: string | null;
-  sessions: SessionInfo[] | null; // null = loading
-  supportsSession?: boolean;
-  onSelect: (selection: PickerSelection) => void;
-  onCancel: () => void;
-}) {
-  const [showAll, setShowAll] = useState(false);
-
-  const isClaude = supportsSession !== false;
-
-  // Other sessions = all sessions except the current one
-  const otherSessions = sessions?.filter(s => s.id !== currentSessionId) ?? [];
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center"
-      style={{ background: 'rgba(0,0,0,0.75)' }}
-      onClick={e => { if (e.target === e.currentTarget) onCancel(); }}
-    >
-      <div
-        className="w-80 rounded-lg border border-[#30363d] p-4 shadow-xl"
-        style={{ background: '#0d1117' }}
-      >
-        <div className="text-sm font-bold text-white mb-3">⌨️ {agentLabel}</div>
-
-        <div className="space-y-2">
-          {/* Current Session — shown first, highlighted if exists */}
-          {isClaude && currentSessionId && (
-            <button
-              onClick={() => onSelect({ mode: 'current', sessionId: currentSessionId })}
-              className="w-full text-left px-3 py-2 rounded border border-[#3fb950]/60 hover:border-[#3fb950] hover:bg-[#161b22] transition-colors"
-            >
-              <div className="text-xs text-white font-semibold flex items-center gap-1.5">
-                <span className="text-[#3fb950]">●</span> Current Session
-              </div>
-              <div className="text-[9px] text-gray-500 font-mono mt-0.5">
-                {currentSessionId.slice(0, 16)}…
-              </div>
-            </button>
-          )}
-
-          {/* New Session */}
-          <button
-            onClick={() => onSelect({ mode: 'new' })}
-            className="w-full text-left px-3 py-2 rounded border border-[#30363d] hover:border-[#58a6ff] hover:bg-[#161b22] transition-colors"
-          >
-            <div className="text-xs text-white font-semibold">
-              {isClaude ? 'New Session' : 'Open Terminal'}
-            </div>
-            <div className="text-[9px] text-gray-500">
-              {isClaude ? 'Start fresh claude session' : 'Launch terminal'}
-            </div>
-          </button>
-
-          {/* Loading indicator */}
-          {isClaude && sessions === null && (
-            <div className="text-[9px] text-gray-600 text-center py-1">Loading sessions…</div>
-          )}
-
-          {/* Toggle for other sessions */}
-          {isClaude && otherSessions.length > 0 && (
-            <button
-              onClick={() => setShowAll(!showAll)}
-              className="w-full text-[9px] text-gray-500 hover:text-white py-1"
-            >
-              {showAll ? '▼' : '▶'} Other sessions ({otherSessions.length})
-            </button>
-          )}
-
-          {/* Other sessions list */}
-          {showAll && otherSessions.map(s => (
-            <SessionItem
-              key={s.id}
-              session={s}
-              onSelect={() => onSelect({ mode: 'session', sessionId: s.id })}
-            />
-          ))}
-        </div>
-
-        <button
-          onClick={onCancel}
-          className="w-full mt-3 text-[9px] text-gray-500 hover:text-white"
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// ─── TerminalSessionPicker with lazy fetch ─────────────────
-
-/**
- * Higher-level picker that fetches sessions automatically.
- * Accepts a `fetchSessions` async function — result populates the session list.
- */
-export function TerminalSessionPickerLazy({
-  agentLabel,
-  currentSessionId,
-  fetchSessions,
-  supportsSession = true,
-  onSelect,
-  onCancel,
-}: {
-  agentLabel: string;
-  currentSessionId: string | null;
-  fetchSessions: () => Promise<SessionInfo[]>;
-  supportsSession?: boolean;
-  onSelect: (selection: PickerSelection) => void;
-  onCancel: () => void;
-}) {
-  const [sessions, setSessions] = useState<SessionInfo[] | null>(null);
-
-  useEffect(() => {
-    if (!supportsSession) {
-      setSessions([]);
-      return;
-    }
-    fetchSessions().then(setSessions).catch(() => setSessions([]));
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return (
-    <TerminalSessionPicker
-      agentLabel={agentLabel}
-      currentSessionId={currentSessionId}
-      sessions={sessions}
-      supportsSession={supportsSession}
-      onSelect={onSelect}
-      onCancel={onCancel}
-    />
-  );
-}
-
-// ─── Workspace Terminal Open ──────────────────────────────
-
-/**
- * Result from resolving how to open a workspace terminal.
- * When tmuxSession is set → FloatingTerminal should attach (existingSession=tmuxSession).
- * When tmuxSession is null → daemon couldn't create session; fall back to dialog or skip.
- */
-export interface WorkspaceTerminalInfo {
-  tmuxSession: string | null;
-  cliCmd?: string;
-  cliType?: string;
-  supportsSession?: boolean;
-}
-
-/**
- * Ask the orchestrator to create/find the tmux session for a workspace agent.
- * Returns tmuxSession name that FloatingTerminal can attach to.
- * This is the ONLY correct way to open a workspace terminal — ensures FORGE env vars
- * are injected via the forge launch script (not client-side profileEnv).
- */
-export async function resolveWorkspaceTerminal(
-  workspaceId: string,
-  agentId: string,
-): Promise<WorkspaceTerminalInfo> {
-  try {
-    const res = await fetch(`/api/workspace/${workspaceId}/smith`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'open_terminal', agentId }),
-    });
-    const data = await res.json();
-    return {
-      tmuxSession: data.tmuxSession || null,
-      cliCmd: data.cliCmd,
-      cliType: data.cliType,
-      supportsSession: data.supportsSession ?? true,
-    };
-  } catch {
-    return { tmuxSession: null };
-  }
-}
-
-/**
- * Resolve agent info for a workspace agent (resolveOnly — no session created).
- * Used to get cliCmd, cliType, env, model, supportsSession without side effects.
- */
-export async function resolveWorkspaceAgentInfo(
-  workspaceId: string,
-  agentId: string,
-): Promise<{ cliCmd?: string; cliType?: string; env?: Record<string, string>; model?: string; supportsSession?: boolean }> {
-  try {
-    const res = await fetch(`/api/workspace/${workspaceId}/smith`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action: 'open_terminal', agentId, resolveOnly: true }),
-    });
-    return await res.json();
-  } catch {
-    return {};
-  }
-}
-
-// ─── Project Terminal Config ──────────────────────────────
-
-/**
- * Result for opening a project terminal.
- * FloatingTerminal uses profileEnv + resumeSessionId when creating a new tmux session.
- */
-export interface ProjectTerminalConfig {
-  profileEnv: Record<string, string>;
-  resumeSessionId?: string;
-  cliCmd?: string;
-  cliType?: string;
-}
-
-/**
- * Build config for opening a project terminal (VibeCoding / ProjectDetail).
- * Agent env and model are resolved server-side via /api/agents?resolve=<agentId>.
- * FORGE vars are NOT included here — project terminals don't use workspace context.
- */
-export async function buildProjectTerminalConfig(
-  agentId: string,
-  resumeSessionId?: string,
-): Promise<ProjectTerminalConfig> {
-  try {
-    const res = await fetch(`/api/agents?resolve=${encodeURIComponent(agentId)}`);
-    const info = await res.json();
-    const profileEnv: Record<string, string> = { ...(info.env || {}) };
-    if (info.model) profileEnv.CLAUDE_MODEL = info.model;
-    return {
-      profileEnv,
-      resumeSessionId,
-      cliCmd: info.cliCmd,
-      cliType: info.cliType,
-    };
-  } catch {
-    return { profileEnv: {}, resumeSessionId };
-  }
-}

package/.forge/worktrees/pipeline-d6a6ef23/components/TunnelToggle.tsx

@@ -1,206 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback } from 'react';
-
-interface TunnelStatus {
-  status: 'stopped' | 'starting' | 'running' | 'error';
-  url: string | null;
-  error: string | null;
-}
-
-export default function TunnelToggle() {
-  const [tunnel, setTunnel] = useState<TunnelStatus>({ status: 'stopped', url: null, error: null });
-  const [loading, setLoading] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const [isRemote, setIsRemote] = useState(false);
-  const [confirmStop, setConfirmStop] = useState(false);
-  const [showPasswordPrompt, setShowPasswordPrompt] = useState(false);
-  const [password, setPassword] = useState('');
-  const [passwordError, setPasswordError] = useState('');
-
-  useEffect(() => {
-    setIsRemote(!['localhost', '127.0.0.1'].includes(window.location.hostname));
-  }, []);
-
-  const refresh = useCallback(() => {
-    fetch('/api/tunnel').then(r => r.json()).then(setTunnel).catch(() => {});
-  }, []);
-
-  useEffect(() => {
-    refresh();
-    const id = setInterval(refresh, 5000);
-    return () => clearInterval(id);
-  }, [refresh]);
-
-  useEffect(() => {
-    if (tunnel.status !== 'starting') return;
-    const id = setInterval(refresh, 2000);
-    return () => clearInterval(id);
-  }, [tunnel.status, refresh]);
-
-  const doStop = async () => {
-    setLoading(true);
-    try {
-      const res = await fetch('/api/tunnel', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'stop' }),
-      });
-      const data = await res.json();
-      setTunnel(data);
-    } catch {}
-    setLoading(false);
-    setConfirmStop(false);
-  };
-
-  const doStart = async (pw: string) => {
-    setLoading(true);
-    setPasswordError('');
-    try {
-      const res = await fetch('/api/tunnel', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ action: 'start', password: pw }),
-      });
-      const data = await res.json();
-      if (res.status === 403) {
-        setPasswordError('Wrong password');
-        setLoading(false);
-        return;
-      }
-      setTunnel(data);
-      setShowPasswordPrompt(false);
-      setPassword('');
-    } catch {}
-    setLoading(false);
-  };
-
-  const copyUrl = () => {
-    if (tunnel.url) {
-      navigator.clipboard.writeText(tunnel.url);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    }
-  };
-
-  // Hide tunnel controls when accessing remotely
-  if (isRemote) {
-    return null;
-  }
-
-  // Password prompt
-  if (showPasswordPrompt) {
-    return (
-      <div className="flex items-center gap-1.5">
-        <input
-          type="password"
-          value={password}
-          onChange={e => { setPassword(e.target.value); setPasswordError(''); }}
-          onKeyDown={e => e.key === 'Enter' && password && doStart(password)}
-          placeholder="Login password"
-          autoFocus
-          className={`w-[120px] text-[10px] px-2 py-0.5 bg-[var(--bg-tertiary)] border rounded font-mono focus:outline-none ${
-            passwordError ? 'border-[var(--red)]' : 'border-[var(--border)] focus:border-[var(--accent)]'
-          } text-[var(--text-primary)]`}
-        />
-        <button
-          onClick={() => password && doStart(password)}
-          disabled={!password || loading}
-          className="text-[10px] px-2 py-0.5 bg-[var(--green)] text-black rounded hover:opacity-90 disabled:opacity-50"
-        >
-          {loading ? 'Starting...' : 'Start'}
-        </button>
-        <button
-          onClick={() => { setShowPasswordPrompt(false); setPassword(''); setPasswordError(''); }}
-          className="text-[10px] px-1.5 py-0.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-        >
-          Cancel
-        </button>
-      </div>
-    );
-  }
-
-  // Stop confirmation dialog
-  if (confirmStop) {
-    return (
-      <div className="flex items-center gap-1.5">
-        <span className="text-[10px] text-[var(--text-secondary)]">Stop tunnel?</span>
-        <button
-          onClick={doStop}
-          disabled={loading}
-          className="text-[10px] px-2 py-0.5 bg-[var(--red)] text-white rounded hover:opacity-90"
-        >
-          Confirm
-        </button>
-        <button
-          onClick={() => setConfirmStop(false)}
-          className="text-[10px] px-2 py-0.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
-        >
-          Cancel
-        </button>
-      </div>
-    );
-  }
-
-  if (tunnel.status === 'stopped' && !tunnel.error) {
-    return (
-      <button
-        onClick={() => setShowPasswordPrompt(true)}
-        disabled={loading}
-        className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)] transition-colors disabled:opacity-50"
-        title="Start Cloudflare Tunnel for remote access"
-      >
-        Tunnel
-      </button>
-    );
-  }
-
-  if (tunnel.status === 'starting') {
-    return (
-      <span className="text-[10px] px-2 py-0.5 border border-[var(--yellow)] rounded text-[var(--yellow)]">
-        Tunnel starting...
-      </span>
-    );
-  }
-
-  if (tunnel.status === 'running' && tunnel.url) {
-    return (
-      <div className="flex items-center gap-1.5">
-        <button
-          onClick={copyUrl}
-          className="text-[10px] px-2 py-0.5 border border-[var(--green)] rounded text-[var(--green)] hover:bg-[var(--green)] hover:text-black transition-colors truncate max-w-[200px]"
-          title={`Click to copy: ${tunnel.url}`}
-        >
-          {copied ? 'Copied!' : tunnel.url.replace('https://', '')}
-        </button>
-        <button
-          onClick={() => setConfirmStop(true)}
-          disabled={loading}
-          className="text-[10px] px-1.5 py-0.5 text-[var(--red)] hover:bg-[var(--red)] hover:text-white rounded transition-colors"
-          title="Stop tunnel"
-        >
-          Stop
-        </button>
-      </div>
-    );
-  }
-
-  if (tunnel.status === 'error') {
-    return (
-      <div className="flex items-center gap-1.5">
-        <span className="text-[10px] text-[var(--red)] truncate max-w-[200px]" title={tunnel.error || ''}>
-          Tunnel error
-        </span>
-        <button
-          onClick={() => setShowPasswordPrompt(true)}
-          disabled={loading}
-          className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
-        >
-          Retry
-        </button>
-      </div>
-    );
-  }
-
-  return null;
-}