Add cli

app/components/wizard/WizardShell.tsx

@@ -129,11 +129,6 @@ export function WizardShell() {
         }
     }
 
-    const progress = React.useMemo(
-        () => Math.round(((stepIndex + 1) / stepOrder.length) * 100),
-        [stepIndex]
-    )
-
     const handleNext = async () => {
         if (stepIndex === stepOrder.length - 1) {
             await handleGenerate()
@@ -195,7 +190,7 @@ export function WizardShell() {
                             variant="outline"
                             asChild
                             disabled={!isValid || isGenerating}
-                            className="h-10 px-4 border-border/40 bg-background/50 shadow-xs cursor-pointer"
+                            className="hidden lg:inline-flex h-10 px-4 border-border/40 bg-background/50 shadow-xs cursor-pointer"
                         >
                             <Link
                                 href={isValid ? "/create/code" : "#"}
@@ -205,8 +200,7 @@ export function WizardShell() {
                                 className={cn((!isValid || isGenerating) && "pointer-events-none opacity-50")}
                             >
                                 <HugeiconsIcon icon={SourceCodeIcon} className="size-4 mr-1.5" />
-                                <span className="hidden sm:inline">Preview code</span>
-                                <span className="sm:hidden">Code</span>
+                                Preview code
                             </Link>
                         </Button>
                         <Button
@@ -252,6 +246,30 @@ export function WizardShell() {
                     </main>
                 </div>
 
+                {/* Mobile floating preview — keeps header uncluttered on small screens */}
+                <Button
+                    asChild
+                    disabled={!isValid || isGenerating}
+                    className={cn(
+                        "lg:hidden fixed z-40 bottom-6 right-4 h-12 gap-2 rounded-xl px-5",
+                        "bg-primary text-primary-foreground shadow-lg",
+                        "hover:bg-primary/90 active:scale-[0.98] transition-transform",
+                        (!isValid || isGenerating) && "opacity-50"
+                    )}
+                >
+                    <Link
+                        href={isValid ? "/create/code" : "#"}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        aria-label="Preview code"
+                        aria-disabled={!isValid || isGenerating}
+                        className={cn((!isValid || isGenerating) && "pointer-events-none")}
+                    >
+                        <HugeiconsIcon icon={SourceCodeIcon} className="size-4" />
+                        Preview
+                    </Link>
+                </Button>
+
                 <PackageInfoPanel />
             </SidebarInset>
         </SidebarProvider>

app/components/wizard/code-editor/EditorBreadcrumb.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+
+import { CopyButton } from "@/components/animate-ui/components/buttons/copy"
+import { cn } from "@/lib/utils"
+
+export function EditorBreadcrumb({
+  path,
+  code,
+  canCopy,
+}: {
+  path: string
+  code: string
+  canCopy: boolean
+}) {
+  return (
+    <div className="flex h-7 shrink-0 items-center gap-1 bg-background px-2 text-[11px] text-muted-foreground sm:h-6 sm:px-3 sm:text-[12px]">
+      <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        {path.split("/").map((segment, index, parts) => (
+          <React.Fragment key={`${segment}-${index}`}>
+            {index > 0 && <span className="shrink-0 opacity-40">/</span>}
+            <span
+              className={cn(
+                "shrink-0",
+                index === parts.length - 1 && "text-foreground"
+              )}
+            >
+              {segment}
+            </span>
+          </React.Fragment>
+        ))}
+      </div>
+      {canCopy ? (
+        <CopyButton
+          content={code}
+          size="xs"
+          variant="ghost"
+          aria-label="Copy file contents"
+          title="Copy file"
+          className="ml-auto size-6 shrink-0 text-muted-foreground hover:bg-muted hover:text-foreground sm:size-5"
+        />
+      ) : null}
+    </div>
+  )
+}

app/components/wizard/code-editor/EditorColumn.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import type { MouseEvent } from "react"
+
+import { EditorBreadcrumb } from "@/app/components/wizard/code-editor/EditorBreadcrumb"
+import { EditorPane } from "@/app/components/wizard/code-editor/EditorPane"
+import { EditorTabs } from "@/app/components/wizard/code-editor/EditorTabs"
+
+export function EditorColumn({
+  paths,
+  activePath,
+  pinnedPaths,
+  loading,
+  error,
+  code,
+  theme,
+  canPreview,
+  isMobile,
+  onSelectTab,
+  onCloseTab,
+  onCloseAllTabs,
+  onCloseOtherTabs,
+  onMoveTabToRight,
+  onTogglePinTab,
+  onBrowseFiles,
+}: {
+  paths: string[]
+  activePath: string | null
+  pinnedPaths: string[]
+  loading: boolean
+  error: string | null
+  code: string
+  theme: string
+  canPreview: boolean
+  isMobile: boolean
+  onSelectTab: (path: string) => void
+  onCloseTab: (path: string, event?: MouseEvent) => void
+  onCloseAllTabs: () => void
+  onCloseOtherTabs: (path: string) => void
+  onMoveTabToRight: (path: string) => void
+  onTogglePinTab: (path: string) => void
+  onBrowseFiles: () => void
+}) {
+  return (
+    <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col">
+      <EditorTabs
+        paths={paths}
+        activePath={activePath}
+        pinnedPaths={pinnedPaths}
+        loading={loading}
+        onSelect={onSelectTab}
+        onClose={onCloseTab}
+        onCloseAll={onCloseAllTabs}
+        onCloseOthers={onCloseOtherTabs}
+        onMoveToRight={onMoveTabToRight}
+        onTogglePin={onTogglePinTab}
+      />
+      {activePath ? (
+        <EditorBreadcrumb
+          path={activePath}
+          code={code}
+          canCopy={canPreview}
+        />
+      ) : null}
+      <EditorPane
+        loading={loading}
+        error={error}
+        activePath={activePath}
+        code={code}
+        theme={theme}
+        canPreview={canPreview}
+        isMobile={isMobile}
+        onBrowseFiles={onBrowseFiles}
+      />
+    </div>
+  )
+}

app/components/wizard/code-editor/EditorPane.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import { File01Icon, SidebarLeftIcon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { HighlightedPane } from "@/app/components/wizard/code-editor/HighlightedPane"
+import { Button } from "@/components/ui/button"
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty"
+
+export function EditorPane({
+  loading,
+  error,
+  activePath,
+  code,
+  theme,
+  canPreview,
+  isMobile,
+  onBrowseFiles,
+}: {
+  loading: boolean
+  error: string | null
+  activePath: string | null
+  code: string
+  theme: string
+  canPreview: boolean
+  isMobile: boolean
+  onBrowseFiles: () => void
+}) {
+  return (
+    <div className="min-h-0 min-w-0 flex-1 bg-background">
+      {loading ? (
+        <div className="flex h-full flex-col gap-2 p-4" aria-busy="true">
+          <div className="h-3 w-2/3 animate-pulse rounded bg-muted" />
+          <div className="h-3 w-1/2 animate-pulse rounded bg-muted" />
+          <div className="h-3 w-3/4 animate-pulse rounded bg-muted" />
+        </div>
+      ) : error ? (
+        <div className="flex h-full items-center justify-center p-6 text-center text-sm text-destructive">
+          {error}
+        </div>
+      ) : !activePath ? (
+        <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center text-sm text-muted-foreground">
+          <HugeiconsIcon icon={File01Icon} className="size-8 opacity-40" />
+          <p>
+            {isMobile
+              ? "Open the explorer to pick a file."
+              : "Open a file from the explorer to start."}
+          </p>
+          {isMobile ? (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="gap-1.5"
+              onClick={onBrowseFiles}
+            >
+              <HugeiconsIcon icon={SidebarLeftIcon} className="size-3.5" />
+              Browse files
+            </Button>
+          ) : null}
+        </div>
+      ) : !canPreview ? (
+        <Empty className="h-full border-0">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <HugeiconsIcon icon={File01Icon} />
+            </EmptyMedia>
+            <EmptyTitle>No preview available</EmptyTitle>
+            <EmptyDescription>
+              This file type can&apos;t be previewed in the editor.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      ) : (
+        <HighlightedPane code={code} filePath={activePath} theme={theme} />
+      )}
+    </div>
+  )
+}