@aion0/forge 0.4.10 → 0.4.11

package/RELEASE_NOTES.md

@@ -1,18 +1,13 @@
-# Forge v0.4.10
+# Forge v0.4.11
 
-Released: 2026-03-22
+Released: 2026-03-23
 
-## Changes since v0.4.9
+## Changes since v0.4.10
 
-### Features
-- feat: browser panel refactor, pane close UX, help AI data dir, terminal resume fix
+### Other
+- mobile page
+- init version for mobile page
+- change sync period time
 
-### Bug Fixes
-- fix: auto-retry failed issues, batch dedup, gh auth hint
-- feat: browser panel refactor, pane close UX, help AI data dir, terminal resume fix
 
-### Refactoring
-- refactor: Browser as independent panel with float/left/right modes
-
-
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.9...v0.4.10
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.10...v0.4.11

package/app/api/claude-sessions/[projectName]/entries/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server';
+import { getSessionFilePath, readSessionEntries } from '@/lib/claude-sessions';
+import { statSync } from 'node:fs';
+
+export async function GET(req: Request, { params }: { params: Promise<{ projectName: string }> }) {
+  const { projectName } = await params;
+  const url = new URL(req.url);
+  const sessionId = url.searchParams.get('sessionId');
+
+  if (!sessionId) {
+    return NextResponse.json({ error: 'sessionId required' }, { status: 400 });
+  }
+
+  const filePath = getSessionFilePath(decodeURIComponent(projectName), sessionId);
+  if (!filePath) {
+    return NextResponse.json({ entries: [], count: 0, fileSize: 0 });
+  }
+
+  const entries = readSessionEntries(filePath);
+  let fileSize = 0;
+  try { fileSize = statSync(filePath).size; } catch {}
+  return NextResponse.json({ entries, count: entries.length, fileSize });
+}

package/app/api/mobile-chat/route.ts

@@ -0,0 +1,87 @@
+import { NextResponse } from 'next/server';
+import { spawn } from 'node:child_process';
+import { loadSettings } from '@/lib/settings';
+
+export const dynamic = 'force-dynamic';
+export const runtime = 'nodejs';
+
+// POST /api/mobile-chat — send a message to claude and stream response
+export async function POST(req: Request) {
+  const { message, projectPath, resume } = await req.json() as {
+    message: string;
+    projectPath: string;
+    resume?: boolean;
+  };
+
+  if (!message || !projectPath) {
+    return NextResponse.json({ error: 'message and projectPath required' }, { status: 400 });
+  }
+
+  const settings = loadSettings();
+  const claudePath = settings.claudePath || 'claude';
+
+  const args = ['-p', '--dangerously-skip-permissions', '--output-format', 'json'];
+  if (resume) args.push('-c');
+
+  const child = spawn(claudePath, args, {
+    cwd: projectPath,
+    env: { ...process.env },
+    stdio: ['pipe', 'pipe', 'pipe'],
+  });
+
+  child.stdin.write(message);
+  child.stdin.end();
+
+  const encoder = new TextEncoder();
+  let closed = false;
+
+  const stream = new ReadableStream({
+    start(controller) {
+      child.stdout.on('data', (chunk: Buffer) => {
+        if (closed) return;
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'chunk', text: chunk.toString() })}\n\n`));
+        } catch {}
+      });
+
+      child.stderr.on('data', (chunk: Buffer) => {
+        if (closed) return;
+        const text = chunk.toString();
+        if (text.includes('npm update') || text.includes('WARN')) return;
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'stderr', text })}\n\n`));
+        } catch {}
+      });
+
+      child.on('exit', (code) => {
+        if (closed) return;
+        closed = true;
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'done', code })}\n\n`));
+          controller.close();
+        } catch {}
+      });
+
+      child.on('error', (err) => {
+        if (closed) return;
+        closed = true;
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'error', message: err.message })}\n\n`));
+          controller.close();
+        } catch {}
+      });
+    },
+    cancel() {
+      closed = true;
+      try { child.kill('SIGTERM'); } catch {}
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache, no-transform',
+      Connection: 'keep-alive',
+    },
+  });
+}

package/app/mobile/page.tsx

@@ -0,0 +1,9 @@
+import { auth } from '@/lib/auth';
+import { redirect } from 'next/navigation';
+import MobileView from '@/components/MobileView';
+
+export default async function MobilePage() {
+  const session = await auth();
+  if (!session) redirect('/login');
+  return <MobileView />;
+}

package/app/page.tsx

@@ -1,9 +1,21 @@
 import { auth } from '@/lib/auth';
 import { redirect } from 'next/navigation';
+import { headers } from 'next/headers';
 import Dashboard from '@/components/Dashboard';
 
-export default async function Home() {
+export default async function Home({ searchParams }: { searchParams: Promise<{ force?: string }> }) {
   const session = await auth();
   if (!session) redirect('/login');
+
+  const params = await searchParams;
+
+  // Auto-detect mobile and redirect (skip if ?force=desktop)
+  if (params.force !== 'desktop') {
+    const headersList = await headers();
+    const ua = headersList.get('user-agent') || '';
+    const isMobile = /iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua);
+    if (isMobile) redirect('/mobile');
+  }
+
   return <Dashboard user={session.user} />;
 }

package/components/BrowserPanel.tsx

@@ -29,10 +29,17 @@ export default function BrowserPanel({ onClose }: { onClose?: () => void }) {
     return () => clearInterval(timer);
   }, [fetchPreviews]);
 
+  const normalizeUrl = (val: string): string => {
+    if (/^\d+$/.test(val)) return `http://localhost:${val}`;
+    if (!/^https?:\/\//i.test(val)) return `http://${val}`;
+    return val;
+  };
+
   const navigate = (url: string) => {
-    setBrowserUrl(url);
-    localStorage.setItem('forge-browser-url', url);
-    if (browserUrlRef.current) browserUrlRef.current.value = url;
+    const normalized = normalizeUrl(url);
+    setBrowserUrl(normalized);
+    localStorage.setItem('forge-browser-url', normalized);
+    if (browserUrlRef.current) browserUrlRef.current.value = normalized;
     setBrowserKey(k => k + 1);
   };
 
@@ -96,8 +103,7 @@ export default function BrowserPanel({ onClose }: { onClose?: () => void }) {
             if (e.key === 'Enter') {
               const val = (e.target as HTMLInputElement).value.trim();
               if (!val) return;
-              const url = /^\d+$/.test(val) ? `http://localhost:${val}` : val;
-              navigate(url);
+              navigate(val);
             }
           }}
           className="flex-1 bg-[var(--bg-secondary)] border border-[var(--border)] rounded px-2 py-0.5 text-[10px] text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] min-w-0"

package/components/Dashboard.tsx

@@ -558,6 +558,12 @@ export default function Dashboard({ user }: { user: any }) {
                   >
                     Logs
                   </button>
+                  <a
+                    href="/mobile"
+                    className="block w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]"
+                  >
+                    Mobile View
+                  </a>
                   <div className="border-t border-[var(--border)] my-1" />
                   <button
                     onClick={() => signOut({ callbackUrl: '/login' })}

package/components/MobileView.tsx

@@ -0,0 +1,365 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+interface Project { name: string; path: string }
+interface SessionInfo { sessionId: string; summary?: string; firstPrompt?: string; modified?: string }
+interface ChatMessage { role: 'user' | 'assistant' | 'system'; content: string; timestamp: string }
+
+export default function MobileView() {
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [showSessions, setShowSessions] = useState(false);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [tunnelUrl, setTunnelUrl] = useState<string | null>(null);
+  const [debug, setDebug] = useState<string[]>([]);
+  const [debugLevel, setDebugLevel] = useState<'off' | 'simple' | 'verbose'>('off');
+  const debugLevelRef = useRef<'off' | 'simple' | 'verbose'>('off');
+  const [hasSession, setHasSession] = useState(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  // Fetch projects
+  useEffect(() => {
+    fetch('/api/projects').then(r => r.json())
+      .then(data => { if (Array.isArray(data)) setProjects(data); })
+      .catch(() => {});
+    fetch('/api/tunnel').then(r => r.json())
+      .then(data => { setTunnelUrl(data.url || null); })
+      .catch(() => {});
+  }, []);
+
+  // Auto-scroll
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages]);
+
+  // Fetch sessions for project
+  const fetchSessions = useCallback(async (projectName: string) => {
+    try {
+      const res = await fetch(`/api/claude-sessions/${encodeURIComponent(projectName)}`);
+      const data = await res.json();
+      const list = Array.isArray(data) ? data : [];
+      setSessions(list);
+      setHasSession(list.length > 0);
+      return list;
+    } catch { setSessions([]); return []; }
+  }, []);
+
+  // Load session history
+  const loadHistory = useCallback(async (projectName: string, sessionId: string) => {
+    try {
+      const res = await fetch(`/api/claude-sessions/${encodeURIComponent(projectName)}/entries?sessionId=${encodeURIComponent(sessionId)}`);
+      const data = await res.json();
+      const entries = data.entries || [];
+      // Convert entries to chat messages (only user + assistant_text)
+      const chatMessages: ChatMessage[] = [];
+      for (const e of entries) {
+        if (e.type === 'user') {
+          chatMessages.push({ role: 'user', content: e.content, timestamp: e.timestamp || '' });
+        } else if (e.type === 'assistant_text') {
+          chatMessages.push({ role: 'assistant', content: e.content, timestamp: e.timestamp || '' });
+        }
+      }
+      setMessages(chatMessages);
+    } catch {}
+  }, []);
+
+  // Select project
+  const selectProject = useCallback(async (project: Project) => {
+    setSelectedProject(project);
+    setShowSessions(false);
+    setMessages([]);
+
+    const sessionList = await fetchSessions(project.name);
+    // Load last session history if exists
+    if (sessionList.length > 0) {
+      await loadHistory(project.name, sessionList[0].sessionId);
+    }
+  }, [fetchSessions, loadHistory]);
+
+  // View specific session
+  const viewSession = useCallback(async (sessionId: string) => {
+    if (!selectedProject) return;
+    setShowSessions(false);
+    setMessages([]);
+    await loadHistory(selectedProject.name, sessionId);
+  }, [selectedProject, loadHistory]);
+
+  // Send message
+  const sendMessage = async () => {
+    const text = input.trim();
+    if (!text || !selectedProject || loading) return;
+
+    // Add user message
+    setMessages(prev => [...prev, { role: 'user', content: text, timestamp: new Date().toISOString() }]);
+    setInput('');
+    setLoading(true);
+    setDebug(d => [...d.slice(-20), `Send: "${text.slice(0, 40)}"`]);
+    inputRef.current?.focus();
+
+    // Stream response from API
+    const abort = new AbortController();
+    abortRef.current = abort;
+    let assistantText = '';
+    const startTime = Date.now();
+
+    try {
+      const res = await fetch('/api/mobile-chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          message: text,
+          projectPath: selectedProject.path,
+          resume: false,
+        }),
+        signal: abort.signal,
+      });
+
+      const reader = res.body?.getReader();
+      if (!reader) throw new Error('No reader');
+
+      const decoder = new TextDecoder();
+
+      // Add empty assistant message to fill in
+      setMessages(prev => [...prev, { role: 'assistant', content: '...', timestamp: new Date().toISOString() }]);
+
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) break;
+
+        const chunk = decoder.decode(value, { stream: true });
+        for (const line of chunk.split('\n')) {
+          if (!line.startsWith('data: ')) continue;
+          try {
+            const data = JSON.parse(line.slice(6));
+            if (data.type === 'chunk') {
+              assistantText += data.text;
+              if (debugLevelRef.current === 'verbose') {
+                // Show content preview in verbose mode
+                const preview = data.text.replace(/\n/g, '↵').slice(0, 80);
+                setDebug(d => [...d.slice(-50), `chunk: ${preview}`]);
+              }
+            } else if (data.type === 'stderr') {
+              if (debugLevelRef.current !== 'off') {
+                setDebug(d => [...d.slice(-50), `stderr: ${data.text.trim().slice(0, 100)}`]);
+              }
+            } else if (data.type === 'error') {
+              assistantText = `Error: ${data.message}`;
+              setDebug(d => [...d.slice(-50), `ERROR: ${data.message}`]);
+            } else if (data.type === 'done') {
+              if (debugLevelRef.current !== 'off') setDebug(d => [...d.slice(-50), `done: exit ${data.code}`]);
+            }
+          } catch {}
+        }
+
+        // Update assistant message with latest text
+        if (assistantText) {
+          let displayText = assistantText;
+          try {
+            const parsed = JSON.parse(assistantText);
+            if (parsed.result) displayText = parsed.result;
+          } catch {}
+          setMessages(prev => {
+            const updated = [...prev];
+            updated[updated.length - 1] = { role: 'assistant', content: displayText, timestamp: new Date().toISOString() };
+            return updated;
+          });
+        }
+      }
+
+      // Final parse
+      try {
+        const parsed = JSON.parse(assistantText);
+        const finalText = parsed.result || assistantText;
+        setMessages(prev => {
+          const updated = [...prev];
+          updated[updated.length - 1] = { role: 'assistant', content: finalText, timestamp: new Date().toISOString() };
+          return updated;
+        });
+      } catch {}
+
+      // After first message, future ones should use -c
+      setHasSession(true);
+      const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
+      setDebug(d => [...d.slice(-50), `Response complete (${elapsed}s, ${assistantText.length} chars)`]);
+    } catch (e: any) {
+      if (e.name !== 'AbortError') {
+        setDebug(d => [...d.slice(-20), `Error: ${e.message}`]);
+        setMessages(prev => [...prev.slice(0, -1), { role: 'system', content: `Failed: ${e.message}`, timestamp: new Date().toISOString() }]);
+      }
+    }
+
+    setLoading(false);
+    abortRef.current = null;
+  };
+
+  // Stop generation
+  const stopGeneration = () => {
+    if (abortRef.current) abortRef.current.abort();
+  };
+
+  // Close tunnel
+  const closeTunnel = async () => {
+    if (!confirm('Close tunnel? You will lose remote access.')) return;
+    await fetch('/api/tunnel', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'stop' }),
+    });
+    setTunnelUrl(null);
+  };
+
+  return (
+    <div className="h-[100dvh] flex flex-col bg-[#0d1117] text-[#e6edf3]">
+      {/* Header */}
+      <header className="shrink-0 flex items-center gap-1.5 px-2 py-2 bg-[#161b22] border-b border-[#30363d]">
+        <span className="text-xs font-bold text-[#7c5bf0]">Forge</span>
+        <select
+          value={selectedProject?.path || ''}
+          onChange={e => {
+            const p = projects.find(p => p.path === e.target.value);
+            if (p) selectProject(p);
+          }}
+          className="flex-1 bg-[#0d1117] border border-[#30363d] rounded px-2 py-1 text-xs text-[#e6edf3] min-w-0"
+        >
+          <option value="">Project</option>
+          {projects.map(p => (
+            <option key={p.path} value={p.path}>{p.name}</option>
+          ))}
+        </select>
+        {selectedProject && (
+          <>
+            <button
+              onClick={() => { setShowSessions(v => !v); if (!showSessions) fetchSessions(selectedProject.name); }}
+              className="text-xs px-2 py-1 border border-[#30363d] rounded text-[#8b949e] active:bg-[#30363d]"
+            >Sessions</button>
+            <button
+              onClick={async () => {
+                const list = await fetchSessions(selectedProject.name);
+                if (list.length > 0) {
+                  await loadHistory(selectedProject.name, list[0].sessionId);
+                  setDebug(d => [...d.slice(-20), `Refreshed: ${list[0].sessionId.slice(0, 8)}`]);
+                }
+              }}
+              className="text-sm px-3 py-1 border border-[#30363d] rounded text-[#8b949e] active:bg-[#30363d]"
+            >↻</button>
+          </>
+        )}
+        {tunnelUrl && (
+          <button onClick={closeTunnel} className="text-xs px-1.5 py-1 border border-green-700 rounded text-green-400" title={tunnelUrl}>●</button>
+        )}
+        <a href="/?force=desktop" className="text-[9px] px-1.5 py-1 border border-[#30363d] rounded text-[#8b949e] active:bg-[#30363d]" title="Switch to desktop view">PC</a>
+      </header>
+
+      {/* Session list */}
+      {showSessions && (
+        <div className="shrink-0 max-h-[40vh] overflow-y-auto bg-[#161b22] border-b border-[#30363d]">
+          {sessions.length === 0 ? (
+            <div className="px-3 py-4 text-xs text-[#8b949e] text-center">No sessions found</div>
+          ) : sessions.map(s => (
+            <button
+              key={s.sessionId}
+              onClick={() => viewSession(s.sessionId)}
+              className="w-full text-left px-3 py-2 border-b border-[#30363d]/50 hover:bg-[#1c2128] text-xs"
+            >
+              <div className="flex items-center gap-2">
+                <span className="text-[#e6edf3] font-mono truncate">{s.sessionId.slice(0, 12)}</span>
+                {s.modified && <span className="text-[#8b949e] ml-auto shrink-0">{new Date(s.modified).toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>}
+              </div>
+              {(s.summary || s.firstPrompt) && (
+                <div className="text-[#8b949e] mt-0.5 truncate">{s.summary || s.firstPrompt}</div>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Messages */}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto px-3 py-2 min-h-0 space-y-3">
+        {!selectedProject ? (
+          <div className="h-full flex items-center justify-center text-sm text-[#8b949e]">
+            Select a project to start
+          </div>
+        ) : messages.length === 0 ? (
+          <div className="h-full flex items-center justify-center text-sm text-[#8b949e]">
+            {hasSession ? 'Session loaded. Type a message.' : 'No sessions yet. Type a message to start.'}
+          </div>
+        ) : messages.map((msg, i) => (
+          <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+            <div className={`max-w-[85%] rounded-2xl px-3 py-2 text-sm whitespace-pre-wrap break-words ${
+              msg.role === 'user'
+                ? 'bg-[#7c5bf0] text-white rounded-br-sm'
+                : msg.role === 'system'
+                  ? 'bg-red-900/30 text-red-300 rounded-bl-sm'
+                  : 'bg-[#1c2128] text-[#e6edf3] rounded-bl-sm'
+            }`}>
+              {msg.content}
+            </div>
+          </div>
+        ))}
+        {loading && (
+          <div className="flex justify-start">
+            <div className="bg-[#1c2128] rounded-2xl rounded-bl-sm px-3 py-2 text-sm text-[#8b949e]">
+              Thinking...
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Input */}
+      <div className="shrink-0 flex items-center gap-2 px-3 py-2 bg-[#161b22] border-t border-[#30363d]">
+        <input
+          ref={inputRef}
+          type="text"
+          value={input}
+          onChange={e => setInput(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter' && !loading) sendMessage(); }}
+          placeholder={selectedProject ? 'Type a message...' : 'Select a project first'}
+          disabled={!selectedProject}
+          className="flex-1 bg-[#0d1117] border border-[#30363d] rounded-lg px-3 py-2 text-sm text-[#e6edf3] focus:outline-none focus:border-[#7c5bf0] disabled:opacity-50 min-w-0"
+          autoComplete="off"
+          autoCorrect="off"
+        />
+        {loading ? (
+          <button
+            onClick={stopGeneration}
+            className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium shrink-0"
+          >Stop</button>
+        ) : (
+          <button
+            onClick={sendMessage}
+            disabled={!selectedProject || !input.trim()}
+            className="px-4 py-2 bg-[#7c5bf0] text-white rounded-lg text-sm font-medium disabled:opacity-50 shrink-0"
+          >Send</button>
+        )}
+      </div>
+
+      {/* Debug log */}
+      <div className="shrink-0 bg-[#0d1117] border-t border-[#30363d]">
+        <div className="flex items-center gap-2 px-3 py-1">
+          <span className="text-[9px] text-[#8b949e]">Debug:</span>
+          {(['off', 'simple', 'verbose'] as const).map(level => (
+            <button
+              key={level}
+              onClick={() => { setDebugLevel(level); debugLevelRef.current = level; if (level === 'off') setDebug([]); }}
+              className={`text-[9px] px-1.5 py-0.5 rounded ${debugLevel === level ? 'bg-[#30363d] text-[#e6edf3]' : 'text-[#8b949e]'}`}
+            >{level}</button>
+          ))}
+          {debug.length > 0 && (
+            <button onClick={() => setDebug([])} className="text-[9px] text-[#8b949e] ml-auto">Clear</button>
+          )}
+        </div>
+        {debugLevel !== 'off' && debug.length > 0 && (
+          <div className="px-3 py-1 max-h-32 overflow-y-auto border-t border-[#30363d]/50">
+            {debug.map((d, i) => <div key={i} className="text-[9px] text-[#8b949e] font-mono">{d}</div>)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/lib/claude-sessions.ts

@@ -257,8 +257,8 @@ export function tailSessionFile(
 
   watcher.on('error', (err) => onError?.(err));
 
-  // Poll every 5 seconds as fallback
-  const pollTimer = setInterval(readNewBytes, 5000);
+  // Poll every 1 second as fallback (fs.watch is unreliable on macOS)
+  const pollTimer = setInterval(readNewBytes, 1000);
 
   return () => {
     watcher.close();

package/lib/init.ts

@@ -103,7 +103,7 @@ export function ensureInitialized() {
   try {
     const { syncSkills } = require('./skills');
     syncSkills().catch(() => {});
-    setInterval(() => { syncSkills().catch(() => {}); }, 30 * 60 * 1000);
+    setInterval(() => { syncSkills().catch(() => {}); }, 60 * 60 * 1000);
   } catch {}
 
   // Task runner is safe in every worker (DB-level coordination)

package/package.json

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