insforge 0.3.3 → 1.3.0

package/frontend/src/components/CodeEditor.tsx

@@ -0,0 +1,92 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { sql } from '@codemirror/lang-sql';
+import { javascript } from '@codemirror/lang-javascript';
+import { EditorView } from '@codemirror/view';
+import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode';
+import { useTheme } from '@/lib/contexts/ThemeContext';
+
+interface CodeEditorProps {
+  code?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  placeholder?: string;
+  editable?: boolean;
+  language?: 'sql' | 'javascript';
+  className?: string;
+}
+
+export function CodeEditor({
+  code,
+  value,
+  onChange,
+  placeholder,
+  editable = false,
+  language = 'javascript',
+  className = '',
+}: CodeEditorProps) {
+  // Use the theme context
+  const { resolvedTheme } = useTheme();
+
+  // Support both 'code' (read-only) and 'value' (editable) props
+  const displayValue = editable ? value || '' : code || '';
+
+  // Select language extension
+  const extensions = [language === 'sql' ? sql() : javascript(), EditorView.lineWrapping];
+
+  // Custom theme extension to override background and make it transparent
+  const customTheme = EditorView.theme(
+    {
+      '&': {
+        backgroundColor: 'transparent',
+        height: '100%',
+      },
+      '.cm-gutters': {
+        backgroundColor: 'transparent',
+        border: 'none',
+      },
+      '.cm-placeholder': {
+        color: resolvedTheme === 'dark' ? '#737373' : '#9ca3af',
+      },
+    },
+    { dark: resolvedTheme === 'dark' }
+  );
+
+  // Select base theme based on current theme
+  const baseTheme = resolvedTheme === 'dark' ? vscodeDark : vscodeLight;
+
+  return (
+    <div className={`h-full overflow-auto ${className}`}>
+      <CodeMirror
+        value={displayValue}
+        height="100%"
+        theme={[baseTheme, customTheme]}
+        extensions={extensions}
+        onChange={onChange}
+        editable={editable}
+        readOnly={!editable}
+        basicSetup={{
+          lineNumbers: true,
+          highlightActiveLineGutter: true,
+          highlightActiveLine: true,
+          foldGutter: false,
+          dropCursor: true,
+          allowMultipleSelections: true,
+          indentOnInput: true,
+          bracketMatching: true,
+          closeBrackets: true,
+          autocompletion: true,
+          rectangularSelection: true,
+          crosshairCursor: true,
+          highlightSelectionMatches: true,
+          closeBracketsKeymap: true,
+          searchKeymap: true,
+          foldKeymap: false,
+          completionKeymap: true,
+          lintKeymap: true,
+        }}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+}

package/frontend/src/components/ConfirmDialog.tsx

@@ -72,7 +72,7 @@ export function ConfirmDialog({
         <AlertDialogFooter className="p-6 flex-row justify-end gap-3 border-t border-zinc-200 dark:border-neutral-700">
           <AlertDialogCancel
             disabled={isLoading}
-            className="h-9 w-30 px-3 py-2 text-sm font-medium bg-white border border-zinc-200 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)] rounded hover:bg-zinc-50 dark:bg-neutral-600 dark:border-neutral-600 dark:text-white dark:hover:bg-neutral-700"
+            className="h-9 w-30 px-3 py-2 text-sm font-medium bg-white border border-zinc-200 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1)] text-zinc-950 rounded hover:bg-zinc-50 dark:bg-neutral-600 dark:border-neutral-600 dark:text-white dark:hover:bg-neutral-700"
           >
             {cancelText}
           </AlertDialogCancel>

package/frontend/src/components/ConnectCTA.tsx

@@ -0,0 +1,38 @@
+import { useNavigate } from 'react-router-dom';
+import { useMcpUsage } from '@/features/logs/hooks/useMcpUsage';
+import { isInsForgeCloudProject } from '@/lib/utils/utils';
+import { postMessageToParent } from '@/lib/utils/cloudMessaging';
+
+interface ConnectCTAProps {
+  className?: string;
+  fallback?: string;
+}
+
+export function ConnectCTA({ className, fallback }: ConnectCTAProps) {
+  const navigate = useNavigate();
+  const { hasCompletedOnboarding } = useMcpUsage();
+
+  if (hasCompletedOnboarding) {
+    return fallback;
+  }
+
+  const handleConnect = () => {
+    if (isInsForgeCloudProject()) {
+      postMessageToParent({ type: 'SHOW_ONBOARDING_OVERLAY' });
+    } else {
+      void navigate('/dashboard/onboard');
+    }
+  };
+
+  return (
+    <span className={className}>
+      <button
+        onClick={handleConnect}
+        className="text-chart-blue-dark dark:text-emerald-300 hover:no-underline focus:outline-none"
+      >
+        Connect
+      </button>{' '}
+      to your coding agent to get started.
+    </span>
+  );
+}

package/frontend/src/components/CopyButton.tsx

@@ -1,15 +1,13 @@
-import { useState } from 'react';
-import { Copy } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { Copy, CheckCircle } from 'lucide-react';
 import { Button } from '@/components/radix/Button';
 import { cn } from '@/lib/utils/utils';
-import CheckedIcon from '@/assets/icons/checked.svg?react';
 
 interface CopyButtonProps {
   text: string;
   onCopy?: (text: string) => void;
   className?: string;
-  variant?: 'ghost' | 'outline' | 'default';
-  size?: 'sm' | 'default' | 'lg' | 'icon';
+  variant?: 'primary' | 'secondary';
   showText?: boolean;
   copiedText?: string;
   copyText?: string;
@@ -20,14 +18,23 @@ export function CopyButton({
   text,
   onCopy,
   className,
-  variant = 'ghost',
-  size = 'sm',
+  variant = 'primary',
   showText = true,
   copiedText = 'Copied',
   copyText = 'Copy',
   disabled = false,
 }: CopyButtonProps) {
   const [copied, setCopied] = useState(false);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
 
   const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
@@ -37,8 +44,19 @@ export function CopyButton({
 
     try {
       await navigator.clipboard.writeText(text);
+
+      // Clear existing timer if any
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+
       setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
+
+      // Set new timer
+      timerRef.current = setTimeout(() => {
+        setCopied(false);
+        timerRef.current = null;
+      }, 3000);
 
       if (onCopy) {
         onCopy(text);
@@ -49,21 +67,40 @@ export function CopyButton({
     }
   };
 
+  const isPrimary = variant === 'primary';
+
   return (
     <Button
-      variant={variant}
-      size={size}
       onClick={(e) => void handleCopy(e)}
       disabled={disabled}
-      data-copied={copied}
       className={cn(
-        'px-3 w-fit h-8 rounded-md bg-zinc-50 dark:bg-neutral-700 hover:bg-bg-gray-hover dark:hover:bg-neutral-700 border-border-gray dark:border-neutral-700 border text-zinc-950 dark:text-white shadow gap-1.5 transition-all duration-200',
-        'data-[copied=true]:bg-transparent data-[copied=true]:cursor-default data-[copied=true]:shadow-none data-[copied=true]:border-none data-[copied=true]:hover:bg-transparent',
+        'h-8 px-3 gap-2 text-sm font-medium rounded',
+        // Icon-only mode (when showText is false)
+        !showText && 'w-8 px-0 justify-center',
+        // Primary variant (black/emerald)
+        isPrimary && !copied && 'bg-black text-white hover:bg-gray-800',
+        isPrimary && !copied && 'dark:bg-emerald-300 dark:text-black dark:hover:bg-emerald-400',
+        // Secondary variant (light gray/neutral)
+        !isPrimary &&
+          !copied &&
+          'bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-neutral-700 dark:text-white dark:hover:bg-neutral-600',
+        // Copied state (same for both variants) - stone-600
+        copied && 'bg-stone-600 text-white cursor-default hover:bg-stone-600',
+        copied && 'dark:bg-stone-600 dark:text-white dark:hover:bg-stone-600',
         className
       )}
     >
-      {copied ? <CheckedIcon className="w-4 h-4" /> : <Copy className="w-4 h-4 " />}
-      {showText && <span className="font-medium text-sm">{copied ? copiedText : copyText}</span>}
+      {copied ? (
+        <>
+          <CheckCircle className="w-4 h-4" />
+          {showText && <span>{copiedText}</span>}
+        </>
+      ) : (
+        <>
+          <Copy className="w-4 h-4" />
+          {showText && <span>{copyText}</span>}
+        </>
+      )}
     </Button>
   );
 }

package/frontend/src/components/ErrorState.tsx

@@ -1,6 +1,5 @@
 import { AlertCircle } from 'lucide-react';
-import { Button } from '@/components/radix/Button';
-import { Alert, AlertDescription, AlertTitle } from '@/components/radix/Alert';
+import { Alert, AlertTitle, AlertDescription, Button } from '@/components';
 import { cn } from '@/lib/utils/utils';
 
 interface ErrorStateProps {

package/frontend/src/components/FeatureSidebar.tsx

@@ -1,15 +1,15 @@
 import { useState, ReactNode } from 'react';
 import { Plus, LucideIcon } from 'lucide-react';
-import { ScrollArea } from '@/components/radix/ScrollArea';
-import { Button } from '@/components/radix/Button';
-import { SearchInput } from '@/components/SearchInput';
-import { FeatureSidebarItem } from '@/components/FeatureSidebarItem';
 import {
+  ScrollArea,
+  Button,
+  SearchInput,
+  FeatureSidebarItem,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/components/radix/Tooltip';
+} from '@/components';
 
 interface FeatureSidebarProps {
   title: string;
@@ -101,7 +101,7 @@ export function FeatureSidebar({
       <ScrollArea className="flex-1 px-3 pb-3 dark:bg-neutral-800">
         {loading ? (
           renderSkeleton()
-        ) : filteredItems.length === 0 ? (
+        ) : !filteredItems.length ? (
           renderEmptyState(searchTerm)
         ) : (
           <div className="space-y-1 dark:text-zinc-300">

package/frontend/src/components/FeatureSidebarItem.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { Pencil, Trash2, MoreVertical, LucideIcon } from 'lucide-react';
-import { Button } from '@/components/radix/Button';
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/radix/DropdownMenu';
+} from '@/components';
 import { cn } from '@/lib/utils/utils';
 
 interface FeatureSidebarItemProps {

package/frontend/src/components/JsonHighlight.tsx

@@ -1,11 +1,14 @@
 import { CopyButton } from './CopyButton';
+import { cn } from '@/lib/utils/utils';
 
 interface JsonHighlightProps {
   json: string;
+  textColor?: string;
+  className?: string;
 }
 
-export function JsonHighlight({ json }: JsonHighlightProps) {
-  const highlightJson = (str: string) => {
+export function JsonHighlight({ json, textColor, className }: JsonHighlightProps) {
+  const highlightJson = (str: string, textColor?: string) => {
     // Tokenize JSON string
     const tokens = str.split(/("(?:[^"\\]|\\.)*")|(\s+)|([:,{}[\]])/g).filter(Boolean);
 
@@ -23,13 +26,13 @@ export function JsonHighlight({ json }: JsonHighlightProps) {
 
         if (isKey) {
           return (
-            <span key={index} className="text-blue-600 dark:text-blue-400">
+            <span key={index} className={cn('text-blue-600 dark:text-blue-400', textColor)}>
               {token}
             </span>
           );
         } else {
           return (
-            <span key={index} className="text-green-600 dark:text-green-400">
+            <span key={index} className={cn('text-green-600 dark:text-green-400', textColor)}>
               {token}
             </span>
           );
@@ -39,23 +42,32 @@ export function JsonHighlight({ json }: JsonHighlightProps) {
       // Punctuation
       if (/^[:,{}[\]]$/.test(token)) {
         return (
-          <span key={index} className="text-gray-600 dark:text-gray-400">
+          <span key={index} className={cn('text-gray-600 dark:text-gray-400', textColor)}>
             {token}
           </span>
         );
       }
 
       // Whitespace and other
-      return <span key={index}>{token}</span>;
+      return (
+        <span key={index} className={textColor}>
+          {token}
+        </span>
+      );
     });
   };
 
   return (
     <div className="relative">
-      <pre className="font-mono text-sm leading-6 whitespace-pre overflow-x-auto bg-gray-50 dark:bg-neutral-900 dark:text-white rounded-md py-4 px-6 pr-16">
-        {highlightJson(json)}
+      <pre
+        className={cn(
+          'font-mono text-sm leading-6 whitespace-pre overflow-x-auto bg-gray-50 dark:bg-neutral-900 dark:text-white rounded-md py-4 px-6 pr-16',
+          className
+        )}
+      >
+        {highlightJson(json, textColor)}
       </pre>
-      <CopyButton text={json} className="absolute top-4 right-4" />
+      <CopyButton variant="primary" text={json} className="absolute top-3.5 right-3.5 pl-2" />
     </div>
   );
 }

package/frontend/src/components/ProjectInfoModal.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useState } from 'react';
+import { Info } from 'lucide-react';
+import { CopyButton } from '@/components';
+import { cn, getBackendUrl } from '@/lib/utils/utils';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/radix/Dialog';
+import { useApiKey } from '@/lib/hooks/useMetadata';
+
+interface ProjectInfoModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function ProjectInfoModal({ open, onClose }: ProjectInfoModalProps) {
+  const [version, setVersion] = useState<string>('');
+  const [isVersionLoading, setIsVersionLoading] = useState(true);
+
+  const { apiKey, isLoading: isApiKeyLoading } = useApiKey();
+
+  // Get project URL from current hostname
+  const projectUrl = window.location.origin;
+
+  // Fetch version on mount
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    setIsVersionLoading(true);
+    const backendUrl = getBackendUrl();
+
+    fetch(`${backendUrl}/api/health`)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.version) {
+          setVersion(`v${data.version}`);
+        }
+      })
+      .catch((err) => {
+        console.error('Failed to fetch version:', err);
+      })
+      .finally(() => {
+        setIsVersionLoading(false);
+      });
+  }, [open]);
+
+  // Masked API key display
+  const maskedApiKey = apiKey ? `ik_${'•'.repeat(32)}` : '';
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="max-w-lg p-0 bg-white dark:bg-neutral-800">
+        {/* Header */}
+        <DialogHeader className="px-6 pt-6 pb-4 border-b border-gray-200 dark:border-neutral-700">
+          <DialogTitle className="flex items-center gap-2 text-base font-semibold text-gray-900 dark:text-white">
+            <Info className="w-5 h-5" />
+            Project Information
+          </DialogTitle>
+        </DialogHeader>
+
+        {/* Content */}
+        <div className="px-6 py-5 flex flex-col gap-5">
+          {/* Project URL */}
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium text-gray-700 dark:text-neutral-300">
+              Project URL
+            </label>
+            <div className="flex items-center justify-between bg-gray-50 dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 rounded-lg px-3 py-2">
+              <span className="text-sm text-gray-900 dark:text-white font-mono truncate pr-2">
+                {projectUrl}
+              </span>
+              <CopyButton
+                text={projectUrl}
+                showText={false}
+                className="h-6 w-6 p-1 min-w-0 shrink-0 text-black bg-white dark:text-white dark:bg-neutral-700"
+              />
+            </div>
+          </div>
+
+          {/* API Key */}
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium text-gray-700 dark:text-neutral-300">
+              API Key
+            </label>
+            <div className="flex flex-col gap-1">
+              <div
+                className={cn(
+                  'flex items-center justify-between bg-gray-50 dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 rounded-lg px-3 py-2',
+                  isApiKeyLoading && 'animate-pulse'
+                )}
+              >
+                <span className="text-sm text-gray-900 dark:text-white font-mono">
+                  {isApiKeyLoading ? '•'.repeat(35) : maskedApiKey || 'Not available'}
+                </span>
+                {!isApiKeyLoading && apiKey && (
+                  <CopyButton
+                    text={apiKey}
+                    showText={false}
+                    className="h-6 w-6 p-1 min-w-0 shrink-0 text-black bg-white dark:text-white dark:bg-neutral-700"
+                  />
+                )}
+              </div>
+              <p className="text-xs text-gray-500 dark:text-neutral-500">
+                This key has full access control to your project and should be kept secure.
+              </p>
+            </div>
+          </div>
+
+          {/* Version */}
+          <div className="flex flex-col gap-1.5">
+            <label className="text-sm font-medium text-gray-700 dark:text-neutral-300">
+              Version
+            </label>
+            <div
+              className={cn(
+                'bg-gray-50 dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 rounded-lg px-3 py-2',
+                isVersionLoading && 'animate-pulse'
+              )}
+            >
+              <span className="text-sm text-gray-900 dark:text-white">
+                {isVersionLoading ? 'Loading...' : version || 'Unknown'}
+              </span>
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/components/PromptDialog.tsx

@@ -1,5 +1,4 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/radix/Dialog';
-import { CopyButton } from '@/components/CopyButton';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, CopyButton } from '@/components';
 import { cn } from '@/lib/utils/utils';
 
 interface PromptDialogProps {
@@ -52,8 +51,6 @@ export function PromptDialog({
               {additionalAction}
               <CopyButton
                 text={prompt}
-                variant="default"
-                size="default"
                 showText={true}
                 className="h-9 pl-2 pr-3 py-2 text-sm font-medium"
                 copyText="Copy Prompt"

package/frontend/src/components/SearchInput.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Search, X } from 'lucide-react';
-import { Input } from '@/components/radix/Input';
-import { Button } from '@/components/radix/Button';
+import { Input, Button } from '@/components';
 
 interface SearchInputProps {
   value: string;

package/frontend/src/components/Stepper.tsx

@@ -137,3 +137,56 @@ export function LinearStepper({
     </div>
   );
 }
+
+interface VerticalStepperProps {
+  currentStep: number;
+  stepLabels: readonly string[];
+  className?: string;
+}
+
+export function VerticalStepper({ currentStep, stepLabels, className }: VerticalStepperProps) {
+  return (
+    <div className={cn('flex flex-col gap-0', className)}>
+      {stepLabels.map((label, index) => {
+        const stepNumber = index + 1;
+        const isCurrent = stepNumber === currentStep;
+        const isLast = index === stepLabels.length - 1;
+
+        return (
+          <div key={stepNumber} className="flex flex-row items-start gap-3">
+            {/* Step indicator column */}
+            <div className="flex flex-col items-center">
+              {/* Circle with number */}
+              <div
+                className={cn(
+                  'w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium transition-colors',
+                  isCurrent
+                    ? 'bg-zinc-950 dark:bg-white text-white dark:text-black'
+                    : 'bg-zinc-200 dark:bg-neutral-700 text-zinc-500 dark:text-neutral-400'
+                )}
+              >
+                {stepNumber}
+              </div>
+              {/* Connecting line */}
+              {!isLast && <div className="w-0.5 h-20 bg-zinc-200 dark:bg-neutral-700" />}
+            </div>
+
+            {/* Step label */}
+            <div className={cn('pt-2', !isLast && 'pb-20')}>
+              <span
+                className={cn(
+                  'text-base font-medium transition-colors',
+                  isCurrent
+                    ? 'text-zinc-950 dark:text-white'
+                    : 'text-zinc-500 dark:text-neutral-400'
+                )}
+              >
+                {label}
+              </span>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/frontend/src/components/ThemeToggle.tsx

@@ -1,12 +1,12 @@
 import { Sun, Moon, Monitor } from 'lucide-react';
 import { useTheme } from '@/lib/contexts/ThemeContext';
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/radix/DropdownMenu';
-import { Button } from '@/components/radix/Button';
+} from '@/components';
 
 export function ThemeToggle() {
   const { theme, resolvedTheme, setTheme } = useTheme();
@@ -17,7 +17,7 @@ export function ThemeToggle() {
         <Button
           variant="ghost"
           size="icon"
-          className="h-9 w-9 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
+          className="h-9 w-9 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-700"
           aria-label="Toggle theme"
         >
           {resolvedTheme === 'light' ? (