@kohryan/moodui 0.0.15 → 0.0.16

package/src/ui/main.tsx

@@ -1,24 +1,64 @@
 import * as React from "react";
 import { createRoot } from "react-dom/client";
-import { MoodUIPromptPlayground, generateReactFromPrompt, MoodUIRuntime } from "../index";
+import { generateReactFromPrompt, MoodUIIcon, MOODUI_ICON_NAMES, MoodUIRuntime } from "../index";
+import type { MoodUISpec } from "../spec";
+
+type Provider = "gemini" | "ollama" | "openai-compatible";
+type SaveStatus = "idle" | "saving" | "success" | "error";
+
+const promptPresets = [
+  {
+    title: "SaaS Dashboard",
+    description: "Stat cards, chart summary, navigation, CTA",
+    prompt:
+      "Buat dashboard SaaS modern bergaya clean seperti Untitled UI: header, 3 stat card, section aktivitas terbaru, chart summary, tombol primary, dan gunakan icon chart-bar, bell, dan arrow-right."
+  },
+  {
+    title: "CRM Workspace",
+    description: "Sidebar, table preview, status cards",
+    prompt:
+      "Buat UI CRM workspace modern dengan sidebar, top bar pencarian, card pipeline singkat, daftar customer, dan gunakan icon search, user, mail, plus, dan settings."
+  },
+  {
+    title: "E-commerce Landing",
+    description: "Hero, feature grid, trust badges",
+    prompt:
+      "Buat landing page e-commerce modern dengan hero section, badge promo, 3 fitur utama, CTA beli sekarang, dan gunakan icon sparkles, shield, heart, dan arrow-right."
+  },
+  {
+    title: "Productivity App",
+    description: "Tasks, reminders, quick actions",
+    prompt:
+      "Buat dashboard productivity app dengan welcome card, daftar task hari ini, reminder, action button, dan gunakan icon check, calendar, bell, dan message-circle."
+  }
+] as const;
+
+const modernPromptHint =
+  "Gunakan layout modern bergaya Flowbite/Untitled UI: card yang rapi, hierarchy kuat, spacing konsisten, warna netral, dan icon reusable seperlunya.";
 
 function App() {
-  const [provider, setProvider] = React.useState<"gemini" | "ollama" | "openai-compatible">("gemini");
+  const [provider, setProvider] = React.useState<Provider>("gemini");
   const [model, setModel] = React.useState("gemini-3-flash-preview");
   const [apiKey, setApiKey] = React.useState("");
   const [baseUrl, setBaseUrl] = React.useState("");
   const [prompt, setPrompt] = React.useState(
-    "Buat UI mood tracker: judul, input mood, tombol Simpan (actionId save_mood), dan section riwayat."
+    "Buat dashboard mood tracker modern: top summary, form input mood, riwayat mood, CTA utama, dan gunakan icon heart, calendar, dan chart-bar."
   );
   const [componentName, setComponentName] = React.useState("MoodScreen");
   const [outputPath, setOutputPath] = React.useState("src/generated/MoodScreen.tsx");
-  
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
-  const [spec, setSpec] = React.useState<any>(null);
+  const [spec, setSpec] = React.useState<MoodUISpec | null>(null);
   const [code, setCode] = React.useState("");
   const [copied, setCopied] = React.useState(false);
-  const [saveStatus, setSaveStatus] = React.useState<"idle" | "saving" | "success" | "error">("idle");
+  const [saveStatus, setSaveStatus] = React.useState<SaveStatus>("idle");
+  const suggestedPathRef = React.useRef(outputPath);
+
+  React.useEffect(() => {
+    const nextSuggestedPath = `src/generated/${componentName || "MoodScreen"}.tsx`;
+    setOutputPath((current) => (current === suggestedPathRef.current ? nextSuggestedPath : current));
+    suggestedPathRef.current = nextSuggestedPath;
+  }, [componentName]);
 
   const onGenerate = React.useCallback(async () => {
     setLoading(true);
@@ -26,32 +66,49 @@ function App() {
     setCopied(false);
     setSaveStatus("idle");
     try {
-      const result = await generateReactFromPrompt({
-        provider,
-        model,
-        apiKey: apiKey || undefined,
-        baseUrl: baseUrl || undefined,
-        prompt,
-        componentName
-      });
+      const result =
+        provider === "ollama"
+          ? await generateReactFromPrompt({
+              provider,
+              model,
+              baseUrl: baseUrl || undefined,
+              prompt,
+              componentName
+            })
+          : provider === "openai-compatible"
+            ? await generateReactFromPrompt({
+                provider,
+                model,
+                apiKey,
+                baseUrl,
+                prompt,
+                componentName
+              })
+            : await generateReactFromPrompt({
+                provider,
+                model,
+                apiKey,
+                baseUrl: baseUrl || undefined,
+                prompt,
+                componentName
+              });
 
       setSpec(result.spec);
       setCode(result.code);
-      setOutputPath(`src/generated/${componentName}.tsx`);
     } catch (e) {
       const msg = e instanceof Error ? e.message : String(e);
       setError(msg);
     } finally {
       setLoading(false);
     }
-  }, [apiKey, baseUrl, model, prompt, componentName, provider]);
+  }, [apiKey, baseUrl, componentName, model, prompt, provider]);
 
   const onCopyCode = React.useCallback(async () => {
     if (!code) return;
     try {
       await navigator.clipboard.writeText(code);
       setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
+      window.setTimeout(() => setCopied(false), 1800);
     } catch (e) {
       console.error("Failed to copy:", e);
     }
@@ -61,249 +118,420 @@ function App() {
     if (!code) return;
     const blob = new Blob([code], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `${componentName}.tsx`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = `${componentName || "MoodScreen"}.tsx`;
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
     URL.revokeObjectURL(url);
   }, [code, componentName]);
 
   const onSaveToProject = React.useCallback(async () => {
     if (!code) return;
     setSaveStatus("saving");
+    setError(null);
     try {
       const response = await fetch("/api/save-file", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ path: outputPath, code })
       });
-      
-      const result = await response.json();
-      if (result.success) {
-        setSaveStatus("success");
-        setTimeout(() => setSaveStatus("idle"), 3000);
-      } else {
-        throw new Error(result.error);
-      }
+      const result = (await response.json()) as { success: boolean; error?: string };
+      if (!result.success) throw new Error(result.error ?? "Gagal menyimpan file");
+      setSaveStatus("success");
+      window.setTimeout(() => setSaveStatus("idle"), 2200);
     } catch (e) {
       const msg = e instanceof Error ? e.message : String(e);
-      console.error("Failed to save to project:", e);
+      setError(msg);
       setSaveStatus("error");
-      setTimeout(() => setSaveStatus("idle"), 3000);
+      window.setTimeout(() => setSaveStatus("idle"), 2600);
     }
   }, [code, outputPath]);
 
+  const applyPreset = React.useCallback((value: string) => {
+    setPrompt(value);
+  }, []);
+
+  const appendModernHint = React.useCallback(() => {
+    setPrompt((current) => `${current.trim()}\n\n${modernPromptHint}`);
+  }, []);
+
+  const appendIconHint = React.useCallback(() => {
+    setPrompt(
+      (current) =>
+        `${current.trim()}\n\nGunakan icon reusable dari MoodUI seperti search, chart-bar, bell, user, calendar, home, plus, shield, sparkles, dan arrow-right jika relevan.`
+    );
+  }, []);
+
+  const codeLineCount = React.useMemo(() => (code ? code.split("\n").length : 0), [code]);
+  const saveButtonLabel =
+    saveStatus === "saving"
+      ? "Menyimpan..."
+      : saveStatus === "success"
+        ? "Tersimpan"
+        : saveStatus === "error"
+          ? "Gagal"
+          : "Save to Project";
+
   return (
-    <div style={{ minHeight: "100vh", padding: 24, background: "#0b1220" }}>
-      <div style={{ maxWidth: 1100, margin: "0 auto", background: "#fff", padding: 16, borderRadius: 16 }}>
-        <div style={{ marginBottom: 16, paddingBottom: 16, borderBottom: "1px solid #e5e7eb" }}>
-          <h2 style={{ margin: "0 0 12px 0", fontSize: 20, fontWeight: 700 }}>MoodUI - AI UI Generator</h2>
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
-            <div>
-              <label style={{ display: "block", marginBottom: 4, fontSize: 12, fontWeight: 600 }}>Component Name</label>
-              <input
-                value={componentName}
-                onChange={(e) => setComponentName(e.target.value)}
-                style={{ width: "100%", padding: "10px 12px", borderRadius: 10, border: "1px solid #d1d5db" }}
-              />
+    <div
+      style={{
+        minHeight: "100vh",
+        background:
+          "radial-gradient(circle at top left, rgba(124,58,237,0.22), transparent 28%), radial-gradient(circle at top right, rgba(14,165,233,0.18), transparent 32%), linear-gradient(180deg, #0f172a 0%, #111827 100%)",
+        color: "#0f172a",
+        padding: 28
+      }}
+    >
+      <div style={{ maxWidth: 1440, margin: "0 auto", display: "flex", flexDirection: "column", gap: 20 }}>
+        <section
+          style={{
+            borderRadius: 28,
+            padding: 28,
+            background: "rgba(255,255,255,0.94)",
+            border: "1px solid rgba(255,255,255,0.65)",
+            boxShadow: "0 24px 80px rgba(15,23,42,0.26)",
+            backdropFilter: "blur(14px)"
+          }}
+        >
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "minmax(0, 1.5fr) minmax(320px, 0.9fr)",
+              gap: 20,
+              alignItems: "stretch"
+            }}
+          >
+            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
+              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
+                <Badge icon="sparkles" text="MoodUI Browser CLI" tone="purple" />
+                <Badge icon="check" text="Generate to Repo" tone="green" />
+                <Badge icon="shield" text="Reusable Icon Registry" tone="blue" />
+              </div>
+              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+                <h1 style={{ margin: 0, fontSize: 34, lineHeight: 1.05, fontWeight: 800 }}>
+                  Generate UI modern, simpan langsung ke repo, dan pakai icon reusable bawaan MoodUI.
+                </h1>
+                <p style={{ margin: 0, color: "#475467", fontSize: 15, lineHeight: 1.7, maxWidth: 760 }}>
+                  Tampilan ini saya rapikan ke arah product tool yang lebih dekat ke rasa Flowbite atau Untitled UI:
+                  panel jelas, quick templates, output path eksplisit, preview langsung, dan daftar icon yang bisa
+                  diulang pemakaiannya di banyak screen.
+                </p>
+              </div>
+              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: 12 }}>
+                <StatCard icon="plus" label="Quick Templates" value={String(promptPresets.length)} />
+                <StatCard icon="sparkles" label="Reusable Icons" value={String(MOODUI_ICON_NAMES.length)} />
+                <StatCard icon="check" label="Generated Lines" value={String(codeLineCount)} />
+              </div>
             </div>
-            <div>
-              <label style={{ display: "block", marginBottom: 4, fontSize: 12, fontWeight: 600 }}>Output Path</label>
-              <input
-                value={outputPath}
-                onChange={(e) => setOutputPath(e.target.value)}
-                style={{ width: "100%", padding: "10px 12px", borderRadius: 10, border: "1px solid #d1d5db" }}
-              />
+
+            <div
+              style={{
+                borderRadius: 24,
+                padding: 18,
+                background: "linear-gradient(180deg, #111827 0%, #0f172a 100%)",
+                color: "#ffffff",
+                display: "flex",
+                flexDirection: "column",
+                gap: 14,
+                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)"
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                  <div
+                    style={{
+                      width: 40,
+                      height: 40,
+                      borderRadius: 12,
+                      display: "grid",
+                      placeItems: "center",
+                      background: "linear-gradient(135deg, #7c3aed 0%, #2563eb 100%)"
+                    }}
+                  >
+                    <MoodUIIcon name="sparkles" color="#ffffff" size={20} />
+                  </div>
+                  <div>
+                    <div style={{ fontSize: 14, fontWeight: 700 }}>Recommended Workflow</div>
+                    <div style={{ fontSize: 12, color: "#cbd5e1" }}>Generate, review, lalu save ke repo webapp</div>
+                  </div>
+                </div>
+              </div>
+              <ChecklistItem icon="search" text="Tulis prompt UI yang spesifik dan modern" />
+              <ChecklistItem icon="chart-bar" text="Gunakan preset kalau butuh struktur awal cepat" />
+              <ChecklistItem icon="calendar" text="Sesuaikan component name dan output path" />
+              <ChecklistItem icon="check" text="Preview hasil sebelum simpan ke project" />
             </div>
           </div>
-        </div>
-        
-        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
-          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-            <div style={{ fontWeight: 700, fontSize: 16 }}>MoodUI Prompt</div>
-
-            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
-              <select
-                value={provider}
-                onChange={(e) => setProvider(e.target.value as any)}
+        </section>
+
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "minmax(380px, 0.95fr) minmax(0, 1.45fr)",
+            gap: 20,
+            alignItems: "start"
+          }}
+        >
+          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+            <Panel title="Generate UI" icon="sparkles" subtitle="Form utama untuk menghasilkan komponen React">
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+                <Field label="Component Name">
+                  <input
+                    value={componentName}
+                    onChange={(e) => setComponentName(e.target.value)}
+                    placeholder="SalesDashboard"
+                    style={inputStyle}
+                  />
+                </Field>
+                <Field label="Output Path">
+                  <input
+                    value={outputPath}
+                    onChange={(e) => setOutputPath(e.target.value)}
+                    placeholder="src/generated/SalesDashboard.tsx"
+                    style={inputStyle}
+                  />
+                </Field>
+              </div>
+
+              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
+                <Field label="Provider">
+                  <select value={provider} onChange={(e) => setProvider(e.target.value as Provider)} style={inputStyle}>
+                    <option value="gemini">gemini</option>
+                    <option value="ollama">ollama</option>
+                    <option value="openai-compatible">openai-compatible</option>
+                  </select>
+                </Field>
+                <Field label="Model">
+                  <input
+                    value={model}
+                    onChange={(e) => setModel(e.target.value)}
+                    placeholder="gemini-3-flash-preview"
+                    style={inputStyle}
+                  />
+                </Field>
+              </div>
+
+              {provider !== "ollama" ? (
+                <Field label="API Key">
+                  <input
+                    value={apiKey}
+                    onChange={(e) => setApiKey(e.target.value)}
+                    placeholder="Masukkan API key"
+                    type="password"
+                    style={inputStyle}
+                  />
+                </Field>
+              ) : null}
+
+              <Field label="Base URL">
+                <input
+                  value={baseUrl}
+                  onChange={(e) => setBaseUrl(e.target.value)}
+                  placeholder={provider === "ollama" ? "http://localhost:11434" : "Optional"}
+                  style={inputStyle}
+                />
+              </Field>
+
+              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
+                <div style={{ fontSize: 13, fontWeight: 700, color: "#101828" }}>Prompt UI</div>
+                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+                  <MiniButton icon="sparkles" label="Modernize" onClick={appendModernHint} />
+                  <MiniButton icon="shield" label="Add Icons" onClick={appendIconHint} />
+                </div>
+              </div>
+
+              <textarea
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                rows={11}
                 style={{
-                  padding: "10px 12px",
-                  borderRadius: 10,
-                  border: "1px solid #d1d5db",
-                  background: "#ffffff",
-                  width: 200
+                  ...inputStyle,
+                  minHeight: 240,
+                  resize: "vertical",
+                  lineHeight: 1.65,
+                  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
                 }}
-              >
-                <option value="gemini">gemini</option>
-                <option value="ollama">ollama</option>
-                <option value="openai-compatible">openai-compatible</option>
-              </select>
-              <input
-                value={model}
-                onChange={(e) => setModel(e.target.value)}
-                placeholder="model"
-                style={{ padding: "10px 12px", borderRadius: 10, border: "1px solid #d1d5db", flex: "1 1 220px" }}
               />
-            </div>
-
-            {provider !== "ollama" ? (
-              <input
-                value={apiKey}
-                onChange={(e) => setApiKey(e.target.value)}
-                placeholder="API key"
-                type="password"
-                style={{ padding: "10px 12px", borderRadius: 10, border: "1px solid #d1d5db" }}
-              />
-            ) : null}
-
-            <input
-              value={baseUrl}
-              onChange={(e) => setBaseUrl(e.target.value)}
-              placeholder={provider === "ollama" ? "baseUrl (optional) e.g. http://localhost:11434" : "baseUrl (optional)"}
-              style={{ padding: "10px 12px", borderRadius: 10, border: "1px solid #d1d5db" }}
-            />
-
-            <textarea
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-              rows={10}
-              style={{
-                padding: 12,
-                borderRadius: 12,
-                border: "1px solid #d1d5db",
-                fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-                fontSize: 12
-              }}
-            />
 
-            <button
-              type="button"
-              onClick={onGenerate}
-              disabled={loading}
-              style={{
-                padding: "10px 12px",
-                borderRadius: 10,
-                border: "1px solid #111827",
-                background: "#111827",
-                color: "#ffffff",
-                cursor: loading ? "not-allowed" : "pointer"
-              }}
-            >
-              {loading ? "Generating..." : "Generate"}
-            </button>
+              <button type="button" onClick={onGenerate} disabled={loading} style={primaryButtonStyle(loading)}>
+                <MoodUIIcon name={loading ? "settings" : "sparkles"} color="#ffffff" size={16} />
+                {loading ? "Generating..." : "Generate Component"}
+              </button>
 
-            {error ? (
-              <pre
+              <div
                 style={{
-                  margin: 0,
-                  padding: 12,
-                  borderRadius: 12,
-                  border: "1px solid #7f1d1d",
-                  background: "#fef2f2",
-                  color: "#7f1d1d",
-                  whiteSpace: "pre-wrap"
+                  display: "grid",
+                  gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+                  gap: 10
                 }}
               >
-                {error}
-              </pre>
-            ) : null}
-          </div>
-
-          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-            <div style={{ fontWeight: 700, fontSize: 16 }}>Preview</div>
-            <div style={{ minHeight: 240, padding: 16, borderRadius: 16, background: "#ffffff", border: "1px solid #e5e7eb" }}>
-              {spec ? (
-                <MoodUIRuntime spec={spec} />
-              ) : (
-                <div style={{ color: "#6b7280" }}>Belum ada hasil</div>
-              )}
-            </div>
+                {promptPresets.map((preset) => (
+                  <button
+                    key={preset.title}
+                    type="button"
+                    onClick={() => applyPreset(preset.prompt)}
+                    style={presetCardStyle}
+                  >
+                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                      <div
+                        style={{
+                          width: 36,
+                          height: 36,
+                          borderRadius: 12,
+                          display: "grid",
+                          placeItems: "center",
+                          background: "#eef2ff",
+                          color: "#4338ca"
+                        }}
+                      >
+                        <MoodUIIcon name="sparkles" size={18} />
+                      </div>
+                      <div style={{ textAlign: "left" }}>
+                        <div style={{ fontWeight: 700, fontSize: 13 }}>{preset.title}</div>
+                        <div style={{ fontSize: 12, color: "#667085" }}>{preset.description}</div>
+                      </div>
+                    </div>
+                  </button>
+                ))}
+              </div>
 
-            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-              <div style={{ fontWeight: 700, fontSize: 16 }}>React Code</div>
-              <div style={{ display: "flex", gap: 8 }}>
-                <button
-                  type="button"
-                  onClick={onCopyCode}
-                  disabled={!code}
-                  style={{
-                    padding: "6px 12px",
-                    borderRadius: 8,
-                    border: copied ? "1px solid #16a34a" : "1px solid #6b7280",
-                    background: copied ? "#dcfce7" : "#ffffff",
-                    color: copied ? "#16a34a" : "#374151",
-                    cursor: !code ? "not-allowed" : "pointer",
-                    fontSize: 12
-                  }}
-                >
-                  {copied ? "Copied!" : "Copy"}
-                </button>
-                <button
-                  type="button"
-                  onClick={onSaveToProject}
-                  disabled={!code || saveStatus === "saving"}
+              {error ? (
+                <div
                   style={{
-                    padding: "6px 12px",
-                    borderRadius: 8,
-                    border: saveStatus === "success" 
-                      ? "1px solid #16a34a" 
-                      : saveStatus === "error" 
-                        ? "1px solid #7f1d1d" 
-                        : "1px solid #059669",
-                    background: saveStatus === "success" 
-                      ? "#dcfce7" 
-                      : saveStatus === "error" 
-                        ? "#fef2f2" 
-                        : "#059669",
-                    color: saveStatus === "success" 
-                      ? "#16a34a" 
-                      : saveStatus === "error" 
-                        ? "#7f1d1d" 
-                        : "#ffffff",
-                    cursor: !code || saveStatus === "saving" ? "not-allowed" : "pointer",
-                    fontSize: 12
+                    borderRadius: 16,
+                    padding: 14,
+                    border: "1px solid #fda29b",
+                    background: "#fef3f2",
+                    color: "#b42318",
+                    fontSize: 13,
+                    lineHeight: 1.6,
+                    whiteSpace: "pre-wrap"
                   }}
                 >
-                  {saveStatus === "saving" 
-                    ? "Saving..." 
-                    : saveStatus === "success" 
-                      ? "Saved!" 
-                      : saveStatus === "error" 
-                        ? "Error!" 
-                        : "Save to Project"}
-                </button>
-                <button
-                  type="button"
-                  onClick={onDownloadCode}
-                  disabled={!code}
-                  style={{
-                    padding: "6px 12px",
-                    borderRadius: 8,
-                    border: "1px solid #111827",
-                    background: "#111827",
-                    color: "#ffffff",
-                    cursor: !code ? "not-allowed" : "pointer",
-                    fontSize: 12
-                  }}
-                >
-                  Download
-                </button>
+                  {error}
+                </div>
+              ) : null}
+            </Panel>
+
+            <Panel title="Icon Library" icon="shield" subtitle="Referensi icon reusable yang dikenali MoodUI">
+              <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
+                {MOODUI_ICON_NAMES.map((iconName) => (
+                  <button
+                    key={iconName}
+                    type="button"
+                    onClick={() => setPrompt((current) => `${current.trim()}\n- gunakan icon ${iconName}`)}
+                    style={iconChipStyle}
+                  >
+                    <MoodUIIcon name={iconName} size={16} color="#344054" />
+                    <span>{iconName}</span>
+                  </button>
+                ))}
               </div>
-            </div>
-            <textarea
-              value={code}
-              readOnly
-              rows={12}
-              style={{
-                padding: 12,
-                borderRadius: 12,
-                border: "1px solid #d1d5db",
-                fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-                fontSize: 12
-              }}
-            />
+              <div
+                style={{
+                  borderRadius: 16,
+                  padding: 14,
+                  background: "#f8fafc",
+                  border: "1px solid #e2e8f0",
+                  fontSize: 13,
+                  lineHeight: 1.7,
+                  color: "#475467"
+                }}
+              >
+                Tips: cukup minta model memakai icon berdasarkan nama, misalnya{" "}
+                <code style={inlineCodeStyle}>search</code>, <code style={inlineCodeStyle}>calendar</code>,{" "}
+                <code style={inlineCodeStyle}>chart-bar</code>, atau <code style={inlineCodeStyle}>arrow-right</code>.
+              </div>
+            </Panel>
+          </div>
+
+          <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
+            <Panel title="Live Preview" icon="home" subtitle="Hasil render MoodUIRuntime dari spec terbaru">
+              <div
+                style={{
+                  minHeight: 460,
+                  borderRadius: 24,
+                  padding: 18,
+                  background: "linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%)",
+                  border: "1px solid #dbe4ff",
+                  boxShadow: "inset 0 1px 0 rgba(255,255,255,0.7)"
+                }}
+              >
+                {spec ? (
+                  <div
+                    style={{
+                      minHeight: 420,
+                      borderRadius: 20,
+                      padding: 18,
+                      background: "#ffffff",
+                      boxShadow: "0 18px 48px rgba(15,23,42,0.08)",
+                      overflow: "auto"
+                    }}
+                  >
+                    <MoodUIRuntime spec={spec} />
+                  </div>
+                ) : (
+                  <EmptyState
+                    icon="sparkles"
+                    title="Belum ada preview"
+                    description="Generate komponen dulu. Preview dan code akan muncul di sini."
+                  />
+                )}
+              </div>
+            </Panel>
+
+            <Panel title="Generated Code" icon="arrow-right" subtitle="Copy, download, atau simpan langsung ke repo">
+              <div style={{ display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
+                <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
+                  <InfoPill icon="check" label={`${codeLineCount} lines`} />
+                  <InfoPill icon="home" label={outputPath} />
+                </div>
+                <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
+                  <button type="button" onClick={onCopyCode} disabled={!code} style={secondaryActionStyle(!code)}>
+                    <MoodUIIcon name="plus" size={15} />
+                    {copied ? "Copied" : "Copy"}
+                  </button>
+                  <button type="button" onClick={onDownloadCode} disabled={!code} style={secondaryActionStyle(!code)}>
+                    <MoodUIIcon name="arrow-right" size={15} />
+                    Download
+                  </button>
+                  <button
+                    type="button"
+                    onClick={onSaveToProject}
+                    disabled={!code || saveStatus === "saving"}
+                    style={saveActionStyle(saveStatus, !code)}
+                  >
+                    <MoodUIIcon
+                      name={saveStatus === "success" ? "check" : saveStatus === "error" ? "shield" : "home"}
+                      size={15}
+                      color={saveStatus === "error" ? "#b42318" : undefined}
+                    />
+                    {saveButtonLabel}
+                  </button>
+                </div>
+              </div>
+
+              <textarea
+                value={code}
+                readOnly
+                rows={18}
+                style={{
+                  ...inputStyle,
+                  minHeight: 360,
+                  background: "#0f172a",
+                  color: "#e2e8f0",
+                  border: "1px solid #1e293b",
+                  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+                  lineHeight: 1.55
+                }}
+              />
+              <div style={{ fontSize: 12, color: "#667085" }}>
+                Jalankan <code style={inlineCodeStyle}>npx moodui ui</code> dari root repo webapp agar tombol{" "}
+                <code style={inlineCodeStyle}>Save to Project</code> menulis file ke repo tersebut.
+              </div>
+            </Panel>
           </div>
         </div>
       </div>
@@ -311,4 +539,297 @@ function App() {
   );
 }
 
+function Panel(props: { title: string; subtitle: string; icon: React.ComponentProps<typeof MoodUIIcon>["name"]; children: React.ReactNode }) {
+  return (
+    <section
+      style={{
+        borderRadius: 24,
+        padding: 20,
+        background: "rgba(255,255,255,0.96)",
+        border: "1px solid rgba(255,255,255,0.72)",
+        boxShadow: "0 16px 48px rgba(15,23,42,0.18)"
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, marginBottom: 16 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+          <div
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 14,
+              display: "grid",
+              placeItems: "center",
+              background: "#eef2ff",
+              color: "#4338ca"
+            }}
+          >
+            <MoodUIIcon name={props.icon} size={18} />
+          </div>
+          <div>
+            <div style={{ fontSize: 16, fontWeight: 800, color: "#101828" }}>{props.title}</div>
+            <div style={{ fontSize: 13, color: "#667085" }}>{props.subtitle}</div>
+          </div>
+        </div>
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>{props.children}</div>
+    </section>
+  );
+}
+
+function Field(props: { label: string; children: React.ReactNode }) {
+  return (
+    <label style={{ display: "flex", flexDirection: "column", gap: 7 }}>
+      <span style={{ fontSize: 12, fontWeight: 700, color: "#344054", letterSpacing: 0.2 }}>{props.label}</span>
+      {props.children}
+    </label>
+  );
+}
+
+function Badge(props: { icon: React.ComponentProps<typeof MoodUIIcon>["name"]; text: string; tone: "purple" | "green" | "blue" }) {
+  const tones = {
+    purple: { background: "#f5f3ff", color: "#6d28d9", border: "#ddd6fe" },
+    green: { background: "#ecfdf3", color: "#027a48", border: "#abefc6" },
+    blue: { background: "#eff8ff", color: "#175cd3", border: "#b2ddff" }
+  } as const;
+  const tone = tones[props.tone];
+
+  return (
+    <div
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "8px 12px",
+        borderRadius: 999,
+        background: tone.background,
+        border: `1px solid ${tone.border}`,
+        color: tone.color,
+        fontSize: 12,
+        fontWeight: 700
+      }}
+    >
+      <MoodUIIcon name={props.icon} size={14} />
+      {props.text}
+    </div>
+  );
+}
+
+function StatCard(props: { icon: React.ComponentProps<typeof MoodUIIcon>["name"]; label: string; value: string }) {
+  return (
+    <div
+      style={{
+        borderRadius: 18,
+        padding: 16,
+        background: "#f8fafc",
+        border: "1px solid #e2e8f0",
+        display: "flex",
+        flexDirection: "column",
+        gap: 10
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        <MoodUIIcon name={props.icon} size={16} color="#475467" />
+        <span style={{ fontSize: 12, color: "#667085", fontWeight: 700 }}>{props.label}</span>
+      </div>
+      <div style={{ fontSize: 26, lineHeight: 1, fontWeight: 800, color: "#101828" }}>{props.value}</div>
+    </div>
+  );
+}
+
+function ChecklistItem(props: { icon: React.ComponentProps<typeof MoodUIIcon>["name"]; text: string }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        borderRadius: 14,
+        padding: "10px 12px",
+        background: "rgba(255,255,255,0.05)",
+        border: "1px solid rgba(255,255,255,0.08)"
+      }}
+    >
+      <MoodUIIcon name={props.icon} size={15} color="#c4b5fd" />
+      <span style={{ fontSize: 13, color: "#e2e8f0" }}>{props.text}</span>
+    </div>
+  );
+}
+
+function MiniButton(props: { icon: React.ComponentProps<typeof MoodUIIcon>["name"]; label: string; onClick: () => void }) {
+  return (
+    <button type="button" onClick={props.onClick} style={miniButtonStyle}>
+      <MoodUIIcon name={props.icon} size={14} />
+      {props.label}
+    </button>
+  );
+}
+
+function InfoPill(props: { icon: React.ComponentProps<typeof MoodUIIcon>["name"]; label: string }) {
+  return (
+    <div
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        padding: "8px 12px",
+        borderRadius: 999,
+        background: "#f8fafc",
+        border: "1px solid #e4e7ec",
+        fontSize: 12,
+        color: "#475467",
+        maxWidth: 320
+      }}
+    >
+      <MoodUIIcon name={props.icon} size={14} />
+      <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{props.label}</span>
+    </div>
+  );
+}
+
+function EmptyState(props: { icon: React.ComponentProps<typeof MoodUIIcon>["name"]; title: string; description: string }) {
+  return (
+    <div
+      style={{
+        minHeight: 380,
+        display: "grid",
+        placeItems: "center",
+        textAlign: "center",
+        color: "#667085",
+        padding: 24
+      }}
+    >
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14, maxWidth: 280 }}>
+        <div
+          style={{
+            width: 56,
+            height: 56,
+            borderRadius: 20,
+            display: "grid",
+            placeItems: "center",
+            background: "#eef2ff",
+            color: "#4338ca"
+          }}
+        >
+          <MoodUIIcon name={props.icon} size={24} />
+        </div>
+        <div style={{ fontSize: 16, fontWeight: 800, color: "#101828" }}>{props.title}</div>
+        <div style={{ fontSize: 13, lineHeight: 1.7 }}>{props.description}</div>
+      </div>
+    </div>
+  );
+}
+
+const inputStyle: React.CSSProperties = {
+  width: "100%",
+  padding: "12px 14px",
+  borderRadius: 14,
+  border: "1px solid #d0d5dd",
+  background: "#ffffff",
+  color: "#101828",
+  fontSize: 14,
+  outline: "none",
+  boxSizing: "border-box"
+};
+
+const miniButtonStyle: React.CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "8px 12px",
+  borderRadius: 999,
+  border: "1px solid #d0d5dd",
+  background: "#ffffff",
+  color: "#344054",
+  fontSize: 12,
+  fontWeight: 700,
+  cursor: "pointer"
+};
+
+const presetCardStyle: React.CSSProperties = {
+  padding: 14,
+  borderRadius: 18,
+  border: "1px solid #e4e7ec",
+  background: "#ffffff",
+  cursor: "pointer"
+};
+
+const iconChipStyle: React.CSSProperties = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "10px 12px",
+  borderRadius: 999,
+  border: "1px solid #e4e7ec",
+  background: "#ffffff",
+  color: "#344054",
+  fontSize: 12,
+  fontWeight: 700,
+  cursor: "pointer"
+};
+
+const inlineCodeStyle: React.CSSProperties = {
+  fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  background: "#f2f4f7",
+  padding: "2px 6px",
+  borderRadius: 6
+};
+
+function primaryButtonStyle(disabled: boolean): React.CSSProperties {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    width: "100%",
+    padding: "14px 18px",
+    borderRadius: 16,
+    border: "1px solid #111827",
+    background: disabled ? "#475467" : "linear-gradient(135deg, #111827 0%, #1d4ed8 100%)",
+    color: "#ffffff",
+    fontSize: 14,
+    fontWeight: 800,
+    cursor: disabled ? "not-allowed" : "pointer",
+    boxShadow: disabled ? "none" : "0 14px 32px rgba(29,78,216,0.22)"
+  };
+}
+
+function secondaryActionStyle(disabled: boolean): React.CSSProperties {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "10px 14px",
+    borderRadius: 12,
+    border: "1px solid #d0d5dd",
+    background: disabled ? "#f2f4f7" : "#ffffff",
+    color: disabled ? "#98a2b3" : "#344054",
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontSize: 13,
+    fontWeight: 700
+  };
+}
+
+function saveActionStyle(status: SaveStatus, disabled: boolean): React.CSSProperties {
+  const tone =
+    status === "success"
+      ? { background: "#ecfdf3", border: "#abefc6", color: "#027a48" }
+      : status === "error"
+        ? { background: "#fef3f2", border: "#fecdca", color: "#b42318" }
+        : { background: "#111827", border: "#111827", color: "#ffffff" };
+
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "10px 14px",
+    borderRadius: 12,
+    border: `1px solid ${disabled && status === "idle" ? "#d0d5dd" : tone.border}`,
+    background: disabled && status === "idle" ? "#f2f4f7" : tone.background,
+    color: disabled && status === "idle" ? "#98a2b3" : tone.color,
+    cursor: disabled ? "not-allowed" : "pointer",
+    fontSize: 13,
+    fontWeight: 700
+  };
+}
+
 createRoot(document.getElementById("root")!).render(<App />);