create-stylus-ide 1.0.0

package/frontend/components/setup/SetupGuide.tsx

@@ -0,0 +1,290 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { CheckCircle2, XCircle, Loader2, RefreshCw, Zap, AlertTriangle } from 'lucide-react';
+
+interface SetupStatus {
+  rust: boolean;
+  cargo: boolean;
+  wasmTarget: boolean;
+  cargoStylus: boolean;
+  platform: 'darwin' | 'linux' | 'win32' | 'other';
+  rustVersion?: string;
+  needsUpdate?: boolean;
+}
+
+export function SetupGuide() {
+  const [status, setStatus] = useState<SetupStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const checkSetup = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch('/api/check-setup');
+      if (!response.ok) throw new Error('Failed to check setup');
+      const data = await response.json();
+      setStatus(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    checkSetup();
+  }, []);
+
+  const isSetupComplete = status && status.rust && status.cargo && status.wasmTarget && status.cargoStylus && !status.needsUpdate;
+
+  if (loading) {
+    return (
+      <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <CardTitle className="text-lg md:text-xl">Checking Environment</CardTitle>
+          </CardHeader>
+          <CardContent className="flex items-center justify-center py-8">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <CardTitle className="text-lg md:text-xl">Setup Check Failed</CardTitle>
+            <CardDescription className="text-destructive text-sm">{error}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button onClick={checkSetup} className="w-full">
+              <RefreshCw className="mr-2 h-4 w-4" />
+              Try Again
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (isSetupComplete) {
+    return null;
+  }
+
+  const getInstructions = () => {
+    if (!status) return null;
+
+    const isUnix = status.platform === 'darwin' || status.platform === 'linux';
+    const isWindows = status.platform === 'win32';
+
+    return (
+      <div className="space-y-4 md:space-y-6">
+        {/* Rust Version Warning */}
+        {status.needsUpdate && (
+          <div className="bg-yellow-500/10 border border-yellow-500/20 p-4 rounded-md space-y-3">
+            <div className="flex items-start gap-3">
+              <AlertTriangle className="h-5 w-5 text-yellow-500 shrink-0 mt-0.5" />
+              <div className="space-y-2 flex-1">
+                <h4 className="font-semibold text-sm">Rust Version Too Old</h4>
+                <p className="text-xs md:text-sm text-muted-foreground">
+                  Detected: {status.rustVersion || 'unknown'}
+                  <br />
+                  Required: 1.88.0+ (for cargo-stylus v0.6.3+)
+                </p>
+                <div className="bg-muted p-3 rounded-md">
+                  <code className="text-xs md:text-sm">rustup update stable</code>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Then run <code className="bg-muted px-1 rounded">npm run setup</code> again
+                </p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Quick Setup Section */}
+        <div className="bg-primary/10 border border-primary/20 p-4 rounded-md space-y-3">
+          <div className="flex items-start gap-3">
+            <Zap className="h-5 w-5 text-primary shrink-0 mt-0.5" />
+            <div className="space-y-2 flex-1">
+              <h4 className="font-semibold text-sm md:text-base">Quick Setup (Recommended)</h4>
+              <p className="text-xs md:text-sm text-muted-foreground">
+                Run this command in your terminal to automatically install all requirements:
+              </p>
+              <div className="bg-muted p-3 rounded-md">
+                <code className="text-xs md:text-sm">npm run setup</code>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                This will check your Rust version and guide you through any needed updates
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Manual Setup Instructions */}
+        <details className="space-y-4">
+          <summary className="cursor-pointer text-sm font-semibold text-muted-foreground hover:text-foreground">
+            Or install manually
+          </summary>
+          
+          <div className="space-y-4 pt-4">
+            {status.needsUpdate && (
+              <div className="space-y-2">
+                <h4 className="font-semibold text-sm md:text-base">1. Update Rust</h4>
+                <div className="bg-muted p-3 md:p-4 rounded-md overflow-x-auto">
+                  <code className="text-xs md:text-sm whitespace-pre">
+                    rustup update stable
+                  </code>
+                </div>
+              </div>
+            )}
+
+            {(!status.rust || !status.cargo) && (
+              <div className="space-y-2">
+                <h4 className="font-semibold text-sm md:text-base">
+                  {status.needsUpdate ? '2' : '1'}. Install Rust
+                </h4>
+                {isUnix && (
+                  <div className="bg-muted p-3 md:p-4 rounded-md overflow-x-auto">
+                    <code className="text-xs md:text-sm whitespace-pre">
+                      curl --proto='=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+                    </code>
+                  </div>
+                )}
+                {isWindows && (
+                  <div className="space-y-2">
+                    <p className="text-xs md:text-sm text-muted-foreground">
+                      Download and run the Rust installer from:
+                    </p>
+                    <a 
+                      href="https://rustup.rs" 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      className="text-xs md:text-sm text-primary hover:underline break-all"
+                    >
+                      https://rustup.rs
+                    </a>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {!status.wasmTarget && status.rust && (
+              <div className="space-y-2">
+                <h4 className="font-semibold text-sm md:text-base">
+                  {(!status.rust || status.needsUpdate) ? '3' : '2'}. Add WASM Target
+                </h4>
+                <div className="bg-muted p-3 md:p-4 rounded-md overflow-x-auto">
+                  <code className="text-xs md:text-sm whitespace-pre">
+                    rustup target add wasm32-unknown-unknown
+                  </code>
+                </div>
+              </div>
+            )}
+
+            {!status.cargoStylus && status.cargo && (
+              <div className="space-y-2">
+                <h4 className="font-semibold text-sm md:text-base">
+                  {(!status.rust || status.needsUpdate || !status.wasmTarget) ? '4' : '3'}. Install Cargo Stylus
+                </h4>
+                <div className="bg-muted p-3 md:p-4 rounded-md overflow-x-auto space-y-2">
+                  <code className="text-xs md:text-sm whitespace-pre block">
+                    cargo install cargo-stylus
+                  </code>
+                  <p className="text-xs text-muted-foreground">
+                    If this fails, try: <code className="bg-background px-1 rounded">cargo install cargo-stylus --locked</code>
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {isWindows && (
+              <div className="bg-yellow-500/10 border border-yellow-500/20 p-3 md:p-4 rounded-md">
+                <p className="text-xs md:text-sm text-yellow-600 dark:text-yellow-500">
+                  <strong>Windows:</strong> Run commands in PowerShell after installing Rust. For best experience, use WSL.
+                </p>
+              </div>
+            )}
+
+            {isUnix && (
+              <div className="bg-blue-500/10 border border-blue-500/20 p-3 md:p-4 rounded-md">
+                <p className="text-xs md:text-sm text-blue-600 dark:text-blue-500">
+                  <strong>Note:</strong> Restart terminal or run <code className="text-xs">source $HOME/.cargo/env</code>
+                </p>
+              </div>
+            )}
+          </div>
+        </details>
+      </div>
+    );
+  };
+
+  return (
+    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <Card className="w-full max-w-2xl max-h-[90vh] overflow-auto">
+        <CardHeader>
+          <CardTitle className="text-lg md:text-xl">Setup Required</CardTitle>
+          <CardDescription className="text-xs md:text-sm">
+            Configure your development environment for Arbitrum Stylus
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4 md:space-y-6">
+          {/* Status Checks */}
+          <div className="space-y-2">
+            <h3 className="font-semibold text-sm md:text-base mb-3">Environment Status</h3>
+            <StatusItem label="Rust Compiler" status={status?.rust || false} />
+            {status?.rustVersion && (
+              <div className="ml-7 text-xs text-muted-foreground">
+                Version: {status.rustVersion}
+                {status.needsUpdate && (
+                  <span className="text-yellow-500 ml-2">(Update to 1.88+ required)</span>
+                )}
+              </div>
+            )}
+            <StatusItem label="Cargo Package Manager" status={status?.cargo || false} />
+            <StatusItem label="WASM Target" status={status?.wasmTarget || false} />
+            <StatusItem label="Cargo Stylus" status={status?.cargoStylus || false} />
+          </div>
+
+          {/* Platform Info */}
+          <div className="bg-muted p-3 rounded-md">
+            <p className="text-xs md:text-sm">
+              <span className="font-semibold">Platform:</span>{' '}
+              <span className="capitalize">{status?.platform}</span>
+            </p>
+          </div>
+
+          {/* Instructions */}
+          {getInstructions()}
+
+          {/* Recheck Button */}
+          <Button onClick={checkSetup} className="w-full" size="lg">
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Check Again
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function StatusItem({ label, status }: { label: string; status: boolean }) {
+  return (
+    <div className="flex items-center gap-2">
+      {status ? (
+        <CheckCircle2 className="h-4 w-4 md:h-5 md:w-5 text-green-500 shrink-0" />
+      ) : (
+        <XCircle className="h-4 w-4 md:h-5 md:w-5 text-destructive shrink-0" />
+      )}
+      <span className="text-xs md:text-sm">{label}</span>
+    </div>
+  );
+}

package/frontend/components/ui/KeyboardShortcutHint.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Keyboard, X } from 'lucide-react';
+
+export function KeyboardShortcutHint() {
+    const [showHint, setShowHint] = useState(false);
+    const [hasSeenHint, setHasSeenHint] = useState(false);
+
+    useEffect(() => {
+        // Check if user has seen the hint before
+        const seen = localStorage.getItem('keyboard-hint-seen');
+        if (!seen) {
+            // Show hint after a short delay
+            const timer = setTimeout(() => {
+                setShowHint(true);
+            }, 3000);
+            return () => clearTimeout(timer);
+        } else {
+            setHasSeenHint(true);
+        }
+    }, []);
+
+    const dismissHint = () => {
+        setShowHint(false);
+        setHasSeenHint(true);
+        localStorage.setItem('keyboard-hint-seen', 'true');
+    };
+
+    if (!showHint && !hasSeenHint) return null;
+
+    return (
+        <>
+            {/* Floating hint for first-time users */}
+            {showHint && (
+                <div className="fixed bottom-4 right-4 z-50 bg-card border border-border rounded-lg p-4 shadow-lg max-w-sm">
+                    <div className="flex items-start gap-3">
+                        <Keyboard className="h-5 w-5 text-primary mt-0.5" />
+                        <div className="flex-1">
+                            <h4 className="font-semibold text-sm mb-2">Keyboard Shortcuts</h4>
+                            <div className="text-xs text-muted-foreground space-y-1">
+                                <div><kbd className="px-1.5 py-0.5 bg-muted rounded text-xs">⌘K</kbd> Toggle AI Assistant</div>
+                                <div><kbd className="px-1.5 py-0.5 bg-muted rounded text-xs">⌘`</kbd> Toggle Output Panel</div>
+                                <div><kbd className="px-1.5 py-0.5 bg-muted rounded text-xs">⌘↵</kbd> Compile Code</div>
+                            </div>
+                        </div>
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6 -mt-1 -mr-1"
+                            onClick={dismissHint}
+                        >
+                            <X className="h-4 w-4" />
+                        </Button>
+                    </div>
+                </div>
+            )}
+
+            {/* Persistent keyboard shortcut button */}
+            {hasSeenHint && (
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    className="fixed bottom-10 right-10 z-40 h-10 w-10 rounded-full bg-card border border-border shadow-lg hover:shadow-xl transition-all"
+                    onClick={() => setShowHint(true)}
+                    title="Show keyboard shortcuts"
+                >
+                    <Keyboard className="h-4 w-4" />
+                </Button>
+            )}
+        </>
+    );
+}

package/frontend/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/frontend/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/frontend/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }