@aion0/forge 0.10.45 → 0.10.47

package/RELEASE_NOTES.md

@@ -1,14 +1,12 @@
-# Forge v0.10.45
+# Forge v0.10.47
 
 Released: 2026-06-08
 
-## Changes since v0.10.44
-
-### Bug Fixes
-- fix: validate enterprise key against GitHub before persisting
+## Changes since v0.10.46
 
 ### Other
-- fix(enterprise): strip whitespace + zero-width chars from pasted keys
+- ui(header): selected tab uses accent tint, not bg-secondary shade
+- ui(header): bell for Alerts, stacked dept/name pill, +1px nav font
 
 
-**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.10.44...v0.10.45
+**Full Changelog**: https://github.com/aiwatching/forge/compare/v0.10.46...v0.10.47

package/app/api/auth/gitlab-2fa/route.ts

@@ -0,0 +1,98 @@
+/**
+ * GitLab SSH 2FA verify API.
+ *
+ *   GET  /api/auth/gitlab-2fa
+ *     → { host, verifiedAt: string | null, seconds_left: number }
+ *
+ *   POST /api/auth/gitlab-2fa
+ *     body: { otp: "123456" }
+ *     → { ok: true, verifiedAt, seconds_left, host } |
+ *       { ok: false, error, transcript? }
+ *
+ * verifiedAt is persisted in settings.gitlab2fa so dropdown survives a
+ * page refresh.
+ */
+
+import { NextResponse } from 'next/server';
+import { loadSettings, saveSettings } from '@/lib/settings';
+import {
+  verifyGitlab2FA,
+  verifyGitlab2FAViaKeystroke,
+  getGitlabSshHost,
+  secondsLeft,
+  GITLAB_2FA_VALID_MS,
+} from '@/lib/auth/gitlab-2fa';
+
+export async function GET() {
+  const settings = loadSettings();
+  const host = getGitlabSshHost();
+  const recorded = settings.gitlab2fa;
+  // Drop the stamp if host changed (user pointed gitlab elsewhere)
+  const valid = recorded && (!host || recorded.host === host);
+  const verifiedAt = valid ? recorded?.verifiedAt ?? null : null;
+  return NextResponse.json({
+    host,
+    verifiedAt,
+    seconds_left: secondsLeft(verifiedAt ?? undefined),
+    validity_seconds: Math.floor(GITLAB_2FA_VALID_MS / 1000),
+  });
+}
+
+export async function POST(req: Request) {
+  let body: any = {};
+  try { body = await req.json(); } catch {}
+
+  // Manual mode: caller already ran `ssh git@host 2fa_verify` in their
+  // own terminal (necessary when corp VPN like FortiClient does per-
+  // process tunnel filtering — node-spawned ssh can't reach the host).
+  // Forge just stamps verifiedAt so the 55-minute clock starts.
+  if (body?.manual === true) {
+    const host = getGitlabSshHost();
+    if (!host) {
+      return NextResponse.json({ ok: false, error: 'GitLab connector not configured' }, { status: 400 });
+    }
+    const verifiedAt = new Date().toISOString();
+    const settings = loadSettings();
+    settings.gitlab2fa = { verifiedAt, host };
+    saveSettings(settings);
+    return NextResponse.json({
+      ok: true,
+      verifiedAt,
+      host,
+      seconds_left: Math.floor(GITLAB_2FA_VALID_MS / 1000),
+      mode: 'manual',
+    });
+  }
+
+  const otp = String(body?.otp || '').trim();
+  if (!otp) {
+    return NextResponse.json({ ok: false, error: 'otp is required' }, { status: 400 });
+  }
+
+  // Mode selector: 'keystroke' uses osascript+System Events to type
+  // into the user's frontmost Terminal — required in environments
+  // where the corp VPN blocks Forge-spawned ssh (FortiClient).
+  // Default is the direct node-pty path (works for non-filtered envs).
+  const mode = String(body?.mode || 'direct');
+  const r = mode === 'keystroke'
+    ? await verifyGitlab2FAViaKeystroke(otp)
+    : await verifyGitlab2FA(otp);
+  if (!r.ok) {
+    return NextResponse.json(
+      { ok: false, error: r.error || 'verify failed', transcript: r.transcript },
+      { status: 400 },
+    );
+  }
+
+  // Persist for the dropdown's "X min left" rendering.
+  const settings = loadSettings();
+  settings.gitlab2fa = { verifiedAt: r.verifiedAt!, host: r.host! };
+  saveSettings(settings);
+
+  return NextResponse.json({
+    ok: true,
+    verifiedAt: r.verifiedAt,
+    host: r.host,
+    seconds_left: Math.floor(GITLAB_2FA_VALID_MS / 1000),
+  });
+}

package/app/api/auth/idp-credentials/route.ts

@@ -0,0 +1,41 @@
+/**
+ * GET    /api/auth/idp-credentials → { username, password }   (decrypted)
+ * POST   /api/auth/idp-credentials   body: { username, password }
+ * DELETE /api/auth/idp-credentials
+ *
+ * Read/write the EnterpriseBadge's saved unified-login credentials.
+ * Password lives in SECRET_FIELDS so it's AES-256-GCM encrypted at rest;
+ * this endpoint hands it back in plaintext for the local UI to prefill
+ * (Forge is single-user, runs on localhost — equivalent threat surface
+ * to the user's own keychain). OTP is never persisted — it's TOTP.
+ */
+
+import { NextResponse } from 'next/server';
+import { loadSettings, saveSettings } from '@/lib/settings';
+
+export async function GET() {
+  const s = loadSettings() as unknown as Record<string, unknown>;
+  return NextResponse.json({
+    username: (s.idpSavedUsername as string) || '',
+    password: (s.idpSavedPassword as string) || '',
+  });
+}
+
+export async function POST(req: Request) {
+  let body: { username?: string; password?: string } = {};
+  try { body = await req.json(); } catch { /* empty body */ }
+  const username = String(body.username || '').trim();
+  const password = String(body.password || '');
+  if (!username || !password) {
+    return NextResponse.json({ ok: false, error: 'username and password are required' }, { status: 400 });
+  }
+  const current = loadSettings() as unknown as Record<string, unknown>;
+  saveSettings({ ...current, idpSavedUsername: username, idpSavedPassword: password } as never);
+  return NextResponse.json({ ok: true });
+}
+
+export async function DELETE() {
+  const current = loadSettings() as unknown as Record<string, unknown>;
+  saveSettings({ ...current, idpSavedUsername: '', idpSavedPassword: '' } as never);
+  return NextResponse.json({ ok: true });
+}

package/app/api/auth/idp-login/route.ts

@@ -0,0 +1,22 @@
+/**
+ * POST /api/auth/idp-login
+ *   body: { username, password, otp }
+ *   → { ok, idp_logins: [{idp_host, ok, steps_completed?, final_url?, error?, post_login_terminal?}], error? }
+ *
+ * Drives one or more SAML IdP logins (template `_idp` may be array) via
+ * the extension. Secrets stay in this request — never persisted.
+ */
+
+import { NextResponse } from 'next/server';
+import { performIdpLogin } from '@/lib/auth/idp-login';
+
+export async function POST(req: Request) {
+  let body: any = {};
+  try { body = await req.json(); } catch {}
+  const r = await performIdpLogin({
+    username: String(body?.username || '').trim(),
+    password: String(body?.password || ''),
+    otp: String(body?.otp || '').trim(),
+  });
+  return NextResponse.json(r, { status: r.ok ? 200 : 400 });
+}

package/app/api/scratch/[...path]/route.ts

@@ -0,0 +1,78 @@
+/**
+ * GET /api/scratch/<path...>
+ *   ?download=1   → force Content-Disposition: attachment
+ *
+ * Serves files from `<dataDir>/scratch/` so chat-emitted paths like
+ * `scratch/report-2026-06-08.md` can be clicked open from the chat UI.
+ * Path-traversal protected: any segment containing `..` or any resolved
+ * path escaping the scratch root is rejected.
+ *
+ * Auth-gated by Forge's proxy middleware just like every other /api/*.
+ */
+
+import { NextResponse } from 'next/server';
+import { existsSync, readFileSync, statSync } from 'node:fs';
+import { join, resolve, extname } from 'node:path';
+import { getDataDir } from '@/lib/dirs';
+
+const MIME: Record<string, string> = {
+  '.md': 'text/markdown; charset=utf-8',
+  '.txt': 'text/plain; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.yaml': 'application/yaml; charset=utf-8',
+  '.yml': 'application/yaml; charset=utf-8',
+  '.csv': 'text/csv; charset=utf-8',
+  '.log': 'text/plain; charset=utf-8',
+  '.html': 'text/html; charset=utf-8',
+  '.pdf': 'application/pdf',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+};
+
+export async function GET(
+  req: Request,
+  ctx: { params: Promise<{ path: string[] }> },
+) {
+  const { path: parts } = await ctx.params;
+  if (!parts || parts.length === 0) {
+    return NextResponse.json({ ok: false, error: 'missing path' }, { status: 400 });
+  }
+  // Reject explicit traversal attempts before path construction.
+  for (const seg of parts) {
+    if (seg === '..' || seg.startsWith('..')) {
+      return NextResponse.json({ ok: false, error: 'path traversal rejected' }, { status: 400 });
+    }
+  }
+  const scratchRoot = resolve(join(getDataDir(), 'scratch'));
+  const target = resolve(join(scratchRoot, ...parts));
+  // Verify the resolved path stays under scratchRoot — handles symlink
+  // tricks the segment check above can't catch.
+  if (!target.startsWith(scratchRoot + '/') && target !== scratchRoot) {
+    return NextResponse.json({ ok: false, error: 'path traversal rejected' }, { status: 400 });
+  }
+  if (!existsSync(target)) {
+    return NextResponse.json({ ok: false, error: 'not found' }, { status: 404 });
+  }
+  const st = statSync(target);
+  if (!st.isFile()) {
+    return NextResponse.json({ ok: false, error: 'not a file' }, { status: 400 });
+  }
+  const url = new URL(req.url);
+  const download = url.searchParams.get('download') === '1';
+  const ext = extname(target).toLowerCase();
+  const mime = MIME[ext] || 'application/octet-stream';
+  const data = readFileSync(target);
+  const filename = parts[parts.length - 1];
+  return new NextResponse(new Uint8Array(data), {
+    status: 200,
+    headers: {
+      'Content-Type': mime,
+      'Content-Length': String(st.size),
+      'Content-Disposition': `${download ? 'attachment' : 'inline'}; filename="${filename.replace(/"/g, '\\"')}"`,
+      'Cache-Control': 'private, max-age=0, must-revalidate',
+    },
+  });
+}

package/bin/forge-server.mjs

@@ -656,7 +656,16 @@ function startBackground() {
   const child = spawn(nextBin, ['start', '-p', String(webPort)], {
     cwd: ROOT,
     stdio: ['ignore', logFd, logFd],
-    env: { ...process.env, FORGE_EXTERNAL_SERVICES: '1' },
+    env: {
+      ...process.env,
+      FORGE_EXTERNAL_SERVICES: '1',
+      // --use-system-ca lets Node 22+ trust the OS keychain in addition
+      // to its baked-in CA bundle. Corp networks (FortiClient SSL
+      // inspection, Zscaler, etc.) install a custom root via MDM; Node
+      // doesn't see it without this flag, so marketplace sync fails with
+      // 'self-signed certificate in certificate chain' on api.github.com.
+      NODE_OPTIONS: [process.env.NODE_OPTIONS, '--use-system-ca'].filter(Boolean).join(' '),
+    },
     detached: true,
   });
 
@@ -738,7 +747,16 @@ if (isDev) {
   const child = spawn('npx', ['next', 'dev', '--turbopack', '-p', String(webPort)], {
     cwd: ROOT,
     stdio: 'inherit',
-    env: { ...process.env, FORGE_EXTERNAL_SERVICES: '1' },
+    env: {
+      ...process.env,
+      FORGE_EXTERNAL_SERVICES: '1',
+      // --use-system-ca lets Node 22+ trust the OS keychain in addition
+      // to its baked-in CA bundle. Corp networks (FortiClient SSL
+      // inspection, Zscaler, etc.) install a custom root via MDM; Node
+      // doesn't see it without this flag, so marketplace sync fails with
+      // 'self-signed certificate in certificate chain' on api.github.com.
+      NODE_OPTIONS: [process.env.NODE_OPTIONS, '--use-system-ca'].filter(Boolean).join(' '),
+    },
   });
   child.on('exit', (code) => { stopServices(); process.exit(code || 0); });
 } else {
@@ -748,7 +766,16 @@ if (isDev) {
   const child = spawn('npx', ['next', 'start', '-p', String(webPort)], {
     cwd: ROOT,
     stdio: 'inherit',
-    env: { ...process.env, FORGE_EXTERNAL_SERVICES: '1' },
+    env: {
+      ...process.env,
+      FORGE_EXTERNAL_SERVICES: '1',
+      // --use-system-ca lets Node 22+ trust the OS keychain in addition
+      // to its baked-in CA bundle. Corp networks (FortiClient SSL
+      // inspection, Zscaler, etc.) install a custom root via MDM; Node
+      // doesn't see it without this flag, so marketplace sync fails with
+      // 'self-signed certificate in certificate chain' on api.github.com.
+      NODE_OPTIONS: [process.env.NODE_OPTIONS, '--use-system-ca'].filter(Boolean).join(' '),
+    },
   });
   child.on('exit', (code) => { stopServices(); process.exit(code || 0); });
 }

package/components/Dashboard.tsx

@@ -422,9 +422,9 @@ export default function Dashboard({ user }: { user: any }) {
               <button
                 key={mode}
                 onClick={() => setViewMode(mode)}
-                className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+                className={`text-[12px] px-2.5 py-0.5 rounded transition-colors ${
                   viewMode === mode
-                    ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                    ? 'bg-[var(--accent)]/15 text-[var(--accent)] shadow-sm'
                     : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
                 }`}
               >
@@ -435,9 +435,9 @@ export default function Dashboard({ user }: { user: any }) {
             {/* Docs */}
             <button
               onClick={() => setViewMode('docs')}
-              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+              className={`text-[12px] px-2.5 py-0.5 rounded transition-colors ${
                 viewMode === 'docs'
-                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                  ? 'bg-[var(--accent)]/15 text-[var(--accent)] shadow-sm'
                   : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
               }`}
             >
@@ -451,9 +451,9 @@ export default function Dashboard({ user }: { user: any }) {
               onClick={() => {
                 if (!['tasks', 'pipelines', 'schedules'].includes(viewMode)) setViewMode('schedules');
               }}
-              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+              className={`text-[12px] px-2.5 py-0.5 rounded transition-colors ${
                 ['tasks', 'pipelines', 'schedules'].includes(viewMode)
-                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                  ? 'bg-[var(--accent)]/15 text-[var(--accent)] shadow-sm'
                   : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
               }`}
             >
@@ -468,9 +468,9 @@ export default function Dashboard({ user }: { user: any }) {
             {/* Marketplace */}
             <button
               onClick={() => setViewMode('skills')}
-              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+              className={`text-[12px] px-2.5 py-0.5 rounded transition-colors ${
                 viewMode === 'skills'
-                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                  ? 'bg-[var(--accent)]/15 text-[var(--accent)] shadow-sm'
                   : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
               }`}
             >
@@ -481,56 +481,7 @@ export default function Dashboard({ user }: { user: any }) {
         </div>
         <div className="flex items-center gap-2.5">
           {/* (Automation context actions moved to the secondary toolbar row below) */}
-          {/* Help */}
-          <button
-            onClick={() => setShowHelp(v => !v)}
-            className={`text-[10px] px-2 py-0.5 border rounded transition-colors ${
-              showHelp
-                ? 'border-[var(--accent)] text-[var(--accent)]'
-                : 'border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)]'
-            }`}
-          >?</button>
-          <div className="relative">
-            <button
-              onClick={() => setShowBrowserMenu(v => !v)}
-              className={`text-[10px] px-2 py-0.5 border rounded transition-colors ${
-                browserMode !== 'none'
-                  ? 'border-blue-500 text-blue-400'
-                  : 'border-[var(--border)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--text-secondary)]'
-              }`}
-            >
-              Browser
-            </button>
-            {showBrowserMenu && (
-              <>
-              <div className="fixed inset-0 z-40" onClick={() => setShowBrowserMenu(false)} />
-              <div className="absolute top-full right-0 mt-1 z-50 bg-[var(--bg-secondary)] border border-[var(--border)] rounded shadow-lg py-1 min-w-[140px]">
-                {browserMode !== 'none' && (
-                  <button onClick={() => { setBrowserMode('none'); setShowBrowserMenu(false); }} className="w-full text-left px-3 py-1.5 text-[10px] text-red-400 hover:bg-[var(--bg-tertiary)]">
-                    Close Browser
-                  </button>
-                )}
-                <button onClick={() => { setBrowserMode('float'); setShowBrowserMenu(false); }} className={`w-full text-left px-3 py-1.5 text-[10px] hover:bg-[var(--bg-tertiary)] ${browserMode === 'float' ? 'text-[var(--accent)]' : 'text-[var(--text-primary)]'}`}>
-                  Floating Window
-                </button>
-                <button onClick={() => { setBrowserMode('right'); setShowBrowserMenu(false); }} className={`w-full text-left px-3 py-1.5 text-[10px] hover:bg-[var(--bg-tertiary)] ${browserMode === 'right' ? 'text-[var(--accent)]' : 'text-[var(--text-primary)]'}`}>
-                  Right Side
-                </button>
-                <button onClick={() => { setBrowserMode('left'); setShowBrowserMenu(false); }} className={`w-full text-left px-3 py-1.5 text-[10px] hover:bg-[var(--bg-tertiary)] ${browserMode === 'left' ? 'text-[var(--accent)]' : 'text-[var(--text-primary)]'}`}>
-                  Left Side
-                </button>
-                <button onClick={() => {
-                  const url = localStorage.getItem('forge-browser-url');
-                  if (url) window.open(url, '_blank');
-                  else { const u = prompt('Enter URL to open:'); if (u) window.open(u.trim(), '_blank'); }
-                  setShowBrowserMenu(false);
-                }} className="w-full text-left px-3 py-1.5 text-[10px] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]">
-                  New Tab
-                </button>
-              </div>
-              </>
-            )}
-          </div>
+          {/* Help / Browser moved into the user dropdown — see below. */}
           <Suspense fallback={null}><TunnelToggle /></Suspense>
           {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` : ''}`}>
@@ -539,13 +490,15 @@ export default function Dashboard({ user }: { user: any }) {
             </span>
           )}
           <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30" />
-          {/* Alerts */}
+          {/* Alerts — bell glyph keeps the same role; unread pill rides the bell. */}
           <div className="relative">
             <button
               onClick={() => { setShowNotifications(v => !v); setShowUserMenu(false); }}
-              className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] relative px-1"
+              className="text-[14px] leading-none text-[var(--text-secondary)] hover:text-[var(--text-primary)] relative px-1"
+              title="Alerts"
+              aria-label="Alerts"
             >
-              Alerts
+              <span aria-hidden>🔔</span>
               {unreadCount > 0 && (
                 <span className="absolute -top-1.5 -right-1.5 min-w-[14px] h-[14px] rounded-full bg-[var(--red)] text-[8px] text-white flex items-center justify-center px-1 font-bold">
                   {unreadCount > 99 ? '99+' : unreadCount}
@@ -669,14 +622,17 @@ export default function Dashboard({ user }: { user: any }) {
           <div className="relative">
             <button
               onClick={() => { setShowUserMenu(v => !v); setShowNotifications(false); }}
-              className="text-[10px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] flex items-center gap-1 px-1"
+              className="text-[var(--text-secondary)] hover:text-[var(--text-primary)] flex items-center gap-1 px-1"
             >
-              {profileDept && (
-                <span className="text-[9px] px-1 py-[1px] rounded bg-emerald-500/15 text-emerald-500 border border-emerald-500/30 mr-1" title="Active department">
-                  {profileDept}
-                </span>
-              )}
-              {displayName} <span className="text-[8px]">▾</span>
+              <span className="flex flex-col items-end leading-tight">
+                {profileDept && (
+                  <span className="text-[8px] px-1 rounded bg-emerald-500/15 text-emerald-500 border border-emerald-500/30" title="Active department">
+                    {profileDept}
+                  </span>
+                )}
+                <span className="text-[9px]">{displayName}</span>
+              </span>
+              <span className="text-[8px]">▾</span>
             </button>
             {showUserMenu && (
               <>
@@ -742,7 +698,49 @@ export default function Dashboard({ user }: { user: any }) {
                     <span className="flex-1">Mobile View</span>
                     <span className="text-[9px] text-[var(--text-secondary)]">↗</span>
                   </a>
+                  {/* Browser — toggling reveals the layout options inline so the
+                      sub-menu lives inside the user dropdown (no nested popup). */}
+                  <button
+                    onClick={() => setShowBrowserMenu(v => !v)}
+                    className="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)] flex items-center gap-2"
+                  >
+                    <span className="w-3 text-center">🌐</span>
+                    <span className="flex-1">Browser{browserMode !== 'none' ? ` · ${browserMode}` : ''}</span>
+                    <span className="text-[9px] text-[var(--text-secondary)]">{showBrowserMenu ? '▾' : '▸'}</span>
+                  </button>
+                  {showBrowserMenu && (
+                    <div className="pl-6 pr-1 py-0.5 border-l border-[var(--border)] ml-3 mb-1">
+                      <button onClick={() => { setBrowserMode('float'); setShowBrowserMenu(false); setShowUserMenu(false); }} className={`w-full text-left px-2 py-1 text-[10px] hover:bg-[var(--bg-tertiary)] ${browserMode === 'float' ? 'text-[var(--accent)]' : 'text-[var(--text-primary)]'}`}>
+                        Floating Window
+                      </button>
+                      <button onClick={() => { setBrowserMode('right'); setShowBrowserMenu(false); setShowUserMenu(false); }} className={`w-full text-left px-2 py-1 text-[10px] hover:bg-[var(--bg-tertiary)] ${browserMode === 'right' ? 'text-[var(--accent)]' : 'text-[var(--text-primary)]'}`}>
+                        Right Side
+                      </button>
+                      <button onClick={() => { setBrowserMode('left'); setShowBrowserMenu(false); setShowUserMenu(false); }} className={`w-full text-left px-2 py-1 text-[10px] hover:bg-[var(--bg-tertiary)] ${browserMode === 'left' ? 'text-[var(--accent)]' : 'text-[var(--text-primary)]'}`}>
+                        Left Side
+                      </button>
+                      <button onClick={() => {
+                        const url = localStorage.getItem('forge-browser-url');
+                        if (url) window.open(url, '_blank');
+                        else { const u = prompt('Enter URL to open:'); if (u) window.open(u.trim(), '_blank'); }
+                        setShowBrowserMenu(false); setShowUserMenu(false);
+                      }} className="w-full text-left px-2 py-1 text-[10px] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]">
+                        New Tab
+                      </button>
+                      {browserMode !== 'none' && (
+                        <button onClick={() => { setBrowserMode('none'); setShowBrowserMenu(false); setShowUserMenu(false); }} className="w-full text-left px-2 py-1 text-[10px] text-red-400 hover:bg-[var(--bg-tertiary)]">
+                          Close Browser
+                        </button>
+                      )}
+                    </div>
+                  )}
                   <div className="border-t border-[var(--border)] my-1" />
+                  <button
+                    onClick={() => { setShowHelp(v => !v); setShowUserMenu(false); }}
+                    className="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)] flex items-center gap-2"
+                  >
+                    <span className="w-3 text-center">?</span><span>Help</span>
+                  </button>
                   <button
                     onClick={() => signOut({ callbackUrl: '/login' })}
                     className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--red)] hover:bg-[var(--bg-tertiary)] flex items-center gap-2"
@@ -765,9 +763,9 @@ export default function Dashboard({ user }: { user: any }) {
               <button
                 key={m}
                 onClick={() => setViewMode(m)}
-                className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+                className={`text-[12px] px-2.5 py-0.5 rounded transition-colors ${
                   viewMode === m
-                    ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                    ? 'bg-[var(--accent)]/15 text-[var(--accent)] shadow-sm'
                     : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
                 }`}
               >