apero-kit-cli 1.4.2 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apero-kit-cli",
-  "version": "1.4.2",
+  "version": "1.7.0",
   "description": "CLI tool to scaffold AI agent projects with pre-configured kits (Claude, OpenCode, Codex)",
   "type": "module",
   "bin": {

package/src/commands/help.js

@@ -1,11 +1,5 @@
-import http from 'http';
-import { join } from 'path';
 import { exec } from 'child_process';
-import fs from 'fs-extra';
 import chalk from 'chalk';
-import { CLI_ROOT, TEMPLATES_DIR, resolveSource } from '../utils/paths.js';
-
-const PORT = 3457;
 
 // Bilingual content
 const i18n = {
@@ -1403,38 +1397,16 @@ function generateWorkflowsSection(t, lang) {
   `;
 }
 
+const HELP_URL = 'https://www.vividkit.dev/vi/guides/what-is-claudekit';
+
 /**
- * Help command - open browser with interactive documentation
+ * Help command - open VividKit documentation in browser
  */
 export async function helpCommand(options) {
-  const source = resolveSource(options.source);
-
-  console.log(chalk.cyan('\n📚 Starting help server...\n'));
-
-  const server = http.createServer((req, res) => {
-    const url = new URL(req.url, `http://localhost:${PORT}`);
-    const section = url.searchParams.get('section') || 'overview';
-    const lang = url.searchParams.get('lang') || 'vi';
-
-    const html = generateHelpPage(section, lang, source);
-    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-    res.end(html);
-  });
-
-  server.listen(PORT, () => {
-    const url = `http://localhost:${PORT}`;
-    console.log(chalk.green(`   Help server running at: ${url}`));
-    console.log(chalk.gray('   Press Ctrl+C to stop\n'));
-
-    // Open browser
-    const openCommand = process.platform === 'darwin' ? 'open' :
-                        process.platform === 'win32' ? 'start' : 'xdg-open';
-    exec(`${openCommand} ${url}`);
-  });
-
-  // Handle shutdown
-  process.on('SIGINT', () => {
-    console.log(chalk.yellow('\n👋 Help server stopped'));
-    process.exit(0);
-  });
+  console.log(chalk.cyan('\n📚 Opening VividKit documentation...\n'));
+  console.log(chalk.green(`   ${HELP_URL}\n`));
+
+  const openCommand = process.platform === 'darwin' ? 'open' :
+                      process.platform === 'win32' ? 'start' : 'xdg-open';
+  exec(`${openCommand} ${HELP_URL}`);
 }

package/src/utils/paths.js

@@ -1,7 +1,8 @@
 import { fileURLToPath } from 'url';
 import { dirname, join, resolve } from 'path';
-import { existsSync, statSync } from 'fs';
+import { existsSync, statSync, mkdirSync } from 'fs';
 import { execSync } from 'child_process';
+import { homedir } from 'os';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -12,6 +13,10 @@ export const CLI_ROOT = resolve(__dirname, '../..');
 // Embedded templates directory (inside CLI package)
 export const TEMPLATES_DIR = join(CLI_ROOT, 'templates');
 
+// Remote templates config
+const REMOTE_REPO_URL = 'https://github.com/Thanhnguyen6702/CK-Internal.git';
+const CACHE_DIR = join(homedir(), '.apero-kit', 'CK-Internal');
+
 // Target folder mappings
 export const TARGETS = {
   claude: '.claude',
@@ -19,6 +24,55 @@ export const TARGETS = {
   generic: '.agent'
 };
 
+/**
+ * Fetch or update remote templates from CK-Internal GitHub repo.
+ * Clones on first run, pulls on subsequent runs.
+ * Returns source object or null on failure.
+ */
+export function fetchRemoteTemplates() {
+  try {
+    const cacheParent = join(homedir(), '.apero-kit');
+    if (!existsSync(cacheParent)) {
+      mkdirSync(cacheParent, { recursive: true });
+    }
+
+    if (existsSync(join(CACHE_DIR, '.git'))) {
+      // Already cloned — pull latest
+      try {
+        execSync('git pull --ff-only', {
+          cwd: CACHE_DIR,
+          encoding: 'utf-8',
+          stdio: ['pipe', 'pipe', 'pipe'],
+          timeout: 30000
+        });
+      } catch {
+        // pull failed (offline, etc.) — use cached version
+      }
+    } else {
+      // First time — clone
+      execSync(`git clone --depth 1 "${REMOTE_REPO_URL}" "${CACHE_DIR}"`, {
+        encoding: 'utf-8',
+        stdio: ['pipe', 'pipe', 'pipe'],
+        timeout: 60000
+      });
+    }
+
+    const claudeDir = join(CACHE_DIR, '.claude');
+    if (existsSync(claudeDir) && statSync(claudeDir).isDirectory()) {
+      const agentsMd = join(CACHE_DIR, 'AGENTS.md');
+      return {
+        path: CACHE_DIR,
+        type: 'remote',
+        claudeDir,
+        agentsMd: existsSync(agentsMd) ? agentsMd : null
+      };
+    }
+  } catch {
+    // Clone failed (no network, etc.) — fall through
+  }
+  return null;
+}
+
 /**
  * Get embedded templates (bundled with CLI)
  */
@@ -177,19 +231,25 @@ export function resolveSource(sourceFlag) {
     return { error: `No .claude/ or .opencode/ found in: ${sourceFlag}` };
   }
 
-  // 2. Use embedded templates (bundled with CLI) - PREFERRED
+  // 2. Fetch from remote CK-Internal repo - PREFERRED
+  const remote = fetchRemoteTemplates();
+  if (remote) {
+    return remote;
+  }
+
+  // 3. Use embedded templates (bundled with CLI) - FALLBACK
   const embedded = getEmbeddedTemplates();
   if (embedded) {
     return embedded;
   }
 
-  // 3. Fallback: auto-detect in parent directories
+  // 4. Fallback: auto-detect in parent directories
   const found = findSource();
   if (found) {
     return found;
   }
 
   return {
-    error: 'No templates found. The CLI package may be corrupted. Try reinstalling: npm install -g apero-kit-cli'
+    error: 'No templates found. Check your network connection or try reinstalling: npm install -g apero-kit-cli'
   };
 }

package/templates/scripts/plan-preview.cjs

@@ -33,44 +33,13 @@ if (!fs.existsSync(fullPlanPath)) {
   process.exit(1);
 }
 
-// Simple markdown to HTML converter
-function markdownToHtml(md) {
-  return md
-    // Code blocks with language
-    .replace(/```(\w+)?\n([\s\S]*?)```/g, (_, lang, code) => {
-      const langClass = lang ? `language-${lang}` : '';
-      return `<pre class="${langClass}"><code>${escapeHtml(code.trim())}</code></pre>`;
-    })
-    // Inline code
-    .replace(/`([^`]+)`/g, '<code class="inline">$1</code>')
-    // Headers
-    .replace(/^### (.*$)/gm, '<h3>$1</h3>')
-    .replace(/^## (.*$)/gm, '<h2>$1</h2>')
-    .replace(/^# (.*$)/gm, '<h1>$1</h1>')
-    // Bold and italic
-    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
-    .replace(/\*([^*]+)\*/g, '<em>$1</em>')
-    // Links
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
-    // Lists
-    .replace(/^\s*[-*] (.*$)/gm, '<li>$1</li>')
-    .replace(/(<li>.*<\/li>)\n(?!<li>)/g, '$1</ul>\n')
-    .replace(/(?<!<\/li>\n)(<li>)/g, '<ul>$1')
-    // Numbered lists
-    .replace(/^\s*\d+\. (.*$)/gm, '<li class="numbered">$1</li>')
-    // Blockquotes
-    .replace(/^> (.*$)/gm, '<blockquote>$1</blockquote>')
-    // Horizontal rules
-    .replace(/^---+$/gm, '<hr>')
-    // Paragraphs
-    .replace(/\n\n/g, '</p><p>')
-    // Tables (simple)
-    .replace(/\|(.+)\|/g, (match) => {
-      const cells = match.split('|').filter(c => c.trim());
-      if (cells.every(c => /^[-:]+$/.test(c.trim()))) return ''; // Skip separator
-      const tag = 'td';
-      return '<tr>' + cells.map(c => `<${tag}>${c.trim()}</${tag}>`).join('') + '</tr>';
-    });
+// Markdown to HTML - Uses marked.js on client-side for full GFM support
+// Server just passes raw markdown, client renders with marked.js
+function markdownToHtml(md, forEditor = false) {
+  // For editor preview pane, we'll render client-side with marked.js
+  // For static preview, we embed raw markdown and render on page load
+  const encodedMd = encodeURIComponent(md);
+  return `<div class="markdown-body" data-markdown="${encodedMd}"><noscript>${escapeHtml(md)}</noscript><div class="loading">Loading...</div></div>`;
 }
 
 function escapeHtml(text) {
@@ -134,6 +103,22 @@ function generatePage(files, currentFile, mode = 'preview') {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Plan Preview - ${path.basename(fullPlanPath)}</title>
+
+  <!-- marked.js - Markdown Parser -->
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
+  <!-- Prism.js - Syntax Highlighting -->
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markdown.min.js"></script>
+
   <style>
     :root {
       --bg: #0d1117;
@@ -467,6 +452,171 @@ function generatePage(files, currentFile, mode = 'preview') {
       justify-content: space-between;
     }
 
+    /* GitHub-style Markdown Body */
+    .markdown-body {
+      line-height: 1.7;
+    }
+
+    .markdown-body .loading {
+      color: var(--text-muted);
+      font-style: italic;
+    }
+
+    .markdown-body h1 {
+      font-size: 2em;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 0.3em;
+      margin: 24px 0 16px;
+    }
+
+    .markdown-body h2 {
+      font-size: 1.5em;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 0.3em;
+      margin: 24px 0 16px;
+    }
+
+    .markdown-body h3 {
+      font-size: 1.25em;
+      margin: 24px 0 16px;
+    }
+
+    .markdown-body h4 {
+      font-size: 1em;
+      margin: 24px 0 16px;
+    }
+
+    .markdown-body p {
+      margin: 0 0 16px;
+    }
+
+    .markdown-body ul, .markdown-body ol {
+      margin: 0 0 16px;
+      padding-left: 2em;
+    }
+
+    .markdown-body li {
+      margin: 4px 0;
+    }
+
+    .markdown-body li > p {
+      margin: 0;
+    }
+
+    /* Task Lists */
+    .markdown-body input[type="checkbox"] {
+      margin-right: 8px;
+      vertical-align: middle;
+    }
+
+    .markdown-body li.task-list-item {
+      list-style: none;
+      margin-left: -1.5em;
+    }
+
+    /* Tables - GitHub style */
+    .markdown-body table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 16px 0;
+      display: block;
+      overflow-x: auto;
+    }
+
+    .markdown-body thead {
+      background: var(--bg-tertiary);
+    }
+
+    .markdown-body th, .markdown-body td {
+      padding: 12px 16px;
+      border: 1px solid var(--border);
+      text-align: left;
+    }
+
+    .markdown-body th {
+      font-weight: 600;
+    }
+
+    .markdown-body tbody tr:nth-child(even) {
+      background: var(--bg-secondary);
+    }
+
+    .markdown-body tbody tr:hover {
+      background: rgba(88, 166, 255, 0.05);
+    }
+
+    /* Code blocks with Prism */
+    .markdown-body pre {
+      background: var(--code-bg);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 16px;
+      overflow-x: auto;
+      margin: 16px 0;
+    }
+
+    .markdown-body pre code {
+      background: none;
+      padding: 0;
+      border-radius: 0;
+      font-size: 13px;
+      color: var(--text);
+    }
+
+    .markdown-body code {
+      font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+      font-size: 85%;
+      background: var(--code-bg);
+      padding: 0.2em 0.4em;
+      border-radius: 4px;
+      color: var(--accent);
+    }
+
+    /* Blockquotes */
+    .markdown-body blockquote {
+      border-left: 4px solid var(--accent);
+      padding: 0 16px;
+      margin: 16px 0;
+      color: var(--text-muted);
+    }
+
+    .markdown-body blockquote > :first-child {
+      margin-top: 0;
+    }
+
+    .markdown-body blockquote > :last-child {
+      margin-bottom: 0;
+    }
+
+    /* Images */
+    .markdown-body img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px;
+    }
+
+    /* Horizontal Rule */
+    .markdown-body hr {
+      border: none;
+      border-top: 2px solid var(--border);
+      margin: 32px 0;
+    }
+
+    /* Links */
+    .markdown-body a {
+      color: var(--accent);
+      text-decoration: none;
+    }
+
+    .markdown-body a:hover {
+      text-decoration: underline;
+    }
+
+    /* Strikethrough */
+    .markdown-body del {
+      color: var(--text-muted);
+    }
+
     /* Responsive */
     @media (max-width: 768px) {
       .sidebar { width: 100%; height: auto; position: relative; }
@@ -476,6 +626,16 @@ function generatePage(files, currentFile, mode = 'preview') {
       .editor { min-height: 300px; }
       .preview-pane { min-height: 300px; }
     }
+
+    /* Print styles */
+    @media print {
+      .sidebar, .toolbar, .mode-toggle, .footer { display: none !important; }
+      .main { margin-left: 0; padding: 20px; }
+      body { background: white; color: black; }
+      .markdown-body pre { border: 1px solid #ddd; background: #f5f5f5; }
+      .markdown-body code { background: #f5f5f5; color: #333; }
+      .markdown-body a { color: #0366d6; }
+    }
   </style>
 </head>
 <body>
@@ -535,6 +695,36 @@ function generatePage(files, currentFile, mode = 'preview') {
 
     originalContent = editor.value;
 
+    // Configure marked.js for GitHub Flavored Markdown
+    marked.setOptions({
+      gfm: true,
+      breaks: true,
+      headerIds: true,
+      mangle: false
+    });
+
+    // Custom renderer for syntax highlighting with Prism
+    const renderer = new marked.Renderer();
+    renderer.code = function(code, language) {
+      const lang = language || '';
+      const validLang = Prism.languages[lang] ? lang : 'plaintext';
+      let highlighted;
+      try {
+        highlighted = Prism.languages[validLang]
+          ? Prism.highlight(code, Prism.languages[validLang], validLang)
+          : code;
+      } catch (e) {
+        highlighted = code;
+      }
+      return '<pre class="language-' + validLang + '"><code class="language-' + validLang + '">' + highlighted + '</code></pre>';
+    };
+    marked.setOptions({ renderer });
+
+    // Render markdown with marked.js
+    function renderMarkdown(md) {
+      return marked.parse(md);
+    }
+
     // Live preview update
     let updateTimeout;
     editor.addEventListener('input', () => {
@@ -543,26 +733,15 @@ function generatePage(files, currentFile, mode = 'preview') {
 
       clearTimeout(updateTimeout);
       updateTimeout = setTimeout(() => {
-        preview.innerHTML = simpleMarkdown(editor.value);
-      }, 300);
+        preview.innerHTML = renderMarkdown(editor.value);
+        // Re-run Prism highlighting for any code blocks
+        Prism.highlightAllUnder(preview);
+      }, 150);
     });
 
-    // Simple client-side markdown (for live preview)
-    function simpleMarkdown(md) {
-      return md
-        .replace(/\`\`\`(\\w+)?\\n([\\s\\S]*?)\`\`\`/g, '<pre><code>$2</code></pre>')
-        .replace(/\`([^\`]+)\`/g, '<code class="inline">$1</code>')
-        .replace(/^### (.*$)/gm, '<h3>$1</h3>')
-        .replace(/^## (.*$)/gm, '<h2>$1</h2>')
-        .replace(/^# (.*$)/gm, '<h1>$1</h1>')
-        .replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>')
-        .replace(/\\*([^*]+)\\*/g, '<em>$1</em>')
-        .replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, '<a href="$2">$1</a>')
-        .replace(/^\\s*[-*] (.*$)/gm, '<li>$1</li>')
-        .replace(/^> (.*$)/gm, '<blockquote>$1</blockquote>')
-        .replace(/^---+$/gm, '<hr>')
-        .replace(/\\n\\n/g, '</p><p>');
-    }
+    // Initial render
+    preview.innerHTML = renderMarkdown(editor.value);
+    Prism.highlightAllUnder(preview);
 
     // Update status indicator
     function updateStatus() {
@@ -632,7 +811,42 @@ function generatePage(files, currentFile, mode = 'preview') {
         e.returnValue = '';
       }
     });
-    ` : ''}
+    ` : `
+    // Preview mode: Render markdown on page load
+    document.addEventListener('DOMContentLoaded', () => {
+      // Configure marked.js
+      marked.setOptions({
+        gfm: true,
+        breaks: true,
+        headerIds: true,
+        mangle: false
+      });
+
+      // Custom renderer for syntax highlighting with Prism
+      const renderer = new marked.Renderer();
+      renderer.code = function(code, language) {
+        const lang = language || '';
+        const validLang = Prism.languages[lang] ? lang : 'plaintext';
+        let highlighted;
+        try {
+          highlighted = Prism.languages[validLang]
+            ? Prism.highlight(code, Prism.languages[validLang], validLang)
+            : code;
+        } catch (e) {
+          highlighted = code;
+        }
+        return '<pre class="language-' + validLang + '"><code class="language-' + validLang + '">' + highlighted + '</code></pre>';
+      };
+      marked.setOptions({ renderer });
+
+      // Find all markdown bodies and render them
+      document.querySelectorAll('.markdown-body[data-markdown]').forEach(el => {
+        const rawMd = decodeURIComponent(el.dataset.markdown);
+        el.innerHTML = marked.parse(rawMd);
+        Prism.highlightAllUnder(el);
+      });
+    });
+    `}
   </script>
 </body>
 </html>`;