@aion0/forge 0.2.27 → 0.2.30

package/app/api/skills/route.ts

@@ -0,0 +1,135 @@
+import { NextResponse } from 'next/server';
+import {
+  syncSkills,
+  listSkills,
+  installGlobal,
+  installProject,
+  uninstallGlobal,
+  uninstallProject,
+  refreshInstallState,
+} from '@/lib/skills';
+import { loadSettings } from '@/lib/settings';
+import { homedir } from 'node:os';
+
+function getProjectPaths(): string[] {
+  const settings = loadSettings();
+  const roots = (settings.projectRoots || []).map(r => r.replace(/^~/, homedir()));
+  const paths: string[] = [];
+  for (const root of roots) {
+    try {
+      const { readdirSync, statSync } = require('node:fs');
+      const { join } = require('node:path');
+      for (const name of readdirSync(root)) {
+        const p = join(root, name);
+        try { if (statSync(p).isDirectory() && !name.startsWith('.')) paths.push(p); } catch {}
+      }
+    } catch {}
+  }
+  return paths;
+}
+
+// GET /api/skills — list skills, get file list, or get file content
+export async function GET(req: Request) {
+  const { searchParams } = new URL(req.url);
+  const action = searchParams.get('action');
+  const name = searchParams.get('name');
+
+  // List files in a skill directory
+  if (action === 'files' && name) {
+    try {
+      const settings = loadSettings();
+      const repoUrl = settings.skillsRepoUrl || 'https://raw.githubusercontent.com/aiwatching/forge-skills/main';
+      // Extract owner/repo from raw URL
+      const match = repoUrl.match(/github\.com\/([^/]+\/[^/]+)/);
+      const repo = match ? match[1] : 'aiwatching/forge-skills';
+
+      const res = await fetch(`https://api.github.com/repos/${repo}/contents/skills/${name}`, {
+        headers: { 'Accept': 'application/vnd.github.v3+json' },
+      });
+      if (!res.ok) return NextResponse.json({ files: [] });
+
+      const items = await res.json();
+      const files: { name: string; path: string; type: string }[] = [];
+
+      const flatten = (list: any[], prefix = '') => {
+        for (const item of list) {
+          if (item.type === 'file') {
+            files.push({ name: item.name, path: prefix + item.name, type: 'file' });
+          } else if (item.type === 'dir') {
+            files.push({ name: item.name, path: prefix + item.name, type: 'dir' });
+          }
+        }
+      };
+      flatten(Array.isArray(items) ? items : []);
+
+      // Sort: dirs first, then files
+      files.sort((a, b) => {
+        if (a.type !== b.type) return a.type === 'dir' ? -1 : 1;
+        return a.name.localeCompare(b.name);
+      });
+
+      return NextResponse.json({ files });
+    } catch {
+      return NextResponse.json({ files: [] });
+    }
+  }
+
+  // Get content of a specific file
+  if (action === 'file' && name) {
+    const filePath = searchParams.get('path') || 'skill.md';
+    try {
+      const settings = loadSettings();
+      const baseUrl = settings.skillsRepoUrl || 'https://raw.githubusercontent.com/aiwatching/forge-skills/main';
+      const res = await fetch(`${baseUrl}/skills/${name}/${filePath}`);
+      if (!res.ok) return NextResponse.json({ content: '(Not found)' });
+      const content = await res.text();
+      return NextResponse.json({ content });
+    } catch {
+      return NextResponse.json({ content: '(Failed to load)' });
+    }
+  }
+  // Refresh install state from filesystem
+  refreshInstallState(getProjectPaths());
+  const skills = listSkills();
+  const projects = getProjectPaths().map(p => ({ path: p, name: p.split('/').pop() || p }));
+  return NextResponse.json({ skills, projects });
+}
+
+// POST /api/skills — sync, install, uninstall
+export async function POST(req: Request) {
+  const body = await req.json();
+
+  if (body.action === 'sync') {
+    const result = await syncSkills();
+    if (result.synced > 0) {
+      refreshInstallState(getProjectPaths());
+    }
+    return NextResponse.json(result);
+  }
+
+  if (body.action === 'install') {
+    const { name, target } = body; // target: 'global' | projectPath
+    try {
+      if (target === 'global') {
+        await installGlobal(name);
+      } else {
+        await installProject(name, target);
+      }
+      return NextResponse.json({ ok: true });
+    } catch (e) {
+      return NextResponse.json({ ok: false, error: String(e) }, { status: 500 });
+    }
+  }
+
+  if (body.action === 'uninstall') {
+    const { name, target } = body;
+    if (target === 'global') {
+      uninstallGlobal(name);
+    } else {
+      uninstallProject(name, target);
+    }
+    return NextResponse.json({ ok: true });
+  }
+
+  return NextResponse.json({ error: 'Invalid action' }, { status: 400 });
+}

package/components/Dashboard.tsx

@@ -18,6 +18,7 @@ const CodeViewer = lazy(() => import('./CodeViewer'));
 const ProjectManager = lazy(() => import('./ProjectManager'));
 const PreviewPanel = lazy(() => import('./PreviewPanel'));
 const PipelineView = lazy(() => import('./PipelineView'));
+const SkillsPanel = lazy(() => import('./SkillsPanel'));
 
 interface UsageSummary {
   provider: string;
@@ -40,7 +41,7 @@ interface ProjectInfo {
 }
 
 export default function Dashboard({ user }: { user: any }) {
-  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'preview' | 'pipelines'>('terminal');
+  const [viewMode, setViewMode] = useState<'tasks' | 'sessions' | 'terminal' | 'docs' | 'projects' | 'preview' | 'pipelines' | 'skills'>('terminal');
   const [tasks, setTasks] = useState<Task[]>([]);
   const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
   const [showNewTask, setShowNewTask] = useState(false);
@@ -167,17 +168,23 @@ export default function Dashboard({ user }: { user: any }) {
           )}
 
           {/* View mode toggle */}
-          <div className="flex bg-[var(--bg-tertiary)] rounded p-0.5">
-            <button
-              onClick={() => setViewMode('terminal')}
-              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
-                viewMode === 'terminal'
-                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
-                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-              }`}
-            >
-              Vibe Coding
-            </button>
+          <div className="flex items-center bg-[var(--bg-tertiary)] rounded p-0.5">
+            {/* Workspace */}
+            {(['terminal', 'projects', 'sessions'] as const).map(mode => (
+              <button
+                key={mode}
+                onClick={() => setViewMode(mode)}
+                className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+                  viewMode === mode
+                    ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                    : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+                }`}
+              >
+                {{ terminal: 'Vibe Coding', projects: 'Projects', sessions: 'Sessions' }[mode]}
+              </button>
+            ))}
+            <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30 mx-1.5" />
+            {/* Docs */}
             <button
               onClick={() => setViewMode('docs')}
               className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
@@ -188,55 +195,32 @@ export default function Dashboard({ user }: { user: any }) {
             >
               Docs
             </button>
+            <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30 mx-1.5" />
+            {/* Automation */}
+            {(['tasks', 'pipelines'] as const).map(mode => (
+              <button
+                key={mode}
+                onClick={() => setViewMode(mode)}
+                className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
+                  viewMode === mode
+                    ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
+                    : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+                }`}
+              >
+                {{ tasks: 'Tasks', pipelines: 'Pipelines' }[mode]}
+              </button>
+            ))}
+            <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30 mx-1.5" />
+            {/* Skills */}
             <button
-              onClick={() => setViewMode('projects')}
-              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
-                viewMode === 'projects'
-                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
-                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-              }`}
-            >
-              Projects
-            </button>
-            <button
-              onClick={() => setViewMode('tasks')}
-              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
-                viewMode === 'tasks'
-                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
-                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-              }`}
-            >
-              Tasks
-            </button>
-            <button
-              onClick={() => setViewMode('pipelines')}
-              className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
-                viewMode === 'pipelines'
-                  ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
-                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-              }`}
-            >
-              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')}
+              onClick={() => setViewMode('skills')}
               className={`text-[11px] px-2.5 py-0.5 rounded transition-colors ${
-                viewMode === 'preview'
+                viewMode === 'skills'
                   ? 'bg-[var(--bg-secondary)] text-[var(--text-primary)] shadow-sm'
                   : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
               }`}
             >
-              Demo Preview
+              Skills
             </button>
           </div>
 
@@ -255,13 +239,21 @@ export default function Dashboard({ user }: { user: any }) {
               + New Task
             </button>
           )}
+          {/* Tunnel + Preview */}
           <TunnelToggle />
+          <button
+            onClick={() => setViewMode('preview')}
+            className={`text-[10px] ${viewMode === 'preview' ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
+          >
+            Preview
+          </button>
           {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` : ''}`}>
               <span className="text-green-500">●</span>
               {onlineCount.total}
             </span>
           )}
+          <span className="w-[2px] h-4 bg-[var(--text-secondary)]/30" />
           {/* Alerts */}
           <div className="relative">
             <button
@@ -536,15 +528,22 @@ export default function Dashboard({ user }: { user: any }) {
           </Suspense>
         )}
 
+        {/* Skills */}
+        {viewMode === 'skills' && (
+          <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
+            <SkillsPanel />
+          </Suspense>
+        )}
+
         {/* Docs — always mounted to keep terminal session alive */}
-        <div className={`flex-1 min-h-0 flex ${viewMode === 'docs' ? '' : 'hidden'}`}>
+        <div className={viewMode === 'docs' ? 'flex-1 min-h-0 flex' : 'hidden'}>
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
             <DocsViewer />
           </Suspense>
         </div>
 
         {/* Code — terminal + file browser, always mounted to keep terminal sessions alive */}
-        <div className={`flex-1 min-h-0 flex ${viewMode === 'terminal' ? '' : 'hidden'}`}>
+        <div className={viewMode === 'terminal' ? 'flex-1 min-h-0 flex' : 'hidden'}>
           <Suspense fallback={<div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">Loading...</div>}>
             <CodeViewer terminalRef={terminalRef} />
           </Suspense>

package/components/DocTerminal.tsx

@@ -88,7 +88,7 @@ export default function DocTerminal({ docRoot }: { docRoot: string }) {
               setTimeout(() => {
                 if (socket.readyState === WebSocket.OPEN) {
                   const sf = skipPermRef.current ? ' --dangerously-skip-permissions' : '';
-                  socket.send(JSON.stringify({ type: 'input', data: `cd "${docRootRef.current}" && claude --resume${sf}\n` }));
+                  socket.send(JSON.stringify({ type: 'input', data: `cd "${docRootRef.current}" && claude -c${sf}\n` }));
                 }
               }, 300);
             }
@@ -163,7 +163,7 @@ export default function DocTerminal({ docRoot }: { docRoot: string }) {
             New
           </button>
           <button
-            onClick={() => { const sf = skipPermRef.current ? ' --dangerously-skip-permissions' : ''; runCommand(`cd "${docRoot}" && claude --resume${sf}`); }}
+            onClick={() => { const sf = skipPermRef.current ? ' --dangerously-skip-permissions' : ''; runCommand(`cd "${docRoot}" && claude -c${sf}`); }}
             className="text-[10px] px-2 py-0.5 text-gray-400 hover:text-white hover:bg-[#2a2a4a] rounded"
           >
             Resume

package/components/ProjectManager.tsx

@@ -37,6 +37,7 @@ export default function ProjectManager() {
   const [fileLanguage, setFileLanguage] = useState('');
   const [fileLoading, setFileLoading] = useState(false);
   const [showLog, setShowLog] = useState(false);
+  const [projectSkills, setProjectSkills] = useState<{ name: string; displayName: string; scope: string }[]>([]);
 
   // Fetch projects
   useEffect(() => {
@@ -67,6 +68,23 @@ export default function ProjectManager() {
     } catch { setFileTree([]); }
   }, []);
 
+  const fetchProjectSkills = useCallback(async (projectPath: string) => {
+    try {
+      const res = await fetch('/api/skills');
+      const data = await res.json();
+      const skills = (data.skills || []).filter((s: any) =>
+        s.installedGlobal || (s.installedProjects || []).includes(projectPath)
+      ).map((s: any) => ({
+        name: s.name,
+        displayName: s.displayName,
+        scope: s.installedGlobal && (s.installedProjects || []).includes(projectPath) ? 'global + project'
+          : s.installedGlobal ? 'global'
+          : 'project',
+      }));
+      setProjectSkills(skills);
+    } catch { setProjectSkills([]); }
+  }, []);
+
   const selectProject = useCallback((p: Project) => {
     setSelectedProject(p);
     setSelectedFile(null);
@@ -75,7 +93,8 @@ export default function ProjectManager() {
     setCommitMsg('');
     fetchGitInfo(p);
     fetchTree(p);
-  }, [fetchGitInfo, fetchTree]);
+    fetchProjectSkills(p.path);
+  }, [fetchGitInfo, fetchTree, fetchProjectSkills]);
 
   const openFile = useCallback(async (path: string) => {
     if (!selectedProject) return;
@@ -231,6 +250,21 @@ export default function ProjectManager() {
                   <span className="ml-2">{gitInfo.remote.replace(/^https?:\/\//, '').replace(/^git@github\.com:/, 'github.com/').replace(/\.git$/, '')}</span>
                 )}
               </div>
+              {projectSkills.length > 0 && (
+                <div className="flex items-center gap-1.5 mt-1 flex-wrap">
+                  <span className="text-[9px] text-[var(--text-secondary)]">Skills:</span>
+                  {projectSkills.map(s => (
+                    <span
+                      key={s.name}
+                      className="text-[8px] px-1.5 py-0.5 rounded bg-[var(--accent)]/10 text-[var(--accent)]"
+                      title={`/${s.name} (${s.scope})`}
+                    >
+                      /{s.displayName}
+                      <span className="text-[var(--text-secondary)] ml-0.5">({s.scope})</span>
+                    </span>
+                  ))}
+                </div>
+              )}
               {gitInfo?.lastCommit && (
                 <div className="flex items-center gap-2 mt-0.5">
                   <span className="text-[9px] text-[var(--text-secondary)] font-mono truncate">{gitInfo.lastCommit}</span>

package/components/SessionView.tsx

@@ -452,7 +452,7 @@ export default function SessionView({
       </div>
 
       {/* Right: session content */}
-      <div className="flex-1 flex flex-col min-w-0 overflow-hidden" style={{ width: 0 }}>
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         {activeSession && (
           <div className="border-b border-[var(--border)] px-4 py-2 shrink-0">
             <div className="flex items-center gap-2">
@@ -508,7 +508,7 @@ export default function SessionView({
           </div>
         )}
 
-        <div className="flex-1 overflow-y-auto overflow-x-auto p-4 space-y-2">
+        <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-2">
           {!activeSessionId && (
             <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)] h-full">
               <p>Select a session from the tree to view</p>
@@ -577,7 +577,7 @@ function SessionEntryView({
 
   if (entry.type === 'assistant_text') {
     return (
-      <div className="py-1 overflow-hidden">
+      <div className="py-1 overflow-hidden" style={{ maxWidth: 0, minWidth: '100%' }}>
         <MarkdownContent content={entry.content} />
       </div>
     );

package/components/SkillsPanel.tsx

@@ -0,0 +1,320 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface Skill {
+  name: string;
+  displayName: string;
+  description: string;
+  author: string;
+  version: string;
+  tags: string[];
+  score: number;
+  sourceUrl: string;
+  installedGlobal: boolean;
+  installedProjects: string[];
+}
+
+interface ProjectInfo {
+  path: string;
+  name: string;
+}
+
+export default function SkillsPanel({ projectFilter }: { projectFilter?: string }) {
+  const [skills, setSkills] = useState<Skill[]>([]);
+  const [projects, setProjects] = useState<ProjectInfo[]>([]);
+  const [syncing, setSyncing] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [installTarget, setInstallTarget] = useState<{ skill: string; show: boolean }>({ skill: '', show: false });
+  const [expandedSkill, setExpandedSkill] = useState<string | null>(null);
+  const [skillFiles, setSkillFiles] = useState<{ name: string; path: string; type: string }[]>([]);
+  const [activeFile, setActiveFile] = useState<string | null>(null);
+  const [fileContent, setFileContent] = useState<string>('');
+
+  const fetchSkills = useCallback(async () => {
+    try {
+      const res = await fetch('/api/skills');
+      const data = await res.json();
+      setSkills(data.skills || []);
+      setProjects(data.projects || []);
+    } catch {}
+    setLoading(false);
+  }, []);
+
+  useEffect(() => { fetchSkills(); }, [fetchSkills]);
+
+  const sync = async () => {
+    setSyncing(true);
+    await fetch('/api/skills', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'sync' }),
+    });
+    await fetchSkills();
+    setSyncing(false);
+  };
+
+  const install = async (name: string, target: string) => {
+    await fetch('/api/skills', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'install', name, target }),
+    });
+    setInstallTarget({ skill: '', show: false });
+    fetchSkills();
+  };
+
+  const toggleDetail = async (name: string) => {
+    if (expandedSkill === name) {
+      setExpandedSkill(null);
+      return;
+    }
+    setExpandedSkill(name);
+    setSkillFiles([]);
+    setActiveFile(null);
+    setFileContent('');
+    // Fetch file list from GitHub API
+    try {
+      const res = await fetch(`/api/skills?action=files&name=${encodeURIComponent(name)}`);
+      const data = await res.json();
+      const files = data.files || [];
+      setSkillFiles(files);
+      // Auto-select skill.md if exists, otherwise first file
+      const defaultFile = files.find((f: any) => f.name === 'skill.md') || files.find((f: any) => f.type === 'file');
+      if (defaultFile) loadFile(name, defaultFile.path);
+    } catch { setSkillFiles([]); }
+  };
+
+  const loadFile = async (skillName: string, filePath: string) => {
+    setActiveFile(filePath);
+    setFileContent('Loading...');
+    try {
+      const res = await fetch(`/api/skills?action=file&name=${encodeURIComponent(skillName)}&path=${encodeURIComponent(filePath)}`);
+      const data = await res.json();
+      setFileContent(data.content || '(Empty)');
+    } catch { setFileContent('(Failed to load)'); }
+  };
+
+  const uninstall = async (name: string, target: string) => {
+    await fetch('/api/skills', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'uninstall', name, target }),
+    });
+    fetchSkills();
+  };
+
+  // Filter skills if viewing a specific project
+  const filtered = projectFilter
+    ? skills.filter(s => s.installedGlobal || s.installedProjects.includes(projectFilter))
+    : skills;
+
+  if (loading) {
+    return <div className="p-4 text-xs text-[var(--text-secondary)]">Loading skills...</div>;
+  }
+
+  return (
+    <div className="flex-1 flex flex-col min-h-0">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--border)] shrink-0">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-semibold text-[var(--text-primary)]">Skills</span>
+          <span className="text-[9px] text-[var(--text-secondary)]">{filtered.length} available</span>
+        </div>
+        <button
+          onClick={sync}
+          disabled={syncing}
+          className="text-[9px] text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-50"
+        >
+          {syncing ? 'Syncing...' : 'Sync'}
+        </button>
+      </div>
+
+      {skills.length === 0 ? (
+        <div className="flex-1 flex flex-col items-center justify-center gap-2 text-[var(--text-secondary)]">
+          <p className="text-xs">No skills yet</p>
+          <button onClick={sync} className="text-xs px-3 py-1 bg-[var(--accent)] text-white rounded hover:opacity-90">
+            Sync from Registry
+          </button>
+        </div>
+      ) : (
+        <div className="flex-1 flex min-h-0">
+          {/* Left: skill list */}
+          <div className="w-56 border-r border-[var(--border)] overflow-y-auto shrink-0">
+            {filtered.map(skill => {
+              const isInstalled = skill.installedGlobal || skill.installedProjects.length > 0;
+              const isActive = expandedSkill === skill.name;
+              return (
+                <div
+                  key={skill.name}
+                  className={`px-3 py-2.5 border-b border-[var(--border)]/50 cursor-pointer ${
+                    isActive ? 'bg-[var(--accent)]/10 border-l-2 border-l-[var(--accent)]' : 'hover:bg-[var(--bg-tertiary)] border-l-2 border-l-transparent'
+                  }`}
+                  onClick={() => toggleDetail(skill.name)}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="text-[11px] font-semibold text-[var(--text-primary)] truncate flex-1">{skill.displayName}</span>
+                    <span className="text-[8px] text-[var(--text-secondary)] font-mono shrink-0">v{skill.version}</span>
+                    {skill.score > 0 && (
+                      <span className="text-[8px] text-[var(--yellow)] shrink-0">{skill.score}pt</span>
+                    )}
+                  </div>
+                  <p className="text-[9px] text-[var(--text-secondary)] mt-0.5 line-clamp-1">{skill.description}</p>
+                  <div className="flex items-center gap-1.5 mt-1">
+                    <span className="text-[8px] text-[var(--text-secondary)]">{skill.author}</span>
+                    {skill.tags.slice(0, 2).map(t => (
+                      <span key={t} className="text-[7px] px-1 rounded bg-[var(--bg-tertiary)] text-[var(--text-secondary)]">{t}</span>
+                    ))}
+                    {isInstalled && <span className="text-[8px] text-[var(--green)] ml-auto">installed</span>}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          {/* Right: detail panel */}
+          <div className="flex-1 flex flex-col min-w-0">
+            {expandedSkill ? (() => {
+              const skill = skills.find(s => s.name === expandedSkill);
+              if (!skill) return null;
+              const isInstalled = skill.installedGlobal || skill.installedProjects.length > 0;
+              return (
+                <>
+                  {/* Skill header */}
+                  <div className="px-4 py-2 border-b border-[var(--border)] shrink-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-semibold text-[var(--text-primary)]">{skill.displayName}</span>
+                      <span className="text-[9px] text-[var(--text-secondary)] font-mono">v{skill.version}</span>
+                      {skill.score > 0 && <span className="text-[9px] text-[var(--yellow)]">{skill.score}pt</span>}
+
+                      {/* Install dropdown */}
+                      <div className="relative ml-auto">
+                        <button
+                          onClick={() => setInstallTarget(prev =>
+                            prev.skill === skill.name && prev.show ? { skill: '', show: false } : { skill: skill.name, show: true }
+                          )}
+                          className="text-[9px] px-2 py-1 border border-[var(--accent)] text-[var(--accent)] rounded hover:bg-[var(--accent)] hover:text-white transition-colors"
+                        >
+                          Install
+                        </button>
+                        {installTarget.skill === skill.name && installTarget.show && (
+                          <>
+                            <div className="fixed inset-0 z-40" onClick={() => setInstallTarget({ skill: '', show: false })} />
+                            <div className="absolute right-0 top-7 w-[180px] bg-[var(--bg-secondary)] border border-[var(--border)] rounded-lg shadow-xl z-50 py-1">
+                              <button
+                                onClick={() => install(skill.name, 'global')}
+                                className={`w-full text-left text-[10px] px-3 py-1.5 hover:bg-[var(--bg-tertiary)] ${
+                                  skill.installedGlobal ? 'text-[var(--green)]' : 'text-[var(--text-primary)]'
+                                }`}
+                              >
+                                {skill.installedGlobal ? '✓ ' : ''}Global (~/.claude)
+                              </button>
+                              <div className="border-t border-[var(--border)] my-0.5" />
+                              {projects.map(p => {
+                                const inst = skill.installedProjects.includes(p.path);
+                                return (
+                                  <button
+                                    key={p.path}
+                                    onClick={() => install(skill.name, p.path)}
+                                    className={`w-full text-left text-[10px] px-3 py-1.5 hover:bg-[var(--bg-tertiary)] truncate ${
+                                      inst ? 'text-[var(--green)]' : 'text-[var(--text-primary)]'
+                                    }`}
+                                    title={p.path}
+                                  >
+                                    {inst ? '✓ ' : ''}{p.name}
+                                  </button>
+                                );
+                              })}
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                    <p className="text-[10px] text-[var(--text-secondary)] mt-0.5">{skill.description}</p>
+                    {/* Installed indicators */}
+                    {isInstalled && (
+                      <div className="flex items-center gap-2 mt-1">
+                        {skill.installedGlobal && (
+                          <span className="flex items-center gap-1 text-[8px] text-[var(--green)]">
+                            Global
+                            <button onClick={() => uninstall(skill.name, 'global')} className="text-[var(--text-secondary)] hover:text-[var(--red)]">x</button>
+                          </span>
+                        )}
+                        {skill.installedProjects.map(pp => (
+                          <span key={pp} className="flex items-center gap-1 text-[8px] text-[var(--accent)]">
+                            {pp.split('/').pop()}
+                            <button onClick={() => uninstall(skill.name, pp)} className="text-[var(--text-secondary)] hover:text-[var(--red)]">x</button>
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* File browser */}
+                  <div className="flex-1 flex min-h-0 overflow-hidden">
+                    {/* File list */}
+                    <div className="w-32 border-r border-[var(--border)] overflow-y-auto shrink-0">
+                      {skillFiles.length === 0 ? (
+                        <div className="p-2 text-[9px] text-[var(--text-secondary)]">Loading...</div>
+                      ) : (
+                        skillFiles.map(f => (
+                          f.type === 'file' ? (
+                            <button
+                              key={f.path}
+                              onClick={() => loadFile(skill.name, f.path)}
+                              className={`w-full text-left px-2 py-1 text-[10px] truncate ${
+                                activeFile === f.path
+                                  ? 'bg-[var(--accent)]/15 text-[var(--accent)]'
+                                  : 'text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]'
+                              }`}
+                              title={f.path}
+                            >
+                              {f.name}
+                            </button>
+                          ) : (
+                            <div key={f.path} className="px-2 py-1 text-[9px] text-[var(--text-secondary)] font-semibold">
+                              {f.name}/
+                            </div>
+                          )
+                        ))
+                      )}
+                      {skill.sourceUrl && (
+                        <div className="border-t border-[var(--border)] p-2">
+                          <a
+                            href={skill.sourceUrl.replace(/\/blob\/main\/.*/, '')}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-[9px] text-[var(--accent)] hover:underline"
+                          >
+                            GitHub
+                          </a>
+                        </div>
+                      )}
+                    </div>
+                    {/* File content */}
+                    <div className="flex-1 flex flex-col" style={{ width: 0 }}>
+                      {activeFile && (
+                        <div className="px-3 py-1 border-b border-[var(--border)] text-[9px] text-[var(--text-secondary)] font-mono shrink-0 truncate">
+                          {activeFile}
+                        </div>
+                      )}
+                      <div className="flex-1 overflow-auto">
+                        <pre className="p-3 text-[11px] text-[var(--text-primary)] font-mono whitespace-pre-wrap break-all">
+                          {fileContent}
+                        </pre>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              );
+            })() : (
+              <div className="flex-1 flex items-center justify-center text-[var(--text-secondary)]">
+                <p className="text-xs">Select a skill to view details</p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/WebTerminal.tsx

@@ -506,7 +506,17 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
             </div>
           ))}
           <button
-            onClick={() => setShowNewTabModal(true)}
+            onClick={() => {
+              setShowNewTabModal(true);
+              // Refresh projects list when opening modal
+              fetch('/api/projects').then(r => r.json())
+                .then((p: { name: string; path: string; root: string }[]) => {
+                  if (!Array.isArray(p)) return;
+                  setAllProjects(p);
+                  setProjectRoots([...new Set(p.map(proj => proj.root))]);
+                })
+                .catch(() => {});
+            }}
             className="px-2 py-1 text-[11px] text-gray-500 hover:text-white hover:bg-[var(--term-border)]"
             title="New tab"
           >
@@ -690,7 +700,25 @@ const WebTerminal = forwardRef<WebTerminalHandle, WebTerminalProps>(function Web
                             {rootProjects.map(p => (
                               <button
                                 key={p.path}
-                                onClick={() => { addTab(p.path); setShowNewTabModal(false); setExpandedRoot(null); }}
+                                onClick={async () => {
+                                  setShowNewTabModal(false); setExpandedRoot(null);
+                                  // Pre-check sessions before creating tab
+                                  let hasSession = false;
+                                  try {
+                                    const sRes = await fetch(`/api/claude-sessions/${encodeURIComponent(p.name)}`);
+                                    const sData = await sRes.json();
+                                    hasSession = Array.isArray(sData) ? sData.length > 0 : (Array.isArray(sData.sessions) && sData.sessions.length > 0);
+                                  } catch {}
+                                  const skipFlag = skipPermissions ? ' --dangerously-skip-permissions' : '';
+                                  const resumeFlag = hasSession ? ' -c' : '';
+                                  const tree = makeTerminal(undefined, p.path);
+                                  const paneId = firstTerminalId(tree);
+                                  pendingCommands.set(paneId, `cd "${p.path}" && claude${resumeFlag}${skipFlag}\n`);
+                                  const tabNum = tabs.length + 1;
+                                  const newTab: TabState = { id: nextId++, label: p.name || `Terminal ${tabNum}`, tree, ratios: {}, activeId: paneId, projectPath: p.path };
+                                  setTabs(prev => [...prev, newTab]);
+                                  setActiveTabId(newTab.id);
+                                }}
                                 className="w-full text-left px-3 py-1.5 rounded hover:bg-[var(--term-border)] text-[11px] text-gray-300 flex items-center gap-2 truncate"
                                 title={p.path}
                               >
@@ -1090,13 +1118,13 @@ const MemoTerminalPane = memo(function TerminalPane({
             createRetries = 0;
             reconnectAttempts = 0;
             onSessionConnected(id, msg.sessionName);
-            // Auto-run claude --resume for project tabs on new session
-            if (isNewlyCreated && projectPathRef.current) {
+            // Auto-run claude for project tabs (only if no pendingCommand already set)
+            if (isNewlyCreated && projectPathRef.current && !pendingCommands.has(id)) {
               isNewlyCreated = false;
               setTimeout(() => {
                 if (!disposed && ws?.readyState === WebSocket.OPEN) {
                   const skipFlag = skipPermRef.current ? ' --dangerously-skip-permissions' : '';
-                  ws.send(JSON.stringify({ type: 'input', data: `cd "${projectPathRef.current}" && claude --resume${skipFlag}\n` }));
+                  ws.send(JSON.stringify({ type: 'input', data: `cd "${projectPathRef.current}" && claude${skipFlag}\n` }));
                 }
               }, 300);
             }

package/lib/init.ts

@@ -76,6 +76,13 @@ export function ensureInitialized() {
   // Auto-detect claude path if not configured
   autoDetectClaude();
 
+  // Sync skills registry (async, non-blocking) — on startup + every 30 min
+  try {
+    const { syncSkills } = require('./skills');
+    syncSkills().catch(() => {});
+    setInterval(() => { syncSkills().catch(() => {}); }, 30 * 60 * 1000);
+  } catch {}
+
   // Task runner is safe in every worker (DB-level coordination)
   ensureRunnerStarted();
 

package/lib/settings.ts

@@ -22,6 +22,7 @@ export interface Settings {
   telegramModel: string;          // Model for Telegram AI features (default: sonnet)
   skipPermissions: boolean;       // Add --dangerously-skip-permissions to all claude invocations
   notificationRetentionDays: number; // Auto-cleanup notifications older than N days
+  skillsRepoUrl: string;              // GitHub raw URL for skills registry
 }
 
 const defaults: Settings = {
@@ -39,6 +40,7 @@ const defaults: Settings = {
   telegramModel: 'sonnet',
   skipPermissions: false,
   notificationRetentionDays: 30,
+  skillsRepoUrl: 'https://raw.githubusercontent.com/aiwatching/forge-skills/main',
 };
 
 /** Load settings with secrets decrypted (for internal use) */

package/lib/skills.ts

@@ -0,0 +1,182 @@
+/**
+ * Skills management — sync from registry, install/uninstall to local.
+ *
+ * Global install: ~/.claude/commands/<name>.md
+ * Project install: <projectPath>/.claude/commands/<name>.md
+ */
+
+import { getDb } from '@/src/core/db/database';
+import { getDbPath } from '@/src/config';
+import { loadSettings } from './settings';
+import { existsSync, mkdirSync, writeFileSync, unlinkSync, readFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { homedir } from 'node:os';
+
+export interface Skill {
+  name: string;
+  displayName: string;
+  description: string;
+  author: string;
+  version: string;
+  tags: string[];
+  score: number;
+  sourceUrl: string;
+  installedGlobal: boolean;
+  installedProjects: string[]; // project paths where installed
+}
+
+function db() {
+  return getDb(getDbPath());
+}
+
+const GLOBAL_COMMANDS_DIR = join(homedir(), '.claude', 'commands');
+
+function projectCommandsDir(projectPath: string): string {
+  return join(projectPath, '.claude', 'commands');
+}
+
+// ─── Sync from registry ──────────────────────────────────────
+
+export async function syncSkills(): Promise<{ synced: number; error?: string }> {
+  const settings = loadSettings();
+  const baseUrl = settings.skillsRepoUrl || 'https://raw.githubusercontent.com/aiwatching/forge-skills/main';
+
+  try {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 10000);
+    const res = await fetch(`${baseUrl}/registry.json`, {
+      signal: controller.signal,
+      headers: { 'Accept': 'application/json' },
+    });
+    clearTimeout(timeout);
+
+    if (!res.ok) return { synced: 0, error: `Registry fetch failed: ${res.status}` };
+
+    const data = await res.json();
+    const skills = data.skills || [];
+
+    const stmt = db().prepare(`
+      INSERT OR REPLACE INTO skills (name, display_name, description, author, version, tags, score, source_url, synced_at,
+        installed_global, installed_projects, skill_content)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?, datetime('now'),
+        COALESCE((SELECT installed_global FROM skills WHERE name = ?), 0),
+        COALESCE((SELECT installed_projects FROM skills WHERE name = ?), '[]'),
+        COALESCE((SELECT skill_content FROM skills WHERE name = ?), NULL))
+    `);
+
+    const tx = db().transaction(() => {
+      for (const s of skills) {
+        stmt.run(
+          s.name, s.display_name, s.description || '',
+          s.author?.name || '', s.version || '', JSON.stringify(s.tags || []),
+          s.score || 0, s.source?.url || '',
+          s.name, s.name, s.name
+        );
+      }
+    });
+    tx();
+
+    return { synced: skills.length };
+  } catch (e) {
+    return { synced: 0, error: e instanceof Error ? e.message : String(e) };
+  }
+}
+
+// ─── List skills ─────────────────────────────────────────────
+
+export function listSkills(): Skill[] {
+  const rows = db().prepare('SELECT * FROM skills ORDER BY score DESC, display_name ASC').all() as any[];
+  return rows.map(r => ({
+    name: r.name,
+    displayName: r.display_name,
+    description: r.description,
+    author: r.author,
+    version: r.version,
+    tags: JSON.parse(r.tags || '[]'),
+    score: r.score,
+    sourceUrl: r.source_url,
+    installedGlobal: !!r.installed_global,
+    installedProjects: JSON.parse(r.installed_projects || '[]'),
+  }));
+}
+
+// ─── Install ─────────────────────────────────────────────────
+
+async function fetchSkillContent(name: string): Promise<string> {
+  // Check if already cached in DB
+  const row = db().prepare('SELECT skill_content FROM skills WHERE name = ?').get(name) as any;
+  if (row?.skill_content) return row.skill_content;
+
+  // Fetch from GitHub
+  const settings = loadSettings();
+  const baseUrl = settings.skillsRepoUrl || 'https://raw.githubusercontent.com/aiwatching/forge-skills/main';
+  const res = await fetch(`${baseUrl}/skills/${name}/skill.md`, { headers: { 'Accept': 'text/plain' } });
+  if (!res.ok) throw new Error(`Failed to fetch skill: ${res.status}`);
+  const content = await res.text();
+
+  // Cache in DB
+  db().prepare('UPDATE skills SET skill_content = ? WHERE name = ?').run(content, name);
+  return content;
+}
+
+export async function installGlobal(name: string): Promise<void> {
+  const content = await fetchSkillContent(name);
+  if (!existsSync(GLOBAL_COMMANDS_DIR)) mkdirSync(GLOBAL_COMMANDS_DIR, { recursive: true });
+  writeFileSync(join(GLOBAL_COMMANDS_DIR, `${name}.md`), content, 'utf-8');
+  db().prepare('UPDATE skills SET installed_global = 1 WHERE name = ?').run(name);
+}
+
+export async function installProject(name: string, projectPath: string): Promise<void> {
+  const content = await fetchSkillContent(name);
+  const dir = projectCommandsDir(projectPath);
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+  writeFileSync(join(dir, `${name}.md`), content, 'utf-8');
+
+  // Update installed_projects list
+  const row = db().prepare('SELECT installed_projects FROM skills WHERE name = ?').get(name) as any;
+  const projects: string[] = JSON.parse(row?.installed_projects || '[]');
+  if (!projects.includes(projectPath)) {
+    projects.push(projectPath);
+    db().prepare('UPDATE skills SET installed_projects = ? WHERE name = ?').run(JSON.stringify(projects), name);
+  }
+}
+
+// ─── Uninstall ───────────────────────────────────────────────
+
+export function uninstallGlobal(name: string): void {
+  const file = join(GLOBAL_COMMANDS_DIR, `${name}.md`);
+  try { unlinkSync(file); } catch {}
+  db().prepare('UPDATE skills SET installed_global = 0 WHERE name = ?').run(name);
+}
+
+export function uninstallProject(name: string, projectPath: string): void {
+  const file = join(projectCommandsDir(projectPath), `${name}.md`);
+  try { unlinkSync(file); } catch {}
+
+  const row = db().prepare('SELECT installed_projects FROM skills WHERE name = ?').get(name) as any;
+  const projects: string[] = JSON.parse(row?.installed_projects || '[]');
+  const updated = projects.filter(p => p !== projectPath);
+  db().prepare('UPDATE skills SET installed_projects = ? WHERE name = ?').run(JSON.stringify(updated), name);
+}
+
+// ─── Scan installed state from filesystem ────────────────────
+
+export function refreshInstallState(projectPaths: string[]): void {
+  const skills = db().prepare('SELECT name FROM skills').all() as { name: string }[];
+
+  for (const { name } of skills) {
+    // Check global
+    const globalInstalled = existsSync(join(GLOBAL_COMMANDS_DIR, `${name}.md`));
+
+    // Check projects
+    const installedIn: string[] = [];
+    for (const pp of projectPaths) {
+      if (existsSync(join(projectCommandsDir(pp), `${name}.md`))) {
+        installedIn.push(pp);
+      }
+    }
+
+    db().prepare('UPDATE skills SET installed_global = ?, installed_projects = ? WHERE name = ?')
+      .run(globalInstalled ? 1 : 0, JSON.stringify(installedIn), name);
+  }
+}

package/lib/telegram-bot.ts

@@ -1210,7 +1210,7 @@ async function sendNoteToDocsClaude(chatId: number, content: string) {
       await new Promise(r => setTimeout(r, 500));
       // cd to doc root and start claude
       const sf = settings.skipPermissions ? ' --dangerously-skip-permissions' : '';
-      spawnSync('tmux', ['send-keys', '-t', SESSION_NAME, `cd "${docRoot}" && claude --resume${sf}`, 'Enter'], { timeout: 5000 });
+      spawnSync('tmux', ['send-keys', '-t', SESSION_NAME, `cd "${docRoot}" && claude -c${sf}`, 'Enter'], { timeout: 5000 });
       // Wait for Claude to start up
       await new Promise(r => setTimeout(r, 3000));
       await send(chatId, '🚀 Auto-started Docs Claude session.');
@@ -1230,7 +1230,7 @@ async function sendNoteToDocsClaude(chatId: number, content: string) {
   if (paneCmd === 'zsh' || paneCmd === 'bash' || paneCmd === 'fish' || !paneCmd) {
     try {
       const sf = settings.skipPermissions ? ' --dangerously-skip-permissions' : '';
-      spawnSync('tmux', ['send-keys', '-t', SESSION_NAME, `cd "${docRoot}" && claude --resume${sf}`, 'Enter'], { timeout: 5000 });
+      spawnSync('tmux', ['send-keys', '-t', SESSION_NAME, `cd "${docRoot}" && claude -c${sf}`, 'Enter'], { timeout: 5000 });
       await new Promise(r => setTimeout(r, 3000));
       await send(chatId, '🚀 Auto-started Claude in Docs session.');
     } catch {

package/package.json

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

package/src/core/db/database.ts

@@ -120,6 +120,22 @@ function initSchema(db: Database.Database) {
 
     CREATE INDEX IF NOT EXISTS idx_notifications_read ON notifications(read, created_at);
 
+    -- Skills registry cache
+    CREATE TABLE IF NOT EXISTS skills (
+      name TEXT PRIMARY KEY,
+      display_name TEXT NOT NULL,
+      description TEXT,
+      author TEXT,
+      version TEXT,
+      tags TEXT,
+      score INTEGER DEFAULT 0,
+      source_url TEXT,
+      skill_content TEXT,
+      installed_global INTEGER NOT NULL DEFAULT 0,
+      installed_projects TEXT NOT NULL DEFAULT '[]',
+      synced_at TEXT NOT NULL DEFAULT (datetime('now'))
+    );
+
     -- Session watchers — monitor sessions and notify via Telegram
     CREATE TABLE IF NOT EXISTS session_watchers (
       id TEXT PRIMARY KEY,