feat: add web dashboard UI with dark mode, Shadcn components, and enh…

package.json

@@ -7,7 +7,9 @@
     "ais": "./dist/index.js"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "pnpm build:web && tsc",
+    "build:web": "cd web && pnpm install && pnpm build",
+    "dev:web": "cd web && pnpm dev",
     "test": "vitest"
   },
   "files": [
@@ -27,10 +29,12 @@
     "sync"
   ],
   "dependencies": {
+    "@hono/node-server": "^1.19.9",
     "chalk": "^5.6.2",
     "commander": "^14.0.2",
     "execa": "^9.6.1",
     "fs-extra": "^11.3.3",
+    "hono": "^4.11.9",
     "linkany": "^0.0.3"
   },
   "devDependencies": {

src/commands/ui.ts

@@ -0,0 +1,6 @@
+import { startServer } from '../web/server.js';
+
+export async function handleUi(options: { port: number }): Promise<void> {
+  const projectPath = process.cwd();
+  await startServer(projectPath, options.port);
+}

src/index.ts

@@ -1394,6 +1394,16 @@ configRepo
     }
   });
 
+// ============ UI Command ============
+program
+  .command('ui')
+  .description('Start the web dashboard')
+  .option('-p, --port <port>', 'Port to listen on', '3847')
+  .action(async (options) => {
+    const { handleUi } = await import('./commands/ui.js');
+    await handleUi({ port: parseInt(options.port, 10) });
+  });
+
 // ============ Run CLI ============
 async function main() {
   await checkAndPromptCompletion();

src/web/api/operations.ts

@@ -0,0 +1,70 @@
+import { Hono } from 'hono';
+import { getAdapter, getToolAdapters } from '../../adapters/index.js';
+import { handleAdd, handleRemove } from '../../commands/handlers.js';
+import { installEntriesForTool } from '../../commands/install.js';
+import { getCurrentRepo } from '../../config.js';
+
+export const operationsRouter = new Hono();
+
+operationsRouter.post('/add', async (c) => {
+  const projectPath = c.get('projectPath' as never) as string;
+  const { tool, subtype, name, alias } = await c.req.json<{
+    tool: string;
+    subtype: string;
+    name: string;
+    alias?: string;
+  }>();
+
+  const repo = await getCurrentRepo();
+  if (!repo) {
+    return c.json({ error: 'No repository configured' }, 400);
+  }
+
+  const adapter = getAdapter(tool, subtype);
+  const ctx = { projectPath, repo, isLocal: false };
+
+  try {
+    const result = await handleAdd(adapter, ctx, name, alias);
+    return c.json({ ok: true, result });
+  } catch (err: any) {
+    return c.json({ error: err.message }, 400);
+  }
+});
+
+operationsRouter.post('/remove', async (c) => {
+  const projectPath = c.get('projectPath' as never) as string;
+  const { tool, subtype, alias } = await c.req.json<{
+    tool: string;
+    subtype: string;
+    alias: string;
+  }>();
+
+  const adapter = getAdapter(tool, subtype);
+
+  try {
+    const result = await handleRemove(adapter, projectPath, alias);
+    return c.json({ ok: true, result });
+  } catch (err: any) {
+    return c.json({ error: err.message }, 400);
+  }
+});
+
+operationsRouter.post('/install', async (c) => {
+  const projectPath = c.get('projectPath' as never) as string;
+  const { tool } = await c.req.json<{ tool?: string }>();
+
+  try {
+    if (tool) {
+      const adapters = getToolAdapters(tool);
+      await installEntriesForTool(adapters, projectPath);
+    } else {
+      // Install all tools
+      const { adapterRegistry } = await import('../../adapters/index.js');
+      const adapters = adapterRegistry.all();
+      await installEntriesForTool(adapters, projectPath);
+    }
+    return c.json({ ok: true });
+  } catch (err: any) {
+    return c.json({ error: err.message }, 400);
+  }
+});

src/web/api/repos.ts

@@ -0,0 +1,62 @@
+import { Hono } from 'hono';
+import fs from 'fs-extra';
+import path from 'path';
+import { getConfig, setConfig } from '../../config.js';
+import { adapterRegistry } from '../../adapters/index.js';
+import { getRepoSourceConfig, getSourceDir } from '../../project-config.js';
+
+export const reposRouter = new Hono();
+
+reposRouter.get('/', async (c) => {
+  const config = await getConfig();
+  const repos = Object.values(config.repos || {}).map((repo) => ({
+    name: repo.name,
+    url: repo.url,
+    path: repo.path,
+    current: repo.name === config.currentRepo,
+  }));
+  return c.json({ repos, currentRepo: config.currentRepo });
+});
+
+reposRouter.get('/rules', async (c) => {
+  const config = await getConfig();
+  const adapters = adapterRegistry.all();
+  const result = await Promise.all(
+    Object.values(config.repos || {}).map(async (repo) => {
+      const repoSourceConfig = await getRepoSourceConfig(repo.path);
+      const adapterCounts: Array<{ tool: string; subtype: string; count: number; sourceDir: string }> = [];
+      for (const adapter of adapters) {
+        const resolvedDir = getSourceDir(repoSourceConfig, adapter.tool, adapter.subtype, adapter.defaultSourceDir);
+        const sourceDir = path.join(repo.path, resolvedDir);
+        if (!await fs.pathExists(sourceDir)) continue;
+        try {
+          const entries = await fs.readdir(sourceDir);
+          const count = entries.length;
+          if (count > 0) {
+            adapterCounts.push({ tool: adapter.tool, subtype: adapter.subtype, count, sourceDir: resolvedDir });
+          }
+        } catch {
+          // skip unreadable dirs
+        }
+      }
+      return {
+        name: repo.name,
+        url: repo.url,
+        path: repo.path,
+        current: repo.name === config.currentRepo,
+        adapters: adapterCounts,
+      };
+    })
+  );
+  return c.json({ repos: result });
+});
+
+reposRouter.post('/use', async (c) => {
+  const { name } = await c.req.json<{ name: string }>();
+  const config = await getConfig();
+  if (!config.repos[name]) {
+    return c.json({ error: `Repository "${name}" not found` }, 404);
+  }
+  await setConfig({ currentRepo: name });
+  return c.json({ ok: true, currentRepo: name });
+});

src/web/api/rules.ts

@@ -0,0 +1,101 @@
+import { Hono } from 'hono';
+import fs from 'fs-extra';
+import path from 'path';
+import { getCombinedProjectConfig, RuleEntry } from '../../project-config.js';
+import { adapterRegistry } from '../../adapters/index.js';
+import { getCurrentRepo } from '../../config.js';
+
+export const rulesRouter = new Hono();
+
+type LinkStatus = 'linked' | 'broken' | 'missing';
+
+async function getLinkStatus(targetPath: string): Promise<LinkStatus> {
+  try {
+    await fs.lstat(targetPath);
+    // lstat succeeded, it exists. Check if it's a valid symlink target.
+    try {
+      await fs.stat(targetPath);
+      return 'linked';
+    } catch {
+      return 'broken';
+    }
+  } catch {
+    return 'missing';
+  }
+}
+
+rulesRouter.get('/', async (c) => {
+  const projectPath = c.get('projectPath' as never) as string;
+  const config = await getCombinedProjectConfig(projectPath);
+  const adapters = adapterRegistry.all();
+  const repo = await getCurrentRepo();
+  const rules: Array<{
+    tool: string;
+    subtype: string;
+    alias: string;
+    sourceName: string;
+    repoUrl: string;
+    targetPath: string;
+    sourceFilePath: string;
+    status: LinkStatus;
+  }> = [];
+
+  for (const adapter of adapters) {
+    const [topLevel, subLevel] = adapter.configPath;
+    const entries: Record<string, RuleEntry> | undefined = (config as any)?.[topLevel]?.[subLevel];
+    if (!entries) continue;
+
+    for (const [alias, value] of Object.entries(entries)) {
+      let repoUrl: string;
+      let sourceName: string;
+      if (typeof value === 'string') {
+        repoUrl = value;
+        sourceName = alias;
+      } else {
+        repoUrl = value.url;
+        sourceName = value.rule || alias;
+      }
+
+      const targetDir = (typeof value === 'object' && value.targetDir) ? value.targetDir : adapter.targetDir;
+      const targetPath = path.join(projectPath, targetDir, alias);
+      const status = await getLinkStatus(targetPath);
+
+      // Compute source file path in the configured repo
+      let sourceFilePath = '';
+      if (repo) {
+        const resolvedSourceDir = (repo.sourceDir as any)?.[adapter.tool]?.[adapter.subtype] ?? adapter.defaultSourceDir;
+        sourceFilePath = path.join(repo.path, resolvedSourceDir, sourceName);
+      }
+
+      rules.push({ tool: adapter.tool, subtype: adapter.subtype, alias, sourceName, repoUrl, targetPath, sourceFilePath, status });
+    }
+  }
+
+  return c.json({ rules });
+});
+
+rulesRouter.get('/available', async (c) => {
+  const repo = await getCurrentRepo();
+  if (!repo) {
+    return c.json({ error: 'No repository configured' }, 404);
+  }
+
+  const adapters = adapterRegistry.all();
+  const available: Array<{ tool: string; subtype: string; name: string }> = [];
+
+  for (const adapter of adapters) {
+    const sourceDir = path.join(repo.path, adapter.defaultSourceDir);
+    if (!await fs.pathExists(sourceDir)) continue;
+
+    try {
+      const entries = await fs.readdir(sourceDir);
+      for (const entry of entries) {
+        available.push({ tool: adapter.tool, subtype: adapter.subtype, name: entry });
+      }
+    } catch {
+      // skip
+    }
+  }
+
+  return c.json({ available, repoName: repo.name, repoUrl: repo.url });
+});