@aion0/forge 0.4.14 → 0.4.16

package/CLAUDE.md

@@ -9,7 +9,7 @@ forge server start              # production via npm link/install
 forge server start --dev        # dev mode
 forge server start              # background by default, logs to ~/.forge/forge.log
 forge server start --foreground # foreground mode
-forge server stop               # stop default instance (port 3000)
+forge server stop               # stop default instance (port 8403)
 forge server stop --port 4000 --dir ~/.forge-staging  # stop specific instance
 forge server restart            # stop + start (safe for remote)
 forge server rebuild            # force rebuild

package/README.md

@@ -32,7 +32,7 @@ npm install -g @aion0/forge
 forge server start
 ```
 
-Open `http://localhost:3000`. First launch prompts you to set an admin password.
+Open `http://localhost:8403`. First launch prompts you to set an admin password.
 
 **Requirements:** Node.js ≥ 20, tmux, [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code)
 

package/RELEASE_NOTES.md

@@ -1,18 +1,26 @@
-# Forge v0.4.14
+# Forge v0.4.16
 
 Released: 2026-03-23
 
-## Changes since v0.4.13
+## Changes since v0.4.15
+
+### Features
+- feat: change default port from 3000/3001 to 8403/8404
+- feat: prompt to restart Claude after skill/command installation
+- Revert "feat: mobile real-time streaming with tool activity display"
+- feat: mobile real-time streaming with tool activity display
 
 ### Bug Fixes
-- fix: bell idle timer 10s + 90s fallback
-- fix: bell uses idle detection instead of output pattern matching
-- fix: bell resets only on Enter key, not every keystroke
-- fix: bell cooldown 2min per tab label, prevents duplicate notifications
-- fix: bell requires 2000+ bytes of new output before checking markers
-- fix: notification timestamps display in correct timezone
-- fix: bell fires once per claude task, suppressed on attach/redraw
-- fix: bell detects claude completion markers (Cogitated, tokens, prompt)
+- fix: only show port change warning when using default port
+- fix: upgrade Next.js 16.1.6 → 16.2.1 to fix Turbopack panic
+- fix: start.sh exports PORT=8403 and TERMINAL_PORT=8404
+- fix: default config port 3000 → 8403
+
+### Documentation
+- docs: update README port 3000 → 8403
+
+### Other
+- Revert "feat: mobile real-time streaming with tool activity display"
 
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.13...v0.4.14
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.4.15...v0.4.16

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

@@ -19,6 +19,7 @@ export async function POST(req: Request) {
 
   const settings = loadSettings();
   const claudePath = settings.claudePath || 'claude';
+  const projectName = projectPath.split('/').pop() || projectPath;
 
   const args = ['-p', '--dangerously-skip-permissions', '--output-format', 'json'];
   if (resume) args.push('-c');
@@ -34,13 +35,16 @@ export async function POST(req: Request) {
 
   const encoder = new TextEncoder();
   let closed = false;
+  let fullOutput = '';
 
   const stream = new ReadableStream({
     start(controller) {
       child.stdout.on('data', (chunk: Buffer) => {
         if (closed) return;
+        const text = chunk.toString();
+        fullOutput += text;
         try {
-          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'chunk', text: chunk.toString() })}\n\n`));
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'chunk', text })}\n\n`));
         } catch {}
       });
 
@@ -56,6 +60,24 @@ export async function POST(req: Request) {
       child.on('exit', (code) => {
         if (closed) return;
         closed = true;
+
+        // Record usage from the JSON output
+        try {
+          const parsed = JSON.parse(fullOutput);
+          if (parsed.session_id) {
+            const { recordUsage } = require('@/lib/usage-scanner');
+            recordUsage({
+              sessionId: parsed.session_id,
+              source: 'mobile',
+              projectPath,
+              projectName,
+              model: parsed.model || 'unknown',
+              inputTokens: parsed.usage?.input_tokens || parsed.total_input_tokens || 0,
+              outputTokens: parsed.usage?.output_tokens || parsed.total_output_tokens || 0,
+            });
+          }
+        } catch {}
+
         try {
           controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'done', code })}\n\n`));
           controller.close();

package/app/api/usage/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+import { scanUsage, queryUsage } from '@/lib/usage-scanner';
+
+// GET /api/usage?days=7&project=forge&source=task&model=claude-opus-4
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const days = searchParams.get('days') ? parseInt(searchParams.get('days')!) : undefined;
+  const projectName = searchParams.get('project') || undefined;
+  const source = searchParams.get('source') || undefined;
+  const model = searchParams.get('model') || undefined;
+
+  const data = queryUsage({ days, projectName, source, model });
+  return NextResponse.json(data);
+}
+
+// POST /api/usage — trigger scan
+export async function POST() {
+  const result = scanUsage();
+  return NextResponse.json(result);
+}

package/bin/forge-server.mjs

@@ -9,8 +9,8 @@
  *   forge-server --stop                   Stop background server
  *   forge-server --restart                Stop + start (safe for remote)
  *   forge-server --rebuild                Force rebuild
- *   forge-server --port 4000              Custom web port (default: 3000)
- *   forge-server --terminal-port 4001     Custom terminal port (default: 3001)
+ *   forge-server --port 4000              Custom web port (default: 8403)
+ *   forge-server --terminal-port 4001     Custom terminal port (default: 8404)
  *   forge-server --dir ~/.forge-test      Custom data directory (default: ~/.forge)
  *   forge-server --reset-terminal         Kill terminal server before start (loses tmux sessions)
  *
@@ -62,7 +62,7 @@ const isRebuild = process.argv.includes('--rebuild');
 const resetTerminal = process.argv.includes('--reset-terminal');
 const resetPassword = process.argv.includes('--reset-password');
 
-const webPort = parseInt(getArg('--port')) || 3000;
+const webPort = parseInt(getArg('--port')) || 8403;
 const terminalPort = parseInt(getArg('--terminal-port')) || (webPort + 1);
 const DATA_DIR = getArg('--dir')?.replace(/^~/, homedir()) || join(homedir(), '.forge', 'data');
 
@@ -379,6 +379,13 @@ function startBackground() {
   startServices();
 
   console.log(`[forge] Started in background (pid ${child.pid})`);
+  if (!getArg('--port')) {
+    console.log(`[forge] ⚠️  Default port changed: 3000 → ${webPort}`);
+    console.log(`[forge] ⚠️  Default port changed: 3000 → ${webPort}`);
+    console.log(`[forge] ⚠️  Default port changed: 3000 → ${webPort}`);
+    console.log(`[forge] ⚠️  Default port changed: 3000 → ${webPort}`);
+    console.log(`[forge] ⚠️  Default port changed: 3000 → ${webPort}`);
+  }
   console.log(`[forge] Web: http://localhost:${webPort}`);
   console.log(`[forge] Terminal: ws://localhost:${terminalPort}`);
   console.log(`[forge] Data: ${DATA_DIR}`);

package/cli/mw.ts

@@ -562,8 +562,8 @@ Usage:
   forge uninstall                Remove forge
 
 Options for 'forge server start':
-  --port 4000                    Custom web port (default: 3000)
-  --terminal-port 4001           Custom terminal port (default: 3001)
+  --port 4000                    Custom web port (default: 8403)
+  --terminal-port 4001           Custom terminal port (default: 8404)
   --dir ~/.forge-staging         Custom data directory
   --background                   Run in background
   --reset-terminal               Kill terminal server on start

package/components/Dashboard.tsx

@@ -21,6 +21,7 @@ const PipelineView = lazy(() => import('./PipelineView'));
 const HelpDialog = lazy(() => import('./HelpDialog'));
 const LogViewer = lazy(() => import('./LogViewer'));
 const SkillsPanel = lazy(() => import('./SkillsPanel'));
+const UsagePanel = lazy(() => import('./UsagePanel'));
 
 interface UsageSummary {
   provider: string;
@@ -94,7 +95,7 @@ function FloatingBrowser({ onClose }: { onClose: () => void }) {
 }
 
 export default function Dashboard({ user }: { user: any }) {
-  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'pipelines' | 'skills' | 'logs'>('terminal');
+  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'pipelines' | 'skills' | 'logs' | 'usage'>('terminal');
   const [browserMode, setBrowserMode] = useState<'none' | 'float' | 'right' | 'left'>('none');
   const [showBrowserMenu, setShowBrowserMenu] = useState(false);
   const [browserWidth, setBrowserWidth] = useState(600);
@@ -409,6 +410,14 @@ export default function Dashboard({ user }: { user: any }) {
               </>
             )}
           </div>
+          <button
+            onClick={() => setViewMode('usage')}
+            className={`text-[10px] px-2 py-0.5 border rounded transition-colors ${
+              viewMode === 'usage'
+                ? 'border-[var(--accent)] text-[var(--accent)]'
+                : 'border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)]'
+            }`}
+          >Usage</button>
           <TunnelToggle />
           {onlineCount.total > 0 && (
             <span className="text-[10px] text-[var(--text-secondary)] flex items-center gap-1" title={`${onlineCount.total} online${onlineCount.remote > 0 ? `, ${onlineCount.remote} remote` : ''}`}>
@@ -708,6 +717,13 @@ export default function Dashboard({ user }: { user: any }) {
           </Suspense>
         )}
 
+        {/* Usage */}
+        {viewMode === 'usage' && (
+          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
+            <UsagePanel />
+          </Suspense>
+        )}
+
         {/* Logs */}
         {viewMode === 'logs' && (
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>

package/components/DocTerminal.tsx

@@ -8,13 +8,13 @@ import '@xterm/xterm/css/xterm.css';
 const SESSION_NAME = 'mw-docs-claude';
 
 function getWsUrl() {
-  if (typeof window === 'undefined') return `ws://localhost:${parseInt(process.env.TERMINAL_PORT || '3001')}`;
+  if (typeof window === 'undefined') return `ws://localhost:${parseInt(process.env.TERMINAL_PORT || '8404')}`;
   const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
   const wsHost = window.location.hostname;
   if (wsHost !== 'localhost' && wsHost !== '127.0.0.1') {
     return `${wsProtocol}//${window.location.host}/terminal-ws`;
   }
-  const webPort = parseInt(window.location.port) || 3000;
+  const webPort = parseInt(window.location.port) || 8403;
   return `${wsProtocol}//${wsHost}:${webPort + 1}`;
 }
 

package/components/HelpTerminal.tsx

@@ -8,13 +8,13 @@ import '@xterm/xterm/css/xterm.css';
 const SESSION_NAME = 'mw-forge-help';
 
 function getWsUrl() {
-  if (typeof window === 'undefined') return `ws://localhost:${parseInt(process.env.TERMINAL_PORT || '3001')}`;
+  if (typeof window === 'undefined') return `ws://localhost:${parseInt(process.env.TERMINAL_PORT || '8404')}`;
   const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
   const wsHost = window.location.hostname;
   if (wsHost !== 'localhost' && wsHost !== '127.0.0.1') {
     return `${wsProtocol}//${window.location.host}/terminal-ws`;
   }
-  const webPort = parseInt(window.location.port) || 3000;
+  const webPort = parseInt(window.location.port) || 8403;
   return `${wsProtocol}//${wsHost}:${webPort + 1}`;
 }
 

package/components/SkillsPanel.tsx

@@ -149,6 +149,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
     });
     setInstallTarget({ skill: '', show: false });
     fetchSkills();
+    alert(`"${name}" installed. Restart Claude in terminal to apply.`);
   };
 
   const toggleDetail = async (name: string) => {
@@ -497,6 +498,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
                                         body: JSON.stringify({ action: 'install-local', name: itemName, type: localItem.type, sourceProject: localItem.projectPath, target: 'global', force: true }) });
                                       const data = await res.json();
                                       if (!data.ok) alert(data.error);
+                                      else alert(`"${itemName}" installed globally. Restart Claude to apply.`);
                                       setInstallTarget({ skill: '', show: false });
                                       fetchSkills();
                                     }}
@@ -511,6 +513,7 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
                                           body: JSON.stringify({ action: 'install-local', name: itemName, type: localItem.type, sourceProject: localItem.projectPath, target: p.path, force: true }) });
                                         const data = await res.json();
                                         if (!data.ok) alert(data.error);
+                                        else alert(`"${itemName}" installed to ${p.name}. Restart Claude to apply.`);
                                         setInstallTarget({ skill: '', show: false });
                                         fetchSkills();
                                       }}
@@ -579,6 +582,12 @@ export default function SkillsPanel({ projectFilter }: { projectFilter?: string
                       </div>}
                     </div>
                     <p className="text-[10px] text-[var(--text-secondary)] mt-0.5">{skill?.description || ''}</p>
+                    {skill?.author && (
+                      <div className="text-[9px] text-[var(--text-secondary)] mt-1">By {skill.author}</div>
+                    )}
+                    {skill?.sourceUrl && (
+                      <a href={skill.sourceUrl} target="_blank" rel="noopener noreferrer" className="text-[9px] text-[var(--accent)] hover:underline mt-0.5 block truncate">{skill.sourceUrl.replace(/^https?:\/\//, '').slice(0, 60)}</a>
+                    )}
                     {/* Installed indicators */}
                     {skill && isInstalled && (
                       <div className="flex items-center gap-2 mt-1">

package/components/UsagePanel.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface UsageData {
+  total: { input: number; output: number; cost: number; sessions: number; messages: number };
+  byProject: { name: string; input: number; output: number; cost: number; sessions: number }[];
+  byModel: { model: string; input: number; output: number; cost: number; messages: number }[];
+  byDay: { date: string; input: number; output: number; cost: number }[];
+  bySource: { source: string; input: number; output: number; cost: number; messages: number }[];
+}
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}K`;
+  return String(n);
+}
+
+function formatCost(n: number): string {
+  return `$${n.toFixed(2)}`;
+}
+
+// Simple bar component
+function Bar({ value, max, color }: { value: number; max: number; color: string }) {
+  const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
+  return (
+    <div className="h-2 bg-[var(--bg-tertiary)] rounded-full overflow-hidden flex-1">
+      <div className={`h-full rounded-full ${color}`} style={{ width: `${pct}%` }} />
+    </div>
+  );
+}
+
+export default function UsagePanel() {
+  const [data, setData] = useState<UsageData | null>(null);
+  const [days, setDays] = useState(7);
+  const [scanning, setScanning] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/usage${days ? `?days=${days}` : ''}`);
+      const d = await res.json();
+      setData(d);
+    } catch {}
+    setLoading(false);
+  }, [days]);
+
+  useEffect(() => { fetchData(); }, [fetchData]);
+
+  const triggerScan = async () => {
+    setScanning(true);
+    try {
+      await fetch('/api/usage', { method: 'POST' });
+      await fetchData();
+    } catch {}
+    setScanning(false);
+  };
+
+  if (loading && !data) {
+    return <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)] text-xs">Loading usage data...</div>;
+  }
+
+  if (!data) {
+    return <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)] text-xs">Failed to load usage data</div>;
+  }
+
+  const maxProjectCost = data.byProject.length > 0 ? data.byProject[0].cost : 1;
+  const maxDayCost = data.byDay.length > 0 ? Math.max(...data.byDay.map(d => d.cost)) : 1;
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0 overflow-y-auto">
+      {/* Header */}
+      <div className="px-4 py-3 border-b border-[var(--border)] shrink-0 flex items-center gap-3">
+        <h2 className="text-sm font-semibold text-[var(--text-primary)]">Token Usage</h2>
+        <div className="flex items-center gap-1 ml-auto">
+          {[7, 30, 90, 0].map(d => (
+            <button
+              key={d}
+              onClick={() => setDays(d)}
+              className={`text-[10px] px-2 py-0.5 rounded ${days === d ? 'bg-[var(--accent)] text-white' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
+            >
+              {d === 0 ? 'All' : `${d}d`}
+            </button>
+          ))}
+        </div>
+        <button
+          onClick={triggerScan}
+          disabled={scanning}
+          className="text-[10px] px-2 py-0.5 border border-[var(--border)] rounded text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-50"
+        >
+          {scanning ? 'Scanning...' : 'Scan Now'}
+        </button>
+      </div>
+
+      <div className="p-4 space-y-6">
+        {/* Summary cards */}
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+          <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
+            <div className="text-[9px] text-[var(--text-secondary)] uppercase">Total Cost</div>
+            <div className="text-lg font-bold text-[var(--text-primary)]">{formatCost(data.total.cost)}</div>
+          </div>
+          <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
+            <div className="text-[9px] text-[var(--text-secondary)] uppercase">Input Tokens</div>
+            <div className="text-lg font-bold text-[var(--text-primary)]">{formatTokens(data.total.input)}</div>
+          </div>
+          <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
+            <div className="text-[9px] text-[var(--text-secondary)] uppercase">Output Tokens</div>
+            <div className="text-lg font-bold text-[var(--text-primary)]">{formatTokens(data.total.output)}</div>
+          </div>
+          <div className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg p-3">
+            <div className="text-[9px] text-[var(--text-secondary)] uppercase">Sessions</div>
+            <div className="text-lg font-bold text-[var(--text-primary)]">{data.total.sessions}</div>
+            <div className="text-[9px] text-[var(--text-secondary)]">{data.total.messages} messages</div>
+          </div>
+        </div>
+
+        {/* By Day — bar chart */}
+        {data.byDay.length > 0 && (
+          <div>
+            <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">Daily Cost</h3>
+            <div className="space-y-1">
+              {data.byDay.slice(0, 14).reverse().map(d => (
+                <div key={d.date} className="flex items-center gap-2 text-[10px]">
+                  <span className="text-[var(--text-secondary)] w-16 shrink-0">{d.date.slice(5)}</span>
+                  <Bar value={d.cost} max={maxDayCost} color="bg-[var(--accent)]" />
+                  <span className="text-[var(--text-primary)] w-16 text-right shrink-0">{formatCost(d.cost)}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* By Project */}
+        {data.byProject.length > 0 && (
+          <div>
+            <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">By Project</h3>
+            <div className="space-y-1.5">
+              {data.byProject.map(p => (
+                <div key={p.name} className="flex items-center gap-2 text-[10px]">
+                  <span className="text-[var(--text-primary)] w-28 truncate shrink-0" title={p.name}>{p.name}</span>
+                  <Bar value={p.cost} max={maxProjectCost} color="bg-blue-500" />
+                  <span className="text-[var(--text-primary)] w-16 text-right shrink-0">{formatCost(p.cost)}</span>
+                  <span className="text-[var(--text-secondary)] w-12 text-right shrink-0">{p.sessions}s</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* By Model */}
+        {data.byModel.length > 0 && (
+          <div>
+            <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">By Model</h3>
+            <div className="border border-[var(--border)] rounded overflow-hidden">
+              <table className="w-full text-[10px]">
+                <thead>
+                  <tr className="bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">
+                    <th className="text-left px-3 py-1.5">Model</th>
+                    <th className="text-right px-3 py-1.5">Input</th>
+                    <th className="text-right px-3 py-1.5">Output</th>
+                    <th className="text-right px-3 py-1.5">Cost</th>
+                    <th className="text-right px-3 py-1.5">Msgs</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {data.byModel.map(m => (
+                    <tr key={m.model} className="border-t border-[var(--border)]/30">
+                      <td className="px-3 py-1.5 text-[var(--text-primary)]">{m.model}</td>
+                      <td className="px-3 py-1.5 text-right text-[var(--text-secondary)]">{formatTokens(m.input)}</td>
+                      <td className="px-3 py-1.5 text-right text-[var(--text-secondary)]">{formatTokens(m.output)}</td>
+                      <td className="px-3 py-1.5 text-right text-[var(--text-primary)] font-medium">{formatCost(m.cost)}</td>
+                      <td className="px-3 py-1.5 text-right text-[var(--text-secondary)]">{m.messages}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {/* By Source */}
+        {data.bySource.length > 0 && (
+          <div>
+            <h3 className="text-[11px] font-semibold text-[var(--text-secondary)] uppercase mb-2">By Source</h3>
+            <div className="flex gap-3 flex-wrap">
+              {data.bySource.map(s => (
+                <div key={s.source} className="bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg px-3 py-2 min-w-[120px]">
+                  <div className="text-[9px] text-[var(--text-secondary)] uppercase">{s.source}</div>
+                  <div className="text-sm font-bold text-[var(--text-primary)]">{formatCost(s.cost)}</div>
+                  <div className="text-[9px] text-[var(--text-secondary)]">{s.messages} msgs</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Note */}
+        <div className="text-[9px] text-[var(--text-secondary)] border-t border-[var(--border)] pt-3">
+          Cost estimates based on API pricing (Opus: $15/$75 per M tokens, Sonnet: $3/$15).
+          Actual cost may differ with Claude Max/Pro subscription.
+          Daily breakdown groups by session completion date.
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/WebTerminal.tsx

@@ -43,7 +43,7 @@ interface TabState {
 // ─── Layout persistence ──────────────────────────────────────
 
 function getWsUrl() {
-  if (typeof window === 'undefined') return `ws://localhost:${parseInt(process.env.TERMINAL_PORT || '3001')}`;
+  if (typeof window === 'undefined') return `ws://localhost:${parseInt(process.env.TERMINAL_PORT || '8404')}`;
   const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
   const wsHost = window.location.hostname;
   // When accessed via tunnel or non-localhost, use the Next.js proxy path
@@ -51,7 +51,7 @@ function getWsUrl() {
     return `${wsProtocol}//${window.location.host}/terminal-ws`;
   }
   // Terminal port = web port + 1
-  const webPort = parseInt(window.location.port) || 3000;
+  const webPort = parseInt(window.location.port) || 8403;
   return `${wsProtocol}//${wsHost}:${webPort + 1}`;
 }
 

package/docs/LOCAL-DEPLOY.md

@@ -8,13 +8,13 @@
 
 ### 方案对比
 
-| 方案 | 原理 | 优点 | 缺点 |
-|------|------|------|------|
-| **同一 WiFi 局域网** | Mac 开 Web 服务，手机直接访问 `192.168.x.x:3000` | 零配置、零成本 | 只能在家用 |
-| **Tailscale** | 虚拟局域网，任何网络下设备互通 | 免费、安全、无需公网 IP | 需要装客户端 |
-| **Cloudflare Tunnel** | 免费内网穿透，给你一个公网域名 | 免费、HTTPS、不开端口 | 依赖 Cloudflare |
-| **ngrok** | 临时隧道 | 一行命令搞定 | 免费版地址每次变 |
-| **frp** | 自建内网穿透 | 完全自控 | 需要一台有公网 IP 的服务器 |
+| 方案 | 原理                                     | 优点 | 缺点 |
+|------|----------------------------------------|------|------|
+| **同一 WiFi 局域网** | Mac 开 Web 服务，手机直接访问 `192.168.x.x:8403` | 零配置、零成本 | 只能在家用 |
+| **Tailscale** | 虚拟局域网，任何网络下设备互通                        | 免费、安全、无需公网 IP | 需要装客户端 |
+| **Cloudflare Tunnel** | 免费内网穿透，给你一个公网域名                        | 免费、HTTPS、不开端口 | 依赖 Cloudflare |
+| **ngrok** | 临时隧道                                   | 一行命令搞定 | 免费版地址每次变 |
+| **frp** | 自建内网穿透                                 | 完全自控 | 需要一台有公网 IP 的服务器 |
 
 ### 推荐组合：Tailscale（推荐） + 局域网（备选）
 
@@ -23,9 +23,9 @@
 │         你的 Mac                 │
 │                                 │
 │  my-workflow server             │
-│  ├── REST API    :3000          │
-│  ├── WebSocket   :3000/ws       │
-│  └── Dashboard   :3000          │
+│  ├── REST API    :8403          │
+│  ├── WebSocket   :8403/ws       │
+│  └── Dashboard   :8403          │
 │                                 │
 │  Tailscale IP: 100.x.x.x       │
 │  局域网 IP:    192.168.x.x      │
@@ -36,8 +36,8 @@
 ┌──────────┴──────────────────────┐
 │         你的手机                 │
 │                                 │
-│  浏览器 → 100.x.x.x:3000       │  ← 任何网络下都能访问
-│  或 Safari → 192.168.x.x:3000  │  ← 同一 WiFi 下
+│  浏览器 → 100.x.x.x:8403       │  ← 任何网络下都能访问
+│  或 Safari → 192.168.x.x:8403  │  ← 同一 WiFi 下
 │                                 │
 └─────────────────────────────────┘
 ```
@@ -67,7 +67,7 @@ tailscale ip -4
 
 # 5. 启动 my-workflow
 mw server start
-# → Dashboard: http://100.64.x.x:3000
+# → Dashboard: http://100.64.x.x:8403
 
 # 手机浏览器打开这个地址即可
 ```
@@ -133,10 +133,10 @@ launchctl list | grep my-workflow
 
 ```
 本地开发阶段:
-  手机 → Tailscale → Mac:3000
+  手机 → Tailscale → Mac:8403
 
 迁移到云端:
-  手机 → Tailscale → VPS:3000   (只是 IP 变了)
+  手机 → Tailscale → VPS:8403   (只是 IP 变了)
   或
   手机 → https://workflow.yourdomain.com  (Cloudflare Tunnel)
 ```

package/lib/cloudflared.ts

@@ -169,7 +169,7 @@ function pushLog(line: string) {
   if (state.log.length > MAX_LOG_LINES) state.log.shift();
 }
 
-export async function startTunnel(localPort: number = parseInt(process.env.PORT || '3000')): Promise<{ url?: string; error?: string }> {
+export async function startTunnel(localPort: number = parseInt(process.env.PORT || '8403')): Promise<{ url?: string; error?: string }> {
   console.log(`[tunnel] Starting tunnel on port ${localPort}...`);
   // Prevent concurrent starts: state.process is already spawned, or another call is
   // mid-flight between the guard and spawn (the async download window).

package/lib/help-docs/00-overview.md

@@ -9,7 +9,7 @@ npm install -g @aion0/forge
 forge server start
 ```
 
-Open `http://localhost:3000`. First launch prompts you to set an admin password.
+Open `http://localhost:8403`. First launch prompts you to set an admin password.
 
 ## Requirements
 - Node.js >= 20

package/lib/help-docs/05-pipelines.md

@@ -260,25 +260,25 @@ Schedule options: Manual only, 15min, 30min, 1h, 2h, 6h, 12h, 24h.
 
 ```bash
 # List bindings + runs + workflows for a project
-curl "http://localhost:3000/api/project-pipelines?project=/path/to/project"
+curl "http://localhost:8403/api/project-pipelines?project=/path/to/project"
 
 # Add binding
-curl -X POST http://localhost:3000/api/project-pipelines \
+curl -X POST http://localhost:8403/api/project-pipelines \
   -H 'Content-Type: application/json' \
   -d '{"action":"add","projectPath":"/path","projectName":"my-app","workflowName":"issue-fix-and-review"}'
 
 # Update binding (enable/disable, change config/schedule)
-curl -X POST http://localhost:3000/api/project-pipelines \
+curl -X POST http://localhost:8403/api/project-pipelines \
   -H 'Content-Type: application/json' \
   -d '{"action":"update","projectPath":"/path","workflowName":"issue-fix-and-review","config":{"interval":30}}'
 
 # Trigger pipeline manually
-curl -X POST http://localhost:3000/api/project-pipelines \
+curl -X POST http://localhost:8403/api/project-pipelines \
   -H 'Content-Type: application/json' \
   -d '{"action":"trigger","projectPath":"/path","projectName":"my-app","workflowName":"issue-fix-and-review","input":{"issue_id":"42"}}'
 
 # Remove binding
-curl -X POST http://localhost:3000/api/project-pipelines \
+curl -X POST http://localhost:8403/api/project-pipelines \
   -H 'Content-Type: application/json' \
   -d '{"action":"remove","projectPath":"/path","workflowName":"issue-fix-and-review"}'
 ```
@@ -303,7 +303,7 @@ To create a workflow via Help AI: ask "Create a pipeline that does X" — the AI
 ## Creating Workflows via API
 
 ```bash
-curl -X POST http://localhost:3000/api/pipelines \
+curl -X POST http://localhost:8403/api/pipelines \
   -H 'Content-Type: application/json' \
   -d '{"action": "save-workflow", "yaml": "<yaml content>"}'
 ```