@mg21st/dev-assist 1.0.0

package/ui/src/components/Dashboard.tsx

@@ -0,0 +1,128 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import axios from 'axios';
+import { FileCode2, FunctionSquare, Route, TestTube2, RefreshCw } from 'lucide-react';
+
+interface Summary {
+  totalFiles: number;
+  totalFunctions: number;
+  totalRoutes: number;
+  totalTests: number;
+  generatedAt: string;
+}
+
+interface StatCardProps {
+  label: string;
+  value: number;
+  icon: React.ReactNode;
+  color: string;
+}
+
+function StatCard({ label, value, icon, color }: StatCardProps) {
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700 shadow-sm flex items-center gap-4">
+      <div className={`p-3 rounded-lg ${color}`}>
+        {icon}
+      </div>
+      <div>
+        <p className="text-2xl font-bold">{value}</p>
+        <p className="text-sm text-gray-500 dark:text-gray-400">{label}</p>
+      </div>
+    </div>
+  );
+}
+
+export function Dashboard() {
+  const [summary, setSummary] = useState<Summary | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchSummary = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const { data } = await axios.get<Summary>('/api/summary');
+      setSummary(data);
+    } catch {
+      setError('Failed to fetch project summary. Make sure the server is running.');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { fetchSummary(); }, [fetchSummary]);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Dashboard</h1>
+          <p className="text-gray-500 dark:text-gray-400 text-sm mt-1">Project overview and statistics</p>
+        </div>
+        <button
+          onClick={fetchSummary}
+          className="flex items-center gap-2 px-4 py-2 bg-sky-500 text-white rounded-lg hover:bg-sky-600 transition-colors text-sm font-medium"
+        >
+          <RefreshCw size={15} className={loading ? 'animate-spin' : ''} />
+          Refresh
+        </button>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400 text-sm">
+          {error}
+        </div>
+      )}
+
+      {loading && !summary ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700 h-24 animate-pulse" />
+          ))}
+        </div>
+      ) : summary ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <StatCard label="Files Scanned" value={summary.totalFiles} icon={<FileCode2 size={20} className="text-blue-500" />} color="bg-blue-50 dark:bg-blue-900/30" />
+          <StatCard label="Functions Found" value={summary.totalFunctions} icon={<FunctionSquare size={20} className="text-purple-500" />} color="bg-purple-50 dark:bg-purple-900/30" />
+          <StatCard label="API Routes" value={summary.totalRoutes} icon={<Route size={20} className="text-green-500" />} color="bg-green-50 dark:bg-green-900/30" />
+          <StatCard label="Tests Generated" value={summary.totalTests} icon={<TestTube2 size={20} className="text-orange-500" />} color="bg-orange-50 dark:bg-orange-900/30" />
+        </div>
+      ) : null}
+
+      {summary && (
+        <div className="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700">
+          <h2 className="font-semibold mb-3">Project Information</h2>
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-gray-500 dark:text-gray-400">Last scanned</span>
+              <span>{new Date(summary.generatedAt).toLocaleString()}</span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700">
+        <h2 className="font-semibold mb-3">Quick Actions</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+          <button
+            onClick={() => axios.post('/api/generate/tests', {}).then(fetchSummary)}
+            className="p-3 border-2 border-dashed border-sky-300 dark:border-sky-700 rounded-lg text-sky-600 dark:text-sky-400 hover:border-sky-500 hover:bg-sky-50 dark:hover:bg-sky-900/20 transition-colors text-sm font-medium"
+          >
+            🧪 Generate Tests
+          </button>
+          <button
+            onClick={() => axios.post('/api/generate/docs', {}).then(fetchSummary)}
+            className="p-3 border-2 border-dashed border-green-300 dark:border-green-700 rounded-lg text-green-600 dark:text-green-400 hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 transition-colors text-sm font-medium"
+          >
+            📚 Generate API Docs
+          </button>
+          <button
+            onClick={fetchSummary}
+            className="p-3 border-2 border-dashed border-purple-300 dark:border-purple-700 rounded-lg text-purple-600 dark:text-purple-400 hover:border-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-colors text-sm font-medium"
+          >
+            🔄 Re-scan Project
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/src/components/Layout.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { TabId } from '../App';
+import { 
+  LayoutDashboard, 
+  TestTube2, 
+  BookOpen, 
+  Zap, 
+  Moon, 
+  Sun,
+  Terminal
+} from 'lucide-react';
+
+interface LayoutProps {
+  children: React.ReactNode;
+  activeTab: TabId;
+  onTabChange: (tab: TabId) => void;
+  darkMode: boolean;
+  onToggleDark: () => void;
+}
+
+const tabs = [
+  { id: 'dashboard' as TabId, label: 'Dashboard', icon: LayoutDashboard },
+  { id: 'tests' as TabId, label: 'Tests', icon: TestTube2 },
+  { id: 'docs' as TabId, label: 'API Docs', icon: BookOpen },
+  { id: 'testing' as TabId, label: 'API Testing', icon: Zap },
+];
+
+export function Layout({ children, activeTab, onTabChange, darkMode, onToggleDark }: LayoutProps) {
+  return (
+    <div className={`min-h-screen flex flex-col ${darkMode ? 'dark bg-gray-900 text-white' : 'bg-gray-50 text-gray-900'}`}>
+      <header className={`h-14 flex items-center justify-between px-6 border-b ${darkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} shadow-sm`}>
+        <div className="flex items-center gap-3">
+          <Terminal className="text-sky-500" size={22} />
+          <span className="font-bold text-lg tracking-tight">DevAssist</span>
+          <span className={`text-xs px-2 py-0.5 rounded-full ${darkMode ? 'bg-sky-900 text-sky-300' : 'bg-sky-100 text-sky-700'}`}>v1.0.0</span>
+        </div>
+        <button
+          onClick={onToggleDark}
+          className={`p-2 rounded-lg transition-colors ${darkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-100'}`}
+          title="Toggle dark mode"
+        >
+          {darkMode ? <Sun size={18} /> : <Moon size={18} />}
+        </button>
+      </header>
+
+      <div className="flex flex-1">
+        <aside className={`w-56 flex-shrink-0 border-r ${darkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'}`}>
+          <nav className="p-3 space-y-1 pt-4">
+            {tabs.map(({ id, label, icon: Icon }) => (
+              <button
+                key={id}
+                onClick={() => onTabChange(id)}
+                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all ${
+                  activeTab === id
+                    ? 'bg-sky-500 text-white shadow-md'
+                    : darkMode
+                    ? 'text-gray-300 hover:bg-gray-700'
+                    : 'text-gray-600 hover:bg-gray-100'
+                }`}
+              >
+                <Icon size={17} />
+                {label}
+              </button>
+            ))}
+          </nav>
+        </aside>
+
+        <main className="flex-1 overflow-auto p-6">
+          <div className="fade-in">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

package/ui/src/components/TestsTab.tsx

@@ -0,0 +1,149 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import axios from 'axios';
+import { TestTube2, Download, RefreshCw, FileCode2, ChevronRight, Loader } from 'lucide-react';
+
+interface TestFile {
+  filePath: string;
+  content: string;
+}
+
+export function TestsTab() {
+  const [tests, setTests] = useState<TestFile[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [generating, setGenerating] = useState(false);
+  const [selectedTest, setSelectedTest] = useState<TestFile | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchTests = useCallback(async () => {
+    try {
+      setLoading(true);
+      const { data } = await axios.get<TestFile[]>('/api/tests');
+      setTests(data);
+      if (data.length > 0 && !selectedTest) setSelectedTest(data[0]);
+    } catch {
+      setError('Failed to fetch tests');
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedTest]);
+
+  const generateTests = async () => {
+    try {
+      setGenerating(true);
+      setError(null);
+      await axios.post('/api/generate/tests', {});
+      await fetchTests();
+    } catch {
+      setError('Failed to generate tests');
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  const downloadTest = (test: TestFile) => {
+    const blob = new Blob([test.content], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = test.filePath.split('/').pop() || 'test.ts';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  useEffect(() => { fetchTests(); }, [fetchTests]);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Generated Tests</h1>
+          <p className="text-gray-500 dark:text-gray-400 text-sm mt-1">{tests.length} test files</p>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={fetchTests}
+            className="flex items-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-sm"
+          >
+            <RefreshCw size={14} />
+            Refresh
+          </button>
+          <button
+            onClick={generateTests}
+            disabled={generating}
+            className="flex items-center gap-2 px-4 py-2 bg-sky-500 text-white rounded-lg hover:bg-sky-600 disabled:opacity-50 transition-colors text-sm font-medium"
+          >
+            {generating ? <Loader size={14} className="animate-spin" /> : <TestTube2 size={14} />}
+            {generating ? 'Generating...' : 'Generate Tests'}
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400 text-sm">
+          {error}
+        </div>
+      )}
+
+      {loading ? (
+        <div className="flex items-center justify-center h-64">
+          <Loader className="animate-spin text-sky-500" size={32} />
+        </div>
+      ) : tests.length === 0 ? (
+        <div className="flex flex-col items-center justify-center h-64 text-gray-500 dark:text-gray-400">
+          <TestTube2 size={48} className="mb-4 opacity-30" />
+          <p className="text-lg font-medium">No tests generated yet</p>
+          <p className="text-sm mt-1">Click "Generate Tests" to create test stubs</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-3 gap-4 h-[calc(100vh-200px)]">
+          <div className="col-span-1 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-auto">
+            <div className="p-3 border-b border-gray-200 dark:border-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400">
+              Test Files
+            </div>
+            <div className="divide-y divide-gray-100 dark:divide-gray-700">
+              {tests.map((test) => (
+                <button
+                  key={test.filePath}
+                  onClick={() => setSelectedTest(test)}
+                  className={`w-full flex items-center gap-2 px-3 py-2.5 text-left text-sm transition-colors ${
+                    selectedTest?.filePath === test.filePath
+                      ? 'bg-sky-50 dark:bg-sky-900/30 text-sky-700 dark:text-sky-300'
+                      : 'hover:bg-gray-50 dark:hover:bg-gray-700'
+                  }`}
+                >
+                  <FileCode2 size={14} className="flex-shrink-0" />
+                  <span className="truncate">{test.filePath.split('/').pop()}</span>
+                  <ChevronRight size={12} className="ml-auto flex-shrink-0" />
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="col-span-2 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 flex flex-col">
+            {selectedTest ? (
+              <>
+                <div className="p-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+                  <span className="text-sm font-medium text-gray-600 dark:text-gray-300">{selectedTest.filePath}</span>
+                  <button
+                    onClick={() => downloadTest(selectedTest)}
+                    className="flex items-center gap-1.5 px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                  >
+                    <Download size={12} />
+                    Download
+                  </button>
+                </div>
+                <pre className="flex-1 overflow-auto p-4 text-xs font-mono text-gray-800 dark:text-gray-200 scrollbar-thin">
+                  <code>{selectedTest.content}</code>
+                </pre>
+              </>
+            ) : (
+              <div className="flex items-center justify-center h-full text-gray-400">
+                Select a test file to view
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/ui/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/ui/src/styles/index.css

@@ -0,0 +1,41 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+
+pre, code {
+  font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: #4b5563;
+  border-radius: 3px;
+}
+
+.fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}

package/ui/tailwind.config.js

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          900: '#0c4a6e',
+        },
+      },
+    },
+  },
+  plugins: [],
+};

package/ui/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  },
+  "include": ["src"]
+}

package/ui/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
+    },
+  },
+});