create-stylus-ide 1.0.0

package/frontend/app/providers.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { WagmiProvider } from 'wagmi';
+import { config } from '@/lib/wagmi-config';
+import { useState } from 'react';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+}

package/frontend/app/qlearning/page.tsx

@@ -0,0 +1,188 @@
+//mazegrid.tsx  (your qlearning/page.tsx)
+'use client';
+
+import { useState, useRef } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Brain, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { ConnectButton } from '@/components/wallet/ConnectButton';
+import { MazeGrid } from '@/components/q-learning/MazeGrid';
+import { ContractConfig } from '@/components/q-learning/ContractConfig';
+import { TrainingForm } from '@/components/q-learning/TrainingForm';
+import { QTableHeatmap } from '@/components/q-learning/QTableHeatmap';
+import { PathAnimation } from '@/components/q-learning/PathAnimation';
+
+export default function QLearningDemoPage() {
+  // Input field state (can change freely without restarting reads)
+  const [contractAddress, setContractAddress] = useState<string>('');
+
+  // ✅ Stable, “connected” address used for reads
+  const [connectedContractAddress, setConnectedContractAddress] = useState<string>('');
+
+  const [isConnected, setIsConnected] = useState(false);
+  const [isTrained, setIsTrained] = useState(false);
+
+  const [mazeConfig, setMazeConfig] = useState<{
+    size: number;
+    startRow: number;
+    startCol: number;
+    goalRow: number;
+    goalCol: number;
+  } | null>(null);
+
+  // Use refreshNonce instead of key-remount
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  // ✅ Guard: prevents multiple refresh triggers if TrainingForm calls callback more than once
+  const trainingCompleteLockRef = useRef(false);
+
+  const handleTrainingComplete = () => {
+    if (trainingCompleteLockRef.current) return;
+    trainingCompleteLockRef.current = true;
+
+    setRefreshKey((prev) => prev + 1);
+    setIsTrained(true);
+
+    // unlock after a short window (covers receipt/status double-calls)
+    setTimeout(() => {
+      trainingCompleteLockRef.current = false;
+    }, 1500);
+  };
+
+  const activeAddress = connectedContractAddress || '';
+
+  return (
+    <main className="min-h-screen bg-background">
+
+      <div className="container mx-auto p-6 max-w-7xl">
+        {/* Title */}
+        <div className="text-center mb-8">
+          <div className="flex items-center justify-center gap-3 mb-3">
+            <Brain className="h-8 w-8 text-primary" />
+            <h1 className="text-3xl font-bold">Q-Learning Maze Agent</h1>
+          </div>
+          <p className="text-muted-foreground">Reinforcement learning agent that learns to navigate a maze on-chain</p>
+          <p className="text-sm text-muted-foreground mt-2">
+            Based on <strong>Watkins (1989)</strong> - "Learning from Delayed Rewards"
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Left Column: Contract Config + Training */}
+          <div className="lg:col-span-1 space-y-6">
+            <ContractConfig
+              contractAddress={contractAddress}
+              setContractAddress={setContractAddress}
+              isConnected={isConnected}
+              setIsConnected={setIsConnected}
+              setConnectedContractAddress={setConnectedContractAddress}
+              setMazeConfig={setMazeConfig}
+              setIsTrained={setIsTrained}
+            />
+
+            {isConnected && activeAddress && (
+              <TrainingForm
+                contractAddress={activeAddress}
+                isConnected={isConnected}
+                onTrainingComplete={handleTrainingComplete}
+              />
+            )}
+          </div>
+
+          {/* Center/Right: Visualizations */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Maze Grid */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Maze Environment</CardTitle>
+                <CardDescription>5×5 grid with walls (gray), start (green), and goal (red)</CardDescription>
+              </CardHeader>
+              <CardContent>
+                {mazeConfig && activeAddress ? (
+                  <MazeGrid
+                    // ✅ do NOT key-remount
+                    refreshNonce={refreshKey}
+                    size={mazeConfig.size}
+                    startPos={[mazeConfig.startRow, mazeConfig.startCol]}
+                    goalPos={[mazeConfig.goalRow, mazeConfig.goalCol]}
+                    contractAddress={activeAddress}
+                    isConnected={isConnected}
+                  />
+                ) : (
+                  <div className="flex items-center justify-center h-96 text-muted-foreground">
+                    <div className="text-center">
+                      <Brain className="h-12 w-12 mx-auto mb-3 opacity-50" />
+                      <p>Connect to a deployed Q-Learning contract to view the maze</p>
+                    </div>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Path Animation */}
+            {mazeConfig && activeAddress && (
+              <PathAnimation
+                contractAddress={activeAddress}
+                size={mazeConfig.size}
+                startPos={[mazeConfig.startRow, mazeConfig.startCol]}
+                goalPos={[mazeConfig.goalRow, mazeConfig.goalCol]}
+                isConnected={isConnected}
+                isTrained={isTrained}
+              />
+            )}
+
+            {/* Q-Table Heatmap */}
+            {mazeConfig && activeAddress && (
+              <QTableHeatmap
+                contractAddress={activeAddress}
+                size={mazeConfig.size}
+                isConnected={isConnected}
+                isTrained={isTrained}
+              />
+            )}
+          </div>
+        </div>
+
+        {/* How It Works Section */}
+        <Card className="mt-6">
+          <CardHeader>
+            <CardTitle>How Q-Learning Works</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4 text-sm">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <h4 className="font-semibold mb-2">Bellman Optimality Equation</h4>
+                <div className="bg-muted p-3 rounded-md font-mono text-xs">
+                  Q*(s,a) = R(s,a) + γ·max<sub>a'</sub> Q*(s',a')
+                </div>
+                <p className="text-muted-foreground mt-2 text-xs">
+                  The optimal Q-value is the immediate reward plus the discounted maximum future reward.
+                </p>
+              </div>
+
+              <div>
+                <h4 className="font-semibold mb-2">Q-Learning Update Rule</h4>
+                <div className="bg-muted p-3 rounded-md font-mono text-xs">
+                  Q(s,a) ← Q(s,a) + α[r + γ·max<sub>a'</sub> Q(s',a') - Q(s,a)]
+                </div>
+                <p className="text-muted-foreground mt-2 text-xs">
+                  Update Q-values by learning from the temporal difference error.
+                </p>
+              </div>
+            </div>
+
+            <div className="pt-4 border-t border-border">
+              <h4 className="font-semibold mb-2">Parameters</h4>
+              <ul className="space-y-1 text-xs text-muted-foreground">
+                <li>• <strong>α (alpha)</strong>: Learning rate - how much to update Q-values (0.0 - 1.0)</li>
+                <li>• <strong>γ (gamma)</strong>: Discount factor - importance of future rewards (0.0 - 1.0)</li>
+                <li>• <strong>ε (epsilon)</strong>: Exploration rate - probability of random actions (0.0 - 1.0)</li>
+                <li>• <strong>Episodes</strong>: Number of complete runs from start to goal</li>
+              </ul>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  );
+}

package/frontend/app/raytracing/page.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Sparkles, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { ConnectButton } from '@/components/wallet/ConnectButton';
+import { ContractConfig } from '@/components/ray-tracing/ContractConfig';
+import { StyleControls } from '@/components/ray-tracing/StyleControls';
+import { RenderCanvas } from '@/components/ray-tracing/RenderCanvas';
+import { MintingForm } from '@/components/ray-tracing/MintingForm';
+import { RenderingPanel } from '@/components/ray-tracing/RenderingPanel';
+
+export default function RayTracingDemoPage() {
+  // Contract state
+  const [mnnAddress, setMnnAddress] = useState<string>('');
+  const [nftAddress, setNftAddress] = useState<string>('');
+  const [isMnnConnected, setIsMnnConnected] = useState(false);
+  const [isNftConnected, setIsNftConnected] = useState(false);
+
+  // Style parameters (0-100%)
+  const [warmth, setWarmth] = useState(75);
+  const [intensity, setIntensity] = useState(60);
+  const [depth, setDepth] = useState(50);
+
+  // Predicted colors from MNN
+  const [predictedColors, setPredictedColors] = useState<[number, number, number] | null>(null);
+
+  // Camera position
+  const [cameraX, setCameraX] = useState(0);
+  const [cameraY, setCameraY] = useState(0);
+  const [cameraZ, setCameraZ] = useState(0);
+
+  // Minted token
+  const [mintedTokenId, setMintedTokenId] = useState<bigint | null>(null);
+
+  // Rendering state
+  const [isRendering, setIsRendering] = useState(false);
+  const [renderedPixels, setRenderedPixels] = useState<number[] | null>(null);
+
+  const handleMintSuccess = (tokenId: bigint) => {
+    setMintedTokenId(tokenId);
+  };
+
+  return (
+    <main className="min-h-screen bg-background">
+
+      <div className="container mx-auto p-6 max-w-7xl">
+        {/* Title */}
+        <div className="text-center mb-8">
+          <div className="flex items-center justify-center gap-3 mb-3">
+            <Sparkles className="h-8 w-8 text-primary" />
+            <h1 className="text-3xl font-bold">Ray Tracing NFT Engine</h1>
+          </div>
+          <p className="text-muted-foreground">
+            On-chain 3D graphics with neural network aesthetic generation
+          </p>
+          <p className="text-sm text-muted-foreground mt-2">
+            Dual smart contracts: <strong>Mini Neural Network</strong> (3→4→2) + <strong>Ray Tracing Engine</strong>
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Left Column: Contract Config + Style Controls + Minting */}
+          <div className="lg:col-span-1 space-y-6">
+            <ContractConfig
+              mnnAddress={mnnAddress}
+              setMnnAddress={setMnnAddress}
+              nftAddress={nftAddress}
+              setNftAddress={setNftAddress}
+              isMnnConnected={isMnnConnected}
+              setIsMnnConnected={setIsMnnConnected}
+              isNftConnected={isNftConnected}
+              setIsNftConnected={setIsNftConnected}
+            />
+
+            {isMnnConnected && (
+              <StyleControls
+                warmth={warmth}
+                setWarmth={setWarmth}
+                intensity={intensity}
+                setIntensity={setIntensity}
+                depth={depth}
+                setDepth={setDepth}
+                mnnAddress={mnnAddress}
+                predictedColors={predictedColors}
+                setPredictedColors={setPredictedColors}
+              />
+            )}
+
+            {isNftConnected && predictedColors && (
+              <MintingForm
+                nftAddress={nftAddress}
+                isNftConnected={isNftConnected}
+                predictedColors={predictedColors}
+                cameraX={cameraX}
+                cameraY={cameraY}
+                cameraZ={cameraZ}
+                onMintSuccess={handleMintSuccess}
+              />
+            )}
+          </div>
+
+          {/* Center/Right: Canvas + Rendering */}
+          <div className="lg:col-span-2 space-y-6">
+            <RenderCanvas
+              predictedColors={predictedColors}
+              cameraX={cameraX}
+              setCameraX={setCameraX}
+              cameraY={cameraY}
+              setCameraY={setCameraY}
+              cameraZ={cameraZ}
+              setCameraZ={setCameraZ}
+              isRendering={isRendering}
+              renderedPixels={renderedPixels}
+              nftAddress={nftAddress}
+              isNftConnected={isNftConnected}
+            />
+
+            {/* On-Chain Rendering Panel */}
+
+            {isNftConnected && (
+                <RenderingPanel
+                nftAddress={nftAddress}
+                isNftConnected={isNftConnected}
+                mintedTokenId={mintedTokenId}
+                />
+            )}
+
+            {/* Token Info (shows after minting) */}
+            {mintedTokenId !== null && (
+              <Card>
+                <CardHeader>
+                  <CardTitle>Your NFT</CardTitle>
+                  <CardDescription>
+                    Successfully minted on-chain
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="bg-muted p-4 rounded-md space-y-2">
+                    <div className="flex justify-between text-sm">
+                      <span className="text-muted-foreground">Token ID:</span>
+                      <span className="font-mono">{mintedTokenId.toString()}</span>
+                    </div>
+                    <div className="flex justify-between text-sm">
+                      <span className="text-muted-foreground">Contract:</span>
+                      <span className="font-mono text-xs">{nftAddress.slice(0, 6)}...{nftAddress.slice(-4)}</span>
+                    </div>
+                    <div className="flex justify-between text-sm">
+                      <span className="text-muted-foreground">Status:</span>
+                      <span className="text-green-500">✓ Minted</span>
+                    </div>
+                  </div>
+                  <p className="text-xs text-muted-foreground mt-3">
+                    Ready for Step 5: Full on-chain rendering!
+                  </p>
+                </CardContent>
+              </Card>
+            )}
+          </div>
+        </div>
+
+        {/* Deployment Instructions */}
+        {!isMnnConnected && !isNftConnected && (
+          <Card className="mt-6">
+            <CardHeader>
+              <CardTitle>Quick Deployment Guide</CardTitle>
+              <CardDescription>
+                Deploy contracts and start creating on-chain 3D art
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4 text-sm">
+              <div className="space-y-2">
+                <h4 className="font-semibold">Step 1: Deploy Mini Neural Network</h4>
+                <ol className="list-decimal list-inside space-y-1 text-xs text-muted-foreground pl-4">
+                  <li>Go back to IDE homepage</li>
+                  <li>Load template: "Mini Neural Network (Aesthetic AI)"</li>
+                  <li>Click "Compile" - should succeed</li>
+                  <li>Connect wallet (Arbitrum Sepolia)</li>
+                  <li>Click "Deploy" - pay gas (~$0.01)</li>
+                  <li>Copy contract address from success message</li>
+                  <li>Paste address in "MNN Contract" field above</li>
+                </ol>
+              </div>
+
+              <div className="space-y-2 pt-2 border-t border-border">
+                <h4 className="font-semibold">Step 2: Deploy Ray Tracing NFT</h4>
+                <ol className="list-decimal list-inside space-y-1 text-xs text-muted-foreground pl-4">
+                  <li>Load template: "Ray Tracing NFT Engine"</li>
+                  <li>Click "Compile" - should succeed</li>
+                  <li>Click "Deploy" - pay gas (~$0.02)</li>
+                  <li>Copy contract address</li>
+                  <li>Paste address in "NFT Contract" field above</li>
+                </ol>
+              </div>
+
+              <div className="space-y-2 pt-2 border-t border-border">
+                <h4 className="font-semibold">Step 3: Generate & Mint</h4>
+                <ol className="list-decimal list-inside space-y-1 text-xs text-muted-foreground pl-4">
+                  <li>Adjust style sliders (warmth, intensity, depth)</li>
+                  <li>Click "Preview Colors (FREE)" - 0 gas cost!</li>
+                  <li>See predicted colors from neural network</li>
+                  <li>Adjust camera position and background colors</li>
+                  <li>Click "Mint NFT" - stores parameters on-chain</li>
+                  <li>Ready for Step 5: Full on-chain ray tracing!</li>
+                </ol>
+              </div>
+
+              <div className="bg-green-500/10 border border-green-500/20 p-3 rounded-md text-xs text-green-400 mt-4">
+                <p className="font-medium mb-1">💰 Cost Breakdown:</p>
+                <ul className="space-y-1">
+                  <li>• MNN Deploy: ~$0.01 (one-time)</li>
+                  <li>• NFT Deploy: ~$0.02 (one-time)</li>
+                  <li>• Preview Colors: FREE (view function)</li>
+                  <li>• Mint NFT: ~$0.0001 (per mint)</li>
+                  <li>• Render: ~$0.003 (per render, Step 5)</li>
+                </ul>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* How It Works Section */}
+        <Card className="mt-6">
+          <CardHeader>
+            <CardTitle>How Ray Tracing Works</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4 text-sm">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <h4 className="font-semibold mb-2">Phase 1: Neural Network Preview (FREE)</h4>
+                <div className="bg-muted p-3 rounded-md text-xs">
+                  <code>view_aesthetic(warmth, intensity, depth) → RGB</code>
+                </div>
+                <p className="text-muted-foreground mt-2 text-xs">
+                  Mini neural network (3→4→2) predicts aesthetic colors based on style parameters. 
+                  Runs on-chain as VIEW function (0 gas cost).
+                </p>
+              </div>
+
+              <div>
+                <h4 className="font-semibold mb-2">Phase 2: NFT Minting</h4>
+                <div className="bg-muted p-3 rounded-md text-xs">
+                  <code>mint(colors, camera) → token_id</code>
+                </div>
+                <p className="text-muted-foreground mt-2 text-xs">
+                  Store 21 bytes of rendering parameters on-chain. Creates unique NFT that anyone can render later.
+                </p>
+              </div>
+            </div>
+
+            <div className="pt-4 border-t border-border">
+              <h4 className="font-semibold mb-2">Ray-Sphere Intersection Math</h4>
+              <div className="bg-muted p-3 rounded-md font-mono text-xs">
+                <div>Given: Ray = O + D·t, Sphere = |P - C|² = r²</div>
+                <div className="mt-1">Solve: a·t² + b·t + c = 0</div>
+                <div className="mt-1">Where: a = D·D, b = 2(O-C)·D, c = (O-C)·(O-C) - r²</div>
+              </div>
+              <p className="text-muted-foreground mt-2 text-xs">
+                Discriminant determines if ray hits sphere. If yes, calculate intersection point and lighting.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  );
+}

package/frontend/components/abi/ABIDialog.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Copy, Check, FileJson, FileCode } from 'lucide-react';
+
+interface ABIDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  abi: string | null;
+  solidity: string | null;
+}
+
+export function ABIDialog({ open, onOpenChange, abi, solidity }: ABIDialogProps) {
+  const [copiedABI, setCopiedABI] = useState(false);
+  const [copiedSolidity, setCopiedSolidity] = useState(false);
+
+  const copyToClipboard = async (text: string, type: 'abi' | 'solidity') => {
+    try {
+      await navigator.clipboard.writeText(text);
+      if (type === 'abi') {
+        setCopiedABI(true);
+        setTimeout(() => setCopiedABI(false), 2000);
+      } else {
+        setCopiedSolidity(true);
+        setTimeout(() => setCopiedSolidity(false), 2000);
+      }
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>Contract ABI</DialogTitle>
+          <DialogDescription>
+            Export your contract's Application Binary Interface
+          </DialogDescription>
+        </DialogHeader>
+
+        <Tabs defaultValue="json" className="flex-1 flex flex-col min-h-0">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="json" className="flex items-center gap-2">
+              <FileJson className="h-4 w-4" />
+              JSON ABI
+            </TabsTrigger>
+            <TabsTrigger value="solidity" className="flex items-center gap-2">
+              <FileCode className="h-4 w-4" />
+              Solidity Interface
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="json" className="flex-1 flex flex-col min-h-0 mt-4">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm text-muted-foreground">
+                Copy this ABI to interact with your contract
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => abi && copyToClipboard(abi, 'abi')}
+                disabled={!abi}
+              >
+                {copiedABI ? (
+                  <>
+                    <Check className="h-4 w-4 mr-2" />
+                    Copied!
+                  </>
+                ) : (
+                  <>
+                    <Copy className="h-4 w-4 mr-2" />
+                    Copy JSON
+                  </>
+                )}
+              </Button>
+            </div>
+            <div className="flex-1 overflow-auto bg-muted rounded-lg p-4 font-mono text-xs">
+              {abi ? (
+                <pre className="whitespace-pre-wrap wrap-break-words">{abi}</pre>
+              ) : (
+                <p className="text-muted-foreground">No ABI available</p>
+              )}
+            </div>
+          </TabsContent>
+
+          <TabsContent value="solidity" className="flex-1 flex flex-col min-h-0 mt-4">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm text-muted-foreground">
+                Solidity interface for your contract
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => solidity && copyToClipboard(solidity, 'solidity')}
+                disabled={!solidity}
+              >
+                {copiedSolidity ? (
+                  <>
+                    <Check className="h-4 w-4 mr-2" />
+                    Copied!
+                  </>
+                ) : (
+                  <>
+                    <Copy className="h-4 w-4 mr-2" />
+                    Copy Interface
+                  </>
+                )}
+              </Button>
+            </div>
+            <div className="flex-1 overflow-auto bg-muted rounded-lg p-4 font-mono text-xs">
+              {solidity ? (
+                <pre className="whitespace-pre-wrap wrap-break-words">{solidity}</pre>
+              ) : (
+                <p className="text-muted-foreground">No Solidity interface available</p>
+              )}
+            </div>
+          </TabsContent>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/components/ai/AICompletionPopup.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Loader2, Sparkles, Check, X } from 'lucide-react';
+
+interface AICompletionPopupProps {
+  visible: boolean;
+  position: { top: number; left: number };
+  onAccept: (completion: string) => void;
+  onReject: () => void;
+  isLoading: boolean;
+  completion: string;
+}
+
+export function AICompletionPopup({
+  visible,
+  position,
+  onAccept,
+  onReject,
+  isLoading,
+  completion,
+}: AICompletionPopupProps) {
+  if (!visible) return null;
+
+  return (
+    <Card
+      className="fixed z-50 p-3 shadow-lg border-primary/50"
+      style={{
+        top: position.top,
+        left: position.left,
+        maxWidth: '500px',
+        minWidth: '300px',
+      }}
+    >
+      <div className="space-y-3">
+        <div className="flex items-center gap-2 text-sm">
+          <Sparkles className="h-4 w-4 text-primary" />
+          <span className="font-medium">AI Suggestion</span>
+        </div>
+
+        {isLoading ? (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground py-4">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Generating completion...
+          </div>
+        ) : completion ? (
+          <>
+            <div className="bg-muted rounded-md p-2 font-mono text-xs max-h-48 overflow-auto">
+              <pre className="whitespace-pre-wrap">{completion}</pre>
+            </div>
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                onClick={() => onAccept(completion)}
+                className="flex-1"
+              >
+                <Check className="h-4 w-4 mr-1" />
+                Accept (Tab)
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={onReject}
+              >
+                <X className="h-4 w-4 mr-1" />
+                Reject (Esc)
+              </Button>
+            </div>
+          </>
+        ) : null}
+      </div>
+    </Card>
+  );
+}