Optimize code editing

package.json

@@ -47,8 +47,10 @@
     "embla-carousel-react": "8.5.1",
     "input-otp": "1.4.1",
     "lucide-react": "^0.454.0",
+    "nanoid": "^5.1.5",
     "next": "15.2.4",
     "next-themes": "^0.4.4",
+    "posthog-js": "^1.249.2",
     "react": "^19",
     "react-day-picker": "8.10.1",
     "react-dom": "^19",

pnpm-lock.yaml

@@ -122,12 +122,18 @@ importers:
       lucide-react:
         specifier: ^0.454.0
         version: 0.454.0([email protected])
+      nanoid:
+        specifier: ^5.1.5
+        version: 5.1.5
       next:
         specifier: 15.2.4
         version: 15.2.4([email protected]([email protected]))([email protected])
       next-themes:
         specifier: ^0.4.4
         version: 0.4.6([email protected]([email protected]))([email protected])
+      posthog-js:
+        specifier: ^1.249.2
+        version: 1.249.2
       react:
         specifier: ^19
         version: 19.1.0
@@ -1400,6 +1406,9 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  [email protected]:
+    resolution: {integrity: sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==}
+
   [email protected]:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -1521,6 +1530,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
+
   [email protected]:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -1656,6 +1668,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  [email protected]:
+    resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   [email protected]:
     resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
@@ -1776,6 +1793,20 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  [email protected]:
+    resolution: {integrity: sha512-OMXCO/IfcJBjYTuebVynMbp8Kq329yKEQSCAnkqLmi8W2Bt5bi7S5xxMwDM3Pm7818Uh0C40XMG3rAtYozId6Q==}
+    peerDependencies:
+      '@rrweb/types': 2.0.0-alpha.17
+      rrweb-snapshot: 2.0.0-alpha.17
+    peerDependenciesMeta:
+      '@rrweb/types':
+        optional: true
+      rrweb-snapshot:
+        optional: true
+
+  [email protected]:
+    resolution: {integrity: sha512-1nMfdFjucm5hKvq0IClqZwK4FJkGXhRrQstOQ3P4vp8HxKrJEMFcY6RdBRVTdfQS/UlnX6gfbPuTvaqx/bDoeQ==}
+
   [email protected]:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -2049,6 +2080,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
+
   [email protected]:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -3243,6 +3277,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       path-key: 3.1.1
@@ -3347,6 +3383,8 @@ snapshots:
     dependencies:
       reusify: 1.1.0
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       to-regex-range: 5.0.1
@@ -3463,6 +3501,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]([email protected]([email protected]))([email protected]):
     dependencies:
       react: 19.1.0
@@ -3565,6 +3605,15 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  [email protected]:
+    dependencies:
+      core-js: 3.42.0
+      fflate: 0.4.8
+      preact: 10.26.8
+      web-vitals: 4.2.4
+
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       loose-envify: 1.4.0
@@ -3878,6 +3927,8 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       isexe: 2.0.0

src/app/layout.tsx

@@ -6,6 +6,7 @@ import { ThemeProvider } from "@/components/theme-provider"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import { Toaster } from "sonner"
 import { ModelProvider } from "@/lib/contexts/model-context"
+import { PostHogProvider } from './providers'
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -22,12 +23,14 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className} suppressHydrationWarning>
-        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
-          <ModelProvider>
-            <TooltipProvider>{children}</TooltipProvider>
-            <Toaster richColors />
-          </ModelProvider>
-        </ThemeProvider>
+        <PostHogProvider>
+          <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
+            <ModelProvider>
+              <TooltipProvider>{children}</TooltipProvider>
+              <Toaster richColors />
+            </ModelProvider>
+          </ThemeProvider>
+        </PostHogProvider>
       </body>
     </html>
   )

src/app/providers.tsx

@@ -0,0 +1,21 @@
+// app/providers.tsx
+'use client'
+
+import posthog from 'posthog-js'
+import { PostHogProvider as PHProvider } from 'posthog-js/react'
+import { useEffect } from 'react'
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+    useEffect(() => {
+      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || '', {
+        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+        defaults: '2025-05-24',
+      })
+  }, [])
+
+  return (
+    <PHProvider client={posthog}>
+      {children}
+    </PHProvider>
+  )
+}

src/components/app-container.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useState, useRef, useEffect } from "react"
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@/components/ui/resizable"
 import { CodeEditor } from "./code-editor"
 import { Preview } from "./preview"
 import { PromptInput } from "./prompt-input"
@@ -187,6 +188,30 @@ export function AppContainer() {
     latestVersionIdRef.current = null;
   }
 
+  const handleManualCodeEdit = (newCode: string) => {
+    setCode(newCode);
+    
+    if (currentVersionId) {
+      updateVersionWithCode(newCode);
+    }
+  };
+
+  const updateVersionWithCode = (editedCode: string) => {    // Get existing versions
+    const storedVersions = localStorage.getItem('novita-versions');
+    if (!storedVersions || !currentVersionId) return;
+    
+    let versions: Version[] = JSON.parse(storedVersions);
+    
+    const updatedVersions = versions.map(version => {
+      if (version.id === currentVersionId) {
+        return { ...version, code: editedCode };
+      }
+      return version;
+    });
+    
+    localStorage.setItem('novita-versions', JSON.stringify(updatedVersions));
+  };
+
   return (
     <div className="flex flex-col h-screen bg-novita-dark text-white">
       <Header 
@@ -195,32 +220,57 @@ export function AppContainer() {
         onClearAll={handleClearAll}
       />
       <div className="flex flex-1 overflow-hidden relative">
-        <div className="w-1/3 border-r border-novita-gray/20 flex flex-col relative">
-          <CodeEditor code={code} isLoading={loading} />
+        <ResizablePanelGroup direction="horizontal" className="h-full">
+          <ResizablePanel 
+            defaultSize={33} 
+            minSize={20} 
+            maxSize={60}
+            className="flex flex-col relative"
+          >
+            <CodeEditor 
+              code={code} 
+              isLoading={loading} 
+              onCodeChange={handleManualCodeEdit}
+            />
+            
+            <AuthErrorPopup 
+              show={showAuthError} 
+              onClose={() => setShowAuthError(false)} 
+            />
+            
+            <PromptInput 
+              onSubmit={handlePromptSubmit} 
+              isLoading={loading} 
+              initialPrompt={prompt}
+              onImproveError={setImproveError}
+            />
+          </ResizablePanel>
           
-          <AuthErrorPopup 
-            show={showAuthError} 
-            onClose={() => setShowAuthError(false)} 
-          />
+          <ResizableHandle 
+            withHandle={false}
+            className="w-1 bg-novita-gray/20 hover:bg-novita-gray/40 transition-colors duration-200 relative group cursor-col-resize"
+          >
+            <div className="absolute inset-y-0 left-1/2 w-3 -translate-x-1/2 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+              <div className="w-0.5 h-8 bg-novita-gray/60 rounded-full" />
+            </div>
+          </ResizableHandle>
           
-          <PromptInput 
-            onSubmit={handlePromptSubmit} 
-            isLoading={loading} 
-            initialPrompt={prompt}
-            onImproveError={setImproveError}
-          />
-        </div>
-        <div className="w-2/3">
-          <Preview 
-            ref={previewRef}
-            initialHtml={code} 
-            onCodeChange={handleCodeChange} 
-            onLoadingChange={handleLoadingChange}
-            onAuthErrorChange={setShowAuthError}
-            onErrorChange={setGenerationError}
-            currentVersion={currentVersionId || undefined}
-          />
-        </div>
+          <ResizablePanel 
+            defaultSize={67} 
+            minSize={40}
+            className="flex flex-col"
+          >
+            <Preview 
+              ref={previewRef}
+              initialHtml={code} 
+              onCodeChange={handleCodeChange} 
+              onLoadingChange={handleLoadingChange}
+              onAuthErrorChange={setShowAuthError}
+              onErrorChange={setGenerationError}
+              currentVersion={currentVersionId || undefined}
+            />
+          </ResizablePanel>
+        </ResizablePanelGroup>
         
         {initialLoading && (
           <div className="absolute inset-0 bg-novita-dark/80 backdrop-blur-sm flex items-center justify-center z-[999]">

src/components/code-editor.tsx

@@ -1,51 +1,123 @@
 "use client"
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
+import { debounce, highlightHTML } from "@/lib/utils";
 
 interface CodeEditorProps {
   code: string;
   isLoading?: boolean;
+  onCodeChange?: (code: string) => void;
 }
 
-export function CodeEditor({ code, isLoading = false }: CodeEditorProps) {
+export function CodeEditor({ code, isLoading = false, onCodeChange }: CodeEditorProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const highlightRef = useRef<HTMLDivElement>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
+  const [localCode, setLocalCode] = useState(code);
 
-  // Check if user is near bottom when scrolling
-  const handleScroll = () => {
-    if (!containerRef.current) return;
-    
-    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-    // Consider "at bottom" if within 30px of the bottom
+  const debouncedSave = useCallback(
+    debounce((newCode: string) => {
+      if (onCodeChange) {
+        onCodeChange(newCode);
+      }
+    }, 1000),
+    [onCodeChange]
+  );
+
+  useEffect(() => {
+    setLocalCode(code);
+  }, [code]);
+
+  const handleCodeChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newCode = e.target.value;
+    setLocalCode(newCode);
+    debouncedSave(newCode);
+  };
+
+  // Sync scroll between textarea and highlight
+  const handleScroll = (e: React.UIEvent<HTMLTextAreaElement>) => {
+    if (highlightRef.current && textareaRef.current) {
+      highlightRef.current.scrollTop = textareaRef.current.scrollTop;
+      highlightRef.current.scrollLeft = textareaRef.current.scrollLeft;
+    }
+
+    const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
     const isNearBottom = scrollHeight - scrollTop - clientHeight < 30;
     setIsAtBottom(isNearBottom);
   };
 
   useEffect(() => {
-    const container = containerRef.current;
-    if (container) {
-      container.addEventListener('scroll', handleScroll);
-      return () => container.removeEventListener('scroll', handleScroll);
+    if (isAtBottom && textareaRef.current && document.activeElement !== textareaRef.current) {
+      textareaRef.current.scrollTop = textareaRef.current.scrollHeight;
+      if (highlightRef.current) {
+        highlightRef.current.scrollTop = highlightRef.current.scrollHeight;
+      }
     }
-  }, []);
+  }, [localCode, isLoading, isAtBottom]);
 
-  useEffect(() => {
-    // Only auto-scroll if user was already at the bottom
-    if (isAtBottom && containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+  // Handle tab key for indentation
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      const textarea = e.currentTarget;
+      const start = textarea.selectionStart;
+      const end = textarea.selectionEnd;
+      
+      const newValue = localCode.substring(0, start) + '  ' + localCode.substring(end);
+      setLocalCode(newValue);
+      debouncedSave(newValue);
+      
+      setTimeout(() => {
+        textarea.selectionStart = textarea.selectionEnd = start + 2;
+      }, 0);
     }
-  }, [code, isLoading, isAtBottom]);
+  };
+
+  const highlightedCode = highlightHTML(localCode);
 
   return (
-    <div className="flex-1 overflow-auto p-4">
+    <div className="flex-1 overflow-hidden p-4 pr-2">
       <div 
         ref={containerRef} 
-        className="code-area p-4 rounded-md font-mono text-sm h-full overflow-auto border border-novita-gray/20"
+        className="code-area rounded-md font-mono text-sm h-full border border-novita-gray/20 relative overflow-hidden"
       >
-        <pre className="whitespace-pre-wrap">
-          {code}
-          {isLoading && <span className="inline-block h-4 w-2 bg-white/70 animate-pulse"></span>}
-        </pre>
+        <div className="relative h-full">
+          {/* Syntax highlighted background - always visible */}
+          <div 
+            ref={highlightRef}
+            className="absolute inset-0 overflow-auto p-4 pointer-events-none whitespace-pre-wrap font-mono text-sm leading-relaxed"
+            style={{ 
+              fontSize: '0.875rem',
+              lineHeight: '1.5',
+              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace',
+              color: '#d4d4d4'
+            }}
+            dangerouslySetInnerHTML={{ __html: highlightedCode + '\n' }}
+          />
+
+          {/* Editable textarea - always transparent */}
+          <textarea
+            ref={textareaRef}
+            value={localCode}
+            onChange={handleCodeChange}
+            onScroll={handleScroll}
+            onKeyDown={handleKeyDown}
+            disabled={isLoading}
+            className="absolute inset-0 w-full h-full bg-transparent text-transparent caret-white resize-none outline-none whitespace-pre-wrap font-mono text-sm leading-relaxed p-4 selection:bg-blue-500/30"
+            style={{ 
+              fontSize: '0.875rem',
+              lineHeight: '1.5',
+              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
+            }}
+            placeholder="Your generated code will appear here..."
+            spellCheck={false}
+          />
+        </div>
+        
+        {isLoading && (
+          <span className="absolute bottom-4 right-4 inline-block h-4 w-2 bg-white/70 animate-pulse z-10"></span>
+        )}
       </div>
     </div>
   )

src/components/preview.tsx

@@ -2,11 +2,14 @@
 
 import { useState, forwardRef, useImperativeHandle, useEffect, useRef } from "react"
 import { DEFAULT_HTML } from "@/lib/constants"
-import { PreviewRef, Version } from "@/lib/types"
+import { PreviewRef } from "@/lib/types"
 import { MinimizeIcon, MaximizeIcon, DownloadIcon, RefreshIcon } from "./ui/icons"
 import { useModel } from "@/lib/contexts/model-context"
-import { Loader2 } from "lucide-react"
+import { Loader2, Share2 } from "lucide-react"
 import { cn } from "@/lib/utils"
+import { generateShareLink } from "@/lib/sharelink"
+import { ShareDialog } from "./share-dialog"
+import posthog from 'posthog-js'
 
 interface PreviewProps {
   initialHtml?: string;
@@ -28,6 +31,9 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
   const [error, setError] = useState<string | null>(null);
   const [showAuthError, setShowAuthError] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
+  const [isSharing, setIsSharing] = useState(false);
+  const [shareDialogOpen, setShareDialogOpen] = useState(false);
+  const [shareUrl, setShareUrl] = useState<string>("");
   const { selectedModelId } = useModel();
   const renderCount = useRef(0);
   const headUpdated = useRef(false);
@@ -132,6 +138,8 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
       // Only include html in the request if it's not DEFAULT_HTML
       const isDefaultHtml = initialHtml === DEFAULT_HTML;
 
+      posthog.capture("Generate code", {"model": selectedModelId});
+
       const response = await fetch('/api/generate-code', {
         method: 'POST',
         headers: {
@@ -147,6 +155,7 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
       });
 
       if (!response.ok) {
+        posthog.capture("Generate code", {"type": "failed", "model": selectedModelId, "status": response.status});
         // Check specifically for 401 error (authentication required)
         if (response.status === 401 || response.status === 403) {
           try {
@@ -244,6 +253,7 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
       }
     } catch (err) {
       const errorMessage = (err as Error).message || 'An error occurred while generating code';
+      posthog.capture("Generate code", {"type": "failed", "model": selectedModelId, "error": errorMessage});
       setError(errorMessage);
       if (onErrorChange) {
         onErrorChange(errorMessage);
@@ -257,8 +267,40 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
     }
   };
 
+  const handleShare = async () => {
+    if (!html) {
+      setError("No HTML content to share");
+      return;
+    }
+
+    setIsSharing(true);
+    setError(null);
+
+    try {
+      const uploadedUrl = await generateShareLink(html);
+      setShareUrl(uploadedUrl);
+      setShareDialogOpen(true);
+    } catch (err) {
+      const errorMessage = (err as Error).message || 'Failed to share HTML';
+      setError(errorMessage);
+      if (onErrorChange) {
+        onErrorChange(errorMessage);
+      }
+      console.error('Error sharing HTML:', err);
+    } finally {
+      setIsSharing(false);
+    }
+  };
+
+  const handleShareDialogClose = (open: boolean) => {
+    setShareDialogOpen(open);
+    if (!open) {
+      setShareUrl("");
+    }
+  };
+
   return (
-    <div className={`${isFullscreen ? 'fixed inset-0 z-10 bg-novita-dark' : 'h-full'} p-4`}>
+    <div className={`${isFullscreen ? 'fixed inset-0 z-10 bg-novita-dark' : 'h-full'} p-4 pl-2`}>
       { isPartialGenerating && (
         <div className="w-full bg-slate-50 border-b border-slate-200 py-2 px-4">
           <div className="container mx-auto flex items-center justify-center">
@@ -271,6 +313,21 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
       )}
       <div className="bg-white text-black h-full overflow-hidden relative isolation-auto">
         <div className="absolute top-3 right-3 flex gap-2 z-[100]">
+          <button
+            onClick={handleShare}
+            disabled={isSharing || !html}
+            className="bg-novita-gray/90 text-white p-2 px-3 text-xs rounded-md shadow-md hover:bg-novita-gray/70 transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+            aria-label="Share Link"
+            title="Share Link"
+          >
+            {isSharing ? (
+              <Loader2 className="h-3 w-3 mr-2 animate-spin" />
+            ) : (
+              <Share2 className="h-3 w-3 mr-2" />
+            )}
+            {isSharing ? 'Sharing...' : 'Share Link'}
+          </button>
+
           <button
             onClick={refreshPreview}
             className="bg-novita-gray/90 text-white p-2 rounded-md shadow-md hover:bg-novita-gray/70 transition-colors flex items-center justify-center"
@@ -305,6 +362,12 @@ export const Preview = forwardRef<PreviewRef, PreviewProps>(function Preview(
           title="Preview"
         />
       </div>
+
+      <ShareDialog 
+        open={shareDialogOpen}
+        onOpenChange={handleShareDialogClose}
+        shareUrl={shareUrl}
+      />
     </div>
   )
 });

src/components/prompt-input.tsx

@@ -11,6 +11,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { FullscreenToggle } from "./ui/fullscreen-toggle"
 import { AuthErrorPopup } from "./auth-error-popup"
 import { getInferenceToken } from "@/lib/auth"
+import posthog from 'posthog-js'
 
 interface PromptInputProps {
   onSubmit: (prompt: string, colors: string[]) => Promise<void>;
@@ -74,6 +75,8 @@ export function PromptInput({
     const isAuthenticated = await checkAuth();
     if (!isAuthenticated) return;
 
+    posthog.capture("Improve prompt", {});
+
     // Clear previous errors
     setImproveError(null);
     setShowAuthError(false);
@@ -89,6 +92,8 @@ export function PromptInput({
       })
 
       if (!response.ok) {
+        posthog.capture("Improve prompt", {"type": "failed", "status": response.status});
+
         // Handle auth error with openLogin flag
         if (response.status === 401) {
           const errorData = await response.json();
@@ -135,6 +140,7 @@ export function PromptInput({
         }
       }
     } catch (error) {
+      posthog.capture("Improve prompt", {"type": "failed", "error": error});
       console.error("Error improving prompt:", error)
       setImproveError(error instanceof Error ? error.message : "Failed to improve prompt")
     } finally {

src/components/share-dialog.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import { useState } from "react"
+import { Copy, Check, AlertTriangle } from "lucide-react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "./ui/dialog"
+import { Button } from "./ui/button"
+
+interface ShareDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  shareUrl: string;
+}
+
+export function ShareDialog({ open, onOpenChange, shareUrl }: ShareDialogProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy link:', err);
+    }
+  };
+
+  const handleClose = () => {
+    onOpenChange(false);
+    setCopied(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share Your Creation</DialogTitle>
+        </DialogHeader>
+        
+        <div className="flex items-start space-x-2 p-3 rounded-md">
+          <AlertTriangle className="h-4 w-4 text-muted-foreground mt-0.5 flex-shrink-0" />
+          <p className="text-sm text-muted-foreground">
+            <strong>Note:</strong> This shared link is temporary and may not be permanently available.
+          </p>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <div className="grid flex-1 gap-2">
+            <label htmlFor="link" className="sr-only">
+              Link
+            </label>
+            <input
+              id="link"
+              value={shareUrl}
+              readOnly
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            />
+          </div>
+          <Button 
+            type="button" 
+            size="sm" 
+            className="px-3"
+            onClick={handleCopyLink}
+          >
+            <span className="sr-only">Copy</span>
+            {copied ? (
+              <Check className="h-4 w-4" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+        <div className="flex justify-end space-x-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleClose}
+          >
+            Close
+          </Button>
+          <Button
+            type="button"
+            onClick={() => window.open(shareUrl, '_blank')}
+          >
+            Open Link
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+} 

src/lib/sharelink.ts

@@ -0,0 +1,47 @@
+import { nanoid } from "nanoid";
+const FILE_NAME_KEY = "novita-anysite-share-filename";
+const BASE_URL = "https://anysite-gallery.novita.ai";
+
+function getShareFilename(): string {
+  let filename = localStorage.getItem(FILE_NAME_KEY);
+
+  if (!filename) {
+    filename = `${nanoid()}`;
+    localStorage.setItem(FILE_NAME_KEY, filename);
+  }
+
+  return filename;
+}
+
+export async function generateShareLink(html: string) {
+  const filename = getShareFilename();
+
+  const response = await fetch(`${BASE_URL}/api/upload-code`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      filename: `${filename}.html`,
+      code: html,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to upload: ${response.status} ${response.statusText}`
+    );
+  }
+
+  const result = await response.json();
+
+  if (!result.success) {
+    throw new Error(result.message || "Failed to upload HTML");
+  }
+
+  const uploadedUrl = result.data?.url;
+  if (!uploadedUrl) {
+    throw new Error("No URL returned from upload service");
+  }
+  return `${BASE_URL}/${filename}`;
+}

src/lib/utils.ts

@@ -4,3 +4,44 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout;
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
+export function highlightHTML(code: string): string {
+  if (!code) return '';
+  
+  let result = code;
+  
+  result = result
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+  
+  result = result.replace(/(&lt;style[^&]*?&gt;)([\s\S]*?)(&lt;\/style&gt;)/gi, (match, openTag, cssContent, closeTag) => {
+    const highlighted = cssContent
+      .replace(/([a-zA-Z-]+)(\s*:\s*)([^;]+)(;?)/g, '<span style="color: #9cdcfe;">$1</span><span style="color: #d4d4d4;">$2</span><span style="color: #ce9178;">$3</span><span style="color: #d4d4d4;">$4</span>')
+      .replace(/(\{|\})/g, '<span style="color: #ffd700;">$1</span>');
+    return openTag + highlighted + closeTag;
+  });
+  
+  result = result
+    .replace(/(&lt;\/?)([a-zA-Z][a-zA-Z0-9-]*)([\s\S]*?)(&gt;)/g, 
+      '<span style="color: #569cd6;">$1</span><span style="color: #4ec9b0;">$2</span><span style="color: #9cdcfe;">$3</span><span style="color: #569cd6;">$4</span>')
+    .replace(/(\s)([a-zA-Z-]+)(=)(&quot;[^&quot;]*&quot;)/g, 
+      '$1<span style="color: #92c5f8;">$2</span><span style="color: #d4d4d4;">$3</span><span style="color: #ce9178;">$4</span>')
+    .replace(/(&lt;!--[\s\S]*?--&gt;)/g, '<span style="color: #6a9955; font-style: italic;">$1</span>')
+    .replace(/(&lt;!DOCTYPE[^&]*?&gt;)/gi, '<span style="color: #c586c0;">$1</span>');
+  
+  return result;
+};