@aion0/forge 0.1.0

package/components/SettingsModal.tsx

@@ -0,0 +1,366 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface Settings {
+  projectRoots: string[];
+  claudePath: string;
+  telegramBotToken: string;
+  telegramChatId: string;
+  notifyOnComplete: boolean;
+  notifyOnFailure: boolean;
+  tunnelAutoStart: boolean;
+  telegramTunnelPassword: string;
+}
+
+interface TunnelStatus {
+  status: 'stopped' | 'starting' | 'running' | 'error';
+  url: string | null;
+  error: string | null;
+  installed: boolean;
+  log: string[];
+}
+
+export default function SettingsModal({ onClose }: { onClose: () => void }) {
+  const [settings, setSettings] = useState<Settings>({
+    projectRoots: [],
+    claudePath: '',
+    telegramBotToken: '',
+    telegramChatId: '',
+    notifyOnComplete: true,
+    notifyOnFailure: true,
+    tunnelAutoStart: false,
+    telegramTunnelPassword: '',
+  });
+  const [newRoot, setNewRoot] = useState('');
+  const [saved, setSaved] = useState(false);
+  const [tunnel, setTunnel] = useState<TunnelStatus>({
+    status: 'stopped', url: null, error: null, installed: false, log: [],
+  });
+  const [tunnelLoading, setTunnelLoading] = useState(false);
+  const [confirmStopTunnel, setConfirmStopTunnel] = useState(false);
+
+  const refreshTunnel = useCallback(() => {
+    fetch('/api/tunnel').then(r => r.json()).then(setTunnel).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    fetch('/api/settings').then(r => r.json()).then(setSettings);
+    refreshTunnel();
+  }, [refreshTunnel]);
+
+  // Poll tunnel status while starting
+  useEffect(() => {
+    if (tunnel.status !== 'starting') return;
+    const id = setInterval(refreshTunnel, 2000);
+    return () => clearInterval(id);
+  }, [tunnel.status, refreshTunnel]);
+
+  const save = async () => {
+    await fetch('/api/settings', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(settings),
+    });
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  };
+
+  const addRoot = () => {
+    const path = newRoot.trim();
+    if (!path || settings.projectRoots.includes(path)) return;
+    setSettings({ ...settings, projectRoots: [...settings.projectRoots, path] });
+    setNewRoot('');
+  };
+
+  const removeRoot = (path: string) => {
+    setSettings({
+      ...settings,
+      projectRoots: settings.projectRoots.filter(r => r !== path),
+    });
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
+      <div
+        className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg w-[500px] max-h-[80vh] overflow-y-auto p-5 space-y-5"
+        onClick={e => e.stopPropagation()}
+      >
+        <h2 className="text-sm font-bold">Settings</h2>
+
+        {/* Project Roots */}
+        <div className="space-y-2">
+          <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
+            Project Directories
+          </label>
+          <p className="text-[10px] text-[var(--text-secondary)]">
+            Add directories containing your projects. Each subdirectory is treated as a project.
+          </p>
+
+          {settings.projectRoots.map(root => (
+            <div key={root} className="flex items-center gap-2">
+              <span className="flex-1 text-xs px-2 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded font-mono truncate">
+                {root}
+              </span>
+              <button
+                onClick={() => removeRoot(root)}
+                className="text-[10px] px-2 py-1 text-[var(--red)] hover:bg-[var(--red)] hover:text-white rounded transition-colors"
+              >
+                Remove
+              </button>
+            </div>
+          ))}
+
+          <div className="flex gap-2">
+            <input
+              value={newRoot}
+              onChange={e => setNewRoot(e.target.value)}
+              onKeyDown={e => e.key === 'Enter' && addRoot()}
+              placeholder="/Users/you/projects"
+              className="flex-1 px-2 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]"
+            />
+            <button
+              onClick={addRoot}
+              className="text-[10px] px-3 py-1.5 bg-[var(--accent)] text-white rounded hover:opacity-90"
+            >
+              Add
+            </button>
+          </div>
+        </div>
+
+        {/* Claude Path */}
+        <div className="space-y-2">
+          <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
+            Claude Code Path
+          </label>
+          <p className="text-[10px] text-[var(--text-secondary)]">
+            Full path to the claude binary. Run `which claude` to find it.
+          </p>
+          <input
+            value={settings.claudePath}
+            onChange={e => setSettings({ ...settings, claudePath: e.target.value })}
+            placeholder="/usr/local/bin/claude"
+            className="w-full px-2 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]"
+          />
+        </div>
+
+        {/* Telegram Notifications */}
+        <div className="space-y-2">
+          <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
+            Telegram Notifications
+          </label>
+          <p className="text-[10px] text-[var(--text-secondary)]">
+            Get notified when tasks complete or fail. Create a bot via @BotFather, then send /start to it and use the test button below to get your chat ID.
+          </p>
+          <input
+            value={settings.telegramBotToken}
+            onChange={e => setSettings({ ...settings, telegramBotToken: e.target.value })}
+            placeholder="Bot token (from @BotFather)"
+            className="w-full px-2 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]"
+          />
+          <input
+            value={settings.telegramChatId}
+            onChange={e => setSettings({ ...settings, telegramChatId: e.target.value })}
+            placeholder="Chat ID (your numeric user ID)"
+            className="w-full px-2 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]"
+          />
+          <div className="flex items-center gap-4">
+            <label className="flex items-center gap-1.5 text-[11px] text-[var(--text-secondary)]">
+              <input
+                type="checkbox"
+                checked={settings.notifyOnComplete}
+                onChange={e => setSettings({ ...settings, notifyOnComplete: e.target.checked })}
+                className="rounded"
+              />
+              Notify on complete
+            </label>
+            <label className="flex items-center gap-1.5 text-[11px] text-[var(--text-secondary)]">
+              <input
+                type="checkbox"
+                checked={settings.notifyOnFailure}
+                onChange={e => setSettings({ ...settings, notifyOnFailure: e.target.checked })}
+                className="rounded"
+              />
+              Notify on failure
+            </label>
+            {settings.telegramBotToken && settings.telegramChatId && (
+              <button
+                type="button"
+                onClick={async () => {
+                  // Save first, then test
+                  await fetch('/api/settings', {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(settings),
+                  });
+                  const res = await fetch('/api/notify/test', { method: 'POST' });
+                  const data = await res.json();
+                  alert(data.ok ? 'Test message sent!' : `Failed: ${data.error}`);
+                }}
+                className="text-[10px] px-2 py-0.5 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white transition-colors"
+              >
+                Test
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Remote Access (Cloudflare Tunnel) */}
+        <div className="space-y-2">
+          <label className="text-xs text-[var(--text-secondary)] font-semibold uppercase">
+            Remote Access
+          </label>
+          <p className="text-[10px] text-[var(--text-secondary)]">
+            Expose this instance to the internet via Cloudflare Tunnel. No account needed — generates a temporary public URL.
+            {!tunnel.installed && ' First use will download cloudflared (~30MB).'}
+          </p>
+
+          <div className="flex items-center gap-2">
+            {tunnel.status === 'stopped' || tunnel.status === 'error' ? (
+              <button
+                disabled={tunnelLoading}
+                onClick={async () => {
+                  setTunnelLoading(true);
+                  try {
+                    const res = await fetch('/api/tunnel', {
+                      method: 'POST',
+                      headers: { 'Content-Type': 'application/json' },
+                      body: JSON.stringify({ action: 'start' }),
+                    });
+                    const data = await res.json();
+                    setTunnel(data);
+                  } catch {}
+                  setTunnelLoading(false);
+                }}
+                className="text-[10px] px-3 py-1.5 bg-[var(--green)] text-black rounded hover:opacity-90 disabled:opacity-50"
+              >
+                {tunnelLoading ? (tunnel.installed ? 'Starting...' : 'Downloading...') : 'Start Tunnel'}
+              </button>
+            ) : confirmStopTunnel ? (
+              <div className="flex items-center gap-2">
+                <span className="text-[10px] text-[var(--text-secondary)]">Stop tunnel?</span>
+                <button
+                  onClick={async () => {
+                    await fetch('/api/tunnel', {
+                      method: 'POST',
+                      headers: { 'Content-Type': 'application/json' },
+                      body: JSON.stringify({ action: 'stop' }),
+                    });
+                    refreshTunnel();
+                    setConfirmStopTunnel(false);
+                  }}
+                  className="text-[10px] px-2 py-1 bg-[var(--red)] text-white rounded hover:opacity-90"
+                >
+                  Confirm
+                </button>
+                <button
+                  onClick={() => setConfirmStopTunnel(false)}
+                  className="text-[10px] px-2 py-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                >
+                  Cancel
+                </button>
+              </div>
+            ) : (
+              <button
+                onClick={() => setConfirmStopTunnel(true)}
+                className="text-[10px] px-3 py-1.5 bg-[var(--red)] text-white rounded hover:opacity-90"
+              >
+                Stop Tunnel
+              </button>
+            )}
+
+            <span className="text-[10px] text-[var(--text-secondary)]">
+              {tunnel.status === 'running' && (
+                <span className="text-[var(--green)]">Running</span>
+              )}
+              {tunnel.status === 'starting' && (
+                <span className="text-[var(--yellow)]">Starting...</span>
+              )}
+              {tunnel.status === 'error' && (
+                <span className="text-[var(--red)]">Error</span>
+              )}
+              {tunnel.status === 'stopped' && 'Stopped'}
+            </span>
+          </div>
+
+          {tunnel.url && (
+            <div className="flex items-center gap-2">
+              <input
+                readOnly
+                value={tunnel.url}
+                className="flex-1 px-2 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--green)] font-mono focus:outline-none cursor-text select-all"
+                onClick={e => (e.target as HTMLInputElement).select()}
+              />
+              <button
+                onClick={() => {
+                  navigator.clipboard.writeText(tunnel.url!);
+                }}
+                className="text-[10px] px-2 py-1.5 border border-[var(--border)] rounded hover:bg-[var(--bg-tertiary)] transition-colors"
+              >
+                Copy
+              </button>
+            </div>
+          )}
+
+          {tunnel.error && (
+            <p className="text-[10px] text-[var(--red)]">{tunnel.error}</p>
+          )}
+
+          {tunnel.log.length > 0 && tunnel.status !== 'stopped' && (
+            <details className="text-[10px]">
+              <summary className="text-[var(--text-secondary)] cursor-pointer hover:text-[var(--text-primary)]">
+                Logs ({tunnel.log.length} lines)
+              </summary>
+              <pre className="mt-1 p-2 bg-[var(--bg-primary)] border border-[var(--border)] rounded text-[9px] text-[var(--text-secondary)] max-h-[120px] overflow-auto font-mono whitespace-pre-wrap">
+                {tunnel.log.join('\n')}
+              </pre>
+            </details>
+          )}
+
+          <label className="flex items-center gap-1.5 text-[11px] text-[var(--text-secondary)]">
+            <input
+              type="checkbox"
+              checked={settings.tunnelAutoStart}
+              onChange={e => setSettings({ ...settings, tunnelAutoStart: e.target.checked })}
+              className="rounded"
+            />
+            Auto-start tunnel on server startup
+          </label>
+
+          <div className="space-y-1">
+            <label className="text-[10px] text-[var(--text-secondary)]">
+              Telegram tunnel password (for /tunnel_password command)
+            </label>
+            <input
+              value={settings.telegramTunnelPassword}
+              onChange={e => setSettings({ ...settings, telegramTunnelPassword: e.target.value })}
+              placeholder="Set a password to get login credentials via Telegram"
+              className="w-full px-2 py-1.5 bg-[var(--bg-tertiary)] border border-[var(--border)] rounded text-xs text-[var(--text-primary)] font-mono focus:outline-none focus:border-[var(--accent)]"
+            />
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center justify-between pt-2 border-t border-[var(--border)]">
+          <span className="text-[10px] text-[var(--green)]">
+            {saved ? '✓ Saved' : ''}
+          </span>
+          <div className="flex gap-2">
+            <button
+              onClick={onClose}
+              className="px-3 py-1.5 text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+            >
+              Close
+            </button>
+            <button
+              onClick={save}
+              className="px-3 py-1.5 text-xs bg-[var(--accent)] text-white rounded hover:opacity-90"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/StatusBar.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import type { Session } from '@/src/types';
+
+const providerLabels: Record<string, string> = {
+  anthropic: 'Claude',
+  google: 'Gemini',
+  openai: 'OpenAI',
+  grok: 'Grok',
+};
+
+export default function StatusBar({
+  providers,
+  usage,
+  sessions,
+}: {
+  providers: any[];
+  usage: any[];
+  sessions: Session[];
+}) {
+  const running = sessions.filter(s => s.status === 'running').length;
+  const idle = sessions.filter(s => s.status === 'idle').length;
+  const errored = sessions.filter(s => s.status === 'error').length;
+
+  return (
+    <div className="flex flex-col p-3 space-y-4 text-xs overflow-y-auto">
+      {/* Overview */}
+      <div>
+        <h3 className="font-semibold text-[var(--text-secondary)] uppercase mb-2">Status</h3>
+        <div className="space-y-1">
+          <div className="flex justify-between">
+            <span className="text-[var(--green)]">Running</span>
+            <span>{running}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-[var(--accent)]">Idle</span>
+            <span>{idle}</span>
+          </div>
+          {errored > 0 && (
+            <div className="flex justify-between">
+              <span className="text-[var(--red)]">Error</span>
+              <span>{errored}</span>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Providers */}
+      <div>
+        <h3 className="font-semibold text-[var(--text-secondary)] uppercase mb-2">Providers</h3>
+        <div className="space-y-2">
+          {providers.filter(p => p.enabled).map(p => {
+            const u = usage.find((u: any) => u.provider === p.name);
+            const totalTokens = u ? u.totalInput + u.totalOutput : 0;
+
+            return (
+              <div key={p.name} className="space-y-0.5">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-1.5">
+                    <span className={`text-[10px] ${p.hasKey ? 'text-[var(--green)]' : 'text-[var(--yellow)]'}`}>
+                      {p.hasKey ? '●' : '○'}
+                    </span>
+                    <span>{p.displayName}</span>
+                  </div>
+                  <span className="text-[var(--text-secondary)]">
+                    {totalTokens > 0 ? `${(totalTokens / 1000).toFixed(1)}k` : '—'}
+                  </span>
+                </div>
+                {totalTokens > 0 && (
+                  <div className="ml-4 h-1 bg-[var(--bg-primary)] rounded overflow-hidden">
+                    <div
+                      className="h-full bg-[var(--accent)] rounded"
+                      style={{ width: `${Math.min((totalTokens / 100000) * 100, 100)}%` }}
+                    />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Quick info */}
+      <div>
+        <h3 className="font-semibold text-[var(--text-secondary)] uppercase mb-2">Info</h3>
+        <div className="space-y-1 text-[var(--text-secondary)]">
+          <div className="flex justify-between">
+            <span>Sessions</span>
+            <span>{sessions.length}</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Total msgs</span>
+            <span>{sessions.reduce((a, s) => a + s.messageCount, 0)}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/TaskBoard.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import type { Task, TaskStatus } from '@/src/types';
+
+const STATUS_COLORS: Record<TaskStatus, string> = {
+  queued: 'text-yellow-500',
+  running: 'text-[var(--green)]',
+  done: 'text-blue-400',
+  failed: 'text-[var(--red)]',
+  cancelled: 'text-[var(--text-secondary)]',
+};
+
+const STATUS_LABELS: Record<TaskStatus, string> = {
+  queued: 'queued',
+  running: 'running',
+  done: 'done',
+  failed: 'failed',
+  cancelled: 'cancelled',
+};
+
+export default function TaskBoard({
+  tasks,
+  activeId,
+  onSelect,
+  onRefresh,
+}: {
+  tasks: Task[];
+  activeId: string | null;
+  onSelect: (id: string) => void;
+  onRefresh: () => void;
+}) {
+  const [filter, setFilter] = useState<TaskStatus | 'all'>('all');
+
+  const filtered = filter === 'all' ? tasks : tasks.filter(t => t.status === filter);
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Filter tabs */}
+      <div className="p-2 border-b border-[var(--border)] flex gap-1 flex-wrap">
+        {(['all', 'running', 'queued', 'done', 'failed'] as const).map(f => (
+          <button
+            key={f}
+            onClick={() => setFilter(f)}
+            className={`text-[10px] px-2 py-0.5 rounded transition-colors ${
+              filter === f ? 'bg-[var(--accent)] text-white' : 'text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)]'
+            }`}
+          >
+            {f} {f !== 'all' ? `(${tasks.filter(t => t.status === f).length})` : `(${tasks.length})`}
+          </button>
+        ))}
+      </div>
+
+      {/* Task list */}
+      <div className="flex-1 overflow-y-auto">
+        {filtered.map(task => (
+          <button
+            key={task.id}
+            onClick={() => onSelect(task.id)}
+            className={`w-full text-left px-3 py-2 border-b border-[var(--border)] hover:bg-[var(--bg-tertiary)] transition-colors ${
+              activeId === task.id ? 'bg-[var(--bg-tertiary)]' : ''
+            }`}
+          >
+            <div className="flex items-center gap-2 mb-0.5">
+              <span className={`text-[10px] ${STATUS_COLORS[task.status]}`}>●</span>
+              <span className="text-xs font-medium truncate">{task.projectName}</span>
+              <span className={`text-[9px] ml-auto ${STATUS_COLORS[task.status]}`}>
+                {task.scheduledAt && task.status === 'queued'
+                  ? `⏰ ${new Date(task.scheduledAt).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}`
+                  : STATUS_LABELS[task.status]}
+              </span>
+            </div>
+            <p className="text-[11px] text-[var(--text-secondary)] truncate pl-4">
+              {task.prompt.slice(0, 80)}{task.prompt.length > 80 ? '...' : ''}
+            </p>
+            <div className="flex items-center gap-2 pl-4 mt-0.5">
+              <span className="text-[9px] text-[var(--text-secondary)]">
+                {timeAgo(task.createdAt)}
+              </span>
+              {task.costUSD != null && (
+                <span className="text-[9px] text-[var(--text-secondary)]">
+                  ${task.costUSD.toFixed(3)}
+                </span>
+              )}
+            </div>
+          </button>
+        ))}
+        {filtered.length === 0 && (
+          <div className="p-4 text-center text-xs text-[var(--text-secondary)]">
+            No tasks
+          </div>
+        )}
+      </div>
+
+      <div className="p-2 border-t border-[var(--border)] text-[10px] text-[var(--text-secondary)] text-center">
+        {tasks.length} tasks total
+      </div>
+    </div>
+  );
+}
+
+function timeAgo(dateStr: string): string {
+  const now = Date.now();
+  const then = new Date(dateStr).getTime();
+  const diff = now - then;
+  if (diff < 60000) return 'just now';
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
+  return `${Math.floor(diff / 86400000)}d ago`;
+}