@minnai/create-aura-app 0.0.10 → 0.0.12

package/dist/scaffold.js

@@ -11,26 +11,15 @@ const colors_1 = require("kleur/colors");
 async function scaffold(options) {
     const { root, template, install, git, projectName } = options;
     console.log((0, colors_1.dim)(`Scaffolding project in ${root}...`));
-    console.log((0, colors_1.dim)(`Current working directory: ${process.cwd()}`));
-    console.log((0, colors_1.dim)(`PATH: ${process.env.PATH?.substring(0, 100)}...`));
     // Determine template path
     const templateDir = path_1.default.resolve(__dirname, '..', 'templates', template);
-    console.log((0, colors_1.dim)(`Template source: ${templateDir}`));
     if (!fs_extra_1.default.existsSync(templateDir)) {
-        console.error((0, colors_1.red)(`FATAL: Template source does not exist!`));
         throw new Error(`Template "${template}" not found at ${templateDir}`);
     }
     // Ensure target directory exists
-    try {
-        fs_extra_1.default.ensureDirSync(root);
-        console.log((0, colors_1.dim)(`Confirmed target directory exists: ${root}`));
-    }
-    catch (e) {
-        console.error((0, colors_1.red)(`Failed to create directory: ${e.message}`));
-    }
+    await fs_extra_1.default.ensureDir(root);
     // Copy template files
     try {
-        console.log((0, colors_1.dim)('Copying files...'));
         await fs_extra_1.default.copy(templateDir, root, {
             overwrite: true,
             filter: (src) => {
@@ -39,21 +28,14 @@ async function scaffold(options) {
                 return !parts.includes('node_modules') && !parts.includes('.git');
             }
         });
-        // Immediate verification
-        const files = fs_extra_1.default.readdirSync(root);
-        console.log((0, colors_1.dim)(`Copy complete. Files in target: ${files.join(', ')}`));
-        if (files.length === 0) {
-            console.error((0, colors_1.red)('WARNING: Target directory is empty after copy!'));
-        }
     }
     catch (e) {
         console.error((0, colors_1.red)(`Failed to copy template: ${e.message}`));
     }
-    // Rename _gitignore to .gitignore
+    // Restore .gitignore
     const gitignorePath = path_1.default.join(root, '_gitignore');
     if (fs_extra_1.default.existsSync(gitignorePath)) {
         await fs_extra_1.default.move(gitignorePath, path_1.default.join(root, '.gitignore'), { overwrite: true });
-        console.log((0, colors_1.dim)('Restored .gitignore'));
     }
     // Update package.json name
     const pkgPath = path_1.default.join(root, 'package.json');
@@ -62,24 +44,18 @@ async function scaffold(options) {
             const pkg = await fs_extra_1.default.readJson(pkgPath);
             pkg.name = projectName;
             await fs_extra_1.default.writeJson(pkgPath, pkg, { spaces: 2 });
-            console.log((0, colors_1.dim)(`Updated package.json name to ${projectName}`));
         }
         catch (e) {
             console.error((0, colors_1.red)(`Failed to update package.json: ${e.message}`));
         }
     }
-    else {
-        console.warn((0, colors_1.yellow)(`Warning: No package.json found at ${pkgPath}`));
-    }
     // Initialize Git
     if (git) {
         try {
-            console.log((0, colors_1.dim)('Initializing Git...'));
-            // Use full path to git if possible, or just rely on shell
-            const gitCmd = process.platform === 'win32' ? 'git' : 'git';
-            (0, child_process_1.execSync)(`${gitCmd} init`, { cwd: root, stdio: 'ignore', shell: true, env: process.env });
-            (0, child_process_1.execSync)(`${gitCmd} add -A`, { cwd: root, stdio: 'ignore', shell: true, env: process.env });
-            (0, child_process_1.execSync)(`${gitCmd} commit -m "Initial commit from create-aura-app"`, { cwd: root, stdio: 'ignore', shell: true, env: process.env });
+            const gitCmd = 'git';
+            (0, child_process_1.execSync)(`${gitCmd} init`, { cwd: root, stdio: 'ignore', shell: true });
+            (0, child_process_1.execSync)(`${gitCmd} add -A`, { cwd: root, stdio: 'ignore', shell: true });
+            (0, child_process_1.execSync)(`${gitCmd} commit -m "Initial commit from create-aura-app"`, { cwd: root, stdio: 'ignore', shell: true });
             console.log((0, colors_1.dim)('Initialized a git repository.'));
         }
         catch (e) {
@@ -91,8 +67,8 @@ async function scaffold(options) {
         console.log((0, colors_1.dim)('Installing dependencies... This might take a moment.'));
         try {
             const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm';
-            (0, child_process_1.execSync)(`${npmCmd} install`, { cwd: root, stdio: 'inherit', shell: true, env: process.env });
-            console.log((0, colors_1.green)('Dependencies installed successfully.'));
+            (0, child_process_1.execSync)(`${npmCmd} install`, { cwd: root, stdio: 'inherit', shell: true });
+            console.log((0, colors_1.green)('✔ Dependencies installed successfully.'));
         }
         catch (e) {
             console.error((0, colors_1.red)(`Dependency installation failed: ${e.message}`));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@minnai/create-aura-app",
-    "version": "0.0.10",
+    "version": "0.0.12",
     "description": "Scaffolding tool for new Aura projects",
     "bin": "dist/index.js",
     "files": [

package/templates/starter/package.json

@@ -9,6 +9,9 @@
     "lint": "eslint .",
     "preview": "vite preview"
   },
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "dependencies": {
     "@minnai/aura": "^0.1.6",
     "@monaco-editor/react": "^4.7.0",

package/templates/starter/src/src/App.css

@@ -0,0 +1,32 @@
+#root {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg-app: #f5f5f7;
+  --bg-sidebar: #ffffff;
+  --bg-primary: #ffffff;
+  --bg-secondary: #f0f0f5;
+  --text-primary: #1d1d1f;
+  --text-secondary: #86868b;
+  --text-tertiary: #d2d2d7;
+  --border-color: #e5e5e5;
+  --border-subtle: rgba(0, 0, 0, 0.05);
+  --accent-primary: #007aff;
+  --accent-hover: #0062cc;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--bg-app);
+  color: var(--text-primary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}

package/templates/starter/src/src/App.tsx

@@ -0,0 +1,82 @@
+import { useState, useEffect } from 'react';
+import { BrowserRouter, Routes, Route, useSearchParams } from 'react-router-dom';
+import { Space, ControllerProvider, ChatInterface, createStorage } from '@minnai/aura';
+import { AuraProvider } from '@minnai/aura/sdk';
+import { flux } from '@minnai/aura/flux/index';
+import { registerExampleAIRs } from './ambiance';
+import { AnalyticsTracker } from './components/AnalyticsTracker';
+import { TourGuide } from './components/TourGuide';
+import { analyticsService } from './services/AnalyticsService';
+import { ProjectSidebar } from './components/ProjectSidebar/ProjectSidebar';
+import './App.css';
+
+const baseAuraConfig = {
+  llm: {
+    gatewayUrl: 'https://auraproxy-7bpt7e5tua-uc.a.run.app',
+    proxyUrl: 'https://auraproxy-7bpt7e5tua-uc.a.run.app'
+  },
+  apiUrl: 'https://auraproxy-7bpt7e5tua-uc.a.run.app',
+  storage: {
+    documents: { driver: 'indexeddb' as any },
+    objects: { driver: 'indexeddb' as any }
+  }
+};
+
+createStorage(baseAuraConfig.storage);
+
+const defaultProjectId = 'aura-tour-demo';
+
+function Home() {
+  const [searchParams] = useSearchParams();
+  const projectId = searchParams.get('project') || defaultProjectId;
+
+  return (
+    <div style={{ display: 'flex', height: '100vh', width: '100vw', background: '#f5f5f7' }}>
+      {/* Reset explicit projectId passing to TourController if it reads from hook, or pass it */}
+      {/* We will pass it to keep it pure if possible, or render it here knowing it can use hooks */}
+      <TourGuide projectId={projectId} />
+      <ProjectSidebar currentProjectId={projectId} />
+      <aside style={{
+        width: '350px',
+        borderRight: '1px solid #ddd',
+        background: 'white',
+        display: 'flex',
+        flexDirection: 'column',
+        zIndex: 10
+      }}>
+        <ChatInterface
+          placeholder="Talk to Aura..."
+        />
+      </aside>
+      <main style={{ flex: 1, position: 'relative', overflow: 'hidden', background: '#fff' }}>
+        <Space projectId={projectId} />
+      </main>
+    </div>
+  );
+}
+
+function App() {
+  const [sessionId] = useState(() => 'sess_' + Math.random().toString(36).substr(2, 9));
+  const config = { ...baseAuraConfig, sessionId };
+
+  useEffect(() => {
+    registerExampleAIRs();
+    analyticsService.startTTVTimer();
+    (window as any).flux = flux;
+  }, []);
+
+  return (
+    <AuraProvider config={config}>
+      <ControllerProvider>
+        <BrowserRouter>
+          <AnalyticsTracker />
+          <Routes>
+            <Route path="/" element={<Home />} />
+          </Routes>
+        </BrowserRouter>
+      </ControllerProvider>
+    </AuraProvider>
+  );
+}
+
+export default App;

package/templates/starter/src/src/ambiance/currency-air/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { CurrencyManifest } from './manifest';
+import { resources } from './resources';
+import CurrencyUI from './ui';
+import { useCurrencyLogic } from './logic';
+
+const CurrencyAIR = React.forwardRef<any, any>((props, ref) => {
+    const logic = useCurrencyLogic({ ...props, resources });
+
+    React.useImperativeHandle(ref, () => ({
+        getContext: async () => ({ from: logic.from, to: logic.to, amount: logic.amount, result: logic.result }),
+        capabilities: ['currency-conversion']
+    }));
+
+    return <CurrencyUI {...logic} />;
+});
+
+export default {
+    manifest: CurrencyManifest,
+    resources,
+    component: CurrencyAIR
+};
+export { CurrencyManifest } from './manifest';
+export { resources } from './resources';
+export const Component = CurrencyAIR;

package/templates/starter/src/src/ambiance/currency-air/logic.ts

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import { flux } from '@minnai/aura/flux/index';
+
+export function useCurrencyLogic(props: any) {
+    const [amount, setAmount] = useState(1);
+    const [from, setFrom] = useState('USD');
+    const [to, setTo] = useState('EUR');
+    const [result, setResult] = useState<number | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const { resources } = props;
+    // BUG: This should use resources.api.currency.rates.config.url instead!
+    // It's currently hardcoded to the wrong file name
+    const API_URL = '/dollar.json';  // Should be '/usd.json'!
+
+    useEffect(() => {
+        convert();
+    }, []);
+
+    const convert = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await fetch(API_URL);
+            if (!response.ok) throw new Error(`Failed to fetch rates: ${response.statusText}`);
+            const data = await response.json();
+            const rate = data.rates[to];
+            const finalResult = amount * rate;
+            setResult(finalResult);
+            flux.dispatch({
+                type: 'UPDATE_STATE',
+                payload: { airId: 'currency-air', amount, from, to, result: finalResult },
+                to: 'all'
+            });
+        } catch (err: any) {
+            setError(err.message || "Conversion failed");
+            flux.dispatch({
+                type: 'AIR_ERROR',
+                payload: { airId: 'currency-air', error: err.message || "Conversion failed" },
+                to: 'all'
+            });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return { amount, setAmount, from, setFrom, to, setTo, result, loading, error, convert };
+}

package/templates/starter/src/src/ambiance/currency-air/manifest.ts

@@ -0,0 +1,15 @@
+export const CurrencyManifest = {
+    id: 'currency-air',
+    meta: {
+        title: 'Currency Converter',
+        icon: '💱',
+        description: 'Convert between different currencies.',
+        width: 350,
+        height: 400
+    },
+    instructions: {
+        tasks: {
+            'convert': 'Convert an amount from one currency to another.'
+        }
+    }
+};

package/templates/starter/src/src/ambiance/currency-air/resources.ts

@@ -0,0 +1,16 @@
+// Currency conversion using local exchange rate data
+export const resources = {
+    api: {
+        currency: {
+            rates: {
+                id: 'local-exchange-rates',
+                provider: 'static',
+                config: {
+                    url: '/usd.json',  // This should be 'usd.json' not 'dollar.json'!
+                    method: 'GET',
+                    base: 'USD'
+                }
+            }
+        }
+    }
+} as const;

package/templates/starter/src/src/ambiance/currency-air/ui/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+export default function CurrencyUI({
+    amount, setAmount, from, setFrom, to, setTo, result, loading, error, convert
+}: any) {
+    return (
+        <div style={{ paddingTop: 0, height: '100%', display: 'flex', flexDirection: 'column' }}>
+            <div style={{ marginTop: 10, fontSize: '0.8rem', fontWeight: 600, textTransform: 'uppercase', color: '#888', letterSpacing: '0.5px' }}>Currency Converter</div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 15, marginTop: 20 }}>
+                <div style={{ display: 'flex', gap: 10 }}>
+                    <input type="number" value={amount} onChange={(e) => setAmount(parseFloat(e.target.value))} style={{ flex: 1, padding: 8, borderRadius: 4, border: '1px solid #ddd' }} />
+                    <select value={from} onChange={(e) => setFrom(e.target.value)} style={{ padding: 8, borderRadius: 4, border: '1px solid #ddd' }}>
+                        <option value="USD">USD</option>
+                        <option value="EUR">EUR</option>
+                    </select>
+                </div>
+                <div style={{ textAlign: 'center', color: '#999' }}>⬇️</div>
+                <div style={{ display: 'flex', gap: 10 }}>
+                    <div style={{ flex: 1, padding: 8, background: '#f5f5f5', borderRadius: 4 }}>{result !== null ? result.toFixed(2) : '-'}</div>
+                    <select value={to} onChange={(e) => setTo(e.target.value)} style={{ padding: 8, borderRadius: 4, border: '1px solid #ddd' }}>
+                        <option value="EUR">EUR</option>
+                        <option value="USD">USD</option>
+                    </select>
+                </div>
+                <button onClick={convert} style={{ padding: 10, background: '#007aff', color: 'white', border: 'none', borderRadius: 6, cursor: 'pointer' }}>Convert</button>
+            </div>
+            {loading && <div style={{ textAlign: 'center', marginTop: 20, color: '#666' }}>Loading...</div>}
+            {error && (
+                <div style={{ marginTop: 20, padding: 15, background: '#fff0f0', border: '1px solid #ffcccc', borderRadius: 8, color: '#d32f2f', fontSize: '0.9rem' }}>
+                    <strong>Error:</strong> {error}
+                    <div style={{ marginTop: 5, fontSize: '0.8rem', opacity: 0.8 }}>File not found: /dollar.json</div>
+                </div>
+            )}
+            {result !== null && !loading && !error && (
+                <div style={{ marginTop: 20, padding: 15, background: '#e8f5e9', border: '1px solid #c8e6c9', borderRadius: 8, color: '#2e7d32', fontSize: '0.9rem', textAlign: 'center' }}>
+                    <strong>Success!</strong>
+                    <div style={{ fontSize: '1.2rem', fontWeight: 600, marginTop: 5 }}>Result: {result.toFixed(2)} {to}</div>
+                </div>
+            )}
+        </div>
+    );
+}

package/templates/starter/src/src/ambiance/index.ts

@@ -0,0 +1,48 @@
+import { atmosphere } from '@minnai/aura/atmosphere';
+import TasksAIR from '@minnai/aura/atmosphere/tasks';
+import YouTubeAIR from '@minnai/aura/atmosphere/youtube-player';
+import NoteTakerAIR from '@minnai/aura/atmosphere/note-taker';
+
+// Local Ambiance
+import { StocksManifest, Component as StocksComponent, resources as stocksResources } from './stocks-air';
+import { CurrencyManifest, Component as CurrencyComponent, resources as currencyResources } from './currency-air';
+import { LOCAL_AIRS } from '../../aura.config';
+
+export const registerExampleAIRs = () => {
+    // 1. Register Standard AIRs (Core)
+    // The Standard AIRs export a wrapper object { manifest, resources, component }
+    // We need to flatten this to match AIRManifest { id, meta, component }
+    [TasksAIR, YouTubeAIR, NoteTakerAIR].forEach((air: any) => {
+        if (LOCAL_AIRS.includes(air.manifest.id)) {
+            atmosphere.register({
+                ...air.manifest,
+                component: air.component,
+                resources: air.resources
+            });
+        }
+    });
+
+    // 2. Register Local Demo AIRs
+    if (LOCAL_AIRS.includes(StocksManifest.id)) {
+        atmosphere.register({
+            ...StocksManifest,
+            component: StocksComponent as any,
+            resources: stocksResources
+        });
+    }
+    if (LOCAL_AIRS.includes(CurrencyManifest.id)) {
+        atmosphere.register({
+            ...CurrencyManifest,
+            component: CurrencyComponent as any,
+            resources: currencyResources
+        });
+    }
+};
+
+export const EXAMPLE_AIRS = [
+    NoteTakerAIR.manifest,
+    YouTubeAIR.manifest,
+    TasksAIR.manifest,
+    StocksManifest,
+    CurrencyManifest
+].filter(manifest => LOCAL_AIRS.includes(manifest.id));

package/templates/starter/src/src/ambiance/stocks-air/index.ts

@@ -0,0 +1,3 @@
+export * from './manifest';
+export * from './index.tsx';
+export * from './resources';

package/templates/starter/src/src/ambiance/stocks-air/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StocksManifest } from './manifest';
+import { resources } from './resources';
+import StocksUI from './ui';
+import { useStocksLogic } from './logic';
+
+const StocksAIR = React.forwardRef<any, any>((props, ref) => {
+    const logic = useStocksLogic({ ...props, resources });
+
+    React.useImperativeHandle(ref, () => ({
+        getContext: async () => ({
+            symbol: logic.symbol,
+            lastPrice: logic.data?.price,
+            change: logic.data?.changePercent
+        }),
+        capabilities: ['market-data']
+    }));
+
+    return <StocksUI {...logic} onSearch={logic.fetchStock} />;
+});
+
+export default {
+    manifest: StocksManifest,
+    resources,
+    component: StocksAIR
+};
+export { StocksManifest } from './manifest';
+export const Component = StocksAIR;

package/templates/starter/src/src/ambiance/stocks-air/logic.ts

@@ -0,0 +1,87 @@
+import { useState, useEffect } from 'react';
+import { flux } from '@minnai/aura/flux/index';
+
+export function useStocksLogic(props: any) {
+    const [symbol, setSymbol] = useState(props.symbol || 'AAPL');
+    const [data, setData] = useState<any>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [apiKeyMissing, setApiKeyMissing] = useState(false);
+
+    const { resources } = props;
+    const apiKey = resources?.keys?.STOCKS_API_KEY;
+    const apiConfig = resources?.api?.stocks?.timeSeries?.config;
+
+    useEffect(() => {
+        if (!apiKey || apiKey === 'YOUR_API_KEY' || apiKey.length < 5) {
+            setApiKeyMissing(true);
+            flux.dispatch({
+                type: 'AIR_ERROR',
+                payload: {
+                    airId: 'stocks-air',
+                    error: '🚨 STOCKS_API_KEY is missing in resources.ts!'
+                },
+                to: 'all'
+            });
+            return;
+        }
+        fetchStock(symbol);
+    }, [apiKey]);
+
+    const fetchStock = async (sym: string) => {
+        setLoading(true);
+        setError(null);
+        try {
+            const url = `${apiConfig.url}?function=${apiConfig.params.function}&symbol=${sym}&apikey=${apiKey}`;
+            const response = await fetch(url);
+            const json = await response.json();
+
+            if (json['Time Series (Daily)']) {
+                const timeSeries = json['Time Series (Daily)'];
+                const dates = Object.keys(timeSeries).sort();
+                const latestDate = dates[dates.length - 1];
+                const prevDate = dates[dates.length - 2];
+
+                const latestClose = parseFloat(timeSeries[latestDate]['4. close']);
+                const prevClose = parseFloat(timeSeries[prevDate]['4. close']);
+                const change = latestClose - prevClose;
+                const changePercent = (change / prevClose) * 100;
+
+                const history = dates.slice(-30).map(date => ({
+                    date: date.substring(5),
+                    price: parseFloat(timeSeries[date]['4. close'])
+                }));
+
+                setData({
+                    symbol: json['Meta Data']['2. Symbol'],
+                    price: latestClose.toFixed(2),
+                    change: change.toFixed(2),
+                    changePercent: `${changePercent.toFixed(2)}%`,
+                    history
+                });
+
+                flux.dispatch({
+                    type: 'UPDATE_STATE',
+                    payload: { airId: 'stocks-air', price: latestClose.toFixed(2) },
+                    to: 'all'
+                });
+            } else if (json['Note']) {
+                const msg = "API limit reached.";
+                setError(msg);
+                flux.dispatch({ type: 'AIR_ERROR', payload: { airId: 'stocks-air', error: msg }, to: 'all' });
+            } else {
+                const msg = "Symbol not found.";
+                setError(msg);
+                flux.dispatch({ type: 'AIR_ERROR', payload: { airId: 'stocks-air', error: msg }, to: 'all' });
+            }
+        } catch (err) {
+            const msg = "Network error.";
+            setError(msg);
+            flux.dispatch({ type: 'AIR_ERROR', payload: { airId: 'stocks-air', error: msg }, to: 'all' });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return { symbol, setSymbol, data, loading, error, apiKeyMissing, fetchStock };
+}

package/templates/starter/src/src/ambiance/stocks-air/manifest.ts

@@ -0,0 +1,15 @@
+export const StocksManifest = {
+    id: 'stocks-air',
+    meta: {
+        title: 'Stock Tracker',
+        icon: '📈',
+        description: 'Track real-time stock prices.',
+        width: 350,
+        height: 400
+    },
+    instructions: {
+        tasks: {
+            'check_price': 'Check the stock price for a given symbol.'
+        }
+    }
+};

package/templates/starter/src/src/ambiance/stocks-air/resources.ts

@@ -0,0 +1,23 @@
+// Add your AlphaVantage API key here
+// Get a free key at: https://www.alphavantage.co/support/#api-key
+export const resources = {
+    api: {
+        stocks: {
+            timeSeries: {
+                id: 'alphavantage-timeseries',
+                provider: 'proxy',
+                config: {
+                    url: 'https://www.alphavantage.co/query',
+                    method: 'GET',
+                    auth: 'STOCKS_API_KEY',
+                    params: {
+                        function: 'TIME_SERIES_DAILY'
+                    }
+                }
+            }
+        }
+    },
+    keys: {
+        STOCKS_API_KEY: 'PUT YOUR API KEY HERE'
+    }
+} as const;

package/templates/starter/src/src/ambiance/stocks-air/ui/index.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { LineChart, Line, ResponsiveContainer, YAxis, Tooltip } from 'recharts';
+
+export default function StocksUI({
+    symbol, setSymbol, data, loading, error, apiKeyMissing, onSearch
+}: any) {
+    const isPositive = data && parseFloat(data.change) >= 0;
+
+    return (
+        <div style={{ paddingTop: 0, height: '100%', display: 'flex', flexDirection: 'column' }}>
+            <div style={{ marginTop: 10, fontSize: '0.8rem', fontWeight: 600, textTransform: 'uppercase', color: '#888', letterSpacing: '0.5px' }}>Market Data</div>
+
+            {apiKeyMissing ? (
+                <div style={{ padding: 20, background: '#fff0f0', borderRadius: 8, border: '1px solid #ffcccc', color: '#d32f2f' }}>
+                    <strong>API Key Missing</strong>
+                    <p style={{ margin: '10px 0', fontSize: '0.9rem' }}>Please add <code>STOCK_API_KEY</code> to your environment variables.</p>
+                </div>
+            ) : (
+                <>
+                    <form onSubmit={(e) => { e.preventDefault(); onSearch(symbol); }} style={{ marginBottom: 10 }}>
+                        <input
+                            value={symbol}
+                            onChange={(e) => setSymbol(e.target.value.toUpperCase())}
+                            placeholder="Enter Symbol (e.g. AAPL)"
+                            style={{ width: '100%', padding: '10px', borderRadius: 8, border: '1px solid #ddd', outline: 'none' }}
+                        />
+                    </form>
+
+                    {loading && <div style={{ textAlign: 'center', color: '#666' }}>Loading...</div>}
+                    {error && <div style={{ color: 'red', textAlign: 'center' }}>{error}</div>}
+
+                    {data && !loading && (
+                        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+                            <div style={{ textAlign: 'center', marginBottom: 10 }}>
+                                <h2 style={{ fontSize: '2rem', margin: '0 0 5px 0', fontWeight: 800 }}>{data.price}</h2>
+                                <div style={{ fontSize: '1.2rem', color: isPositive ? '#00c853' : '#d32f2f', fontWeight: 600 }}>
+                                    {isPositive ? '▲' : '▼'} {data.change} ({data.changePercent})
+                                </div>
+                                <div style={{ color: '#999', fontSize: '0.8rem' }}>{data.symbol} - Last 30 Days</div>
+                            </div>
+
+                            <div style={{ flex: 1, minHeight: 150, width: '100%' }}>
+                                <ResponsiveContainer width="100%" height="100%">
+                                    <LineChart data={data.history}>
+                                        <YAxis domain={['auto', 'auto']} hide={true} />
+                                        <Tooltip
+                                            contentStyle={{ borderRadius: 8, border: 'none', boxShadow: '0 2px 10px rgba(0,0,0,0.1)' }}
+                                            itemStyle={{ color: '#333' }}
+                                            formatter={(value: any) => [parseFloat(value).toFixed(2), 'Price']}
+                                        />
+                                        <Line
+                                            type="monotone"
+                                            dataKey="price"
+                                            stroke={isPositive ? '#00c853' : '#d32f2f'}
+                                            strokeWidth={2}
+                                            dot={false}
+                                        />
+                                    </LineChart>
+                                </ResponsiveContainer>
+                            </div>
+                        </div>
+                    )}
+                </>
+            )}
+        </div>
+    );
+}