@aion0/forge 0.2.16 → 0.2.18

package/app/api/code/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from 'next/server';
-import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
 import { join, relative, extname } from 'node:path';
 import { homedir } from 'node:os';
 import { execSync } from 'node:child_process';
@@ -221,3 +221,39 @@ export async function GET(req: Request) {
 
   return NextResponse.json({ tree, dirName, dirPath: resolvedDir, gitBranch, gitChanges, gitRepos });
 }
+
+// PUT /api/code — save file content
+export async function PUT(req: Request) {
+  const { dir, file, content } = await req.json() as {
+    dir: string;
+    file: string;
+    content: string;
+  };
+
+  if (!dir || !file) {
+    return NextResponse.json({ error: 'Invalid request' }, { status: 400 });
+  }
+
+  const resolvedDir = dir.replace(/^~/, homedir());
+  const fullPath = join(resolvedDir, file);
+
+  // Security: ensure path is within the directory
+  if (!fullPath.startsWith(resolvedDir)) {
+    return NextResponse.json({ error: 'Invalid path' }, { status: 400 });
+  }
+
+  // Verify dir is under a configured project root
+  const settings = loadSettings();
+  const roots = (settings.projectRoots || []).map(r => r.replace(/^~/, homedir()));
+  const allowed = roots.some(r => resolvedDir.startsWith(r));
+  if (!allowed) {
+    return NextResponse.json({ error: 'Directory not in project roots' }, { status: 403 });
+  }
+
+  try {
+    writeFileSync(fullPath, content, 'utf-8');
+    return NextResponse.json({ ok: true });
+  } catch {
+    return NextResponse.json({ error: 'Failed to save' }, { status: 500 });
+  }
+}

package/app/api/detect-cli/route.ts

@@ -0,0 +1,46 @@
+import { NextResponse } from 'next/server';
+import { execSync } from 'node:child_process';
+import { platform } from 'node:os';
+
+interface CliInfo {
+  name: string;
+  path: string;
+  version: string;
+  installHint: string;
+}
+
+function detect(name: string, installHint: string): CliInfo {
+  try {
+    const path = execSync(`which ${name}`, { encoding: 'utf-8', timeout: 3000, stdio: ['pipe', 'pipe', 'pipe'] }).trim();
+    let version = '';
+    try {
+      const out = execSync(`${path} --version`, { encoding: 'utf-8', timeout: 5000, stdio: ['pipe', 'pipe', 'pipe'] }).trim();
+      // Extract version number from output (e.g. "@anthropic-ai/claude-code v1.2.3" or "codex 0.1.0")
+      const match = out.match(/v?(\d+\.\d+\.\d+)/);
+      version = match ? match[1] : out.slice(0, 50);
+    } catch {}
+    return { name, path, version, installHint };
+  } catch {
+    return { name, path: '', version: '', installHint };
+  }
+}
+
+export async function GET() {
+  const os = platform();
+  const isLinux = os === 'linux';
+  const isMac = os === 'darwin';
+
+  const results = [
+    detect('claude', isMac
+      ? 'npm install -g @anthropic-ai/claude-code'
+      : isLinux
+        ? 'npm install -g @anthropic-ai/claude-code'
+        : 'npm install -g @anthropic-ai/claude-code'),
+    detect('codex', 'npm install -g @openai/codex'),
+    detect('aider', isMac
+      ? 'brew install aider  or  pip install aider-chat'
+      : 'pip install aider-chat'),
+  ];
+
+  return NextResponse.json({ os, tools: results });
+}

package/app/api/docs/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from 'next/server';
-import { readdirSync, statSync, readFileSync } from 'node:fs';
+import { readdirSync, statSync, readFileSync, writeFileSync } from 'node:fs';
 import { join, relative, extname } from 'node:path';
 import { homedir } from 'node:os';
 import { loadSettings } from '@/lib/settings';
@@ -128,3 +128,34 @@ export async function GET(req: Request) {
 
   return NextResponse.json({ roots: rootNames, rootPaths: docRoots, tree });
 }
+
+// PUT /api/docs — save file content
+export async function PUT(req: Request) {
+  const { root: rootIdx, file: filePath, content } = await req.json() as {
+    root: number;
+    file: string;
+    content: string;
+  };
+
+  const settings = loadSettings();
+  const docRoots = (settings.docRoots || []).map(r => r.replace(/^~/, homedir()));
+
+  if (rootIdx >= docRoots.length || !filePath) {
+    return NextResponse.json({ error: 'Invalid request' }, { status: 400 });
+  }
+
+  const root = docRoots[rootIdx];
+  const fullPath = join(root, filePath);
+
+  // Security: ensure path is within root
+  if (!fullPath.startsWith(root)) {
+    return NextResponse.json({ error: 'Invalid path' }, { status: 400 });
+  }
+
+  try {
+    writeFileSync(fullPath, content, 'utf-8');
+    return NextResponse.json({ ok: true });
+  } catch (e) {
+    return NextResponse.json({ error: 'Failed to save' }, { status: 500 });
+  }
+}

package/app/api/upgrade/route.ts

@@ -16,8 +16,16 @@ export async function POST() {
       });
     }
 
+    // Upgrade from npm
     execSync('cd /tmp && npm install -g @aion0/forge', { timeout: 120000 });
 
+    // Install devDependencies for build (npm -g doesn't install them)
+    const pkgRoot = execSync('npm root -g', { encoding: 'utf-8', timeout: 5000 }).trim();
+    const forgeRoot = join(pkgRoot, '@aion0', 'forge');
+    try {
+      execSync('npm install --include=dev', { cwd: forgeRoot, timeout: 120000 });
+    } catch {}
+
     return NextResponse.json({
       ok: true,
       message: 'Upgraded. Restart server to apply.',

package/app/api/version/route.ts

@@ -16,8 +16,8 @@ const CURRENT_VERSION = (() => {
 let cachedLatest: { version: string; checkedAt: number } | null = null;
 const CACHE_TTL = 10 * 60 * 1000; // 10 minutes
 
-async function getLatestVersion(): Promise<string> {
-  if (cachedLatest && Date.now() - cachedLatest.checkedAt < CACHE_TTL) {
+async function getLatestVersion(force = false): Promise<string> {
+  if (!force && cachedLatest && Date.now() - cachedLatest.checkedAt < CACHE_TTL) {
     return cachedLatest.version;
   }
   try {
@@ -47,9 +47,11 @@ function compareVersions(a: string, b: string): number {
   return 0;
 }
 
-export async function GET() {
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const force = searchParams.has('force');
   const current = CURRENT_VERSION;
-  const latest = await getLatestVersion();
+  const latest = await getLatestVersion(force);
   const hasUpdate = latest && compareVersions(current, latest) < 0;
 
   return NextResponse.json({

package/bin/forge-server.mjs

@@ -28,6 +28,16 @@ import { homedir } from 'node:os';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT = join(__dirname, '..');
 
+/** Build Next.js — install devDependencies first if missing */
+function buildNext() {
+  // Check if devDependencies are installed (e.g. @tailwindcss/postcss)
+  if (!existsSync(join(ROOT, 'node_modules', '@tailwindcss', 'postcss'))) {
+    console.log('[forge] Installing dependencies...');
+    execSync('npm install --include=dev', { cwd: ROOT, stdio: 'inherit' });
+  }
+  execSync('npx next build', { cwd: ROOT, stdio: 'inherit', env: { ...process.env } });
+}
+
 // ── Parse arguments ──
 
 function getArg(name) {
@@ -173,7 +183,7 @@ function stopServer() {
 function startBackground() {
   if (!existsSync(join(ROOT, '.next', 'BUILD_ID'))) {
     console.log('[forge] Building...');
-    execSync('npx next build', { cwd: ROOT, stdio: 'inherit', env: { ...process.env } });
+    buildNext();
   }
 
   const logFd = openSync(LOG_FILE, 'a');
@@ -221,7 +231,7 @@ if (isRebuild || existsSync(join(ROOT, '.next', 'BUILD_ID'))) {
   if (isRebuild || lastBuiltVersion !== pkgVersion) {
     console.log(`[forge] Rebuilding (v${pkgVersion})...`);
     execSync('rm -rf .next', { cwd: ROOT });
-    execSync('npx next build', { cwd: ROOT, stdio: 'inherit', env: { ...process.env } });
+    buildNext();
     writeFileSync(versionFile, pkgVersion);
     if (isRebuild) {
       console.log('[forge] Rebuild complete');
@@ -254,7 +264,7 @@ if (isDev) {
 } else {
   if (!existsSync(join(ROOT, '.next', 'BUILD_ID'))) {
     console.log('[forge] Building...');
-    execSync('npx next build', { cwd: ROOT, stdio: 'inherit', env: { ...process.env } });
+    buildNext();
   }
   console.log(`[forge] Starting server (port ${webPort}, terminal ${terminalPort}, data ${DATA_DIR})`);
   startServices();

package/components/CodeViewer.tsx

@@ -185,6 +185,9 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
   const [viewMode, setViewMode] = useState<'file' | 'diff'>('file');
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [codeOpen, setCodeOpen] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editContent, setEditContent] = useState('');
+  const [saving, setSaving] = useState(false);
 
   const handleCodeOpenChange = useCallback((open: boolean) => {
     setCodeOpen(open);
@@ -626,7 +629,43 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
               <>
                 <span className="text-xs font-semibold text-[var(--text-primary)] truncate">{selectedFile}</span>
                 {language && (
-                  <span className="text-[9px] text-[var(--text-secondary)] ml-auto">{LANG_MAP[language] || language}</span>
+                  <span className="text-[9px] text-[var(--text-secondary)] ml-auto mr-2">{LANG_MAP[language] || language}</span>
+                )}
+                {content !== null && !editing && (
+                  <button
+                    onClick={() => { setEditing(true); setEditContent(content); }}
+                    className="text-[9px] px-2 py-0.5 border border-[var(--border)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)] shrink-0 ml-auto"
+                  >
+                    Edit
+                  </button>
+                )}
+                {editing && (
+                  <>
+                    <button
+                      disabled={saving}
+                      onClick={async () => {
+                        if (!currentDir || !selectedFile) return;
+                        setSaving(true);
+                        await fetch('/api/code', {
+                          method: 'PUT',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ dir: currentDir, file: selectedFile, content: editContent }),
+                        });
+                        setContent(editContent);
+                        setEditing(false);
+                        setSaving(false);
+                      }}
+                      className="text-[9px] px-2 py-0.5 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50 shrink-0 ml-auto"
+                    >
+                      {saving ? 'Saving...' : 'Save'}
+                    </button>
+                    <button
+                      onClick={() => setEditing(false)}
+                      className="text-[9px] px-2 py-0.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] shrink-0"
+                    >
+                      Cancel
+                    </button>
+                  </>
                 )}
               </>
             ) : (
@@ -688,6 +727,28 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
               </pre>
             </div>
           ) : selectedFile && content !== null ? (
+            editing ? (
+              <div className="flex-1 overflow-hidden flex flex-col">
+                <textarea
+                  value={editContent}
+                  onChange={e => setEditContent(e.target.value)}
+                  onKeyDown={e => {
+                    // Tab key inserts 2 spaces
+                    if (e.key === 'Tab') {
+                      e.preventDefault();
+                      const ta = e.target as HTMLTextAreaElement;
+                      const start = ta.selectionStart;
+                      const end = ta.selectionEnd;
+                      setEditContent(editContent.slice(0, start) + '  ' + editContent.slice(end));
+                      setTimeout(() => { ta.selectionStart = ta.selectionEnd = start + 2; }, 0);
+                    }
+                  }}
+                  className="flex-1 w-full p-4 bg-[var(--bg-primary)] text-[var(--text-primary)] text-[12px] leading-[1.5] font-mono resize-none focus:outline-none"
+                  style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace', tabSize: 2 }}
+                  spellCheck={false}
+                />
+              </div>
+            ) : (
             <div className="flex-1 overflow-auto bg-[var(--bg-primary)]">
               <pre className="p-4 text-[12px] leading-[1.5] font-mono text-[var(--text-primary)] whitespace-pre" style={{ fontFamily: 'Menlo, Monaco, "Courier New", monospace', tabSize: 2, overflow: 'auto', maxWidth: 0, minWidth: '100%' }}>
                 {content.split('\n').map((line, i) => (
@@ -698,6 +759,7 @@ export default function CodeViewer({ terminalRef }: { terminalRef: React.RefObje
                 ))}
               </pre>
             </div>
+            )
           ) : (
             <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
               <p className="text-xs">{currentDir ? 'Select a file to view' : 'Terminal will show files for its working directory'}</p>

package/components/Dashboard.tsx

@@ -8,7 +8,6 @@ import SessionView from './SessionView';
 import NewTaskModal from './NewTaskModal';
 import SettingsModal from './SettingsModal';
 import TunnelToggle from './TunnelToggle';
-import MonitorPanel from './MonitorPanel';
 import type { Task } from '@/src/types';
 import type { WebTerminalHandle } from './WebTerminal';
 
@@ -45,7 +44,6 @@ export default function Dashboard({ user }: { user: any }) {
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
   const [showNewTask, setShowNewTask] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
-  const [showMonitor, setShowMonitor] = useState(false);
   const [usage, setUsage] = useState<UsageSummary[]>([]);
   const [providers, setProviders] = useState<ProviderInfo[]>([]);
   const [projects, setProjects] = useState<ProjectInfo[]>([]);
@@ -129,6 +127,19 @@ export default function Dashboard({ user }: { user: any }) {
                   {upgrading ? 'Upgrading...' : `Update v${versionInfo.latest}`}
                 </button>
               )}
+              {!versionInfo.hasUpdate && !upgradeResult && (
+                <button
+                  onClick={async () => {
+                    const res = await fetch('/api/version?force=1');
+                    const data = await res.json();
+                    setVersionInfo(data);
+                  }}
+                  className="text-[9px] px-1.5 py-0.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+                  title="Check for updates"
+                >
+                  ↻
+                </button>
+              )}
               {upgradeResult && (
                 <span className="text-[9px] text-[var(--green)] max-w-[200px] truncate" title={upgradeResult}>
                   {upgradeResult}
@@ -189,16 +200,6 @@ export default function Dashboard({ user }: { user: any }) {
             >
               Pipelines
             </button>
-            <button
-              onClick={() => setViewMode('sessions')}
-              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
-                viewMode === 'sessions'
-                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
-                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-              }`}
-            >
-              Sessions
-            </button>
             <button
               onClick={() => setViewMode('preview')}
               className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
@@ -237,10 +238,10 @@ export default function Dashboard({ user }: { user: any }) {
             </span>
           )}
           <button
-            onClick={() => setShowMonitor(true)}
-            className="text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
+            onClick={() => setViewMode('sessions')}
+            className={`text-xs ${viewMode === 'sessions' ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
           >
-            Monitor
+            System Status
           </button>
           <button
             onClick={() => setShowSettings(true)}
@@ -413,8 +414,6 @@ export default function Dashboard({ user }: { user: any }) {
         />
       )}
 
-      {showMonitor && <MonitorPanel onClose={() => setShowMonitor(false)} />}
-
       {showSettings && (
         <SettingsModal onClose={() => { setShowSettings(false); fetchData(); }} />
       )}

package/components/DocsViewer.tsx

@@ -84,6 +84,9 @@ export default function DocsViewer() {
   const [search, setSearch] = useState('');
   const [terminalHeight, setTerminalHeight] = useState(250);
   const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [editing, setEditing] = useState(false);
+  const [editContent, setEditContent] = useState('');
+  const [saving, setSaving] = useState(false);
   const dragRef = useRef<{ startY: number; startH: number } | null>(null);
 
   // Fetch tree
@@ -254,7 +257,42 @@ export default function DocsViewer() {
             {selectedFile ? (
               <>
                 <span className="text-xs font-semibold text-[var(--text-primary)] truncate">{selectedFile.replace(/\.md$/, '')}</span>
-                <span className="text-[9px] text-[var(--text-secondary)] ml-auto">{selectedFile}</span>
+                <span className="text-[9px] text-[var(--text-secondary)] ml-auto mr-2">{selectedFile}</span>
+                {content && !isImageFile(selectedFile) && !editing && (
+                  <button
+                    onClick={() => { setEditing(true); setEditContent(content); }}
+                    className="text-[9px] px-2 py-0.5 border border-[var(--border)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)] shrink-0"
+                  >
+                    Edit
+                  </button>
+                )}
+                {editing && (
+                  <>
+                    <button
+                      disabled={saving}
+                      onClick={async () => {
+                        setSaving(true);
+                        await fetch('/api/docs', {
+                          method: 'PUT',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ root: activeRoot, file: selectedFile, content: editContent }),
+                        });
+                        setContent(editContent);
+                        setEditing(false);
+                        setSaving(false);
+                      }}
+                      className="text-[9px] px-2 py-0.5 bg-[var(--accent)] text-white rounded hover:opacity-90 disabled:opacity-50 shrink-0"
+                    >
+                      {saving ? 'Saving...' : 'Save'}
+                    </button>
+                    <button
+                      onClick={() => setEditing(false)}
+                      className="text-[9px] px-2 py-0.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] shrink-0"
+                    >
+                      Cancel
+                    </button>
+                  </>
+                )}
               </>
             ) : (
               <span className="text-xs text-[var(--text-secondary)]">{roots[activeRoot] || 'Docs'}</span>
@@ -278,6 +316,17 @@ export default function DocsViewer() {
               />
             </div>
           ) : selectedFile && content ? (
+            editing ? (
+              <div className="flex-1 overflow-hidden flex flex-col">
+                <textarea
+                  value={editContent}
+                  onChange={e => setEditContent(e.target.value)}
+                  className="flex-1 w-full p-4 bg-[var(--bg-primary)] text-[var(--text-primary)] text-[13px] font-mono leading-relaxed resize-none focus:outline-none"
+                  style={{ tabSize: 2 }}
+                  spellCheck={false}
+                />
+              </div>
+            ) : (
             <div className="flex-1 overflow-y-auto px-8 py-6">
               {loading ? (
                 <div className="text-xs text-[var(--text-secondary)]">Loading...</div>
@@ -287,6 +336,7 @@ export default function DocsViewer() {
                 </div>
               )}
             </div>
+            )
           ) : (
             <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
               <p className="text-xs">Select a document to view</p>

package/components/SessionView.tsx

@@ -32,6 +32,17 @@ interface Watcher {
   createdAt: string;
 }
 
+interface MonitorData {
+  processes: {
+    nextjs: { running: boolean; pid: string };
+    terminal: { running: boolean; pid: string };
+    telegram: { running: boolean; pid: string };
+    tunnel: { running: boolean; pid: string; url: string };
+  };
+  sessions: { name: string; created: string; attached: boolean; windows: number }[];
+  uptime: string;
+}
+
 export default function SessionView({
   projectName,
   projects,
@@ -51,7 +62,9 @@ export default function SessionView({
   const [syncing, setSyncing] = useState(false);
   const [watchers, setWatchers] = useState<Watcher[]>([]);
   const [batchMode, setBatchMode] = useState(false);
-  const [selectedIds, setSelectedIds] = useState<Map<string, Set<string>>>(new Map()); // project → sessionIds
+  const [selectedIds, setSelectedIds] = useState<Map<string, Set<string>>>(new Map());
+  const [monitor, setMonitor] = useState<MonitorData | null>(null);
+  const [monitorOpen, setMonitorOpen] = useState(true);
   const bottomRef = useRef<HTMLDivElement>(null);
 
   // Load cached sessions tree
@@ -79,10 +92,17 @@ export default function SessionView({
     } catch {}
   }, []);
 
+  const refreshMonitor = useCallback(() => {
+    fetch('/api/monitor').then(r => r.json()).then(setMonitor).catch(() => {});
+  }, []);
+
   useEffect(() => {
-    loadTree(true); // Initial sync
+    loadTree(true);
     loadWatchers();
-  }, [loadTree, loadWatchers]);
+    refreshMonitor();
+    const timer = setInterval(refreshMonitor, 5000);
+    return () => clearInterval(timer);
+  }, [loadTree, loadWatchers, refreshMonitor]);
 
   // Auto-expand project if only one or if pre-selected
   useEffect(() => {
@@ -328,6 +348,56 @@ export default function SessionView({
           </div>
         )}
 
+        {/* Monitor */}
+        {monitor && (
+          <div className="border-b border-[var(--border)]">
+            <button
+              onClick={() => setMonitorOpen(v => !v)}
+              className="w-full flex items-center gap-1.5 px-2 py-1.5 hover:bg-[var(--bg-tertiary)] transition-colors"
+            >
+              <span className="text-[10px] text-[var(--text-secondary)]">{monitorOpen ? '▼' : '▶'}</span>
+              <span className="text-[9px] font-semibold text-[var(--text-secondary)] uppercase">Monitor</span>
+              {monitor.uptime && (
+                <span className="text-[8px] text-[var(--text-secondary)] ml-auto">{monitor.uptime}</span>
+              )}
+            </button>
+            {monitorOpen && (
+              <div className="px-2 pb-2 space-y-1.5">
+                {/* Processes */}
+                {[
+                  { label: 'Next.js', ...monitor.processes.nextjs },
+                  { label: 'Terminal', ...monitor.processes.terminal },
+                  { label: 'Telegram', ...monitor.processes.telegram },
+                  { label: 'Tunnel', ...monitor.processes.tunnel },
+                ].map(p => (
+                  <div key={p.label} className="flex items-center gap-1.5 text-[10px]">
+                    <span className={p.running ? 'text-green-400' : 'text-gray-500'}>●</span>
+                    <span className="text-[var(--text-primary)]">{p.label}</span>
+                    <span className="text-[var(--text-secondary)] font-mono ml-auto">{p.running ? `pid:${p.pid}` : 'stopped'}</span>
+                  </div>
+                ))}
+                {monitor.processes.tunnel.running && monitor.processes.tunnel.url && (
+                  <div className="text-[9px] text-[var(--accent)] truncate pl-4">{monitor.processes.tunnel.url}</div>
+                )}
+
+                {/* Tmux sessions */}
+                {monitor.sessions.length > 0 && (
+                  <div className="pt-1">
+                    <span className="text-[8px] font-semibold text-[var(--text-secondary)] uppercase">Tmux ({monitor.sessions.length})</span>
+                    {monitor.sessions.map(s => (
+                      <div key={s.name} className="flex items-center gap-1.5 text-[10px] mt-0.5">
+                        <span className={s.attached ? 'text-green-400' : 'text-yellow-500'}>●</span>
+                        <span className="font-mono text-[var(--text-primary)] truncate flex-1">{s.name}</span>
+                        <span className="text-[8px] text-[var(--text-secondary)]">{s.attached ? 'attached' : 'detached'}</span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
         {/* Tree */}
         <div className="flex-1 overflow-y-auto">
           {Object.keys(sessionTree).length === 0 && (

package/components/SettingsModal.tsx

@@ -410,15 +410,38 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
           <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.
+          <div className="flex gap-2">
+            <input
+              value={settings.claudePath}
+              onChange={e => setSettings({ ...settings, claudePath: e.target.value })}
+              placeholder="Auto-detect or enter path manually"
+              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
+              type="button"
+              onClick={async () => {
+                try {
+                  const res = await fetch('/api/detect-cli');
+                  const data = await res.json();
+                  const claude = data.tools?.find((t: any) => t.name === 'claude');
+                  if (claude?.path) {
+                    setSettings({ ...settings, claudePath: claude.path });
+                  } else {
+                    const hint = claude?.installHint || 'npm install -g @anthropic-ai/claude-code';
+                    alert(`Claude Code not found.\n\nInstall:\n  ${hint}`);
+                  }
+                } catch { alert('Detection failed'); }
+              }}
+              className="text-[10px] px-2 py-1.5 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white transition-colors shrink-0"
+            >
+              Detect
+            </button>
+          </div>
+          <p className={`text-[9px] ${settings.claudePath ? 'text-[var(--text-secondary)]' : 'text-[var(--yellow)]'}`}>
+            {settings.claudePath
+              ? 'Click Detect to re-scan, or edit manually.'
+              : 'Not configured. Click Detect or run `which claude` in terminal to find the path.'}
           </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 */}

package/lib/init.ts

@@ -45,6 +45,21 @@ function migrateSecrets() {
   }
 }
 
+/** Auto-detect claude binary path if not configured */
+function autoDetectClaude() {
+  try {
+    const settings = loadSettings();
+    if (settings.claudePath) return; // already configured
+    const { execSync } = require('node:child_process');
+    const path = execSync('which claude', { encoding: 'utf-8', timeout: 3000, stdio: ['pipe', 'pipe', 'pipe'] }).trim();
+    if (path) {
+      settings.claudePath = path;
+      saveSettings(settings);
+      console.log(`[init] Auto-detected claude: ${path}`);
+    }
+  } catch {}
+}
+
 export function ensureInitialized() {
   if (gInit[initKey]) return;
   gInit[initKey] = true;
@@ -52,6 +67,9 @@ export function ensureInitialized() {
   // Migrate plaintext secrets on startup
   migrateSecrets();
 
+  // Auto-detect claude path if not configured
+  autoDetectClaude();
+
   // Task runner is safe in every worker (DB-level coordination)
   ensureRunnerStarted();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aion0/forge",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "description": "Unified AI workflow platform — multi-model task orchestration, persistent sessions, web terminal, remote access",
   "type": "module",
   "scripts": {