Upload 18 files

App.tsx

@@ -0,0 +1,164 @@
+import React, { Suspense, useCallback, useMemo, useState, useEffect } from 'react';
+import { ErrorBoundary } from './components/ErrorBoundary.tsx';
+import { useGlobalState } from './contexts/GlobalStateContext.tsx';
+import { logEvent } from './services/telemetryService.ts';
+import { ALL_FEATURES, FEATURES_MAP } from './components/features/index.ts';
+import type { ViewType, FeatureId, SidebarItem } from './types.ts';
+import { DownloadManager } from './components/DownloadManager.tsx';
+import { LeftSidebar } from './components/LeftSidebar.tsx';
+import { StatusBar } from './components/StatusBar.tsx';
+import { CommandPalette } from './components/CommandPalette.tsx';
+import { SettingsView } from './components/SettingsView.tsx';
+import { Cog6ToothIcon, HomeIcon } from './components/icons/InterfaceIcons.tsx';
+import { AiCommandCenter } from './components/features/AiCommandCenter.tsx';
+import { LoginView } from './components/LoginView.tsx';
+
+
+export const LoadingIndicator: React.FC = () => (
+    <div className="w-full h-full flex items-center justify-center bg-surface">
+        <div className="flex items-center justify-center space-x-2">
+            <div className="w-4 h-4 rounded-full bg-primary animate-pulse" style={{ animationDelay: '0s' }}></div>
+            <div className="w-4 h-4 rounded-full bg-primary animate-pulse" style={{ animationDelay: '0.2s' }}></div>
+            <div className="w-4 h-4 rounded-full bg-primary animate-pulse" style={{ animationDelay: '0.4s' }}></div>
+            <span className="text-text-secondary ml-2">Loading Feature...</span>
+        </div>
+    </div>
+);
+
+interface LocalStorageConsentModalProps {
+  onAccept: () => void;
+  onDecline: () => void;
+}
+
+const LocalStorageConsentModal: React.FC<LocalStorageConsentModalProps> = ({ onAccept, onDecline }) => {
+  return (
+    <div className="fixed inset-0 bg-gray-900/80 backdrop-blur-sm z-50 flex items-center justify-center fade-in">
+      <div 
+        className="bg-surface border border-border rounded-2xl shadow-2xl shadow-black/50 w-full max-w-md m-4 p-8 text-center animate-pop-in"
+      >
+        <h2 className="text-2xl mb-4">Store Data Locally?</h2>
+        <p className="text-text-secondary mb-6">
+          This application uses your browser's local storage to save your settings and remember your progress between sessions. This data stays on your computer and is not shared.
+        </p>
+        <div className="flex justify-center gap-4">
+          <button
+            onClick={onDecline}
+            className="px-6 py-2 bg-surface border border-border text-text-primary font-bold rounded-md hover:bg-gray-100 transition-colors"
+          >
+            Decline
+          </button>
+          <button
+            onClick={onAccept}
+            className="btn-primary px-6 py-2"
+          >
+            Accept
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const { state, dispatch } = useGlobalState();
+  const { activeView, viewProps, hiddenFeatures, isAuthenticated } = state;
+  const [isCommandPaletteOpen, setCommandPaletteOpen] = useState(false);
+  const [showConsentModal, setShowConsentModal] = useState(false);
+
+  useEffect(() => {
+    try {
+        const consent = localStorage.getItem('devcore_ls_consent');
+        if (!consent) {
+            setShowConsentModal(true);
+        }
+    } catch (e) {
+        console.warn("Could not access localStorage.", e);
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+            e.preventDefault();
+            setCommandPaletteOpen(isOpen => !isOpen);
+        }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const handleAcceptConsent = () => {
+    try {
+        localStorage.setItem('devcore_ls_consent', 'granted');
+        window.location.reload();
+    } catch (e) {
+        console.error("Could not write to localStorage.", e);
+        setShowConsentModal(false);
+    }
+  };
+
+  const handleDeclineConsent = () => {
+    try {
+        localStorage.setItem('devcore_ls_consent', 'denied');
+    } catch (e) {
+        console.error("Could not write to localStorage.", e);
+    }
+    setShowConsentModal(false);
+  };
+
+  const handleViewChange = useCallback((view: ViewType, props: any = {}) => {
+    dispatch({ type: 'SET_VIEW', payload: { view, props } });
+    logEvent('view_changed', { view });
+    setCommandPaletteOpen(false);
+  }, [dispatch]);
+
+  const sidebarItems: SidebarItem[] = useMemo(() => [
+    { id: 'ai-command-center', label: 'Command Center', icon: <HomeIcon />, view: 'ai-command-center' },
+    ...ALL_FEATURES
+        .filter(feature => !hiddenFeatures.includes(feature.id) && feature.id !== 'ai-command-center')
+        .map(feature => ({
+            id: feature.id,
+            label: feature.name,
+            icon: feature.icon,
+            view: feature.id as ViewType,
+        })),
+    { id: 'settings', label: 'Settings', icon: <Cog6ToothIcon />, view: 'settings' },
+  ], [hiddenFeatures]);
+
+  const ActiveComponent = useMemo(() => {
+      if (activeView === 'settings') return SettingsView;
+      // Fallback to command center if no view is matched.
+      return FEATURES_MAP.get(activeView as string)?.component ?? AiCommandCenter;
+  }, [activeView]);
+
+  if (!isAuthenticated) {
+    return <LoginView />;
+  }
+  
+  return (
+    <div className="h-screen w-screen font-sans overflow-hidden bg-background">
+        {showConsentModal && <LocalStorageConsentModal onAccept={handleAcceptConsent} onDecline={handleDeclineConsent} />}
+        <div className="relative flex h-full w-full">
+            <LeftSidebar items={sidebarItems} activeView={state.activeView} onNavigate={handleViewChange} />
+            <div className="flex-1 flex min-w-0">
+                <div className="flex-1 flex flex-col min-w-0">
+                    <main className="relative flex-1 min-w-0 bg-surface/50 overflow-y-auto">
+                        <ErrorBoundary>
+                            <Suspense fallback={<LoadingIndicator />}>
+                                <div key={activeView} className="fade-in w-full h-full">
+                                    <ActiveComponent {...viewProps} />
+                                </div>
+                            </Suspense>
+                        </ErrorBoundary>
+                        <DownloadManager />
+                    </main>
+                    <StatusBar bgImageStatus="loaded" />
+                </div>
+            </div>
+            <CommandPalette isOpen={isCommandPaletteOpen} onClose={() => setCommandPaletteOpen(false)} onSelect={handleViewChange} />
+        </div>
+    </div>
+  );
+};
+
+export default App;

Dockerfile

@@ -0,0 +1,13 @@
+# Build Stage
+FROM node:18-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+ 
+# Production Stage
+FROM nginx:stable-alpine AS production
+COPY --from=build /app/build /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,11 +1,52 @@
----
-title: '0'
-emoji: 🐢
-colorFrom: blue
-colorTo: red
-sdk: docker
-pinned: false
-license: other
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# DevCore AI Toolkit
+
+DevCore is a developer-centric web application designed to showcase the power of AI in the development process. It's a static application that can be deployed to any modern hosting provider.
+
+## Key Features
+
+- **Purely Static**: Runs entirely in the browser with no server backend required.
+- **Easy Deployment**: Deploy to any static hosting provider like Hugging Face Spaces, Vercel, or Netlify.
+- **AI Feature Builder**: Describe a new UI component, and the AI will generate the TSX/JSX code, unit tests, and a conventional commit message.
+- **AI Code Explainer**: Paste any code snippet and get a detailed, easy-to-understand explanation and a visual flowchart generated by Gemini.
+- **Comprehensive Tooling**: Includes a RegEx Sandbox, Snippet Vault, Code Migrator, and dozens of other AI-powered and simulated developer tools.
+
+## Local Development Setup
+
+**Prerequisites:** [Node.js](https://nodejs.org/)
+
+1.  **Clone the repository.**
+
+2.  **Install dependencies:**
+    ```bash
+    npm install
+    ```
+
+3.  **Set up your local environment variables:**
+    Create a file named `.env.local` in the root of the project and add your Gemini API key:
+    ```
+    GEMINI_API_KEY=your_gemini_api_key_here
+    ```
+
+4.  **Run the development server:**
+    ```bash
+    npm run dev
+    ```
+    The application will be available at `http://localhost:5173`.
+
+## Deployment
+
+This is a static web application that calls the Gemini API directly from the client. To deploy it, you need to:
+
+1.  **Build the Project**:
+    ```bash
+    npm run build
+    ```
+    This creates a `web` directory with your static app.
+
+2.  **Set Environment Variable**:
+    Your hosting provider (like Hugging Face Spaces, Vercel, Netlify, etc.) needs to have the `GEMINI_API_KEY` environment variable set during the build process.
+    - **Name**: `GEMINI_API_KEY`
+    - **Value**: Your actual Gemini API key.
+
+3.  **Deploy**:
+    Deploy the contents of the `web` directory as a static site. Ensure your hosting provider's build command is `npm run build`.

constants.ts

@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+    CommandCenterIcon, CodeExplainerIcon, FeatureBuilderIcon, CodeMigratorIcon, ThemeDesignerIcon, SnippetVaultIcon,
+    DevNotesIcon, UnitTestGeneratorIcon, CommitGeneratorIcon, GitLogAnalyzerIcon, ConcurrencyAnalyzerIcon, RegexSandboxIcon,
+    PromptCraftPadIcon, CodeFormatterIcon, JsonTreeIcon, CssGridEditorIcon, SchemaDesignerIcon, PwaManifestEditorIcon,
+    MarkdownSlidesIcon, ScreenshotToComponentIcon, FontPreviewIcon, SvgPathEditorIcon, StyleTransferIcon, CodingChallengeIcon,
+    FontPairingIcon, CodeReviewBotIcon, PrSummaryGeneratorIcon, ChangelogGeneratorIcon, CronJobBuilderIcon, MoodboardIcon,
+    AsyncCallTreeIcon, AudioToCodeIcon, CodeDiffGhostIcon, CodeSpellCheckerIcon, ColorPaletteGeneratorIcon, LogicFlowBuilderIcon,
+    MetaTagEditorIcon, NetworkVisualizerIcon, PrGeneratorIcon, ResponsiveTesterIcon, SassCompilerIcon, ImageGeneratorIcon, XbrlConverterIcon
+} from './components/icons/CustomFeatureIcons.tsx';
+
+export const CHROME_VIEW_IDS = ['features-list'] as const;
+
+export const SLOTS = ['Core', 'AI Tools', 'Frontend', 'Testing', 'Database', 'Productivity'] as const;
+export type SlotCategory = typeof SLOTS[number];
+
+export const FEATURE_CATEGORIES = ['Core', 'AI Tools', 'Frontend', 'Testing', 'Database', 'Data', 'Productivity', 'Git', 'Deployment', 'Security', 'Workflow'] as const;
+export type FeatureCategory = typeof FEATURE_CATEGORIES[number];
+
+// This is the raw data, to be "compiled" by features/index.ts
+export const RAW_FEATURES = [
+    { id: "ai-command-center", name: "AI Command Center", description: "Use natural language to navigate and control the toolkit.", icon: React.createElement(CommandCenterIcon), category: "Core" },
+    { id: "ai-image-generator", name: "AI Image Generator", description: "Generate high-quality images from a text prompt.", icon: React.createElement(ImageGeneratorIcon), category: "AI Tools" },
+    { id: "ai-code-explainer", name: "AI Code Explainer", description: "Get a structured analysis of code, including complexity.", icon: React.createElement(CodeExplainerIcon), category: "AI Tools" },
+    { id: "ai-feature-builder", name: "AI Feature Builder", description: "Generate code, tests, and commit messages.", icon: React.createElement(FeatureBuilderIcon), category: "AI Tools" },
+    { id: "ai-code-migrator", name: "AI Code Migrator", description: "Translate code between languages & frameworks.", icon: React.createElement(CodeMigratorIcon), category: "AI Tools" },
+    { id: "theme-designer", name: "AI Theme Designer", description: "Generate, fine-tune, and export UI color themes from a text description.", icon: React.createElement(ThemeDesignerIcon), category: "AI Tools" },
+    { id: "portable-snippet-vault", name: "Snippet Vault", description: "Store, search, tag, and enhance reusable code snippets with AI.", icon: React.createElement(SnippetVaultIcon), category: "Productivity" },
+    { id: "dev-notes-sticky-panel", name: "Dev Notes Sticky Panel", description: "Sticky notes with AI summarization.", icon: React.createElement(DevNotesIcon), category: "Productivity" },
+    { id: "ai-unit-test-generator", name: "AI Unit Test Generator", description: "Generate unit tests from source code.", icon: React.createElement(UnitTestGeneratorIcon), category: "AI Tools" },
+    { id: "ai-commit-generator", name: "AI Commit Message Generator", description: "Smart, conventional commits via AI.", icon: React.createElement(CommitGeneratorIcon), category: "AI Tools" },
+    { id: "visual-git-tree", name: "Visual Git Tree", description: "Visually trace your git commit history with an interactive graph and an AI-powered summary.", icon: React.createElement(GitLogAnalyzerIcon), category: "Git" },
+    { id: "worker-thread-debugger", name: "AI Concurrency Analyzer", description: "Analyze JS for Web Worker issues like race conditions.", icon: React.createElement(ConcurrencyAnalyzerIcon), category: "Testing" },
+    { id: "regex-sandbox", name: "RegEx Sandbox", description: "Visually test regular expressions, generate them with AI, and inspect match groups.", icon: React.createElement(RegexSandboxIcon), category: "Testing" },
+    { id: "prompt-craft-pad", name: "Prompt Craft Pad", description: "Save, edit, and manage your custom AI prompts with variable testing.", icon: React.createElement(PromptCraftPadIcon), category: "AI Tools" },
+    { id: "linter-formatter", name: "AI Code Formatter", description: "AI-powered, real-time code formatting.", icon: React.createElement(CodeFormatterIcon), category: "Core" },
+    { id: "json-tree-navigator", name: "JSON Tree Navigator", description: "Navigate large JSON objects as a collapsible tree.", icon: React.createElement(JsonTreeIcon), category: "Core" },
+    { id: "xbrl-converter", name: "XBRL Converter", description: "Convert JSON data to a simplified XBRL-like XML format using AI.", icon: React.createElement(XbrlConverterIcon), category: "Data" },
+    { id: "css-grid-editor", name: "CSS Grid Visual Editor", description: "Drag-based layout builder for CSS Grid.", icon: React.createElement(CssGridEditorIcon), category: "Frontend" },
+    { id: "schema-designer", name: "Schema Designer", description: "Visually design a database schema with a drag-and-drop interface and SQL export.", icon: React.createElement(SchemaDesignerIcon), category: "Database" },
+    { id: "pwa-manifest-editor", name: "PWA Manifest Editor", description: "Configure and preview Progressive Web App manifests with a home screen simulator.", icon: React.createElement(PwaManifestEditorIcon), category: "Frontend" },
+    { id: "markdown-slides-generator", name: "Markdown Slides", description: "Turn markdown into a fullscreen presentation with an interactive overlay.", icon: React.createElement(MarkdownSlidesIcon), category: "Productivity" },
+    { id: "screenshot-to-component", name: "Screenshot-to-Component", description: "Turn UI screenshots into functional code via paste or upload.", icon: React.createElement(ScreenshotToComponentIcon), category: "AI Tools" },
+    { id: "font-preview-picker", name: "Font Preview & Picker", description: "Preview fonts and get CSS import rules.", icon: React.createElement(FontPreviewIcon), category: "Frontend" },
+    { id: "svg-path-editor", name: "SVG Path Editor", description: "Visually create and manipulate SVG path data with an interactive canvas.", icon: React.createElement(SvgPathEditorIcon), category: "Frontend" },
+    { id: "ai-style-transfer", name: "AI Code Style Transfer", description: "Rewrite code to match a specific style guide.", icon: React.createElement(StyleTransferIcon), category: "AI Tools" },
+    { id: "ai-coding-challenge", name: "AI Coding Challenge Generator", description: "Generate unique coding exercises.", icon: React.createElement(CodingChallengeIcon), category: "AI Tools" },
+    { id: "font-pairing-tool", name: "Font Pairing Tool", description: "Suggest and preview font combinations.", icon: React.createElement(FontPairingIcon), category: "Frontend" },
+    { id: "code-review-bot", name: "AI Code Review Bot", description: "Get an automated code review from an AI.", icon: React.createElement(CodeReviewBotIcon), category: "AI Tools" },
+    { id: "pr-summary-generator", name: "AI PR Summary Generator", description: "Generate a structured PR summary from code diffs, ready to copy as markdown.", icon: React.createElement(PrSummaryGeneratorIcon), category: "AI Tools" },
+    { id: "changelog-generator", name: "AI Changelog Generator", description: "Auto-build changelogs from raw git logs.", icon: React.createElement(ChangelogGeneratorIcon), category: "Git" },
+    { id: "cron-job-builder", name: "AI Cron Job Builder", description: "Visually tool to configure cron jobs, with AI.", icon: React.createElement(CronJobBuilderIcon), category: "Deployment" },
+    { id: "project-moodboard", name: "Project Moodboard", description: "Organize ideas with interactive, multi-colored sticky notes.", icon: React.createElement(MoodboardIcon), category: "Productivity" },
+    { id: "async-call-tree-viewer", name: "Async Call Tree Viewer", description: "Visualize a tree of asynchronous function calls from JSON data.", icon: React.createElement(AsyncCallTreeIcon), category: "Testing" },
+    { id: "audio-to-code", name: "AI Audio-to-Code", description: "Speak your programming ideas and watch them turn into code.", icon: React.createElement(AudioToCodeIcon), category: "AI Tools" },
+    { id: "code-diff-ghost", name: "Code Diff Ghost", description: "Visualize code changes with a 'ghost typing' effect.", icon: React.createElement(CodeDiffGhostIcon), category: "Git" },
+    { id: "code-spell-checker", name: "Code Spell Checker", description: "A spell checker that finds common typos in code.", icon: React.createElement(CodeSpellCheckerIcon), category: "Testing" },
+    { id: "color-palette-generator", name: "AI Color Palette Generator", description: "Pick a base color and let Gemini design a beautiful palette.", icon: React.createElement(ColorPaletteGeneratorIcon), category: "Frontend" },
+    { id: "logic-flow-builder", name: "Logic Flow Builder", description: "A visual tool for building application logic flows.", icon: React.createElement(LogicFlowBuilderIcon), category: "Workflow" },
+    { id: "meta-tag-editor", name: "Meta Tag Editor", description: "Generate SEO/social media meta tags with a live social card preview.", icon: React.createElement(MetaTagEditorIcon), category: "Frontend" },
+    { id: "network-visualizer", name: "Network Visualizer", description: "Inspect network resources with a summary and visual waterfall chart.", icon: React.createElement(NetworkVisualizerIcon), category: "Testing" },
+    { id: "pr-generator", name: "PR Generator", description: "Draft a professional pull request from a structured template.", icon: React.createElement(PrGeneratorIcon), category: "Git" },
+    { id: "responsive-tester", name: "Responsive Tester", description: "Preview your web pages at different screen sizes and custom resolutions.", icon: React.createElement(ResponsiveTesterIcon), category: "Frontend" },
+    { id: "sass-scss-compiler", name: "SASS/SCSS Compiler", description: "A real-time SASS/SCSS to CSS compiler.", icon: React.createElement(SassCompilerIcon), category: "Frontend" },
+];
+
+export const ALL_FEATURE_IDS = RAW_FEATURES.map(f => f.id);

globals.d.ts

@@ -0,0 +1,24 @@
+// globals.d.ts
+declare global {
+  /**
+   * Loads the Pyodide WebAssembly module.
+   * @param config Optional configuration for Pyodide.
+   */
+  function loadPyodide(config?: { indexURL?: string }): Promise<any>;
+
+  interface Window {
+    google?: {
+      accounts: {
+        id: {
+          initialize: (config: { client_id: string; callback: (response: any) => void; }) => void;
+          renderButton: (parent: HTMLElement, options: any) => void;
+          disableAutoSelect: () => void;
+          prompt: () => void;
+        };
+      };
+    };
+  }
+}
+
+// This export statement is required to make the file a module.
+export {};

index.css

@@ -0,0 +1,100 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom global styles */
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-image: linear-gradient(135deg, #FFFFFF 0%, #F5F7FA 100%);
+}
+
+#root {
+  position: relative;
+  z-index: 1;
+}
+
+#root::before {
+  content: 'CitiBank demo business inc';
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-30deg);
+  font-family: theme('fontFamily.serif');
+  font-size: clamp(2rem, 8vw, 6rem); /* Responsive font size */
+  font-weight: bold;
+  color: theme('colors.gold');
+  opacity: 0.08;
+  pointer-events: none;
+  z-index: -1;
+  white-space: nowrap;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  @apply font-serif text-text-primary;
+}
+
+h1 {
+  @apply text-text-primary;
+}
+
+/* Update primary buttons for a professional look */
+.btn-primary {
+  @apply bg-primary text-text-on-primary font-bold rounded-md hover:opacity-90 transition-all disabled:opacity-50 shadow-md;
+}
+
+/* Custom scrollbars for the new light theme */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  @apply bg-gray-100;
+}
+::-webkit-scrollbar-thumb {
+  @apply bg-gray-400 rounded;
+}
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-500;
+}
+
+/* Base transitions for interactive elements */
+button, a, input, textarea, select {
+  transition: all 0.2s ease-in-out;
+}
+
+/* Keyframe Animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes shake {
+  10%, 90% { transform: translateX(-1px); }
+  20%, 80% { transform: translateX(2px); }
+  30%, 50%, 70% { transform: translateX(-3px); }
+  40%, 60% { transform: translateX(3px); }
+}
+
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.fade-in { animation: fadeIn 0.5s ease-in-out forwards; }
+.animate-shake { animation: shake 0.4s ease-in-out; }
+.animate-pop-in { animation: pop-in 0.3s ease-out forwards; }
+
+/* For hiding scrollbar but keeping functionality */
+.no-scrollbar::-webkit-scrollbar { display: none; }
+.no-scrollbar { 
+  -ms-overflow-style: none; 
+  scrollbar-width: none; 
+  scroll-behavior: smooth;
+}

index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DevCore AI Toolkit</title>
+    
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@700&family=Inter:wght@400;500;700&family=Great+Vibes&display=swap" rel="stylesheet">
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
+<script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@^19.1.1",
+    "react-dom/": "https://esm.sh/react-dom@^19.1.1/",
+    "react/": "https://esm.sh/react@^19.1.1/",
+    "path": "https://esm.sh/path@^0.12.7",
+    "vite": "https://esm.sh/vite@^7.1.1",
+    "url": "https://esm.sh/url@^0.11.4",
+    "@google/genai": "https://esm.sh/@google/genai@^1.13.0",
+    "marked": "https://esm.sh/marked@^16.1.2",
+    "diff": "https://esm.sh/diff@^8.0.2",
+    "react-colorful": "https://esm.sh/react-colorful@^5.6.1",
+    "idb": "https://esm.sh/idb@^8.0.3",
+    "jszip": "https://esm.sh/jszip@^3.10.1"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="bg-background text-text-primary font-sans">
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import { GlobalStateProvider } from './contexts/GlobalStateContext.tsx';
+import './index.css';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <GlobalStateProvider>
+      <App />
+    </GlobalStateProvider>
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,8 @@
+{
+  "requestFramePermissions": [
+    "microphone"
+  ],
+  "name": "0",
+  "description": "",
+  "prompt": ""
+}

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "devcore-ai-toolkit",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@google/genai": "^1.12.0",
+    "diff": "^5.2.0",
+    "idb": "^8.0.0",
+    "jszip": "^3.10.1",
+    "marked": "^13.0.2",
+    "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/diff": "^5.2.1",
+    "@types/jszip": "^3.4.1",
+    "@types/marked": "^6.0.0",
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.5.2",
+    "vite": "^5.2.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tailwind.config.js

@@ -0,0 +1,33 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+        serif: ['"EB Garamond"', 'serif'],
+        calligraphy: ['"Great Vibes"', 'cursive'],
+      },
+      colors: {
+        'primary': '#0047AB', // Cobalt Blue
+        'background': '#F5F7FA', // Light silver-blue
+        'surface': '#FFFFFF',
+        'text': {
+          'primary': '#111827', // Gray 900
+          'secondary': '#6B7280', // Gray 500
+          'on-primary': '#FFFFFF',
+        },
+        'border': '#E5E7EB', // Gray 200
+        'gold': '#B8860B', // DarkGoldenRod - better for watermark
+      },
+       boxShadow: {
+        'focus-primary': '0 0 0 3px rgba(0, 71, 171, 0.4)',
+        'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+      },
+    },
+  },
+  plugins: [],
+}

tsconfig.json

@@ -0,0 +1,27 @@
+
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ES2022",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

tsconfig.server.json

@@ -0,0 +1,16 @@
+
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "outDir": "./hf-api",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "hf-api/server.ts"
+  ]
+}

types.ts

@@ -0,0 +1,47 @@
+import type React from 'react';
+import { CHROME_VIEW_IDS } from './constants.ts';
+
+export type ChromeViewType = typeof CHROME_VIEW_IDS[number];
+export type FeatureId = string;
+
+export interface Feature {
+  id: FeatureId;
+  name: string;
+  description: string;
+  icon: React.ReactNode;
+  category: string;
+  component: React.FC<any>;
+  aiConfig?: {
+    model: string;
+    systemInstruction?: string;
+  };
+}
+
+export type ViewType = FeatureId | ChromeViewType;
+
+export interface GeneratedFile {
+  filePath: string;
+  content: string;
+  description: string;
+}
+
+export interface SidebarItem {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  view: ViewType;
+  props?: any;
+  action?: () => void;
+}
+
+export interface StructuredPrSummary {
+    title: string;
+    summary: string;
+    changes: string[];
+}
+
+export interface User {
+  name: string;
+  email: string;
+  picture: string;
+}

vite.config.ts

@@ -0,0 +1,37 @@
+
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+
+    return {
+      define: {
+        // The API key is injected into the app during the build process.
+        // It's crucial that this variable is set in your deployment environment.
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      },
+      build: {
+        outDir: 'web', // Emit assets to a 'web' directory.
+        sourcemap: true, // Enable source maps for easier debugging in production.
+        rollupOptions: {
+          output: {
+            // Improve caching by splitting vendor code into separate chunks.
+            manualChunks(id) {
+              if (id.includes('node_modules')) {
+                return id.toString().split('node_modules/')[1].split('/')[0].toString();
+              }
+            }
+          }
+        }
+      }
+    };
+});