From 402a007c5ae13294cec9944516c0ccdb0b0c7c70 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Mon, 25 May 2026 10:59:55 +0530
Subject: [PATCH 01/57] feat: basic AI page generation (single prompt)

---
 frontend/components.d.ts                      |   2 +
 frontend/src/components/AIPanel.vue           |  86 +++++++++
 frontend/src/components/StudioLeftPanel.vue   |  14 +-
 .../src/components/StudioSettingsDialog.vue   |  87 +++++++++
 frontend/src/components/StudioToolbar.vue     |  11 +-
 frontend/src/types/index.ts                   |   2 +-
 pyproject.toml                                |   1 +
 studio/ai.py                                  | 169 ++++++++++++++++++
 .../doctype/studio_settings/__init__.py       |   0
 .../studio_settings/studio_settings.json      |  47 +++++
 .../studio_settings/studio_settings.py        |  20 +++
 11 files changed, 436 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/AIPanel.vue
 create mode 100644 frontend/src/components/StudioSettingsDialog.vue
 create mode 100644 studio/ai.py
 create mode 100644 studio/studio/doctype/studio_settings/__init__.py
 create mode 100644 studio/studio/doctype/studio_settings/studio_settings.json
 create mode 100644 studio/studio/doctype/studio_settings/studio_settings.py

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 41120a03..28ac4119 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -8,6 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AIPanel: typeof import('./src/components/AIPanel.vue')['default']
     AppComponent: typeof import('./src/components/AppComponent.vue')['default']
     AppDialog: typeof import('./src/components/AppDialog.vue')['default']
     AppHeader: typeof import('./src/components/AppLayout/AppHeader.vue')['default']
@@ -96,6 +97,7 @@ declare module 'vue' {
     StudioLeftPanel: typeof import('./src/components/StudioLeftPanel.vue')['default']
     StudioLogo: typeof import('./src/components/Icons/StudioLogo.vue')['default']
     StudioRightPanel: typeof import('./src/components/StudioRightPanel.vue')['default']
+    StudioSettingsDialog: typeof import('./src/components/StudioSettingsDialog.vue')['default']
     StudioToolbar: typeof import('./src/components/StudioToolbar.vue')['default']
     TextBlock: typeof import('./src/components/AppLayout/TextBlock.vue')['default']
   }
diff --git a/frontend/src/components/AIPanel.vue b/frontend/src/components/AIPanel.vue
new file mode 100644
index 00000000..632d1f84
--- /dev/null
+++ b/frontend/src/components/AIPanel.vue
@@ -0,0 +1,86 @@
+<template>
+	<div class="flex flex-col gap-4 p-4">
+		<div class="flex flex-col gap-1">
+			<p class="text-sm font-medium text-gray-700">Describe your page</p>
+			<p class="text-xs text-gray-500">
+				{{ contextHint }}
+			</p>
+		</div>
+
+		<Textarea
+			v-model="prompt"
+			:rows="6"
+			placeholder="e.g. A user profile page with name, email, bio fields and a save button"
+			:disabled="loading"
+		/>
+
+		<ErrorMessage v-if="error" :message="error" />
+
+		<Button
+			variant="solid"
+			label="Generate"
+			@click="generate"
+			:loading="loading"
+			:disabled="!prompt.trim()"
+			class="w-full"
+		/>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from "vue"
+import { ErrorMessage, Button, Textarea, call } from "frappe-ui"
+import { toast } from "vue-sonner"
+import useStudioStore from "@/stores/studioStore"
+import useCanvasStore from "@/stores/canvasStore"
+import { getBlockInstance } from "@/utils/serializer"
+
+const store = useStudioStore()
+const canvasStore = useCanvasStore()
+
+const prompt = ref("")
+const loading = ref(false)
+const error = ref("")
+
+const selectedBlock = computed(() => canvasStore.activeCanvas?.selectedBlocks?.[0] ?? null)
+
+const contextHint = computed(() =>
+	selectedBlock.value
+		? `Generating children for "${selectedBlock.value.blockName || selectedBlock.value.componentName}"`
+		: "Generating a full page",
+)
+
+async function generate() {
+	if (!prompt.value.trim()) return
+	loading.value = true
+	error.value = ""
+
+	try {
+		const result = await call("studio.ai.generate_page_from_prompt", { prompt: prompt.value })
+
+		const blocks: any[] = JSON.parse(result)
+		if (!blocks?.length) {
+			error.value = "No blocks were generated. Try a more descriptive prompt."
+			return
+		}
+
+		if (selectedBlock.value) {
+			// Replace children of the selected block
+			selectedBlock.value.children = blocks.map((b: any) => getBlockInstance(b))
+		} else {
+			// Replace the full page
+			const rootBlock = getBlockInstance(blocks[0])
+			canvasStore.activeCanvas?.setRootBlock(rootBlock)
+			store.pageBlocks = [rootBlock]
+		}
+
+		await store.savePage()
+		toast.success("Page generated successfully")
+		prompt.value = ""
+	} catch (e: any) {
+		error.value = e?.message || "Generation failed. Please check your Studio Settings and try again."
+	} finally {
+		loading.value = false
+	}
+}
+</script>
diff --git a/frontend/src/components/StudioLeftPanel.vue b/frontend/src/components/StudioLeftPanel.vue
index 008e7255..24363d4a 100644
--- a/frontend/src/components/StudioLeftPanel.vue
+++ b/frontend/src/components/StudioLeftPanel.vue
@@ -63,8 +63,15 @@
 				<DataPanel v-show="activeTab === 'Data'" />
 
 				<div v-show="activeTab === 'Code'">
-					<CodePanel class="p-4" v-if="store.activePage" :page="store.activePage" :key="store.selectedPage" />
+					<CodePanel
+						class="p-4"
+						v-if="store.activePage"
+						:page="store.activePage"
+						:key="store.selectedPage ?? undefined"
+					/>
 				</div>
+
+				<AIPanel v-show="activeTab === 'AI'" />
 			</div>
 		</transition>
 	</div>
@@ -81,6 +88,7 @@ import ComponentLayers from "@/components/ComponentLayers.vue"
 import DataPanel from "@/components/DataPanel.vue"
 import CodePanel from "@/components/CodePanel.vue"
 import IconButton from "@/components/IconButton.vue"
+import AIPanel from "@/components/AIPanel.vue"
 
 import Block from "@/utils/block"
 import useStudioStore from "@/stores/studioStore"
@@ -108,6 +116,10 @@ const sidebarMenu = [
 		label: "Code",
 		icon: "code",
 	},
+	{
+		label: "AI",
+		icon: "zap",
+	},
 ]
 const store = useStudioStore()
 const canvasStore = useCanvasStore()
diff --git a/frontend/src/components/StudioSettingsDialog.vue b/frontend/src/components/StudioSettingsDialog.vue
new file mode 100644
index 00000000..a82ebfb2
--- /dev/null
+++ b/frontend/src/components/StudioSettingsDialog.vue
@@ -0,0 +1,87 @@
+<template>
+	<Dialog v-model="showDialog" :options="{ title: 'Studio Settings', width: 'md' }" @after-leave="reset">
+		<template #body-content>
+			<div class="flex flex-col gap-3">
+				<FormControl
+					label="OpenRouter API Key"
+					type="password"
+					variant="outline"
+					v-model="apiKey"
+					placeholder="sk-or-..."
+				/>
+				<FormControl
+					label="AI Model"
+					type="text"
+					variant="outline"
+					v-model="aiModel"
+					placeholder="openrouter/google/gemini-3.1-pro-preview"
+					:description="'litellm model string passed to OpenRouter'"
+				/>
+			</div>
+		</template>
+
+		<template #actions>
+			<div class="space-y-1">
+				<ErrorMessage class="mb-2" :message="error" />
+				<Button variant="solid" label="Save" @click="save" class="w-full" :loading="saving" />
+			</div>
+		</template>
+	</Dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from "vue"
+import { Dialog, FormControl, ErrorMessage, call } from "frappe-ui"
+import { toast } from "vue-sonner"
+
+const showDialog = defineModel("showDialog", { type: Boolean, required: true })
+
+const apiKey = ref("")
+const aiModel = ref("")
+const error = ref("")
+const saving = ref(false)
+
+watch(
+	() => showDialog.value,
+	async (open) => {
+		if (!open) return
+		error.value = ""
+		try {
+			const result = await call("frappe.client.get", { doctype: "Studio Settings", name: "Studio Settings" })
+			const doc = result
+			apiKey.value = doc.openrouter_api_key || ""
+			aiModel.value = doc.ai_model || "openrouter/anthropic/claude-3.5-sonnet"
+		} catch {
+			aiModel.value = "openrouter/anthropic/claude-3.5-sonnet"
+		}
+	},
+	{ immediate: true },
+)
+
+function reset() {
+	apiKey.value = ""
+	aiModel.value = ""
+	error.value = ""
+}
+
+async function save() {
+	saving.value = true
+	error.value = ""
+	try {
+		await call("frappe.client.set_value", {
+			doctype: "Studio Settings",
+			name: "Studio Settings",
+			fieldname: {
+				openrouter_api_key: apiKey.value,
+				ai_model: aiModel.value,
+			},
+		})
+		showDialog.value = false
+		toast.success("Studio Settings saved")
+	} catch (e: any) {
+		error.value = e?.message || "Failed to save settings"
+	} finally {
+		saving.value = false
+	}
+}
+</script>
diff --git a/frontend/src/components/StudioToolbar.vue b/frontend/src/components/StudioToolbar.vue
index 3461f2c0..550a34bf 100644
--- a/frontend/src/components/StudioToolbar.vue
+++ b/frontend/src/components/StudioToolbar.vue
@@ -18,6 +18,11 @@
 								icon: 'settings',
 								onClick: () => (showAppDialog = true),
 							},
+							{
+								label: 'Studio Settings',
+								icon: 'sliders',
+								onClick: () => (showStudioSettingsDialog = true),
+							},
 							{
 								label: 'Delete App',
 								icon: 'trash-2',
@@ -127,8 +132,9 @@
 		<AppDialog
 			v-model:showDialog="showAppDialog"
 			:app="store.activeApp"
-			@update="(app) => store.setApp(app.name)"
+			@update="(app: StudioApp) => store.setApp(app.name)"
 		/>
+		<StudioSettingsDialog v-model:showDialog="showStudioSettingsDialog" />
 	</div>
 </template>
 
@@ -142,11 +148,13 @@ import PageOptions from "@/components/PageOptions.vue"
 import StudioLogo from "@/components/Icons/StudioLogo.vue"
 import ExportAppDialog from "@/components/ExportAppDialog.vue"
 import PublishButton from "@/components/PublishButton.vue"
+import StudioSettingsDialog from "@/components/StudioSettingsDialog.vue"
 
 import type { StudioMode } from "@/types"
 import session from "@/utils/session"
 import LucideArrowUpFromLine from "~icons/lucide/arrow-up-from-line"
 import { isObjectEmpty, openInDesk } from "@/utils/helpers"
+import { StudioApp } from "@/types/Studio/StudioApp"
 
 const store = useStudioStore()
 const canvasStore = useCanvasStore()
@@ -156,4 +164,5 @@ const showExportAppDialog = ref(false)
 const canExportApp = computed(() => window.is_developer_mode && !isObjectEmpty(store.activeApp))
 
 const showAppDialog = ref(false)
+const showStudioSettingsDialog = ref(false)
 </script>
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index d2e6e133..5bb665a9 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -149,7 +149,7 @@ export type Filter = {
 	field: DocTypeField
 }
 
-export type LeftPanelOptions = "Pages" | "Add Component" | "Layers" | "Data" | "Code"
+export type LeftPanelOptions = "Pages" | "Add Component" | "Layers" | "Data" | "Code" | "AI"
 export type RightPanelOptions = "Properties" | "Styles" | "Events" | "Interface"
 export type leftPanelComponentTabOptions = "Standard" | "Custom"
 
diff --git a/pyproject.toml b/pyproject.toml
index 49e33d6b..776128d1 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -9,6 +9,7 @@ readme = "README.md"
 dynamic = ["version"]
 dependencies = [
     # "frappe~=15.0.0" # Installed and managed by bench.
+    "litellm==1.83.7",
 ]
 
 [build-system]
diff --git a/studio/ai.py b/studio/ai.py
new file mode 100644
index 00000000..4efd0e35
--- /dev/null
+++ b/studio/ai.py
@@ -0,0 +1,169 @@
+import json
+
+import frappe
+
+COMPONENT_CATALOG = """
+LAYOUT:
+- container: layout wrapper (renders as a div). No componentProps. Use baseStyles: display, flexDirection, gap, padding, width, height, flexWrap, alignItems, justifyContent, flexShrink, flex, etc.
+
+TEXT & DISPLAY:
+- TextBlock: {text: "string", tag: "p|h1|h2|h3|h4|h5|h6|span"}
+- Badge: {variant: "subtle|solid|outline", theme: "green|red|orange|blue|gray", size: "sm|md|lg", label: "string"}
+- Avatar: {shape: "circle|square", size: "xs|sm|md|lg|xl|2xl|3xl", label: "initials", image: "url"}
+- Progress: {value: 0-100, size: "sm|md|lg", label: "string"}
+- Alert: {title: "string", description: "string", theme: "yellow|red|green|blue"}
+- ErrorMessage: {message: "string"}
+- FeatherIcon: {name: "feather-icon-name", class: "h-5 w-5"}
+- ImageView: {image: "url", size: "xs|sm|md|lg|xl"}
+- Card: {title: "string", subtitle: "string"}
+- Divider: (no props)
+- Tooltip: {text: "string"}
+- HTML: {html: "<p>raw html</p>"}
+
+INPUTS:
+- TextInput: {placeholder: "string"}
+- Textarea: {placeholder: "string"}
+- FormControl: {type: "text|email|number|select|date|autocomplete|password", label: "string", placeholder: "string"}
+- Select: {placeholder: "string", options: [{label: "string", value: "string"}]}
+- Checkbox: {label: "string", checked: true|false}
+- Switch: {label: "string", description: "string", modelValue: true|false}
+- DatePicker: {placeholder: "string"}
+- TimePicker: {placeholder: "string"}
+- DateTimePicker: {placeholder: "string"}
+- MultiSelect: {placeholder: "string", options: [{label: "string", value: "string"}]}
+- Rating: {label: "string"}
+- FileUploader: {label: "string", fileTypes: "['image/*']"}
+- TextEditor: {modelValue: "string", editable: true, fixedMenu: true}
+
+ACTIONS:
+- Button: {label: "string", variant: "solid|subtle|outline|ghost", theme: "blue|red|green|gray"}
+- Dropdown: {options: [{label: "string", icon: "feather-icon"}], button: {label: "string"}}
+
+NAVIGATION:
+- Breadcrumbs: {items: [{label: "string", route: "string"}]}
+- Tabs: {tabs: [{label: "string"}]}
+- TabButtons: {buttons: [{label: "string", value: "string"}]}
+- Sidebar: {header: {title: "string", subtitle: "string"}, sections: [{label: "string", items: [{label: "string", icon: "string", to: "string"}]}]}
+
+DATA DISPLAY:
+- ListView: {columns: [{label: "string", key: "string", width: number}], rows: [{key: value}], rowKey: "string"}
+- NumberChart: {config: {title: "string", value: number, prefix: "string", delta: number}}
+- AxisChart: {config: {data: [{xKey: val, yKey: val}], xAxis: {key: "string", type: "time|category"}, yAxis: {title: "string"}, series: [{name: "string", type: "bar|line"}]}}
+- DonutChart: {config: {data: [{cat: val, val: number}], categoryColumn: "string", valueColumn: "string"}}
+- Filter: {doctype: "string", filters: {}}
+- Link: {doctype: "string"}
+- Tree: {nodeKey: "string", node: {name: "string", label: "string", children: []}}
+- Repeater: (no props — repeats child template over data)
+- Calendar: {config: {defaultMode: "Month"}, events: []}
+
+AUTOCOMPLETE:
+- Autocomplete: {placeholder: "string", options: [{label: "string", value: "string"}]}
+- Combobox: {placeholder: "string", options: [{group: "string", options: [{label, value}]}]}
+"""
+
+SYSTEM_PROMPT = f"""You are a UI builder for a no-code app platform. Generate a JSON block tree for a Studio page based on the user's description.
+
+OUTPUT FORMAT:
+Return ONLY a JSON object with a single key "blocks" containing an array with one root block.
+
+BLOCK STRUCTURE:
+{{
+  "componentName": "string (required)",
+  "componentProps": {{}},      // component-specific props
+  "baseStyles": {{}},          // CSS properties in camelCase (e.g. display, flexDirection, gap, padding, backgroundColor)
+  "children": [],              // nested blocks
+  "componentSlots": {{}}       // rarely needed; use children instead
+}}
+
+ROOT BLOCK RULES:
+- Always start with the page root: {{"componentName": "div", "originalElement": "body", "blockName": "body", "baseStyles": {{"display": "flex", "flexDirection": "column", "flexShrink": 0, "width": "inherit", "overflowX": "hidden", "height": "100%"}}}}
+- Nest all content inside this root block's children
+- For ALL inner layout wrappers use "container" (not "div"): {{"componentName": "container", "originalElement": "div", "blockName": "container", ...}}
+
+LAYOUT TIPS:
+- Use container blocks with display:flex for rows and columns
+- flexDirection: "row" for horizontal, "column" for vertical
+- gap: "16px" between items, padding: "16px" or "24px" for spacing
+- Use flexWrap: "wrap" for responsive grids
+- width: "100%" on containers; use flex: 1 to fill remaining space
+
+AVAILABLE COMPONENTS:
+{COMPONENT_CATALOG}
+
+RULES:
+- componentName must exactly match a name from the catalog above
+- baseStyles keys must be camelCase CSS (e.g. backgroundColor, borderRadius, fontSize)
+- Do NOT include componentId (auto-generated)
+- Do NOT include parentBlock
+- Keep componentProps minimal — only include props relevant to the user's description
+
+EXAMPLE — "A login form with email, password and a submit button":
+{{
+  "blocks": [{{
+    "componentName": "div",
+    "originalElement": "body",
+    "blockName": "body",
+    "baseStyles": {{"display": "flex", "flexDirection": "column", "flexShrink": 0, "width": "inherit", "overflowX": "hidden", "height": "100%"}},
+    "children": [{{
+      "componentName": "container",
+      "originalElement": "div",
+      "blockName": "container",
+      "baseStyles": {{"display": "flex", "flexDirection": "column", "alignItems": "center", "justifyContent": "center", "flex": 1, "padding": "24px"}},
+      "children": [{{
+        "componentName": "container",
+        "originalElement": "div",
+        "blockName": "container",
+        "baseStyles": {{"display": "flex", "flexDirection": "column", "gap": "16px", "width": "100%", "maxWidth": "400px"}},
+        "children": [
+          {{"componentName": "TextBlock", "componentProps": {{"text": "Sign In", "tag": "h2"}}, "baseStyles": {{"fontSize": "24px", "fontWeight": "600"}}, "children": []}},
+          {{"componentName": "TextInput", "componentProps": {{"placeholder": "Email address"}}, "children": []}},
+          {{"componentName": "FormControl", "componentProps": {{"type": "password", "label": "Password", "placeholder": "Enter password"}}, "children": []}},
+          {{"componentName": "Button", "componentProps": {{"label": "Sign In", "variant": "solid"}}, "children": []}}
+        ]
+      }}]
+    }}]
+  }}]
+}}
+"""
+
+
+@frappe.whitelist()
+def generate_page_from_prompt(prompt: str) -> str:
+	try:
+		import litellm
+	except ImportError:
+		frappe.throw("litellm is not installed. Run: pip install litellm")
+
+	settings = frappe.get_single("Studio Settings")
+	api_key = settings.get_password("openrouter_api_key") if settings.openrouter_api_key else None
+	model = settings.ai_model or "openrouter/anthropic/claude-3.5-sonnet"
+
+	if not api_key:
+		frappe.throw("OpenRouter API key is not configured. Please set it in Studio Settings.")
+
+	response = litellm.completion(
+		model=model,
+		messages=[
+			{"role": "system", "content": SYSTEM_PROMPT},
+			{"role": "user", "content": prompt},
+		],
+		api_key=api_key,
+	)
+
+	content = response.choices[0].message.content
+	if not content:
+		frappe.throw("The AI model returned an empty response. Try a different model or prompt.")
+
+	# strip markdown code fences if the model wrapped the JSON
+	content = content.strip()
+	if content.startswith("```"):
+		content = content.split("\n", 1)[-1]
+		content = content.rsplit("```", 1)[0].strip()
+
+	parsed = json.loads(content)
+
+	blocks = parsed.get("blocks", parsed) if isinstance(parsed, dict) else parsed
+	if not isinstance(blocks, list):
+		frappe.throw("AI returned an unexpected response format. Please try again.")
+
+	return json.dumps(blocks)
diff --git a/studio/studio/doctype/studio_settings/__init__.py b/studio/studio/doctype/studio_settings/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/studio/studio/doctype/studio_settings/studio_settings.json b/studio/studio/doctype/studio_settings/studio_settings.json
new file mode 100644
index 00000000..ec3d186d
--- /dev/null
+++ b/studio/studio/doctype/studio_settings/studio_settings.json
@@ -0,0 +1,47 @@
+{
+ "actions": [],
+ "creation": "2025-05-24 00:00:00.000000",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "ai_section",
+  "openrouter_api_key",
+  "ai_model"
+ ],
+ "fields": [
+  {
+   "fieldname": "ai_section",
+   "fieldtype": "Section Break",
+   "label": "AI Configuration"
+  },
+  {
+   "fieldname": "openrouter_api_key",
+   "fieldtype": "Password",
+   "label": "OpenRouter API Key"
+  },
+  {
+   "default": "openrouter/anthropic/claude-3.5-sonnet",
+   "description": "litellm model string, e.g. openrouter/anthropic/claude-3.5-sonnet",
+   "fieldname": "ai_model",
+   "fieldtype": "Data",
+   "label": "AI Model"
+  }
+ ],
+ "issingle": 1,
+ "modified": "2025-05-24 00:00:00.000000",
+ "modified_by": "Administrator",
+ "module": "Studio",
+ "name": "Studio Settings",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "role": "System Manager",
+   "read": 1,
+   "write": 1
+  }
+ ],
+ "sort_field": "creation",
+ "sort_order": "DESC",
+ "states": [],
+ "track_changes": 0
+}
diff --git a/studio/studio/doctype/studio_settings/studio_settings.py b/studio/studio/doctype/studio_settings/studio_settings.py
new file mode 100644
index 00000000..ac8911d5
--- /dev/null
+++ b/studio/studio/doctype/studio_settings/studio_settings.py
@@ -0,0 +1,20 @@
+# Copyright (c) 2025, Frappe Technologies Pvt Ltd and contributors
+# For license information, please see license.txt
+
+import frappe
+from frappe.model.document import Document
+
+
+class StudioSettings(Document):
+	# begin: auto-generated types
+	# This code is auto-generated. Do not modify anything in this block.
+
+	from typing import TYPE_CHECKING
+
+	if TYPE_CHECKING:
+		from frappe.types import DF
+
+		ai_model: DF.Data | None
+		openrouter_api_key: DF.Password | None
+	# end: auto-generated types
+	pass

From 56680a8635bab41738770528a248c2cf7d28bc02 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Mon, 25 May 2026 11:06:33 +0530
Subject: [PATCH 02/57] fix: litellm import

---
 studio/ai.py | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/studio/ai.py b/studio/ai.py
index 4efd0e35..193ebd86 100644
--- a/studio/ai.py
+++ b/studio/ai.py
@@ -1,6 +1,7 @@
 import json
 
 import frappe
+import litellm
 
 COMPONENT_CATALOG = """
 LAYOUT:
@@ -129,14 +130,9 @@
 
 @frappe.whitelist()
 def generate_page_from_prompt(prompt: str) -> str:
-	try:
-		import litellm
-	except ImportError:
-		frappe.throw("litellm is not installed. Run: pip install litellm")
-
 	settings = frappe.get_single("Studio Settings")
 	api_key = settings.get_password("openrouter_api_key") if settings.openrouter_api_key else None
-	model = settings.ai_model or "openrouter/anthropic/claude-3.5-sonnet"
+	model = settings.ai_model or "openrouter/google/gemini-3.1-pro-preview"
 
 	if not api_key:
 		frappe.throw("OpenRouter API key is not configured. Please set it in Studio Settings.")

From 0c92375df04d5fcad4a01a624f050a70c9238bc6 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Mon, 25 May 2026 12:46:33 +0530
Subject: [PATCH 03/57] chore: add AGENTS.md

---
 AGENTS.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 AGENTS.md

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 00000000..892e042d
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,33 @@
+# Studio Project - Agent Context
+
+## Overview
+
+Studio is a visual app builder for the Frappe Framework. It allows developers to build modern web applications using a drag & drop layout builder, wire Frappe Framework data sources, edit component props and slots, and create reactive apps with dynamic variables and scripts.
+
+## Agent Guidelines & Code Conventions
+
+1. **Guidelines for writing good code for a developer**
+   - Choose clean code over clever code.
+   - Write object oriented code as much as possible.
+   - Keep function sizes small, ideally 10 lines.
+   - Don't keep too many files in a folder or module. Try and keep it under 15.
+   - Avoid abbreviations.
+   - Use standard API as much as possible.
+   - Reuse. Write as little code as possible.
+   - Build the minimum working code, then iterate towards your goals.
+   - Don't add unnecessary dependencies unless required.
+   - Don't add unnecessary comments for simple code. Use it only when the code is not self-explanatory.
+2. **Frontend Development:**
+   - Rely on `frappe-ui` components (e.g., buttons, dialogs, inputs) instead of building them from scratch (local copy in ./frappe-ui/)
+   - Use Tailwind CSS for styling. Avoid writing raw CSS (`.css` files or `<style>` blocks) unless absolutely necessary. Use espresso tokens for styling
+3. **Backend Development:**
+   - Adhere to standard Frappe Framework conventions (Controller classes, hooks, `@frappe.whitelist()` methods).
+   - Migrations and schema changes are handled via DocTypes.
+4. **State Management & Reactivity:**
+   - Use frappe-ui
+   - Use VueUse for common composition utilities.
+   - Use Pinia for global state if needed, though most component states can be managed locally.
+5. **Data Fetching**
+   - Use `createResource`, `createDocumentResource`, `createListResource`, `call` from frappe-ui for data fetching
+   - Look at ./frontend/src/data/ for examples of data fetching composables
+   - Handle loading, error, and success states explicitly

From 2e9420dbe20b6780dd39c462a651f51f6af176f9 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Mon, 25 May 2026 12:47:00 +0530
Subject: [PATCH 04/57] refactor: styles & data fetching as per guidelines

---
 frontend/src/components/AIPanel.vue           |  4 +-
 .../src/components/StudioSettingsDialog.vue   | 53 ++++++++++---------
 2 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/AIPanel.vue b/frontend/src/components/AIPanel.vue
index 632d1f84..6df3fb45 100644
--- a/frontend/src/components/AIPanel.vue
+++ b/frontend/src/components/AIPanel.vue
@@ -1,8 +1,8 @@
 <template>
 	<div class="flex flex-col gap-4 p-4">
 		<div class="flex flex-col gap-1">
-			<p class="text-sm font-medium text-gray-700">Describe your page</p>
-			<p class="text-xs text-gray-500">
+			<p class="text-sm font-medium text-ink-gray-7">Describe your page</p>
+			<p class="text-xs text-ink-gray-5">
 				{{ contextHint }}
 			</p>
 		</div>
diff --git a/frontend/src/components/StudioSettingsDialog.vue b/frontend/src/components/StudioSettingsDialog.vue
index a82ebfb2..4548d5f0 100644
--- a/frontend/src/components/StudioSettingsDialog.vue
+++ b/frontend/src/components/StudioSettingsDialog.vue
@@ -31,7 +31,7 @@
 
 <script lang="ts" setup>
 import { ref, watch } from "vue"
-import { Dialog, FormControl, ErrorMessage, call } from "frappe-ui"
+import { Dialog, FormControl, ErrorMessage, createDocumentResource } from "frappe-ui"
 import { toast } from "vue-sonner"
 
 const showDialog = defineModel("showDialog", { type: Boolean, required: true })
@@ -41,19 +41,21 @@ const aiModel = ref("")
 const error = ref("")
 const saving = ref(false)
 
+const settings = createDocumentResource({
+	doctype: "Studio Settings",
+	name: "Studio Settings",
+	onSuccess(doc: any) {
+		apiKey.value = doc.openrouter_api_key || ""
+		aiModel.value = doc.ai_model
+	},
+})
+
 watch(
 	() => showDialog.value,
-	async (open) => {
+	(open) => {
 		if (!open) return
+		settings.reload()
 		error.value = ""
-		try {
-			const result = await call("frappe.client.get", { doctype: "Studio Settings", name: "Studio Settings" })
-			const doc = result
-			apiKey.value = doc.openrouter_api_key || ""
-			aiModel.value = doc.ai_model || "openrouter/anthropic/claude-3.5-sonnet"
-		} catch {
-			aiModel.value = "openrouter/anthropic/claude-3.5-sonnet"
-		}
 	},
 	{ immediate: true },
 )
@@ -64,24 +66,23 @@ function reset() {
 	error.value = ""
 }
 
-async function save() {
+function save() {
 	saving.value = true
 	error.value = ""
-	try {
-		await call("frappe.client.set_value", {
-			doctype: "Studio Settings",
-			name: "Studio Settings",
-			fieldname: {
-				openrouter_api_key: apiKey.value,
-				ai_model: aiModel.value,
-			},
+	settings.setValue
+		.submit({
+			openrouter_api_key: apiKey.value,
+			ai_model: aiModel.value,
+		})
+		.then(() => {
+			showDialog.value = false
+			toast.success("Studio Settings saved")
+		})
+		.catch((e: any) => {
+			error.value = e?.message || "Failed to save settings"
+		})
+		.finally(() => {
+			saving.value = false
 		})
-		showDialog.value = false
-		toast.success("Studio Settings saved")
-	} catch (e: any) {
-		error.value = e?.message || "Failed to save settings"
-	} finally {
-		saving.value = false
-	}
 }
 </script>

From b503d463e13f6db937ee43fa2329651587851021 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Mon, 25 May 2026 13:36:05 +0530
Subject: [PATCH 05/57] fix: strip fences in model response

---
 studio/ai.py | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/studio/ai.py b/studio/ai.py
index 193ebd86..4d9fdd30 100644
--- a/studio/ai.py
+++ b/studio/ai.py
@@ -150,16 +150,25 @@ def generate_page_from_prompt(prompt: str) -> str:
 	if not content:
 		frappe.throw("The AI model returned an empty response. Try a different model or prompt.")
 
-	# strip markdown code fences if the model wrapped the JSON
-	content = content.strip()
-	if content.startswith("```"):
-		content = content.split("\n", 1)[-1]
-		content = content.rsplit("```", 1)[0].strip()
-
-	parsed = json.loads(content)
+	content = strip_fences(content)
+	try:
+		parsed = json.loads(content)
+	except json.JSONDecodeError as e:
+		frappe.log_error(title="Studio AI: JSON parse error", message=f"{e}\ncontent:\n{content}")
+		frappe.throw(f"The AI model returned invalid JSON ({e}). Raw response has been logged.")
 
 	blocks = parsed.get("blocks", parsed) if isinstance(parsed, dict) else parsed
 	if not isinstance(blocks, list):
 		frappe.throw("AI returned an unexpected response format. Please try again.")
 
 	return json.dumps(blocks)
+
+
+def strip_fences(text: str) -> str:
+	text = text.strip()
+	if text.startswith("```"):
+		lines = text.splitlines()
+		# drop first line (```json or ```) and last line (```)
+		inner_lines = lines[1:-1] if lines[-1].strip() == "```" else lines[1:]
+		return "\n".join(inner_lines).strip()
+	return text

From a23863f6a2c15a0184630672f0771e5ce11482ec Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Mon, 25 May 2026 18:01:37 +0530
Subject: [PATCH 06/57] fix!: remove Card component from registry, its outdated
 and models tend to prefer using it more often

---
 frontend/src/data/components.ts               | 10 --------
 frontend/src/globals.ts                       |  2 --
 frontend/src/utils/constants.js               |  1 -
 studio/constants.py                           |  1 -
 .../doctype/studio_app/test_studio_app.py     | 24 +++++++++----------
 5 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/frontend/src/data/components.ts b/frontend/src/data/components.ts
index b06fe5d0..5c24a7ef 100644
--- a/frontend/src/data/components.ts
+++ b/frontend/src/data/components.ts
@@ -9,7 +9,6 @@ import LucideUser from "~icons/lucide/user"
 import LucideChevronsRight from "~icons/lucide/chevrons-right"
 import LucideBadgeCheck from "~icons/lucide/badge-check"
 import LucideRectangleHorizontal from "~icons/lucide/rectangle-horizontal"
-import LucideIdCard from "~icons/lucide/id-card"
 import LucideCircleCheck from "~icons/lucide/circle-check"
 import LucideCalendar from "~icons/lucide/calendar"
 import LucideClock from "~icons/lucide/clock"
@@ -158,15 +157,6 @@ export const COMPONENTS: FrappeUIComponents = {
 			variant: "solid",
 		},
 	},
-	Card: {
-		name: "Card",
-		title: "Card",
-		icon: LucideIdCard,
-		initialState: {
-			title: "John Doe",
-			subtitle: "Engineering Lead",
-		},
-	},
 	Checkbox: {
 		name: "Checkbox",
 		title: "Checkbox",
diff --git a/frontend/src/globals.ts b/frontend/src/globals.ts
index 8580e1b5..089900d0 100644
--- a/frontend/src/globals.ts
+++ b/frontend/src/globals.ts
@@ -6,7 +6,6 @@ import {
 	Badge,
 	Breadcrumbs,
 	Button,
-	Card,
 	Checkbox,
 	Combobox,
 	DatePicker,
@@ -75,7 +74,6 @@ export function registerGlobalComponents(app: App) {
 	app.component("Badge", Badge)
 	app.component("Breadcrumbs", Breadcrumbs)
 	app.component("Button", Button)
-	app.component("Card", Card)
 	app.component("Checkbox", Checkbox)
 	app.component("Combobox", Combobox)
 	app.component("DatePicker", DatePicker)
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index ed76ffa6..50e28603 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -5,7 +5,6 @@ export const FRAPPE_UI_COMPONENTS = [
 	"Badge",
 	"Button",
 	"Breadcrumbs",
-	"Card",
 	"Checkbox",
 	"Calendar",
 	"Combobox",
diff --git a/studio/constants.py b/studio/constants.py
index 876bb5c2..b4f0a8fe 100644
--- a/studio/constants.py
+++ b/studio/constants.py
@@ -11,7 +11,6 @@
 	"Badge",
 	"Button",
 	"Breadcrumbs",
-	"Card",
 	"Checkbox",
 	"Calendar",
 	"Combobox",
diff --git a/studio/studio/doctype/studio_app/test_studio_app.py b/studio/studio/doctype/studio_app/test_studio_app.py
index 48b665e0..4e27de56 100644
--- a/studio/studio/doctype/studio_app/test_studio_app.py
+++ b/studio/studio/doctype/studio_app/test_studio_app.py
@@ -30,7 +30,7 @@ def test_extracts_nested_children_components(self):
 		blocks = json.dumps(
 			[
 				{
-					"componentName": "Card",
+					"componentName": "Alert",
 					"children": [
 						{"componentName": "Badge", "children": []},
 						{
@@ -45,7 +45,7 @@ def test_extracts_nested_children_components(self):
 
 		builder = StudioAppBuilder(app.name, is_standard=False)
 		builder.get_app_components()
-		self.assertIn("Card", builder.components)
+		self.assertIn("Alert", builder.components)
 		self.assertIn("Badge", builder.components)
 		self.assertIn("Avatar", builder.components)
 		self.assertNotIn("div", builder.components)
@@ -100,7 +100,7 @@ def test_extracts_h_function_components(self):
 				{
 					"componentName": "div",
 					"children": [],
-					"render": 'h(Card, {}, [h(Button, { label: "OK" }), h(Badge, { text: "New" })])',
+					"render": 'h(Alert, {}, [h(Button, { label: "OK" }), h(Badge, { text: "New" })])',
 				}
 			]
 		)
@@ -108,20 +108,20 @@ def test_extracts_h_function_components(self):
 
 		builder = StudioAppBuilder(app.name, is_standard=False)
 		builder.get_app_components()
-		self.assertIn("Card", builder.components)
+		self.assertIn("Alert", builder.components)
 		self.assertIn("Button", builder.components)
 		self.assertIn("Badge", builder.components)
 
 	def test_extracts_components_from_multiple_pages(self):
 		app = make_studio_app(app_title="Multi Page App", app_name="multi-page-app")
-		blocks_1 = json.dumps([{"componentName": "Card", "children": []}])
+		blocks_1 = json.dumps([{"componentName": "Alert", "children": []}])
 		blocks_2 = json.dumps([{"componentName": "Avatar", "children": []}])
 		make_studio_page(app.name, page_title="Page One", route="/page-one", blocks=blocks_1, published=1)
 		make_studio_page(app.name, page_title="Page Two", route="/page-two", blocks=blocks_2, published=1)
 
 		builder = StudioAppBuilder(app.name, is_standard=False)
 		builder.get_app_components()
-		self.assertIn("Card", builder.components)
+		self.assertIn("Alert", builder.components)
 		self.assertIn("Avatar", builder.components)
 
 	def test_ignores_unpublished_pages(self):
@@ -136,7 +136,7 @@ def test_ignores_unpublished_pages(self):
 
 	def test_get_published_custom_apps(self):
 		app = make_studio_app(app_title="Published Custom", app_name="published-custom")
-		blocks = json.dumps([{"componentName": "Card", "children": []}])
+		blocks = json.dumps([{"componentName": "Alert", "children": []}])
 		make_studio_page(app.name, page_title="Pub Page", blocks=blocks, published=1)
 
 		unpublished_app = make_studio_app(app_title="Unpublished Custom", app_name="unpublished-custom")
@@ -148,7 +148,7 @@ def test_get_published_custom_apps(self):
 			is_standard=1,
 			frappe_app="studio",
 		)
-		blocks = json.dumps([{"componentName": "Card", "children": []}])
+		blocks = json.dumps([{"componentName": "Alert", "children": []}])
 		make_studio_page(standard_app.name, page_title="Std Page", blocks=blocks, published=1)
 
 		result = get_published_custom_apps()
@@ -179,7 +179,7 @@ def test_get_app_components_from_files(self):
 	def test_get_app_components_from_files_with_string_blocks(self):
 		"""Blocks stored as a JSON string (instead of list) should also be parsed."""
 		app_name = "str-blocks-app"
-		blocks = [{"componentName": "Card", "children": []}]
+		blocks = [{"componentName": "Alert", "children": []}]
 		page_data = {"blocks": json.dumps(blocks)}
 
 		with mock_studio_app_files(app_name, pages={"page": page_data}) as studio_folder:
@@ -187,7 +187,7 @@ def test_get_app_components_from_files_with_string_blocks(self):
 			with patch("studio.build.get_studio_folder", return_value=studio_folder):
 				builder.get_app_components_from_files()
 
-			self.assertIn("Card", builder.components)
+			self.assertIn("Alert", builder.components)
 
 	def test_get_app_components_from_files_with_studio_components(self):
 		"""Studio components referenced in pages should be recursively resolved from disk."""
@@ -195,7 +195,7 @@ def test_get_app_components_from_files_with_studio_components(self):
 		page_data = {"blocks": [{"componentName": "MyWidget", "isStudioComponent": True, "children": []}]}
 		comp_data = {
 			"name": "MyWidget",
-			"block": {"componentName": "Card", "children": [{"componentName": "Badge", "children": []}]},
+			"block": {"componentName": "Alert", "children": [{"componentName": "Badge", "children": []}]},
 		}
 
 		with mock_studio_app_files(
@@ -205,7 +205,7 @@ def test_get_app_components_from_files_with_studio_components(self):
 			with patch("studio.build.get_studio_folder", return_value=studio_folder):
 				builder.get_app_components_from_files()
 
-			self.assertIn("Card", builder.components)
+			self.assertIn("Alert", builder.components)
 			self.assertIn("Badge", builder.components)
 
 	def test_build_paths_for_standard_app(self):

From ee8cd28b7fd11bcb742edfdf7210ac1e6436adec Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Tue, 26 May 2026 00:03:51 +0530
Subject: [PATCH 07/57] fix: consider full page generation when root block is
 selected

---
 frontend/src/components/AIPanel.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/AIPanel.vue b/frontend/src/components/AIPanel.vue
index 6df3fb45..9b618c62 100644
--- a/frontend/src/components/AIPanel.vue
+++ b/frontend/src/components/AIPanel.vue
@@ -42,7 +42,11 @@ const prompt = ref("")
 const loading = ref(false)
 const error = ref("")
 
-const selectedBlock = computed(() => canvasStore.activeCanvas?.selectedBlocks?.[0] ?? null)
+const selectedBlock = computed(() => {
+	const block = canvasStore.activeCanvas?.selectedBlocks?.[0] ?? null
+	if (block?.isRoot()) return null
+	return block
+})
 
 const contextHint = computed(() =>
 	selectedBlock.value

From 522b21a10c61e439066c719ae650cdd562239035 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Tue, 26 May 2026 00:12:21 +0530
Subject: [PATCH 08/57] fix(prompt): add rules/guardrails

- LLM adding blue/green themed buttons, default to gray

- use espresso tokens wherever possible

- avoid setting unnecessary styles on components (eg: height on buttons)
---
 studio/ai.py | 61 ++++++++++++++++++++++++++--------------------------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/studio/ai.py b/studio/ai.py
index 4d9fdd30..1eae2234 100644
--- a/studio/ai.py
+++ b/studio/ai.py
@@ -16,7 +16,6 @@
 - ErrorMessage: {message: "string"}
 - FeatherIcon: {name: "feather-icon-name", class: "h-5 w-5"}
 - ImageView: {image: "url", size: "xs|sm|md|lg|xl"}
-- Card: {title: "string", subtitle: "string"}
 - Divider: (no props)
 - Tooltip: {text: "string"}
 - HTML: {html: "<p>raw html</p>"}
@@ -37,7 +36,7 @@
 - TextEditor: {modelValue: "string", editable: true, fixedMenu: true}
 
 ACTIONS:
-- Button: {label: "string", variant: "solid|subtle|outline|ghost", theme: "blue|red|green|gray"}
+- Button: {label: "string", variant: "solid|subtle|outline|ghost", size: "sm|md|lg|xl|2xl", theme: "gray (DEFAULT — omit unless red/green/blue is semantically required)"}
 - Dropdown: {options: [{label: "string", icon: "feather-icon"}], button: {label: "string"}}
 
 NAVIGATION:
@@ -62,7 +61,7 @@
 - Combobox: {placeholder: "string", options: [{group: "string", options: [{label, value}]}]}
 """
 
-SYSTEM_PROMPT = f"""You are a UI builder for a no-code app platform. Generate a JSON block tree for a Studio page based on the user's description.
+SYSTEM_PROMPT = f"""You are an expert UI builder for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a JSON block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component or native html element (div) or a Studio Vue component or a Frappe UI Vue component.
 
 OUTPUT FORMAT:
 Return ONLY a JSON object with a single key "blocks" containing an array with one root block.
@@ -71,52 +70,54 @@
 {{
   "componentName": "string (required)",
   "componentProps": {{}},      // component-specific props
-  "baseStyles": {{}},          // CSS properties in camelCase (e.g. display, flexDirection, gap, padding, backgroundColor)
-  "children": [],              // nested blocks
-  "componentSlots": {{}}       // rarely needed; use children instead
+  "baseStyles": {{}},          // CSS-in-JS camelCase properties
+  "children": [],              // nested blocks (for container blocks)
+  "componentSlots": {{}}       // for frappe-ui components that hold child content
 }}
 
-ROOT BLOCK RULES:
-- Always start with the page root: {{"componentName": "div", "originalElement": "body", "blockName": "body", "baseStyles": {{"display": "flex", "flexDirection": "column", "flexShrink": 0, "width": "inherit", "overflowX": "hidden", "height": "100%"}}}}
-- Nest all content inside this root block's children
-- For ALL inner layout wrappers use "container" (not "div"): {{"componentName": "container", "originalElement": "div", "blockName": "container", ...}}
-
-LAYOUT TIPS:
-- Use container blocks with display:flex for rows and columns
-- flexDirection: "row" for horizontal, "column" for vertical
-- gap: "16px" between items, padding: "16px" or "24px" for spacing
-- Use flexWrap: "wrap" for responsive grids
-- width: "100%" on containers; use flex: 1 to fill remaining space
+ROOT BLOCK:
+Always start with: {{"componentName": "div", "originalElement": "body", "blockName": "body", "baseStyles": {{"display": "flex", "flexDirection": "column", "flexShrink": 0, "width": "inherit", "overflowX": "hidden", "height": "100%"}}}}
+
+LAYOUT CONTAINERS (CRITICAL — originalElement is required or children won't render):
+{{"componentName": "container", "originalElement": "div", "blockName": "container", "baseStyles": {{}}, "children": [...]}}
+- Use container for all inner layout wrappers — never use "div" as componentName for inner blocks
+- flexDirection: "row" for horizontal layouts, "column" for vertical
+- Use gap, padding for spacing. width: "100%" for full-width sections. flex: 1 to fill space.
+
+COMPONENT STYLING RULES:
+- Always use CSS variables. Avoid raw hex colors/values.
+	- backgroundColor:  var(--surface-white) | var(--surface-gray-1..7) | var(--surface-cards) | var(--surface-red-1) | var(--surface-green-1) | var(--surface-amber-1) | var(--surface-blue-1)
+	- color (text): var(--ink-white) | var(--ink-gray-1..9)
+	- borderColor: var(--outline-white) | var(--outline-gray-1..5) | var(--outline-red-1..3) | var(--outline-green-1..2) | var(--outline-amber-1..2) | var(--outline-blue-1) | var(--outline-orange-1)
+	- boxShadow: "sm" | "DEFAULT" | "md" | "lg" | "xl" | "2xl" | "none" (keywords only, not raw values)
+	- borderRadius: "none" (0px) | "sm" (0.25rem) | "DEFAULT" (0.5rem) | "md" (0.625rem) | "lg" (0.75rem) | "xl" (1rem) | "2xl" (1.25rem) | "full" (9999px)
+- Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in baseStyles. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
+- Avoid applying visual baseStyles (color, backgroundColor, border, fontSize) to frappe-ui components (eg: height on Button component) — their props handle this. Only use baseStyles on components for layout (width, flex, margin, etc.).
+- TextBlock: use tag prop for semantics (h1/h2/h3 for headings, p for body). Set fontSize/fontWeight/color on TextBlock baseStyles.
 
 AVAILABLE COMPONENTS:
 {COMPONENT_CATALOG}
 
 RULES:
 - componentName must exactly match a name from the catalog above
-- baseStyles keys must be camelCase CSS (e.g. backgroundColor, borderRadius, fontSize)
+- baseStyles keys must be camelCase CSS (backgroundColor, borderRadius, fontSize, etc.)
 - Do NOT include componentId (auto-generated)
 - Do NOT include parentBlock
-- Keep componentProps minimal — only include props relevant to the user's description
+- Keep componentProps to only what's relevant to the description
 
 EXAMPLE — "A login form with email, password and a submit button":
 {{
   "blocks": [{{
-    "componentName": "div",
-    "originalElement": "body",
-    "blockName": "body",
+    "componentName": "div", "originalElement": "body", "blockName": "body",
     "baseStyles": {{"display": "flex", "flexDirection": "column", "flexShrink": 0, "width": "inherit", "overflowX": "hidden", "height": "100%"}},
     "children": [{{
-      "componentName": "container",
-      "originalElement": "div",
-      "blockName": "container",
+      "componentName": "container", "originalElement": "div", "blockName": "container",
       "baseStyles": {{"display": "flex", "flexDirection": "column", "alignItems": "center", "justifyContent": "center", "flex": 1, "padding": "24px"}},
       "children": [{{
-        "componentName": "container",
-        "originalElement": "div",
-        "blockName": "container",
-        "baseStyles": {{"display": "flex", "flexDirection": "column", "gap": "16px", "width": "100%", "maxWidth": "400px"}},
+        "componentName": "container", "originalElement": "div", "blockName": "container",
+        "baseStyles": {{"display": "flex", "flexDirection": "column", "gap": "16px", "width": "100%", "maxWidth": "400px", "padding": "32px", "backgroundColor": "var(--surface-white)", "borderRadius": "0.75rem", "boxShadow": "md"}},
         "children": [
-          {{"componentName": "TextBlock", "componentProps": {{"text": "Sign In", "tag": "h2"}}, "baseStyles": {{"fontSize": "24px", "fontWeight": "600"}}, "children": []}},
+          {{"componentName": "TextBlock", "componentProps": {{"text": "Sign In", "tag": "h2"}}, "baseStyles": {{"fontSize": "20px", "fontWeight": "600", "color": "var(--ink-gray-9)"}}, "children": []}},
           {{"componentName": "TextInput", "componentProps": {{"placeholder": "Email address"}}, "children": []}},
           {{"componentName": "FormControl", "componentProps": {{"type": "password", "label": "Password", "placeholder": "Enter password"}}, "children": []}},
           {{"componentName": "Button", "componentProps": {{"label": "Sign In", "variant": "solid"}}, "children": []}}

From 7f6d36153800ad2eb63b311d030652cd1b204233 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Tue, 26 May 2026 13:57:08 +0530
Subject: [PATCH 09/57] feat: setup and wire socket

---
 frontend/src/main.ts   | 10 +++++++++-
 frontend/src/socket.js | 21 +++++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/socket.js

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 0a7f4e2d..62262b81 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -13,6 +13,7 @@ import { registerGlobalComponents } from "./globals"
 import { COMPONENTS } from "@/data/components"
 import Block from "@/utils/block"
 import "@/utils/appUtilsRenderer"
+import { initSocket } from "@/socket"
 
 Block.setComponents(COMPONENTS)
 
@@ -40,6 +41,7 @@ if (window.is_developer_mode && typeof window.is_developer_mode === "string") {
 	window.is_developer_mode = window.is_developer_mode === "1" || window.is_developer_mode === "True"
 }
 
+let socket
 studio_router.isReady().then(async () => {
 	if (import.meta.env.DEV) {
 		await frappeRequest({
@@ -48,8 +50,14 @@ studio_router.isReady().then(async () => {
 			for (let key in values) {
 				window[key] = values[key]
 			}
+			socket = initSocket()
+			studio.provide("socket", socket)
+			studio.mount("#studio")
 		})
+	} else {
+		socket = initSocket()
+		studio.provide("socket", socket)
+		studio.mount("#studio")
 	}
 
-	studio.mount("#studio")
 })
\ No newline at end of file
diff --git a/frontend/src/socket.js b/frontend/src/socket.js
new file mode 100644
index 00000000..863f8763
--- /dev/null
+++ b/frontend/src/socket.js
@@ -0,0 +1,21 @@
+import { io } from "socket.io-client"
+import { socketio_port } from "../../../../sites/common_site_config.json"
+
+let socket = null
+export function initSocket() {
+	let host = window.location.hostname
+	let siteName = import.meta.env.DEV ? host : window.site_name
+	let port = window.location.port ? `:${socketio_port}` : ""
+	let protocol = port ? "http" : "https"
+	let url = `${protocol}://${host}${port}/${siteName}`
+
+	socket = io(url, {
+		withCredentials: true,
+		reconnectionAttempts: 5,
+	})
+	return socket
+}
+
+export function useSocket() {
+	return socket
+}

From a9d591276cb37e322374b6a7e0fd1e285e26f00c Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Tue, 26 May 2026 14:28:32 +0530
Subject: [PATCH 10/57] refactor: rename openrouter_api_key -> ai_api_key

---
 .../src/components/StudioSettingsDialog.vue   | 23 +++++++++++++---
 studio/ai.py                                  |  2 +-
 .../studio_settings/studio_settings.js        |  8 ++++++
 .../studio_settings/studio_settings.json      | 26 ++++++++++---------
 .../studio_settings/studio_settings.py        |  3 ++-
 .../studio_settings/test_studio_settings.py   | 20 ++++++++++++++
 6 files changed, 64 insertions(+), 18 deletions(-)
 create mode 100644 studio/studio/doctype/studio_settings/studio_settings.js
 create mode 100644 studio/studio/doctype/studio_settings/test_studio_settings.py

diff --git a/frontend/src/components/StudioSettingsDialog.vue b/frontend/src/components/StudioSettingsDialog.vue
index 4548d5f0..2eab82fb 100644
--- a/frontend/src/components/StudioSettingsDialog.vue
+++ b/frontend/src/components/StudioSettingsDialog.vue
@@ -1,5 +1,5 @@
 <template>
-	<Dialog v-model="showDialog" :options="{ title: 'Studio Settings', width: 'md' }" @after-leave="reset">
+	<Dialog v-model="showDialog" :options="{ title: 'Studio Settings', size: '2xl' }" @after-leave="reset">
 		<template #body-content>
 			<div class="flex flex-col gap-3">
 				<FormControl
@@ -8,7 +8,22 @@
 					variant="outline"
 					v-model="apiKey"
 					placeholder="sk-or-..."
-				/>
+				>
+					<template #description>
+						<p class="text-xs text-ink-gray-5">
+							Get API key from
+							<a
+								href="https://openrouter.ai/keys"
+								target="_blank"
+								rel="noopener noreferrer"
+								class="underline"
+							>
+								openrouter.ai/keys
+							</a>
+							— supports Claude, Gemini, GPT and more under one key.
+						</p>
+					</template>
+				</FormControl>
 				<FormControl
 					label="AI Model"
 					type="text"
@@ -45,7 +60,7 @@ const settings = createDocumentResource({
 	doctype: "Studio Settings",
 	name: "Studio Settings",
 	onSuccess(doc: any) {
-		apiKey.value = doc.openrouter_api_key || ""
+		apiKey.value = doc.ai_api_key || ""
 		aiModel.value = doc.ai_model
 	},
 })
@@ -71,7 +86,7 @@ function save() {
 	error.value = ""
 	settings.setValue
 		.submit({
-			openrouter_api_key: apiKey.value,
+			ai_api_key: apiKey.value,
 			ai_model: aiModel.value,
 		})
 		.then(() => {
diff --git a/studio/ai.py b/studio/ai.py
index 1eae2234..7ae46a13 100644
--- a/studio/ai.py
+++ b/studio/ai.py
@@ -132,7 +132,7 @@
 @frappe.whitelist()
 def generate_page_from_prompt(prompt: str) -> str:
 	settings = frappe.get_single("Studio Settings")
-	api_key = settings.get_password("openrouter_api_key") if settings.openrouter_api_key else None
+	api_key = settings.get_password("ai_api_key", raise_exception=False)
 	model = settings.ai_model or "openrouter/google/gemini-3.1-pro-preview"
 
 	if not api_key:
diff --git a/studio/studio/doctype/studio_settings/studio_settings.js b/studio/studio/doctype/studio_settings/studio_settings.js
new file mode 100644
index 00000000..36fef84e
--- /dev/null
+++ b/studio/studio/doctype/studio_settings/studio_settings.js
@@ -0,0 +1,8 @@
+// Copyright (c) 2026, Frappe Technologies Pvt Ltd and contributors
+// For license information, please see license.txt
+
+// frappe.ui.form.on("Studio Settings", {
+// 	refresh(frm) {
+
+// 	},
+// });
diff --git a/studio/studio/doctype/studio_settings/studio_settings.json b/studio/studio/doctype/studio_settings/studio_settings.json
index ec3d186d..f2a3cd83 100644
--- a/studio/studio/doctype/studio_settings/studio_settings.json
+++ b/studio/studio/doctype/studio_settings/studio_settings.json
@@ -1,23 +1,18 @@
 {
  "actions": [],
- "creation": "2025-05-24 00:00:00.000000",
+ "creation": "2025-05-24 00:00:00",
  "doctype": "DocType",
  "engine": "InnoDB",
  "field_order": [
   "ai_section",
-  "openrouter_api_key",
+  "ai_api_key",
   "ai_model"
  ],
  "fields": [
   {
    "fieldname": "ai_section",
    "fieldtype": "Section Break",
-   "label": "AI Configuration"
-  },
-  {
-   "fieldname": "openrouter_api_key",
-   "fieldtype": "Password",
-   "label": "OpenRouter API Key"
+   "label": "AI Settings"
   },
   {
    "default": "openrouter/anthropic/claude-3.5-sonnet",
@@ -25,23 +20,30 @@
    "fieldname": "ai_model",
    "fieldtype": "Data",
    "label": "AI Model"
+  },
+  {
+   "description": "API key for the selected AI model provider",
+   "fieldname": "ai_api_key",
+   "fieldtype": "Password",
+   "label": "AI API Key"
   }
  ],
  "issingle": 1,
- "modified": "2025-05-24 00:00:00.000000",
+ "links": [],
+ "modified": "2026-05-26 14:13:30.789351",
  "modified_by": "Administrator",
  "module": "Studio",
  "name": "Studio Settings",
  "owner": "Administrator",
  "permissions": [
   {
-   "role": "System Manager",
    "read": 1,
+   "role": "System Manager",
    "write": 1
   }
  ],
+ "row_format": "Dynamic",
  "sort_field": "creation",
  "sort_order": "DESC",
- "states": [],
- "track_changes": 0
+ "states": []
 }
diff --git a/studio/studio/doctype/studio_settings/studio_settings.py b/studio/studio/doctype/studio_settings/studio_settings.py
index ac8911d5..7e8e6061 100644
--- a/studio/studio/doctype/studio_settings/studio_settings.py
+++ b/studio/studio/doctype/studio_settings/studio_settings.py
@@ -14,7 +14,8 @@ class StudioSettings(Document):
 	if TYPE_CHECKING:
 		from frappe.types import DF
 
+		ai_api_key: DF.Password | None
 		ai_model: DF.Data | None
-		openrouter_api_key: DF.Password | None
 	# end: auto-generated types
+
 	pass
diff --git a/studio/studio/doctype/studio_settings/test_studio_settings.py b/studio/studio/doctype/studio_settings/test_studio_settings.py
new file mode 100644
index 00000000..19d96980
--- /dev/null
+++ b/studio/studio/doctype/studio_settings/test_studio_settings.py
@@ -0,0 +1,20 @@
+# Copyright (c) 2026, Frappe Technologies Pvt Ltd and Contributors
+# See license.txt
+
+# import frappe
+from frappe.tests import IntegrationTestCase
+
+# On IntegrationTestCase, the doctype test records and all
+# link-field test record dependencies are recursively loaded
+# Use these module variables to add/remove to/from that list
+EXTRA_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+IGNORE_TEST_RECORD_DEPENDENCIES = []  # eg. ["User"]
+
+
+class IntegrationTestStudioSettings(IntegrationTestCase):
+	"""
+	Integration tests for StudioSettings.
+	Use this class for testing interactions between multiple components.
+	"""
+
+	pass

From e8602749789b2c5e6d7e9ce10a7543cf8099268d Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Tue, 26 May 2026 18:25:55 +0530
Subject: [PATCH 11/57] feat: model selector and non-block page generation
 (move to bg job)

---
 frontend/src/components/AIPanel.vue           | 121 +++++++++++++-----
 .../src/components/StudioSettingsDialog.vue   |  16 +--
 studio/ai.py                                  |  99 ++++++++++----
 studio/ai_models.py                           |  42 ++++++
 .../studio_settings/studio_settings.json      |  12 +-
 .../studio_settings/studio_settings.py        |   1 -
 6 files changed, 211 insertions(+), 80 deletions(-)
 create mode 100644 studio/ai_models.py

diff --git a/frontend/src/components/AIPanel.vue b/frontend/src/components/AIPanel.vue
index 9b618c62..273adacf 100644
--- a/frontend/src/components/AIPanel.vue
+++ b/frontend/src/components/AIPanel.vue
@@ -2,11 +2,17 @@
 	<div class="flex flex-col gap-4 p-4">
 		<div class="flex flex-col gap-1">
 			<p class="text-sm font-medium text-ink-gray-7">Describe your page</p>
-			<p class="text-xs text-ink-gray-5">
-				{{ contextHint }}
-			</p>
+			<p class="text-xs text-ink-gray-5">{{ contextHint }}</p>
 		</div>
 
+		<Select
+			v-if="modelOptions.length"
+			v-model="selectedModel"
+			:options="modelOptions"
+			placeholder="Select a model"
+			:disabled="loading"
+		/>
+
 		<Textarea
 			v-model="prompt"
 			:rows="6"
@@ -14,33 +20,40 @@
 			:disabled="loading"
 		/>
 
+		<p v-if="statusMessage" class="text-xs italic text-ink-gray-5">{{ statusMessage }}</p>
 		<ErrorMessage v-if="error" :message="error" />
 
 		<Button
 			variant="solid"
 			label="Generate"
-			@click="generate"
 			:loading="loading"
 			:disabled="!prompt.trim()"
 			class="w-full"
+			@click="generate"
 		/>
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from "vue"
-import { ErrorMessage, Button, Textarea, call } from "frappe-ui"
+import { ref, computed, inject, onMounted, onUnmounted } from "vue"
+import { ErrorMessage, Button, Textarea, Select, call, createResource } from "frappe-ui"
 import { toast } from "vue-sonner"
 import useStudioStore from "@/stores/studioStore"
 import useCanvasStore from "@/stores/canvasStore"
 import { getBlockInstance } from "@/utils/serializer"
+import type Block from "@/utils/block"
 
 const store = useStudioStore()
 const canvasStore = useCanvasStore()
+const socket = inject<any>("socket")
 
 const prompt = ref("")
 const loading = ref(false)
 const error = ref("")
+const statusMessage = ref("")
+const selectedModel = ref("")
+
+const pageId = computed(() => store.activePage?.name ?? "")
 
 const selectedBlock = computed(() => {
 	const block = canvasStore.activeCanvas?.selectedBlocks?.[0] ?? null
@@ -54,37 +67,87 @@ const contextHint = computed(() =>
 		: "Generating a full page",
 )
 
+const aiModels = createResource({
+	url: "studio.ai_models.get_ai_models",
+	auto: true,
+	onSuccess(data: any[]) {
+		if (data?.length && !selectedModel.value) {
+			selectedModel.value = data[0].id
+		}
+	},
+})
+
+const modelOptions = computed(() => (aiModels.data ?? []).map((m: any) => ({ label: m.label, value: m.id })))
+
+function onProgress(data: any) {
+	console.log("Progress update:", data)
+	statusMessage.value = data.message || "Generating…"
+}
+
+async function onComplete(data: any) {
+	loading.value = false
+	statusMessage.value = ""
+
+	const blocks: Block[] = data.blocks ?? []
+	if (!blocks.length) {
+		error.value = "No blocks were generated. Try a more descriptive prompt."
+		return
+	}
+
+	if (selectedBlock.value) {
+		selectedBlock.value.children = blocks.map((b: Block) => getBlockInstance(b))
+	} else {
+		const rootBlock = getBlockInstance(blocks[0])
+		canvasStore.activeCanvas?.setRootBlock(rootBlock)
+		store.pageBlocks = [rootBlock]
+	}
+
+	await store.savePage()
+	toast.success("Page generated successfully")
+	prompt.value = ""
+}
+
+function onError(data: any) {
+	loading.value = false
+	statusMessage.value = ""
+	error.value = data.message || "Generation failed. Please check your Studio Settings and try again."
+}
+
+function setupListeners() {
+	const id = pageId.value
+	if (!socket || !id) return
+	socket.on(`ai_generation_progress_${id}`, onProgress)
+	socket.on(`ai_generation_complete_${id}`, onComplete)
+	socket.on(`ai_generation_error_${id}`, onError)
+}
+
+function teardownListeners() {
+	const id = pageId.value
+	if (!socket || !id) return
+	socket.off(`ai_generation_progress_${id}`, onProgress)
+	socket.off(`ai_generation_complete_${id}`, onComplete)
+	socket.off(`ai_generation_error_${id}`, onError)
+}
+
+onMounted(setupListeners)
+onUnmounted(teardownListeners)
+
 async function generate() {
 	if (!prompt.value.trim()) return
 	loading.value = true
 	error.value = ""
+	statusMessage.value = ""
 
 	try {
-		const result = await call("studio.ai.generate_page_from_prompt", { prompt: prompt.value })
-
-		const blocks: any[] = JSON.parse(result)
-		if (!blocks?.length) {
-			error.value = "No blocks were generated. Try a more descriptive prompt."
-			return
-		}
-
-		if (selectedBlock.value) {
-			// Replace children of the selected block
-			selectedBlock.value.children = blocks.map((b: any) => getBlockInstance(b))
-		} else {
-			// Replace the full page
-			const rootBlock = getBlockInstance(blocks[0])
-			canvasStore.activeCanvas?.setRootBlock(rootBlock)
-			store.pageBlocks = [rootBlock]
-		}
-
-		await store.savePage()
-		toast.success("Page generated successfully")
-		prompt.value = ""
+		await call("studio.ai.generate_page_from_prompt", {
+			prompt: prompt.value,
+			model: selectedModel.value,
+			page_id: pageId.value,
+		})
 	} catch (e: any) {
-		error.value = e?.message || "Generation failed. Please check your Studio Settings and try again."
-	} finally {
 		loading.value = false
+		statusMessage.value = ""
+		error.value = e?.message || "Failed to start generation. Please try again."
 	}
 }
 </script>
diff --git a/frontend/src/components/StudioSettingsDialog.vue b/frontend/src/components/StudioSettingsDialog.vue
index 2eab82fb..39bc1b56 100644
--- a/frontend/src/components/StudioSettingsDialog.vue
+++ b/frontend/src/components/StudioSettingsDialog.vue
@@ -1,5 +1,5 @@
 <template>
-	<Dialog v-model="showDialog" :options="{ title: 'Studio Settings', size: '2xl' }" @after-leave="reset">
+	<Dialog v-model="showDialog" :options="{ title: 'Studio Settings', size: 'lg' }" @after-leave="reset">
 		<template #body-content>
 			<div class="flex flex-col gap-3">
 				<FormControl
@@ -10,7 +10,7 @@
 					placeholder="sk-or-..."
 				>
 					<template #description>
-						<p class="text-xs text-ink-gray-5">
+						<p class="text-xs leading-normal text-ink-gray-5">
 							Get API key from
 							<a
 								href="https://openrouter.ai/keys"
@@ -24,14 +24,6 @@
 						</p>
 					</template>
 				</FormControl>
-				<FormControl
-					label="AI Model"
-					type="text"
-					variant="outline"
-					v-model="aiModel"
-					placeholder="openrouter/google/gemini-3.1-pro-preview"
-					:description="'litellm model string passed to OpenRouter'"
-				/>
 			</div>
 		</template>
 
@@ -52,7 +44,6 @@ import { toast } from "vue-sonner"
 const showDialog = defineModel("showDialog", { type: Boolean, required: true })
 
 const apiKey = ref("")
-const aiModel = ref("")
 const error = ref("")
 const saving = ref(false)
 
@@ -61,7 +52,6 @@ const settings = createDocumentResource({
 	name: "Studio Settings",
 	onSuccess(doc: any) {
 		apiKey.value = doc.ai_api_key || ""
-		aiModel.value = doc.ai_model
 	},
 })
 
@@ -77,7 +67,6 @@ watch(
 
 function reset() {
 	apiKey.value = ""
-	aiModel.value = ""
 	error.value = ""
 }
 
@@ -87,7 +76,6 @@ function save() {
 	settings.setValue
 		.submit({
 			ai_api_key: apiKey.value,
-			ai_model: aiModel.value,
 		})
 		.then(() => {
 			showDialog.value = false
diff --git a/studio/ai.py b/studio/ai.py
index 7ae46a13..e10b2ffc 100644
--- a/studio/ai.py
+++ b/studio/ai.py
@@ -1,7 +1,20 @@
 import json
+import logging
 
 import frappe
 import litellm
+from frappe import _
+
+from studio.ai_models import ModelRegistry
+
+litellm.drop_params = True
+logger = frappe.logger("studio.ai")
+logger.setLevel(logging.INFO)
+
+TASK_PARAMS = {
+	"simple": {"max_tokens": 1000, "temperature": 0.5},
+	"complex": {"max_tokens": 40000, "temperature": 0.7},
+}
 
 COMPONENT_CATALOG = """
 LAYOUT:
@@ -129,47 +142,81 @@
 """
 
 
-@frappe.whitelist()
-def generate_page_from_prompt(prompt: str) -> str:
+def call_llm(messages: list, model: str, task_tier: str, api_key: str) -> str:
+	params = TASK_PARAMS[task_tier]
+	response = litellm.completion(model=model, messages=messages, api_key=api_key, **params)
+	return response.choices[0].message.content or ""
+
+
+def _emit(event_suffix: str, page_id: str, user: str, **kwargs):
+	frappe.publish_realtime(
+		f"ai_generation_{event_suffix}_{page_id}",
+		{"page_id": page_id, **kwargs},
+		user=user,
+	)
+
+
+def run_generation_job(prompt: str, model: str, page_id: str, user: str):
 	settings = frappe.get_single("Studio Settings")
 	api_key = settings.get_password("ai_api_key", raise_exception=False)
-	model = settings.ai_model or "openrouter/google/gemini-3.1-pro-preview"
 
-	if not api_key:
-		frappe.throw("OpenRouter API key is not configured. Please set it in Studio Settings.")
+	_emit("progress", page_id, user, message=f"Generating with {ModelRegistry.get_label(model)}…")
 
-	response = litellm.completion(
-		model=model,
-		messages=[
+	try:
+		messages = [
 			{"role": "system", "content": SYSTEM_PROMPT},
 			{"role": "user", "content": prompt},
-		],
-		api_key=api_key,
-	)
+		]
+		content = call_llm(messages, model, "complex", api_key)
+		content = _strip_fences(content)
 
-	content = response.choices[0].message.content
-	if not content:
-		frappe.throw("The AI model returned an empty response. Try a different model or prompt.")
+		try:
+			parsed = json.loads(content)
+		except json.JSONDecodeError as e:
+			frappe.log_error(title="Studio AI: JSON parse error", message=f"{e}\n{content}")
+			raise ValueError(f"The AI model returned invalid JSON: {e}")
+
+		blocks = parsed.get("blocks", parsed) if isinstance(parsed, dict) else parsed
+		if not isinstance(blocks, list):
+			raise ValueError("AI returned an unexpected response format. Please try again.")
+
+		logger.info(f"run_generation_job complete | model={model} blocks={len(blocks)}")
+		_emit("complete", page_id, user, blocks=blocks)
+
+	except Exception as e:
+		logger.error(f"run_generation_job failed: {e}", exc_info=True)
+		frappe.log_error(title="Studio AI: generation error", message=str(e))
+		_emit("error", page_id, user, message=str(e))
 
-	content = strip_fences(content)
-	try:
-		parsed = json.loads(content)
-	except json.JSONDecodeError as e:
-		frappe.log_error(title="Studio AI: JSON parse error", message=f"{e}\ncontent:\n{content}")
-		frappe.throw(f"The AI model returned invalid JSON ({e}). Raw response has been logged.")
 
-	blocks = parsed.get("blocks", parsed) if isinstance(parsed, dict) else parsed
-	if not isinstance(blocks, list):
-		frappe.throw("AI returned an unexpected response format. Please try again.")
+@frappe.whitelist()
+def generate_page_from_prompt(prompt: str, model: str | None, page_id: str) -> dict:
+	if not frappe.has_permission("Studio Page", ptype="write"):
+		frappe.throw(_("You do not have permission to modify pages"))
+
+	settings = frappe.get_single("Studio Settings")
+	if not settings.get_password("ai_api_key", raise_exception=False):
+		frappe.throw(_("OpenRouter API key is not configured. Please set it in Studio Settings."))
+
+	resolved_model = model or ModelRegistry.get_default()
+
+	frappe.enqueue(
+		run_generation_job,
+		queue="long",
+		prompt=prompt,
+		model=resolved_model,
+		page_id=page_id,
+		user=frappe.session.user,
+	)
 
-	return json.dumps(blocks)
+	frappe.local.response.http_status_code = 202
+	return {"status": "accepted"}
 
 
-def strip_fences(text: str) -> str:
+def _strip_fences(text: str) -> str:
 	text = text.strip()
 	if text.startswith("```"):
 		lines = text.splitlines()
-		# drop first line (```json or ```) and last line (```)
 		inner_lines = lines[1:-1] if lines[-1].strip() == "```" else lines[1:]
 		return "\n".join(inner_lines).strip()
 	return text
diff --git a/studio/ai_models.py b/studio/ai_models.py
new file mode 100644
index 00000000..59e021cd
--- /dev/null
+++ b/studio/ai_models.py
@@ -0,0 +1,42 @@
+import frappe
+
+
+class ModelRegistry:
+	AVAILABLE = [
+		{
+			"id": "openrouter/anthropic/claude-sonnet-4-6",
+			"label": "Claude Sonnet 4.6",
+			"vision_capable": True,
+		},
+		{"id": "openrouter/anthropic/claude-haiku-4-6", "label": "Claude Haiku 4.6", "vision_capable": True},
+		{"id": "openrouter/google/gemini-3.1-pro-preview", "label": "Gemini 3.1 Pro", "vision_capable": True},
+		{"id": "openrouter/google/gemini-3-flash-preview", "label": "Gemini 3 Flash", "vision_capable": True},
+		{"id": "openrouter/openai/gpt-5-mini", "label": "GPT-5 Mini", "vision_capable": True},
+	]
+
+	DEFAULT = "openrouter/anthropic/claude-sonnet-4-6"
+	SIMPLE = "openrouter/google/gemini-3-flash-preview"
+
+	@classmethod
+	def get_default(cls) -> str:
+		return cls.DEFAULT
+
+	@classmethod
+	def get_simple(cls) -> str:
+		return cls.SIMPLE
+
+	@classmethod
+	def get_label(cls, model_id: str) -> str:
+		for m in cls.AVAILABLE:
+			if m["id"] == model_id:
+				return m["label"]
+		return model_id
+
+	@classmethod
+	def list_all(cls) -> list:
+		return cls.AVAILABLE
+
+
+@frappe.whitelist()
+def get_ai_models() -> list:
+	return ModelRegistry.list_all()
diff --git a/studio/studio/doctype/studio_settings/studio_settings.json b/studio/studio/doctype/studio_settings/studio_settings.json
index f2a3cd83..685b0416 100644
--- a/studio/studio/doctype/studio_settings/studio_settings.json
+++ b/studio/studio/doctype/studio_settings/studio_settings.json
@@ -5,8 +5,7 @@
  "engine": "InnoDB",
  "field_order": [
   "ai_section",
-  "ai_api_key",
-  "ai_model"
+  "ai_api_key"
  ],
  "fields": [
   {
@@ -14,13 +13,6 @@
    "fieldtype": "Section Break",
    "label": "AI Settings"
   },
-  {
-   "default": "openrouter/anthropic/claude-3.5-sonnet",
-   "description": "litellm model string, e.g. openrouter/anthropic/claude-3.5-sonnet",
-   "fieldname": "ai_model",
-   "fieldtype": "Data",
-   "label": "AI Model"
-  },
   {
    "description": "API key for the selected AI model provider",
    "fieldname": "ai_api_key",
@@ -30,7 +22,7 @@
  ],
  "issingle": 1,
  "links": [],
- "modified": "2026-05-26 14:13:30.789351",
+ "modified": "2026-05-26 17:44:02.690418",
  "modified_by": "Administrator",
  "module": "Studio",
  "name": "Studio Settings",
diff --git a/studio/studio/doctype/studio_settings/studio_settings.py b/studio/studio/doctype/studio_settings/studio_settings.py
index 7e8e6061..3707690d 100644
--- a/studio/studio/doctype/studio_settings/studio_settings.py
+++ b/studio/studio/doctype/studio_settings/studio_settings.py
@@ -15,7 +15,6 @@ class StudioSettings(Document):
 		from frappe.types import DF
 
 		ai_api_key: DF.Password | None
-		ai_model: DF.Data | None
 	# end: auto-generated types
 
 	pass

From fc7bd556c002152e58868c7492bb327c0cc3cc5a Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 12:11:44 +0530
Subject: [PATCH 12/57] feat: compress/decompress JSON -> YAML, enable
 streaming LLM responses

- similar to Frappe Builder

Co-authored-by: Suraj Shetty <surajshetty3416@gmail.com>
---
 frontend/package.json               |   2 +
 frontend/src/components/AIPanel.vue |  46 +++++--
 frontend/src/utils/blockCodec.ts    |  39 ++++++
 studio/ai.py                        | 166 +++++++++++++----------
 studio/ai_block_codec.py            | 199 ++++++++++++++++++++++++++++
 yarn.lock                           |   7 +-
 6 files changed, 375 insertions(+), 84 deletions(-)
 create mode 100644 frontend/src/utils/blockCodec.ts
 create mode 100644 studio/ai_block_codec.py

diff --git a/frontend/package.json b/frontend/package.json
index 60bedf7c..25794cc7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,6 +26,7 @@
 		"autoprefixer": "^10.4.2",
 		"codemirror": "^6.0.1",
 		"frappe-ui": "0.1.274",
+		"js-yaml": "^4.1.1",
 		"json5": "^2.2.3",
 		"marked": "^15.0.6",
 		"pinia": "^2.2.1",
@@ -40,6 +41,7 @@
 		"vuedraggable": "^4.1.0"
 	},
 	"devDependencies": {
+		"@types/js-yaml": "^4.0.9",
 		"eslint": "^8.19.0",
 		"eslint-plugin-vue": "^9.11.0",
 		"postcss": "^8.4.5",
diff --git a/frontend/src/components/AIPanel.vue b/frontend/src/components/AIPanel.vue
index 273adacf..d7c8df05 100644
--- a/frontend/src/components/AIPanel.vue
+++ b/frontend/src/components/AIPanel.vue
@@ -41,6 +41,7 @@ import { toast } from "vue-sonner"
 import useStudioStore from "@/stores/studioStore"
 import useCanvasStore from "@/stores/canvasStore"
 import { getBlockInstance } from "@/utils/serializer"
+import { tryParseYamlBlock } from "@/utils/blockCodec"
 import type Block from "@/utils/block"
 
 const store = useStudioStore()
@@ -52,6 +53,8 @@ const loading = ref(false)
 const error = ref("")
 const statusMessage = ref("")
 const selectedModel = ref("")
+let streamBuffer = ""
+let streamFrameId: number | null = null
 
 const pageId = computed(() => store.activePage?.name ?? "")
 
@@ -80,27 +83,41 @@ const aiModels = createResource({
 const modelOptions = computed(() => (aiModels.data ?? []).map((m: any) => ({ label: m.label, value: m.id })))
 
 function onProgress(data: any) {
-	console.log("Progress update:", data)
 	statusMessage.value = data.message || "Generating…"
 }
 
+function onStream(data: any) {
+	streamBuffer += data.chunk || ""
+	if (streamFrameId !== null) return
+	streamFrameId = requestAnimationFrame(() => {
+		streamFrameId = null
+		const block = tryParseYamlBlock(streamBuffer)
+		if (block) {
+			const rootBlock = getBlockInstance(block as any)
+			canvasStore.activeCanvas?.setRootBlock(rootBlock)
+			store.pageBlocks = [rootBlock]
+		}
+	})
+}
+
 async function onComplete(data: any) {
 	loading.value = false
 	statusMessage.value = ""
+	streamBuffer = ""
+	if (streamFrameId !== null) {
+		cancelAnimationFrame(streamFrameId)
+		streamFrameId = null
+	}
 
-	const blocks: Block[] = data.blocks ?? []
-	if (!blocks.length) {
-		error.value = "No blocks were generated. Try a more descriptive prompt."
+	const block: Block = data.block
+	if (!block) {
+		error.value = "No block was generated. Try a more descriptive prompt."
 		return
 	}
 
-	if (selectedBlock.value) {
-		selectedBlock.value.children = blocks.map((b: Block) => getBlockInstance(b))
-	} else {
-		const rootBlock = getBlockInstance(blocks[0])
-		canvasStore.activeCanvas?.setRootBlock(rootBlock)
-		store.pageBlocks = [rootBlock]
-	}
+	const rootBlock = getBlockInstance(block)
+	canvasStore.activeCanvas?.setRootBlock(rootBlock)
+	store.pageBlocks = [rootBlock]
 
 	await store.savePage()
 	toast.success("Page generated successfully")
@@ -110,6 +127,11 @@ async function onComplete(data: any) {
 function onError(data: any) {
 	loading.value = false
 	statusMessage.value = ""
+	streamBuffer = ""
+	if (streamFrameId !== null) {
+		cancelAnimationFrame(streamFrameId)
+		streamFrameId = null
+	}
 	error.value = data.message || "Generation failed. Please check your Studio Settings and try again."
 }
 
@@ -117,6 +139,7 @@ function setupListeners() {
 	const id = pageId.value
 	if (!socket || !id) return
 	socket.on(`ai_generation_progress_${id}`, onProgress)
+	socket.on(`ai_generation_stream_${id}`, onStream)
 	socket.on(`ai_generation_complete_${id}`, onComplete)
 	socket.on(`ai_generation_error_${id}`, onError)
 }
@@ -125,6 +148,7 @@ function teardownListeners() {
 	const id = pageId.value
 	if (!socket || !id) return
 	socket.off(`ai_generation_progress_${id}`, onProgress)
+	socket.off(`ai_generation_stream_${id}`, onStream)
 	socket.off(`ai_generation_complete_${id}`, onComplete)
 	socket.off(`ai_generation_error_${id}`, onError)
 }
diff --git a/frontend/src/utils/blockCodec.ts b/frontend/src/utils/blockCodec.ts
new file mode 100644
index 00000000..54dc6d0d
--- /dev/null
+++ b/frontend/src/utils/blockCodec.ts
@@ -0,0 +1,39 @@
+import { load as yamlLoad } from "js-yaml"
+
+/**
+ * Expand a compact YAML node (name/style/c/props...) into Studio block format
+ * (componentName/baseStyles/children/componentProps...).
+ * Mirrors BlockCodec.expand() in studio/ai_block_codec.py.
+ */
+export function expandBlock(node: Record<string, any>): Record<string, any> {
+	const block: Record<string, any> = {
+		componentName: node.name ?? "container",
+		baseStyles: node.style ?? {},
+		componentProps: node.props ?? {},
+		componentSlots: node.slots ?? {},
+		mobileStyles: node.mstyle ?? {},
+		tabletStyles: node.tstyle ?? {},
+		children: Array.isArray(node.c) ? node.c.map(expandBlock) : [],
+	}
+
+	if (node.id) block.componentId = node.id
+	if (node.originalElement) block.originalElement = node.originalElement
+	if (node.label) block.blockName = node.label
+
+	return block
+}
+
+/**
+ * Try to parse a partial YAML stream buffer into a Studio block.
+ * Returns null if the buffer is not yet valid YAML or lacks a `name` key.
+ */
+export function tryParseYamlBlock(buffer: string): Record<string, any> | null {
+	if (!buffer.trim()) return null
+	try {
+		const node = yamlLoad(buffer)
+		if (!node || typeof node !== "object" || !("name" in node)) return null
+		return expandBlock(node as Record<string, any>)
+	} catch {
+		return null
+	}
+}
diff --git a/studio/ai.py b/studio/ai.py
index e10b2ffc..b08cb5cd 100644
--- a/studio/ai.py
+++ b/studio/ai.py
@@ -1,10 +1,10 @@
-import json
 import logging
 
 import frappe
 import litellm
 from frappe import _
 
+from studio.ai_block_codec import BlockCodec
 from studio.ai_models import ModelRegistry
 
 litellm.drop_params = True
@@ -74,28 +74,47 @@
 - Combobox: {placeholder: "string", options: [{group: "string", options: [{label, value}]}]}
 """
 
-SYSTEM_PROMPT = f"""You are an expert UI builder for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a JSON block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component or native html element (div) or a Studio Vue component or a Frappe UI Vue component.
+SYSTEM_PROMPT = f"""You are an expert UI builder for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact YAML block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component or native html element (div) or a Studio Vue component or a Frappe UI Vue component.
 
 OUTPUT FORMAT:
-Return ONLY a JSON object with a single key "blocks" containing an array with one root block.
-
-BLOCK STRUCTURE:
-{{
-  "componentName": "string (required)",
-  "componentProps": {{}},      // component-specific props
-  "baseStyles": {{}},          // CSS-in-JS camelCase properties
-  "children": [],              // nested blocks (for container blocks)
-  "componentSlots": {{}}       // for frappe-ui components that hold child content
-}}
+Return ONLY valid compact YAML. No markdown fences, no explanations, no JSON.
+
+BLOCK SCHEMA:
+name: componentName          # required — must match catalog exactly
+originalElement: div|body    # required for container and root blocks
+label: descriptive name
+props:                        # component-specific props (flow style preferred)
+  key: value
+style:                        # CSS-in-JS camelCase (flow style preferred)
+  key: value
+mstyle:                       # mobile style overrides
+  key: value
+tstyle:                       # tablet style overrides
+  key: value
+slots:                        # componentSlots for frappe-ui components that hold child content
+  slotName: ...
+c:                            # children list
+- name: ...
 
 ROOT BLOCK:
-Always start with: {{"componentName": "div", "originalElement": "body", "blockName": "body", "baseStyles": {{"display": "flex", "flexDirection": "column", "flexShrink": 0, "width": "inherit", "overflowX": "hidden", "height": "100%"}}}}
+Always start with:
+name: div
+originalElement: body
+label: body
+style: {{display: flex, flexDirection: column, flexShrink: 0, width: inherit, overflowX: hidden, height: 100%}}
+c:
+- ...
 
 LAYOUT CONTAINERS (CRITICAL — originalElement is required or children won't render):
-{{"componentName": "container", "originalElement": "div", "blockName": "container", "baseStyles": {{}}, "children": [...]}}
-- Use container for all inner layout wrappers — never use "div" as componentName for inner blocks
-- flexDirection: "row" for horizontal layouts, "column" for vertical
-- Use gap, padding for spacing. width: "100%" for full-width sections. flex: 1 to fill space.
+name: container
+originalElement: div
+label: container
+style: {{display: flex, flexDirection: row|column, gap: ..., padding: ...}}
+c:
+- ...
+- Use container for all inner layout wrappers — never use "div" as name for inner blocks
+- flexDirection: row for horizontal layouts, column for vertical
+- Use gap, padding for spacing. width: 100% for full-width sections. flex: 1 to fill space.
 
 COMPONENT STYLING RULES:
 - Always use CSS variables. Avoid raw hex colors/values.
@@ -104,48 +123,52 @@
 	- borderColor: var(--outline-white) | var(--outline-gray-1..5) | var(--outline-red-1..3) | var(--outline-green-1..2) | var(--outline-amber-1..2) | var(--outline-blue-1) | var(--outline-orange-1)
 	- boxShadow: "sm" | "DEFAULT" | "md" | "lg" | "xl" | "2xl" | "none" (keywords only, not raw values)
 	- borderRadius: "none" (0px) | "sm" (0.25rem) | "DEFAULT" (0.5rem) | "md" (0.625rem) | "lg" (0.75rem) | "xl" (1rem) | "2xl" (1.25rem) | "full" (9999px)
-- Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in baseStyles. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
-- Avoid applying visual baseStyles (color, backgroundColor, border, fontSize) to frappe-ui components (eg: height on Button component) — their props handle this. Only use baseStyles on components for layout (width, flex, margin, etc.).
-- TextBlock: use tag prop for semantics (h1/h2/h3 for headings, p for body). Set fontSize/fontWeight/color on TextBlock baseStyles.
+- Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
+- Avoid applying visual style (color, backgroundColor, border, fontSize) to frappe-ui components (eg: height on Button component) — their props handle this. Only use style on components for layout (width, flex, margin, etc.).
+- TextBlock: use tag prop for semantics (h1/h2/h3 for headings, p for body). Set fontSize/fontWeight/color on TextBlock style.
 
 AVAILABLE COMPONENTS:
 {COMPONENT_CATALOG}
 
 RULES:
-- componentName must exactly match a name from the catalog above
-- baseStyles keys must be camelCase CSS (backgroundColor, borderRadius, fontSize, etc.)
-- Do NOT include componentId (auto-generated)
+- name must exactly match a component from the catalog above (or "div" for root, "container" for inner wrappers)
+- style keys must be camelCase CSS (backgroundColor, borderRadius, fontSize, etc.)
+- Do NOT include id (componentId is auto-generated by Studio)
 - Do NOT include parentBlock
-- Keep componentProps to only what's relevant to the description
+- Omit keys whose value is null, empty string, empty dict, or empty list
+- Keep props to only what's relevant to the description
 
 EXAMPLE — "A login form with email, password and a submit button":
-{{
-  "blocks": [{{
-    "componentName": "div", "originalElement": "body", "blockName": "body",
-    "baseStyles": {{"display": "flex", "flexDirection": "column", "flexShrink": 0, "width": "inherit", "overflowX": "hidden", "height": "100%"}},
-    "children": [{{
-      "componentName": "container", "originalElement": "div", "blockName": "container",
-      "baseStyles": {{"display": "flex", "flexDirection": "column", "alignItems": "center", "justifyContent": "center", "flex": 1, "padding": "24px"}},
-      "children": [{{
-        "componentName": "container", "originalElement": "div", "blockName": "container",
-        "baseStyles": {{"display": "flex", "flexDirection": "column", "gap": "16px", "width": "100%", "maxWidth": "400px", "padding": "32px", "backgroundColor": "var(--surface-white)", "borderRadius": "0.75rem", "boxShadow": "md"}},
-        "children": [
-          {{"componentName": "TextBlock", "componentProps": {{"text": "Sign In", "tag": "h2"}}, "baseStyles": {{"fontSize": "20px", "fontWeight": "600", "color": "var(--ink-gray-9)"}}, "children": []}},
-          {{"componentName": "TextInput", "componentProps": {{"placeholder": "Email address"}}, "children": []}},
-          {{"componentName": "FormControl", "componentProps": {{"type": "password", "label": "Password", "placeholder": "Enter password"}}, "children": []}},
-          {{"componentName": "Button", "componentProps": {{"label": "Sign In", "variant": "solid"}}, "children": []}}
-        ]
-      }}]
-    }}]
-  }}]
-}}
+name: div
+originalElement: body
+label: body
+style: {{display: flex, flexDirection: column, flexShrink: 0, width: inherit, overflowX: hidden, height: 100%}}
+c:
+- name: container
+  originalElement: div
+  label: page
+  style: {{display: flex, flexDirection: column, alignItems: center, justifyContent: center, flex: 1, padding: 24px}}
+  c:
+  - name: container
+    originalElement: div
+    label: card
+    style: {{display: flex, flexDirection: column, gap: 16px, width: 100%, maxWidth: 400px, padding: 32px, backgroundColor: 'var(--surface-white)', borderRadius: '0.75rem', boxShadow: md}}
+    c:
+    - name: TextBlock
+      props: {{text: Sign In, tag: h2}}
+      style: {{fontSize: 20px, fontWeight: '600', color: 'var(--ink-gray-9)'}}
+    - name: TextInput
+      props: {{placeholder: Email address}}
+    - name: FormControl
+      props: {{type: password, label: Password, placeholder: Enter password}}
+    - name: Button
+      props: {{label: Sign In, variant: solid}}
 """
 
 
-def call_llm(messages: list, model: str, task_tier: str, api_key: str) -> str:
+def call_llm(messages: list, model: str, task_tier: str, api_key: str, stream: bool = False):
 	params = TASK_PARAMS[task_tier]
-	response = litellm.completion(model=model, messages=messages, api_key=api_key, **params)
-	return response.choices[0].message.content or ""
+	return litellm.completion(model=model, messages=messages, api_key=api_key, stream=stream, **params)
 
 
 def _emit(event_suffix: str, page_id: str, user: str, **kwargs):
@@ -156,32 +179,40 @@ def _emit(event_suffix: str, page_id: str, user: str, **kwargs):
 	)
 
 
+def _progress_stage(content: str) -> str | None:
+	"""Extract a human-readable stage from the tail of a partial YAML stream."""
+	lookback = content[-400:]
+	for section_type in ("section", "nav", "header", "footer"):
+		if lookback.rfind(f"label: {section_type}") != -1 or lookback.rfind(f"name: {section_type}") != -1:
+			return f"Building {section_type}…"
+	return None
+
+
 def run_generation_job(prompt: str, model: str, page_id: str, user: str):
 	settings = frappe.get_single("Studio Settings")
 	api_key = settings.get_password("ai_api_key", raise_exception=False)
 
 	_emit("progress", page_id, user, message=f"Generating with {ModelRegistry.get_label(model)}…")
 
+	content = ""
 	try:
 		messages = [
 			{"role": "system", "content": SYSTEM_PROMPT},
-			{"role": "user", "content": prompt},
+			{"role": "user", "content": f"Create a page for: {prompt}"},
 		]
-		content = call_llm(messages, model, "complex", api_key)
-		content = _strip_fences(content)
-
-		try:
-			parsed = json.loads(content)
-		except json.JSONDecodeError as e:
-			frappe.log_error(title="Studio AI: JSON parse error", message=f"{e}\n{content}")
-			raise ValueError(f"The AI model returned invalid JSON: {e}")
-
-		blocks = parsed.get("blocks", parsed) if isinstance(parsed, dict) else parsed
-		if not isinstance(blocks, list):
-			raise ValueError("AI returned an unexpected response format. Please try again.")
-
-		logger.info(f"run_generation_job complete | model={model} blocks={len(blocks)}")
-		_emit("complete", page_id, user, blocks=blocks)
+		for chunk in call_llm(messages, model, "complex", api_key, stream=True):
+			delta = chunk.choices[0].delta.content
+			if not delta:
+				continue
+			content += delta
+			_emit("stream", page_id, user, chunk=delta)
+			stage = _progress_stage(content)
+			if stage:
+				_emit("progress", page_id, user, message=stage)
+
+		logger.info(f"run_generation_job stream done | model={model} length={len(content)}")
+		block = BlockCodec.parse_blocks(content)
+		_emit("complete", page_id, user, block=block)
 
 	except Exception as e:
 		logger.error(f"run_generation_job failed: {e}", exc_info=True)
@@ -211,12 +242,3 @@ def generate_page_from_prompt(prompt: str, model: str | None, page_id: str) -> d
 
 	frappe.local.response.http_status_code = 202
 	return {"status": "accepted"}
-
-
-def _strip_fences(text: str) -> str:
-	text = text.strip()
-	if text.startswith("```"):
-		lines = text.splitlines()
-		inner_lines = lines[1:-1] if lines[-1].strip() == "```" else lines[1:]
-		return "\n".join(inner_lines).strip()
-	return text
diff --git a/studio/ai_block_codec.py b/studio/ai_block_codec.py
new file mode 100644
index 00000000..9d4bb448
--- /dev/null
+++ b/studio/ai_block_codec.py
@@ -0,0 +1,199 @@
+import re
+
+import yaml
+
+
+class CompactDumper(yaml.Dumper):
+	"""Minimal-whitespace YAML dumper: indentless lists, flow style for flat dicts.
+	Two optimizations over the default Dumper:
+	1. indentless=True — removes the extra 2-space indent on list items inside
+	   mappings, which compounds in deeply nested block trees.
+	2. Flow style for flat dicts — turns multi-line style blocks into single-line
+	   {k: v, k: v} inline mappings, saving ~60% of style-dict tokens.
+	"""
+
+	def increase_indent(self, flow=False, indentless=False):
+		return super().increase_indent(flow=flow, indentless=True)
+
+	def represent_mapping(self, tag, mapping, flow_style=None):
+		if flow_style is None:
+			flow_style = all(not isinstance(v, (dict | list)) for v in mapping.values())
+		return super().represent_mapping(tag, mapping, flow_style=flow_style)
+
+
+def _str_representer(dumper, data):
+	unsafe = (":", "{", "}", "[", "]", "#", "&", "*", "!", "|", ">", "'", '"', "\n")
+	if any(c in data for c in unsafe):
+		return dumper.represent_scalar("tag:yaml.org,2002:str", data, style="'")
+	return dumper.represent_scalar("tag:yaml.org,2002:str", data)
+
+
+CompactDumper.add_representer(str, _str_representer)
+
+# Internal block fields the LLM should never see
+_STRIP_FIELDS = frozenset({"parentBlock", "isStudioComponent", "blockId", "__dirty", "selected", "isVisible"})
+
+
+def _to_yaml(data) -> str:
+	return yaml.dump(
+		data,
+		Dumper=CompactDumper,
+		sort_keys=False,
+		default_flow_style=False,
+		allow_unicode=True,
+		width=1000,
+	)
+
+
+def _strip_fences(text: str) -> str:
+	text = re.sub(r"^```(?:yaml|json)?\s*\n?", "", text.strip())
+	return re.sub(r"\n?```\s*$", "", text).strip()
+
+
+class BlockCodec:
+	@staticmethod
+	def compress(block: dict, depth: int = 0) -> dict:
+		if not isinstance(block, dict):
+			return block
+
+		out = {}
+
+		if cid := block.get("componentId"):
+			out["id"] = cid
+		if name := block.get("componentName"):
+			out["name"] = name
+		if orig := block.get("originalElement"):
+			out["originalElement"] = orig
+		if block.get("blockName"):
+			out["label"] = block["blockName"]
+
+		props = {k: v for k, v in (block.get("componentProps") or {}).items() if v not in (None, "", [], {})}
+		if props:
+			out["props"] = props
+
+		style = block.get("baseStyles") or {}
+		if style:
+			out["style"] = style
+
+		mob = block.get("mobileStyles") or {}
+		if mob:
+			out["mstyle"] = mob
+
+		tab = block.get("tabletStyles") or {}
+		if tab and depth <= 1:
+			out["tstyle"] = tab
+
+		slots = block.get("componentSlots") or {}
+		if slots:
+			out["slots"] = slots
+
+		children = [
+			BlockCodec.compress(c, depth + 1) for c in block.get("children", []) if isinstance(c, dict)
+		]
+		if children:
+			out["c"] = children
+
+		return out
+
+	@staticmethod
+	def expand(node: dict) -> dict:
+		if not isinstance(node, dict):
+			return node
+
+		block: dict = {
+			"componentName": node.get("name", "container"),
+			"baseStyles": node.get("style") or {},
+			"componentProps": node.get("props") or {},
+			"componentSlots": node.get("slots") or {},
+			"mobileStyles": node.get("mstyle") or {},
+			"tabletStyles": node.get("tstyle") or {},
+			"children": [BlockCodec.expand(c) for c in node.get("c", []) if isinstance(c, dict)],
+		}
+
+		if cid := node.get("id"):
+			block["componentId"] = cid
+		if orig := node.get("originalElement"):
+			block["originalElement"] = orig
+		if label := node.get("label"):
+			block["blockName"] = label
+
+		return block
+
+	@staticmethod
+	def parse_blocks(content: str) -> dict:
+		cleaned = _strip_fences(content)
+		parsed = yaml.safe_load(cleaned)
+
+		if isinstance(parsed, list):
+			node = parsed[0] if parsed else {}
+		elif isinstance(parsed, dict):
+			node = parsed
+		else:
+			raise ValueError("LLM response is not a valid block object")
+
+		if not node:
+			raise ValueError("LLM response produced an empty block")
+
+		return BlockCodec.expand(node)
+
+	@staticmethod
+	def parse_partial(content: str) -> dict | None:
+		"""Best-effort parse of a partial YAML stream. Returns None on failure."""
+		if not content or not content.strip():
+			return None
+		try:
+			cleaned = _strip_fences(content)
+			parsed = yaml.safe_load(cleaned)
+			if isinstance(parsed, list):
+				node = parsed[0] if parsed else None
+			elif isinstance(parsed, dict):
+				node = parsed
+			else:
+				return None
+			if not node or not isinstance(node, dict):
+				return None
+			if "name" not in node:
+				return None
+			return BlockCodec.expand(node)
+		except yaml.YAMLError:
+			return None
+
+	@staticmethod
+	def strip_context(block_json: str, task_type: str = "full") -> str:
+		"""Compress a block to YAML for LLM context, extracting relevant subset."""
+		import json
+
+		try:
+			data = json.loads(block_json)
+		except (json.JSONDecodeError, TypeError):
+			return block_json
+
+		if isinstance(data, list):
+			data = data[0] if data else {}
+		if not isinstance(data, dict):
+			return block_json
+
+		if task_type == "text_only":
+			texts = []
+			_collect_text(data, texts)
+			return "\n".join(texts)
+
+		if task_type == "image_attrs":
+			props = data.get("componentProps") or {}
+			return _to_yaml({"src": props.get("image", ""), "alt": props.get("alt", "")})
+
+		return _to_yaml([BlockCodec.compress(data)])
+
+
+def _collect_text(block: dict, results: list):
+	props = block.get("componentProps") or {}
+	if text := props.get("text") or props.get("label") or props.get("placeholder"):
+		results.append(str(text))
+	for child in block.get("children", []):
+		_collect_text(child, results)
+	for slot in (block.get("componentSlots") or {}).values():
+		if isinstance(slot, dict):
+			for slot_child in (
+				slot.get("slotContent", []) if isinstance(slot.get("slotContent"), list) else []
+			):
+				_collect_text(slot_child, results)
diff --git a/yarn.lock b/yarn.lock
index 3df02b60..39f1ec9b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1555,6 +1555,11 @@
   dependencies:
     "@types/unist" "*"
 
+"@types/js-yaml@^4.0.9":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.9.tgz#cd82382c4f902fed9691a2ed79ec68c5898af4c2"
+  integrity sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==
+
 "@types/json-schema@^7.0.15":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
@@ -4322,7 +4327,7 @@ js-tokens@^9.0.1:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-9.0.1.tgz#2ec43964658435296f6761b34e10671c2d9527f4"
   integrity sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==
 
-js-yaml@^4.1.0:
+js-yaml@^4.1.0, js-yaml@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.1.tgz#854c292467705b699476e1a2decc0c8a3458806b"
   integrity sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==

From 7a214f7b849a0e4a945e94d10de7fb6642e28ee0 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 12:30:55 +0530
Subject: [PATCH 13/57] refactor: convert streamBuffer to ref, offload handling
 update chunking to vue, eliminate requestAnimationFrame

---
 frontend/src/components/AIPanel.vue | 35 +++++++++--------------------
 1 file changed, 11 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/AIPanel.vue b/frontend/src/components/AIPanel.vue
index d7c8df05..2914b772 100644
--- a/frontend/src/components/AIPanel.vue
+++ b/frontend/src/components/AIPanel.vue
@@ -53,8 +53,7 @@ const loading = ref(false)
 const error = ref("")
 const statusMessage = ref("")
 const selectedModel = ref("")
-let streamBuffer = ""
-let streamFrameId: number | null = null
+const streamBuffer = ref("")
 
 const pageId = computed(() => store.activePage?.name ?? "")
 
@@ -87,27 +86,19 @@ function onProgress(data: any) {
 }
 
 function onStream(data: any) {
-	streamBuffer += data.chunk || ""
-	if (streamFrameId !== null) return
-	streamFrameId = requestAnimationFrame(() => {
-		streamFrameId = null
-		const block = tryParseYamlBlock(streamBuffer)
-		if (block) {
-			const rootBlock = getBlockInstance(block as any)
-			canvasStore.activeCanvas?.setRootBlock(rootBlock)
-			store.pageBlocks = [rootBlock]
-		}
-	})
+	streamBuffer.value += data.chunk || ""
+	const block = tryParseYamlBlock(streamBuffer.value)
+	if (block) {
+		const rootBlock = getBlockInstance(block as any)
+		canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
+		store.pageBlocks = [rootBlock]
+	}
 }
 
 async function onComplete(data: any) {
 	loading.value = false
 	statusMessage.value = ""
-	streamBuffer = ""
-	if (streamFrameId !== null) {
-		cancelAnimationFrame(streamFrameId)
-		streamFrameId = null
-	}
+	streamBuffer.value = ""
 
 	const block: Block = data.block
 	if (!block) {
@@ -116,7 +107,7 @@ async function onComplete(data: any) {
 	}
 
 	const rootBlock = getBlockInstance(block)
-	canvasStore.activeCanvas?.setRootBlock(rootBlock)
+	canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
 	store.pageBlocks = [rootBlock]
 
 	await store.savePage()
@@ -127,11 +118,7 @@ async function onComplete(data: any) {
 function onError(data: any) {
 	loading.value = false
 	statusMessage.value = ""
-	streamBuffer = ""
-	if (streamFrameId !== null) {
-		cancelAnimationFrame(streamFrameId)
-		streamFrameId = null
-	}
+	streamBuffer.value = ""
 	error.value = data.message || "Generation failed. Please check your Studio Settings and try again."
 }
 

From 8a2d50e68c93439836625cb04123cd3ce04fd46d Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 13:23:12 +0530
Subject: [PATCH 14/57] fix(Style Panel): change background property input to
 backgroundColor

- since token selection here is also for colors and LLMs return only the color
---
 frontend/src/components/ComponentStyles.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ComponentStyles.vue b/frontend/src/components/ComponentStyles.vue
index 35e63d17..28c1ea4f 100644
--- a/frontend/src/components/ComponentStyles.vue
+++ b/frontend/src/components/ComponentStyles.vue
@@ -538,17 +538,17 @@ const styleSectionProperties = [
 		getProps: () => {
 			return {
 				label: "BG Color",
-				modelValue: blockController.getStyle("background"),
+				modelValue: blockController.getStyle("backgroundColor"),
 				property: "backgroundColor",
 			}
 		},
 		searchKeyWords: "Background, BackgroundColor, Background Color, BG, BGColor, BG Color",
 		events: {
-			"update:modelValue": (val: StyleValue) => blockController.setStyle("background", val),
+			"update:modelValue": (val: StyleValue) => blockController.setStyle("backgroundColor", val),
 		},
 		allowDynamicValue: true,
 		getValue: () => {
-			return blockController.getStyle("background")
+			return blockController.getStyle("backgroundColor")
 		},
 	},
 	{

From c7bf2d034fb09ce00c44f527e3443236cf66eed6 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 13:33:38 +0530
Subject: [PATCH 15/57] fix(Style Panel): keep border style controls together

---
 frontend/src/components/ComponentStyles.vue | 30 ++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/ComponentStyles.vue b/frontend/src/components/ComponentStyles.vue
index 28c1ea4f..405eff12 100644
--- a/frontend/src/components/ComponentStyles.vue
+++ b/frontend/src/components/ComponentStyles.vue
@@ -551,6 +551,21 @@ const styleSectionProperties = [
 			return blockController.getStyle("backgroundColor")
 		},
 	},
+	{
+		component: ColorInput,
+		getProps: () => {
+			return {
+				label: "Text Color",
+				modelValue: blockController.getStyle("color"),
+				property: "textColor",
+			}
+		},
+		events: {
+			"update:modelValue": (val: StyleValue) => blockController.setStyle("color", val),
+		},
+		allowDynamicValue: true,
+		searchKeyWords: "Text, Color, TextColor, Text Color",
+	},
 	{
 		component: ColorInput,
 		getProps: () => {
@@ -580,21 +595,6 @@ const styleSectionProperties = [
 			return blockController.getStyle("borderColor")
 		},
 	},
-	{
-		component: ColorInput,
-		getProps: () => {
-			return {
-				label: "Text Color",
-				modelValue: blockController.getStyle("color"),
-				property: "textColor",
-			}
-		},
-		events: {
-			"update:modelValue": (val: StyleValue) => blockController.setStyle("color", val),
-		},
-		allowDynamicValue: true,
-		searchKeyWords: "Text, Color, TextColor, Text Color",
-	},
 	{
 		component: InlineInput,
 		getProps: () => {

From 59c75af20e6d23f9dd5e8c316237499714f84db5 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 13:52:41 +0530
Subject: [PATCH 16/57] fix: instruct LLM to apply border properties separately

---
 studio/ai.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/studio/ai.py b/studio/ai.py
index b08cb5cd..4a8e87f5 100644
--- a/studio/ai.py
+++ b/studio/ai.py
@@ -121,10 +121,13 @@
 	- backgroundColor:  var(--surface-white) | var(--surface-gray-1..7) | var(--surface-cards) | var(--surface-red-1) | var(--surface-green-1) | var(--surface-amber-1) | var(--surface-blue-1)
 	- color (text): var(--ink-white) | var(--ink-gray-1..9)
 	- borderColor: var(--outline-white) | var(--outline-gray-1..5) | var(--outline-red-1..3) | var(--outline-green-1..2) | var(--outline-amber-1..2) | var(--outline-blue-1) | var(--outline-orange-1)
+	- borderWidth
+	- borderStyle: solid | dashed | dotted
+	- NEVER use the `border` shorthand — always set borderColor, borderWidth, borderStyle as separate keys
 	- boxShadow: "sm" | "DEFAULT" | "md" | "lg" | "xl" | "2xl" | "none" (keywords only, not raw values)
 	- borderRadius: "none" (0px) | "sm" (0.25rem) | "DEFAULT" (0.5rem) | "md" (0.625rem) | "lg" (0.75rem) | "xl" (1rem) | "2xl" (1.25rem) | "full" (9999px)
 - Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
-- Avoid applying visual style (color, backgroundColor, border, fontSize) to frappe-ui components (eg: height on Button component) — their props handle this. Only use style on components for layout (width, flex, margin, etc.).
+- Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components (eg: height on Button component) — their props handle this. Only use style on components for layout (width, flex, margin, etc.).
 - TextBlock: use tag prop for semantics (h1/h2/h3 for headings, p for body). Set fontSize/fontWeight/color on TextBlock style.
 
 AVAILABLE COMPONENTS:

From f61a341b3bfe388fa4d2f709bb613b8d505fd3eb Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 13:59:50 +0530
Subject: [PATCH 17/57] fix(streaming): attach/detach socket listeners on page
 switch instead of component mount/unmount

---
 frontend/src/components/AIPanel.vue | 39 +++++++++++++++++------------
 frontend/src/types/index.ts         |  2 +-
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/AIPanel.vue b/frontend/src/components/AIPanel.vue
index 2914b772..fe174714 100644
--- a/frontend/src/components/AIPanel.vue
+++ b/frontend/src/components/AIPanel.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, inject, onMounted, onUnmounted } from "vue"
+import { ref, computed, inject, watch } from "vue"
 import { ErrorMessage, Button, Textarea, Select, call, createResource } from "frappe-ui"
 import { toast } from "vue-sonner"
 import useStudioStore from "@/stores/studioStore"
@@ -123,25 +123,32 @@ function onError(data: any) {
 }
 
 function setupListeners() {
-	const id = pageId.value
-	if (!socket || !id) return
-	socket.on(`ai_generation_progress_${id}`, onProgress)
-	socket.on(`ai_generation_stream_${id}`, onStream)
-	socket.on(`ai_generation_complete_${id}`, onComplete)
-	socket.on(`ai_generation_error_${id}`, onError)
+	if (!socket || !pageId.value) return
+	socket.on(`ai_generation_progress_${pageId.value}`, onProgress)
+	socket.on(`ai_generation_stream_${pageId.value}`, onStream)
+	socket.on(`ai_generation_complete_${pageId.value}`, onComplete)
+	socket.on(`ai_generation_error_${pageId.value}`, onError)
 }
 
-function teardownListeners() {
-	const id = pageId.value
-	if (!socket || !id) return
-	socket.off(`ai_generation_progress_${id}`, onProgress)
-	socket.off(`ai_generation_stream_${id}`, onStream)
-	socket.off(`ai_generation_complete_${id}`, onComplete)
-	socket.off(`ai_generation_error_${id}`, onError)
+function detachListeners() {
+	if (!socket || !pageId.value) return
+	socket.off(`ai_generation_progress_${pageId.value}`, onProgress)
+	socket.off(`ai_generation_stream_${pageId.value}`, onStream)
+	socket.off(`ai_generation_complete_${pageId.value}`, onComplete)
+	socket.off(`ai_generation_error_${pageId.value}`, onError)
 }
 
-onMounted(setupListeners)
-onUnmounted(teardownListeners)
+watch(
+	() => pageId.value,
+	(newId, oldId) => {
+		if (oldId) {
+			detachListeners()
+		}
+		if (newId) {
+			setupListeners()
+		}
+	},
+)
 
 async function generate() {
 	if (!prompt.value.trim()) return
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 5bb665a9..b7be317a 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -23,7 +23,7 @@ export interface BlockOptions {
 	rawStyles?: BlockStyleMap
 	mobileStyles?: BlockStyleMap
 	tabletStyles?: BlockStyleMap
-	blockName?: string
+	blockName?: string // optional user-friendly name for the block
 	parentBlock?: Block | null
 	classes?: string[]
 	parentSlotName?: string // for top-level blocks inside a slot

From 70ba3d84d35f603e443b81f459070ab52fc9492a Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 14:12:52 +0530
Subject: [PATCH 18/57] refactor: move ai files under ai folder and update
 paths

---
 frontend/src/components/AIPanel.vue             | 4 ++--
 studio/{ai_block_codec.py => ai/block_codec.py} | 0
 studio/{ai_models.py => ai/models.py}           | 0
 studio/{ai.py => ai/page_generator.py}          | 4 ++--
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename studio/{ai_block_codec.py => ai/block_codec.py} (100%)
 rename studio/{ai_models.py => ai/models.py} (100%)
 rename studio/{ai.py => ai/page_generator.py} (99%)

diff --git a/frontend/src/components/AIPanel.vue b/frontend/src/components/AIPanel.vue
index fe174714..8dbd137f 100644
--- a/frontend/src/components/AIPanel.vue
+++ b/frontend/src/components/AIPanel.vue
@@ -70,7 +70,7 @@ const contextHint = computed(() =>
 )
 
 const aiModels = createResource({
-	url: "studio.ai_models.get_ai_models",
+	url: "studio.ai.models.get_ai_models",
 	auto: true,
 	onSuccess(data: any[]) {
 		if (data?.length && !selectedModel.value) {
@@ -157,7 +157,7 @@ async function generate() {
 	statusMessage.value = ""
 
 	try {
-		await call("studio.ai.generate_page_from_prompt", {
+		await call("studio.ai.page_generator.generate_page_from_prompt", {
 			prompt: prompt.value,
 			model: selectedModel.value,
 			page_id: pageId.value,
diff --git a/studio/ai_block_codec.py b/studio/ai/block_codec.py
similarity index 100%
rename from studio/ai_block_codec.py
rename to studio/ai/block_codec.py
diff --git a/studio/ai_models.py b/studio/ai/models.py
similarity index 100%
rename from studio/ai_models.py
rename to studio/ai/models.py
diff --git a/studio/ai.py b/studio/ai/page_generator.py
similarity index 99%
rename from studio/ai.py
rename to studio/ai/page_generator.py
index 4a8e87f5..6bad8956 100644
--- a/studio/ai.py
+++ b/studio/ai/page_generator.py
@@ -4,8 +4,8 @@
 import litellm
 from frappe import _
 
-from studio.ai_block_codec import BlockCodec
-from studio.ai_models import ModelRegistry
+from studio.ai.block_codec import BlockCodec
+from studio.ai.models import ModelRegistry
 
 litellm.drop_params = True
 logger = frappe.logger("studio.ai")

From f9f18d6dd9e43577f92464a47f667d04271482db Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 14:42:00 +0530
Subject: [PATCH 19/57] fix: check page write permission in AI whitelisted
 functions

---
 studio/ai/models.py         |  3 +++
 studio/ai/page_generator.py |  2 ++
 studio/utils.py             | 24 ++++++++++++++++++++++++
 3 files changed, 29 insertions(+)

diff --git a/studio/ai/models.py b/studio/ai/models.py
index 59e021cd..45416a96 100644
--- a/studio/ai/models.py
+++ b/studio/ai/models.py
@@ -1,5 +1,7 @@
 import frappe
 
+from studio.utils import has_page_write_perm
+
 
 class ModelRegistry:
 	AVAILABLE = [
@@ -38,5 +40,6 @@ def list_all(cls) -> list:
 
 
 @frappe.whitelist()
+@has_page_write_perm()
 def get_ai_models() -> list:
 	return ModelRegistry.list_all()
diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index 6bad8956..5ab6e18c 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -6,6 +6,7 @@
 
 from studio.ai.block_codec import BlockCodec
 from studio.ai.models import ModelRegistry
+from studio.utils import has_page_write_perm
 
 litellm.drop_params = True
 logger = frappe.logger("studio.ai")
@@ -224,6 +225,7 @@ def run_generation_job(prompt: str, model: str, page_id: str, user: str):
 
 
 @frappe.whitelist()
+@has_page_write_perm()
 def generate_page_from_prompt(prompt: str, model: str | None, page_id: str) -> dict:
 	if not frappe.has_permission("Studio Page", ptype="write"):
 		frappe.throw(_("You do not have permission to modify pages"))
diff --git a/studio/utils.py b/studio/utils.py
index ec0af92b..86450375 100644
--- a/studio/utils.py
+++ b/studio/utils.py
@@ -1,4 +1,7 @@
 import re
+from functools import wraps
+
+import frappe
 
 
 def camel_case_to_kebab_case(text, remove_spaces=False):
@@ -8,3 +11,24 @@ def camel_case_to_kebab_case(text, remove_spaces=False):
 	if remove_spaces:
 		text = text.replace(" ", "")
 	return text
+
+
+def has_page_write_perm(message: str | None = None):
+	"""Decorator to check if user has permission to edit Studio Page.
+
+	Args:
+	        message: Custom error message to display if permission is denied.
+	                 If not provided, defaults to "You do not have permission to modify pages"
+	"""
+
+	def decorator(fn):
+		@wraps(fn)
+		def wrapper(*args, **kwargs):
+			if not frappe.has_permission("Studio Page", ptype="write"):
+				error_message = message or frappe._("You do not have permission to modify pages")
+				frappe.throw(error_message)
+			return fn(*args, **kwargs)
+
+		return wrapper
+
+	return decorator

From e25cb3e7795b4eac7e12f1c3847c5d172db50da7 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 19:24:23 +0530
Subject: [PATCH 20/57] feat: AI Session

- similar to Builder

- add AI Session doctype for persistence

- convert single prompt to chat panel

- build context string for the whole session and pass to the llm

Co-authored-by: Suraj Shetty <surajshetty3416@gmail.com>
---
 frontend/components.d.ts                      |   2 +-
 frontend/src/components/AIChatPanel.vue       | 263 ++++++++++++++++++
 frontend/src/components/AIPanel.vue           | 171 ------------
 frontend/src/components/StudioLeftPanel.vue   |   6 +-
 frontend/src/types/index.ts                   |   2 +-
 studio/ai/page_generator.py                   |  34 ++-
 studio/ai/session.py                          | 126 +++++++++
 .../doctype/studio_ai_session/__init__.py     |   0
 .../studio_ai_session/studio_ai_session.json  |  97 +++++++
 .../studio_ai_session/studio_ai_session.py    |  23 ++
 10 files changed, 545 insertions(+), 179 deletions(-)
 create mode 100644 frontend/src/components/AIChatPanel.vue
 delete mode 100644 frontend/src/components/AIPanel.vue
 create mode 100644 studio/ai/session.py
 create mode 100644 studio/studio/doctype/studio_ai_session/__init__.py
 create mode 100644 studio/studio/doctype/studio_ai_session/studio_ai_session.json
 create mode 100644 studio/studio/doctype/studio_ai_session/studio_ai_session.py

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 28ac4119..c168c336 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -8,7 +8,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AIPanel: typeof import('./src/components/AIPanel.vue')['default']
+    AIChatPanel: typeof import('./src/components/AIChatPanel.vue')['default']
     AppComponent: typeof import('./src/components/AppComponent.vue')['default']
     AppDialog: typeof import('./src/components/AppDialog.vue')['default']
     AppHeader: typeof import('./src/components/AppLayout/AppHeader.vue')['default']
diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
new file mode 100644
index 00000000..51944e23
--- /dev/null
+++ b/frontend/src/components/AIChatPanel.vue
@@ -0,0 +1,263 @@
+<template>
+	<div class="flex h-full min-h-full flex-col bg-surface-white">
+		<div class="flex items-center justify-between border-b border-outline-gray-1 px-3 py-2.5">
+			<div class="text-[11px] leading-4 text-ink-gray-5">Session persists for this page</div>
+			<button
+				v-if="messages.length"
+				class="text-xs text-ink-gray-4 hover:text-ink-gray-9"
+				@click="clearSession"
+			>
+				Clear
+			</button>
+		</div>
+
+		<div ref="messagesEl" class="no-scrollbar flex-1 space-y-4 overflow-y-auto px-4 py-4">
+			<div
+				v-if="!messages.length"
+				class="flex h-full flex-col items-center justify-center gap-2 pb-8 text-center"
+			>
+				<FeatherIcon name="cpu" class="h-8 w-8 text-ink-gray-3" />
+				<p class="text-xs text-ink-gray-4">Chat to create or edit page</p>
+			</div>
+
+			<template v-for="msg in messages" :key="msg.id">
+				<div v-if="msg.role === 'user'" class="flex flex-col items-end">
+					<div class="w-fit max-w-[88%] rounded-md border px-3 py-2 text-sm text-ink-gray-8">
+						<div class="whitespace-pre-wrap break-words">{{ msg.content }}</div>
+					</div>
+				</div>
+				<div v-else class="flex flex-col items-start">
+					<div class="w-fit max-w-full text-sm text-ink-gray-8">
+						<div class="whitespace-pre-wrap break-words">{{ msg.content }}</div>
+					</div>
+				</div>
+			</template>
+
+			<p v-if="loading" class="text-xs italic text-ink-gray-5">
+				{{ statusMessage || "Generating…" }}
+			</p>
+		</div>
+
+		<div class="border-t border-outline-gray-1 p-4">
+			<ErrorMessage v-if="error" :message="error" class="mb-2" />
+
+			<div class="relative">
+				<textarea
+					v-model="prompt"
+					rows="4"
+					class="w-full resize-none rounded border border-[--surface-gray-2] bg-surface-gray-2 px-2 py-1.5 text-sm text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-[--outline-gray-modals] hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 disabled:cursor-not-allowed disabled:bg-surface-gray-1 disabled:text-ink-gray-5"
+					placeholder="Ask to create or edit this page..."
+					:disabled="loading"
+					@keydown.meta.enter="generate"
+					@keydown.ctrl.enter="generate"
+				/>
+			</div>
+
+			<div class="mt-2 flex items-center justify-between gap-2">
+				<Popover placement="top-start" :offset="6">
+					<template #target="{ togglePopover }">
+						<button
+							class="flex h-7 max-w-[9rem] items-center gap-1.5 rounded px-1.5 text-ink-gray-5 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-8"
+							@click="togglePopover"
+						>
+							<FeatherIcon name="cpu" class="h-3.5 w-3.5 shrink-0" />
+							<span class="truncate text-xs">{{ modelLabel }}</span>
+						</button>
+					</template>
+					<template #body="{ close }">
+						<div class="min-w-40 rounded-lg border border-outline-gray-2 bg-surface-white py-1 shadow-lg">
+							<button
+								v-for="option in modelOptions"
+								:key="option.value"
+								class="flex w-full items-center px-3 py-1.5 text-left text-sm text-ink-gray-7 hover:bg-surface-gray-2"
+								:class="{ 'font-medium text-ink-gray-9': option.value === selectedModel }"
+								@click="
+									() => {
+										selectedModel = option.value
+										close()
+									}
+								"
+							>
+								{{ option.label }}
+							</button>
+						</div>
+					</template>
+				</Popover>
+
+				<Button
+					variant="solid"
+					label="Generate"
+					icon="arrow-up"
+					:loading="loading"
+					:disabled="!prompt.trim()"
+					@click="generate"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, inject, watch, nextTick } from "vue"
+import { ErrorMessage, Button, FeatherIcon, call, createResource, Popover } from "frappe-ui"
+import { toast } from "vue-sonner"
+import useStudioStore from "@/stores/studioStore"
+import useCanvasStore from "@/stores/canvasStore"
+import { getBlockInstance } from "@/utils/serializer"
+import { tryParseYamlBlock } from "@/utils/blockCodec"
+import type Block from "@/utils/block"
+
+const store = useStudioStore()
+const canvasStore = useCanvasStore()
+const socket = inject<any>("socket")
+
+const prompt = ref("")
+const loading = ref(false)
+const error = ref("")
+const statusMessage = ref("")
+const selectedModel = ref("")
+const streamBuffer = ref("")
+const messages = ref<any[]>([])
+const messagesEl = ref<HTMLElement | null>(null)
+
+const pageId = computed(() => store.activePage?.name ?? "")
+
+const aiModels = createResource({
+	url: "studio.ai.models.get_ai_models",
+	auto: true,
+	onSuccess(data: any[]) {
+		if (data?.length && !selectedModel.value) {
+			selectedModel.value = data[0].id
+		}
+	},
+})
+
+const modelOptions = computed(() => (aiModels.data ?? []).map((m: any) => ({ label: m.label, value: m.id })))
+
+const modelLabel = computed(() => {
+	const selected = modelOptions.value.find((m: any) => m.value === selectedModel.value)
+	return selected ? selected.label : "Model"
+})
+
+const sessionResource = createResource({
+	url: "studio.ai.page_generator.get_ai_session",
+	onSuccess(data: any) {
+		messages.value = data.messages ?? []
+		if (data.selected_model && !selectedModel.value) {
+			selectedModel.value = data.selected_model
+		}
+		scrollToBottom()
+	},
+})
+
+function scrollToBottom() {
+	nextTick(() => {
+		if (messagesEl.value) {
+			messagesEl.value.scrollIntoView({ block: "end", behavior: "smooth" })
+		}
+	})
+}
+
+function reloadSession() {
+	if (pageId.value) {
+		sessionResource.submit({ page_id: pageId.value })
+	}
+}
+
+function onProgress(data: any) {
+	statusMessage.value = data.message || "Generating…"
+}
+
+function onStream(data: any) {
+	streamBuffer.value += data.chunk || ""
+	const block = tryParseYamlBlock(streamBuffer.value)
+	if (block) {
+		const rootBlock = getBlockInstance(block as any)
+		canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
+		store.pageBlocks = [rootBlock]
+	}
+}
+
+async function onComplete(data: any) {
+	loading.value = false
+	statusMessage.value = ""
+	streamBuffer.value = ""
+
+	const block: Block = data.block
+	if (!block) {
+		error.value = "No block was generated. Try a more descriptive prompt."
+		return
+	}
+
+	const rootBlock = getBlockInstance(block)
+	canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
+	store.pageBlocks = [rootBlock]
+
+	await store.savePage()
+	toast.success("Page generated successfully")
+	prompt.value = ""
+	reloadSession()
+}
+
+function onError(data: any) {
+	loading.value = false
+	statusMessage.value = ""
+	streamBuffer.value = ""
+	error.value = data.message || "Generation failed. Please check your Studio Settings and try again."
+}
+
+function setupListeners() {
+	if (!socket || !pageId.value) return
+	socket.on(`ai_generation_progress_${pageId.value}`, onProgress)
+	socket.on(`ai_generation_stream_${pageId.value}`, onStream)
+	socket.on(`ai_generation_complete_${pageId.value}`, onComplete)
+	socket.on(`ai_generation_error_${pageId.value}`, onError)
+}
+
+function detachListeners() {
+	if (!socket || !pageId.value) return
+	socket.off(`ai_generation_progress_${pageId.value}`, onProgress)
+	socket.off(`ai_generation_stream_${pageId.value}`, onStream)
+	socket.off(`ai_generation_complete_${pageId.value}`, onComplete)
+	socket.off(`ai_generation_error_${pageId.value}`, onError)
+}
+
+watch(
+	() => pageId.value,
+	(newId, oldId) => {
+		if (oldId) detachListeners()
+		if (newId) {
+			setupListeners()
+			sessionResource.submit({ page_id: newId })
+		}
+	},
+	{ immediate: true },
+)
+
+async function generate() {
+	if (!prompt.value.trim()) return
+	loading.value = true
+	error.value = ""
+	statusMessage.value = ""
+
+	messages.value = [...messages.value, { id: Date.now(), role: "user", content: prompt.value }]
+	scrollToBottom()
+
+	try {
+		await call("studio.ai.page_generator.generate_page_from_prompt", {
+			prompt: prompt.value,
+			model: selectedModel.value,
+			page_id: pageId.value,
+		})
+	} catch (e: any) {
+		loading.value = false
+		statusMessage.value = ""
+		error.value = e?.message || "Failed to start generation. Please try again."
+	}
+}
+
+async function clearSession() {
+	await call("studio.ai.page_generator.clear_ai_session", { page_id: pageId.value })
+	messages.value = []
+}
+</script>
diff --git a/frontend/src/components/AIPanel.vue b/frontend/src/components/AIPanel.vue
deleted file mode 100644
index 8dbd137f..00000000
--- a/frontend/src/components/AIPanel.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-	<div class="flex flex-col gap-4 p-4">
-		<div class="flex flex-col gap-1">
-			<p class="text-sm font-medium text-ink-gray-7">Describe your page</p>
-			<p class="text-xs text-ink-gray-5">{{ contextHint }}</p>
-		</div>
-
-		<Select
-			v-if="modelOptions.length"
-			v-model="selectedModel"
-			:options="modelOptions"
-			placeholder="Select a model"
-			:disabled="loading"
-		/>
-
-		<Textarea
-			v-model="prompt"
-			:rows="6"
-			placeholder="e.g. A user profile page with name, email, bio fields and a save button"
-			:disabled="loading"
-		/>
-
-		<p v-if="statusMessage" class="text-xs italic text-ink-gray-5">{{ statusMessage }}</p>
-		<ErrorMessage v-if="error" :message="error" />
-
-		<Button
-			variant="solid"
-			label="Generate"
-			:loading="loading"
-			:disabled="!prompt.trim()"
-			class="w-full"
-			@click="generate"
-		/>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, inject, watch } from "vue"
-import { ErrorMessage, Button, Textarea, Select, call, createResource } from "frappe-ui"
-import { toast } from "vue-sonner"
-import useStudioStore from "@/stores/studioStore"
-import useCanvasStore from "@/stores/canvasStore"
-import { getBlockInstance } from "@/utils/serializer"
-import { tryParseYamlBlock } from "@/utils/blockCodec"
-import type Block from "@/utils/block"
-
-const store = useStudioStore()
-const canvasStore = useCanvasStore()
-const socket = inject<any>("socket")
-
-const prompt = ref("")
-const loading = ref(false)
-const error = ref("")
-const statusMessage = ref("")
-const selectedModel = ref("")
-const streamBuffer = ref("")
-
-const pageId = computed(() => store.activePage?.name ?? "")
-
-const selectedBlock = computed(() => {
-	const block = canvasStore.activeCanvas?.selectedBlocks?.[0] ?? null
-	if (block?.isRoot()) return null
-	return block
-})
-
-const contextHint = computed(() =>
-	selectedBlock.value
-		? `Generating children for "${selectedBlock.value.blockName || selectedBlock.value.componentName}"`
-		: "Generating a full page",
-)
-
-const aiModels = createResource({
-	url: "studio.ai.models.get_ai_models",
-	auto: true,
-	onSuccess(data: any[]) {
-		if (data?.length && !selectedModel.value) {
-			selectedModel.value = data[0].id
-		}
-	},
-})
-
-const modelOptions = computed(() => (aiModels.data ?? []).map((m: any) => ({ label: m.label, value: m.id })))
-
-function onProgress(data: any) {
-	statusMessage.value = data.message || "Generating…"
-}
-
-function onStream(data: any) {
-	streamBuffer.value += data.chunk || ""
-	const block = tryParseYamlBlock(streamBuffer.value)
-	if (block) {
-		const rootBlock = getBlockInstance(block as any)
-		canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
-		store.pageBlocks = [rootBlock]
-	}
-}
-
-async function onComplete(data: any) {
-	loading.value = false
-	statusMessage.value = ""
-	streamBuffer.value = ""
-
-	const block: Block = data.block
-	if (!block) {
-		error.value = "No block was generated. Try a more descriptive prompt."
-		return
-	}
-
-	const rootBlock = getBlockInstance(block)
-	canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
-	store.pageBlocks = [rootBlock]
-
-	await store.savePage()
-	toast.success("Page generated successfully")
-	prompt.value = ""
-}
-
-function onError(data: any) {
-	loading.value = false
-	statusMessage.value = ""
-	streamBuffer.value = ""
-	error.value = data.message || "Generation failed. Please check your Studio Settings and try again."
-}
-
-function setupListeners() {
-	if (!socket || !pageId.value) return
-	socket.on(`ai_generation_progress_${pageId.value}`, onProgress)
-	socket.on(`ai_generation_stream_${pageId.value}`, onStream)
-	socket.on(`ai_generation_complete_${pageId.value}`, onComplete)
-	socket.on(`ai_generation_error_${pageId.value}`, onError)
-}
-
-function detachListeners() {
-	if (!socket || !pageId.value) return
-	socket.off(`ai_generation_progress_${pageId.value}`, onProgress)
-	socket.off(`ai_generation_stream_${pageId.value}`, onStream)
-	socket.off(`ai_generation_complete_${pageId.value}`, onComplete)
-	socket.off(`ai_generation_error_${pageId.value}`, onError)
-}
-
-watch(
-	() => pageId.value,
-	(newId, oldId) => {
-		if (oldId) {
-			detachListeners()
-		}
-		if (newId) {
-			setupListeners()
-		}
-	},
-)
-
-async function generate() {
-	if (!prompt.value.trim()) return
-	loading.value = true
-	error.value = ""
-	statusMessage.value = ""
-
-	try {
-		await call("studio.ai.page_generator.generate_page_from_prompt", {
-			prompt: prompt.value,
-			model: selectedModel.value,
-			page_id: pageId.value,
-		})
-	} catch (e: any) {
-		loading.value = false
-		statusMessage.value = ""
-		error.value = e?.message || "Failed to start generation. Please try again."
-	}
-}
-</script>
diff --git a/frontend/src/components/StudioLeftPanel.vue b/frontend/src/components/StudioLeftPanel.vue
index 24363d4a..022bb3b8 100644
--- a/frontend/src/components/StudioLeftPanel.vue
+++ b/frontend/src/components/StudioLeftPanel.vue
@@ -71,7 +71,7 @@
 					/>
 				</div>
 
-				<AIPanel v-show="activeTab === 'AI'" />
+				<AIChatPanel v-show="activeTab === 'AI Assistant'" />
 			</div>
 		</transition>
 	</div>
@@ -88,7 +88,7 @@ import ComponentLayers from "@/components/ComponentLayers.vue"
 import DataPanel from "@/components/DataPanel.vue"
 import CodePanel from "@/components/CodePanel.vue"
 import IconButton from "@/components/IconButton.vue"
-import AIPanel from "@/components/AIPanel.vue"
+import AIChatPanel from "@/components/AIChatPanel.vue"
 
 import Block from "@/utils/block"
 import useStudioStore from "@/stores/studioStore"
@@ -117,7 +117,7 @@ const sidebarMenu = [
 		icon: "code",
 	},
 	{
-		label: "AI",
+		label: "AI Assistant",
 		icon: "zap",
 	},
 ]
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index b7be317a..dd1f511b 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -149,7 +149,7 @@ export type Filter = {
 	field: DocTypeField
 }
 
-export type LeftPanelOptions = "Pages" | "Add Component" | "Layers" | "Data" | "Code" | "AI"
+export type LeftPanelOptions = "Pages" | "Add Component" | "Layers" | "Data" | "Code" | "AI Assistant"
 export type RightPanelOptions = "Properties" | "Styles" | "Events" | "Interface"
 export type leftPanelComponentTabOptions = "Standard" | "Custom"
 
diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index 5ab6e18c..41977cb4 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -6,6 +6,7 @@
 
 from studio.ai.block_codec import BlockCodec
 from studio.ai.models import ModelRegistry
+from studio.ai.session import AISession
 from studio.utils import has_page_write_perm
 
 litellm.drop_params = True
@@ -134,6 +135,11 @@
 AVAILABLE COMPONENTS:
 {COMPONENT_CATALOG}
 
+YAML STRING QUOTING:
+- Use double-quoted strings for any text that may contain apostrophes or single quotes: `text: "I'm a designer"` NOT `text: 'I'm a designer'`
+- Flow-style mappings like `{{text: "Hello world"}}` must use double quotes when the value contains an apostrophe
+- Long text values (bio, description, body copy) must use block style: `text: |` followed by the text on the next line — never inline
+
 RULES:
 - name must exactly match a component from the catalog above (or "div" for root, "container" for inner wrappers)
 - style keys must be camelCase CSS (backgroundColor, borderRadius, fontSize, etc.)
@@ -196,15 +202,20 @@ def run_generation_job(prompt: str, model: str, page_id: str, user: str):
 	settings = frappe.get_single("Studio Settings")
 	api_key = settings.get_password("ai_api_key", raise_exception=False)
 
+	session = AISession.get_or_create(page_id, model)
+	context = session.build_context_string()
+	session.add_message("user", prompt, task_type="generate")
+
 	_emit("progress", page_id, user, message=f"Generating with {ModelRegistry.get_label(model)}…")
 
+	system = SYSTEM_PROMPT + (f"\n\n{context}" if context else "")
 	content = ""
 	try:
-		messages = [
-			{"role": "system", "content": SYSTEM_PROMPT},
+		llm_messages = [
+			{"role": "system", "content": system},
 			{"role": "user", "content": f"Create a page for: {prompt}"},
 		]
-		for chunk in call_llm(messages, model, "complex", api_key, stream=True):
+		for chunk in call_llm(llm_messages, model, "complex", api_key, stream=True):
 			delta = chunk.choices[0].delta.content
 			if not delta:
 				continue
@@ -216,6 +227,7 @@ def run_generation_job(prompt: str, model: str, page_id: str, user: str):
 
 		logger.info(f"run_generation_job stream done | model={model} length={len(content)}")
 		block = BlockCodec.parse_blocks(content)
+		session.add_message("assistant", "Page generated successfully.", task_type="generate")
 		_emit("complete", page_id, user, block=block)
 
 	except Exception as e:
@@ -247,3 +259,19 @@ def generate_page_from_prompt(prompt: str, model: str | None, page_id: str) -> d
 
 	frappe.local.response.http_status_code = 202
 	return {"status": "accepted"}
+
+
+@frappe.whitelist()
+def get_ai_session(page_id: str, model: str | None = None) -> dict:
+	session = AISession.get_or_create(page_id, model)
+	return {
+		"messages": session.get_messages(),
+		"selected_model": session._doc.selected_model or "",
+	}
+
+
+@frappe.whitelist()
+def clear_ai_session(page_id: str) -> dict:
+	session = AISession.get_or_create(page_id)
+	session.clear()
+	return {"status": "ok"}
diff --git a/studio/ai/session.py b/studio/ai/session.py
new file mode 100644
index 00000000..e2d94ca8
--- /dev/null
+++ b/studio/ai/session.py
@@ -0,0 +1,126 @@
+import json
+
+import frappe
+
+
+class AISession:
+	DOCTYPE = "Studio AI Session"
+	MAX_MESSAGES = 24
+
+	def __init__(self, doc):
+		self._doc = doc
+
+	@classmethod
+	def get_or_create(cls, page_id: str, model: str | None = None, user: str | None = None):
+		user = user or frappe.session.user
+
+		session_name = frappe.db.get_value(
+			cls.DOCTYPE,
+			{"page": page_id, "user": user},
+			"name",
+		)
+		if session_name:
+			doc = frappe.get_doc(cls.DOCTYPE, str(session_name))
+			if model and not doc.selected_model:
+				doc.selected_model = model
+				doc.save(ignore_permissions=True)
+			return cls(doc)
+
+		doc = frappe.get_doc(
+			{
+				"doctype": cls.DOCTYPE,
+				"page": page_id,
+				"user": user,
+				"selected_model": model or "",
+				"messages_json": "[]",
+				"last_interaction_on": frappe.utils.now_datetime(),
+			}
+		)
+		doc.insert(ignore_permissions=True)
+		return cls(doc)
+
+	@property
+	def name(self):
+		return self._doc.name
+
+	def get_messages(self) -> list[dict]:
+		try:
+			messages = json.loads(self._doc.messages_json or "[]")
+		except json.JSONDecodeError:
+			return []
+		return messages if isinstance(messages, list) else []
+
+	def _save_messages(self, messages: list[dict], task_type: str | None = None):
+		trimmed = messages[-self.MAX_MESSAGES :]
+		self._doc.messages_json = json.dumps(trimmed, separators=(",", ":"))
+		self._doc.last_interaction_on = frappe.utils.now_datetime()
+		if task_type:
+			self._doc.last_task_type = task_type
+		self._doc.save(ignore_permissions=True)
+
+	def add_message(
+		self,
+		role: str,
+		content: str,
+		*,
+		message_type: str = "chat",
+		task_type: str | None = None,
+		component_id: str | None = None,
+		metadata: dict | None = None,
+	):
+		messages = self.get_messages()
+		messages.append(
+			{
+				"id": frappe.generate_hash(length=10),
+				"role": role,
+				"content": content,
+				"message_type": message_type,
+				"task_type": task_type,
+				"component_id": component_id,
+				"created_at": str(frappe.utils.now_datetime()),
+				"metadata": metadata or {},
+			}
+		)
+		self._save_messages(messages, task_type=task_type)
+
+	def update_message_metadata(self, message_id: str, extra_metadata: dict):
+		messages = self.get_messages()
+		for msg in messages:
+			if msg.get("id") == message_id:
+				msg.setdefault("metadata", {}).update(extra_metadata)
+				break
+		self._save_messages(messages)
+
+	def build_context_string(self) -> str:
+		history_lines = []
+		for message in self.get_messages()[-10:]:
+			role = message.get("role") or "user"
+			content = (message.get("content") or "").strip()
+			if not content:
+				continue
+			prefix = "User" if role == "user" else "Assistant"
+			history_lines.append(f"{prefix}: {content}")
+
+		if not history_lines:
+			return ""
+		return "Conversation history for this page:\n" + "\n".join(history_lines)
+
+	def set_running(self):
+		frappe.db.set_value(self.DOCTYPE, self._doc.name, "is_running", 1, update_modified=False)
+		frappe.db.commit()
+
+	def clear_running(self):
+		frappe.db.set_value(self.DOCTYPE, self._doc.name, "is_running", 0, update_modified=False)
+		frappe.db.commit()
+
+	@classmethod
+	def is_session_running(cls, session_id: str) -> bool:
+		if not session_id or not frappe.db.exists(cls.DOCTYPE, session_id):
+			return False
+		return bool(frappe.db.get_value(cls.DOCTYPE, session_id, "is_running"))
+
+	def clear(self):
+		self._doc.messages_json = "[]"
+		self._doc.last_task_type = None
+		self._doc.last_interaction_on = frappe.utils.now_datetime()
+		self._doc.save(ignore_permissions=True)
diff --git a/studio/studio/doctype/studio_ai_session/__init__.py b/studio/studio/doctype/studio_ai_session/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/studio/studio/doctype/studio_ai_session/studio_ai_session.json b/studio/studio/doctype/studio_ai_session/studio_ai_session.json
new file mode 100644
index 00000000..0c50e2c9
--- /dev/null
+++ b/studio/studio/doctype/studio_ai_session/studio_ai_session.json
@@ -0,0 +1,97 @@
+{
+ "actions": [],
+ "creation": "2026-05-26 12:00:00.000000",
+ "default_view": "List",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "page",
+  "user",
+  "selected_model",
+  "last_task_type",
+  "is_running",
+  "last_interaction_on",
+  "messages_json"
+ ],
+ "fields": [
+  {
+   "fieldname": "page",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "label": "Page",
+   "options": "Studio Page",
+   "reqd": 1
+  },
+  {
+   "fieldname": "user",
+   "fieldtype": "Link",
+   "in_list_view": 1,
+   "label": "User",
+   "options": "User",
+   "reqd": 1
+  },
+  {
+   "fieldname": "selected_model",
+   "fieldtype": "Data",
+   "label": "Selected Model"
+  },
+  {
+   "fieldname": "last_task_type",
+   "fieldtype": "Data",
+   "label": "Last Task Type"
+  },
+  {
+   "default": "0",
+   "fieldname": "is_running",
+   "fieldtype": "Check",
+   "label": "Is Running"
+  },
+  {
+   "fieldname": "last_interaction_on",
+   "fieldtype": "Datetime",
+   "in_list_view": 1,
+   "label": "Last Interaction On",
+   "read_only": 1
+  },
+  {
+   "fieldname": "messages_json",
+   "fieldtype": "Long Text",
+   "label": "Messages JSON"
+  }
+ ],
+ "hide_toolbar": 1,
+ "index_web_pages_for_search": 1,
+ "links": [],
+ "modified": "2026-05-26 12:00:00.000000",
+ "modified_by": "Administrator",
+ "module": "Studio",
+ "name": "Studio AI Session",
+ "naming_rule": "Random",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "System Manager",
+   "share": 1,
+   "write": 1
+  },
+  {
+   "create": 1,
+   "delete": 1,
+   "read": 1,
+   "role": "Studio User",
+   "write": 1
+  }
+ ],
+ "row_format": "Dynamic",
+ "sort_field": "modified",
+ "sort_order": "DESC",
+ "states": [],
+ "title_field": "page"
+}
diff --git a/studio/studio/doctype/studio_ai_session/studio_ai_session.py b/studio/studio/doctype/studio_ai_session/studio_ai_session.py
new file mode 100644
index 00000000..12ffec39
--- /dev/null
+++ b/studio/studio/doctype/studio_ai_session/studio_ai_session.py
@@ -0,0 +1,23 @@
+# Copyright (c) 2026, Frappe Technologies Pvt Ltd and contributors
+# For license information, please see license.txt
+from frappe.model.document import Document
+
+
+class StudioAISession(Document):
+	# begin: auto-generated types
+	# This code is auto-generated. Do not modify anything in this block.
+
+	from typing import TYPE_CHECKING
+
+	if TYPE_CHECKING:
+		from frappe.types import DF
+
+		is_running: DF.Check
+		last_interaction_on: DF.Datetime | None
+		last_task_type: DF.Data | None
+		messages_json: DF.LongText | None
+		page: DF.Link
+		selected_model: DF.Data | None
+		user: DF.Link
+
+	# end: auto-generated types

From 0caec0a17735abda48e10352b53b43dfd16f5853 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 19:27:48 +0530
Subject: [PATCH 21/57] fix: delete linked AI Session on page deletion

---
 studio/studio/doctype/studio_page/studio_page.py | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/studio/studio/doctype/studio_page/studio_page.py b/studio/studio/doctype/studio_page/studio_page.py
index a033ff2a..f46bcaa2 100644
--- a/studio/studio/doctype/studio_page/studio_page.py
+++ b/studio/studio/doctype/studio_page/studio_page.py
@@ -145,10 +145,15 @@ def has_blocks(self, check_draft: bool = False):
 		return False
 
 	def on_trash(self):
+		self.delete_ai_sessions()
 		if can_export(self):
 			path = self.get_folder_path(with_filename=True)
 			delete_file(path)
 
+	def delete_ai_sessions(self):
+		for session in frappe.get_all("Studio AI Session", filters={"page": self.name}, pluck="name"):
+			frappe.delete_doc("Studio AI Session", session, ignore_missing=True)
+
 	def validate_variables(self):
 		# check for duplicate variable names and show the duplicate variable name
 		variable_names = [variable.variable_name for variable in self.variables]

From 7bc913ddecf8436ef25acfc2da6ef858100dbaa5 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 20:04:19 +0530
Subject: [PATCH 22/57] fix: blocks with quoted strings were breaking in
 streaming

- backtrack and partial valid yaml
---
 frontend/src/utils/blockCodec.ts | 31 +++++++++++++++++++++++--------
 studio/ai/page_generator.py      |  9 +++++----
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/frontend/src/utils/blockCodec.ts b/frontend/src/utils/blockCodec.ts
index 54dc6d0d..17dd92aa 100644
--- a/frontend/src/utils/blockCodec.ts
+++ b/frontend/src/utils/blockCodec.ts
@@ -1,12 +1,13 @@
+import { BlockOptions } from "@/types"
 import { load as yamlLoad } from "js-yaml"
 
 /**
  * Expand a compact YAML node (name/style/c/props...) into Studio block format
  * (componentName/baseStyles/children/componentProps...).
- * Mirrors BlockCodec.expand() in studio/ai_block_codec.py.
+ * Mirrors BlockCodec.expand() in studio/ai/block_codec.py.
  */
-export function expandBlock(node: Record<string, any>): Record<string, any> {
-	const block: Record<string, any> = {
+export function expandBlock(node: Record<string, any>): BlockOptions {
+	const block: BlockOptions = {
 		componentName: node.name ?? "container",
 		baseStyles: node.style ?? {},
 		componentProps: node.props ?? {},
@@ -25,15 +26,29 @@ export function expandBlock(node: Record<string, any>): Record<string, any> {
 
 /**
  * Try to parse a partial YAML stream buffer into a Studio block.
- * Returns null if the buffer is not yet valid YAML or lacks a `name` key.
+ * On parse failure, walks backwards line by line dropping the trailing
+ * incomplete line — fallback to handle mid-stream truncation and apostrophe-in-single-quote errors.
  */
-export function tryParseYamlBlock(buffer: string): Record<string, any> | null {
+export function tryParseYamlBlock(buffer: string): BlockOptions | null {
 	if (!buffer.trim()) return null
+	const parsed = getValidPartialYAML(buffer)
+	if (!parsed || typeof parsed !== "object" || !("name" in parsed)) return null
+	return expandBlock(parsed as Record<string, any>)
+}
+
+function getValidPartialYAML(text: string): unknown {
 	try {
-		const node = yamlLoad(buffer)
-		if (!node || typeof node !== "object" || !("name" in node)) return null
-		return expandBlock(node as Record<string, any>)
+		return yamlLoad(text)
 	} catch {
+		const lines = text.split("\n")
+		for (let i = lines.length - 1; i > 0; i--) {
+			try {
+				const result = yamlLoad(lines.slice(0, i).join("\n"))
+				if (result) return result
+			} catch {
+				// keep trimming
+			}
+		}
 		return null
 	}
 }
diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index 41977cb4..a98ee578 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -135,10 +135,11 @@
 AVAILABLE COMPONENTS:
 {COMPONENT_CATALOG}
 
-YAML STRING QUOTING:
-- Use double-quoted strings for any text that may contain apostrophes or single quotes: `text: "I'm a designer"` NOT `text: 'I'm a designer'`
-- Flow-style mappings like `{{text: "Hello world"}}` must use double quotes when the value contains an apostrophe
-- Long text values (bio, description, body copy) must use block style: `text: |` followed by the text on the next line — never inline
+YAML STRING QUOTING (critical — unquoted special characters break parsing):
+- Always double-quote strings that contain any of: apostrophe/single-quote, `?`, `#`, `&`, `:`, `[`, `]`, `{{`, `}}`
+- URLs must always be double-quoted: `image: "https://example.com/img?id=1"` NOT `image: https://example.com/img?id=1`
+- Text with apostrophes must use double quotes: `text: "I'm a designer"` NOT `text: 'I'm a designer'`
+- Long text values (bio, description, body copy) must use block scalar style instead of inline: `text: |` on its own line, then the text indented — never inline in a flow mapping
 
 RULES:
 - name must exactly match a component from the catalog above (or "div" for root, "container" for inner wrappers)

From d6c3f08c73b0375070796250ef18b2e0ecd4fdf7 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 23:09:09 +0530
Subject: [PATCH 23/57] feat: modify block via prompt

---
 frontend/src/components/AIChatPanel.vue | 125 ++++++++++++++++++++----
 studio/ai/page_generator.py             |  86 +++++++++++++++-
 2 files changed, 188 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
index 51944e23..8587836e 100644
--- a/frontend/src/components/AIChatPanel.vue
+++ b/frontend/src/components/AIChatPanel.vue
@@ -41,12 +41,21 @@
 		<div class="border-t border-outline-gray-1 p-4">
 			<ErrorMessage v-if="error" :message="error" class="mb-2" />
 
+			<div v-if="isModifyMode" class="mb-2 flex items-center gap-1.5 rounded bg-surface-gray-2 px-2 py-1">
+				<FeatherIcon name="edit-2" class="h-3 w-3 shrink-0 text-ink-gray-5" />
+				<span class="truncate text-xs text-ink-gray-6">
+					Editing: {{ selectedBlock?.blockName || selectedBlock?.componentName }}
+				</span>
+			</div>
+
 			<div class="relative">
 				<textarea
 					v-model="prompt"
 					rows="4"
 					class="w-full resize-none rounded border border-[--surface-gray-2] bg-surface-gray-2 px-2 py-1.5 text-sm text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-[--outline-gray-modals] hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 disabled:cursor-not-allowed disabled:bg-surface-gray-1 disabled:text-ink-gray-5"
-					placeholder="Ask to create or edit this page..."
+					:placeholder="
+						isModifyMode ? 'Describe what to change in this block...' : 'Ask to create or edit this page...'
+					"
 					:disabled="loading"
 					@keydown.meta.enter="generate"
 					@keydown.ctrl.enter="generate"
@@ -86,7 +95,7 @@
 
 				<Button
 					variant="solid"
-					label="Generate"
+					:label="isModifyMode ? 'Edit' : 'Generate'"
 					icon="arrow-up"
 					:loading="loading"
 					:disabled="!prompt.trim()"
@@ -103,7 +112,7 @@ import { ErrorMessage, Button, FeatherIcon, call, createResource, Popover } from
 import { toast } from "vue-sonner"
 import useStudioStore from "@/stores/studioStore"
 import useCanvasStore from "@/stores/canvasStore"
-import { getBlockInstance } from "@/utils/serializer"
+import { getBlockInstance, getBlockString } from "@/utils/serializer"
 import { tryParseYamlBlock } from "@/utils/blockCodec"
 import type Block from "@/utils/block"
 
@@ -117,11 +126,20 @@ const error = ref("")
 const statusMessage = ref("")
 const selectedModel = ref("")
 const streamBuffer = ref("")
+const modifyStreamBuffer = ref("")
 const messages = ref<any[]>([])
 const messagesEl = ref<HTMLElement | null>(null)
 
 const pageId = computed(() => store.activePage?.name ?? "")
 
+const selectedBlock = computed(() => {
+	const block = canvasStore.activeCanvas?.selectedBlocks?.[0] ?? null
+	if (!block || block.isRoot()) return null
+	return block
+})
+
+const isModifyMode = computed(() => !!selectedBlock.value)
+
 const aiModels = createResource({
 	url: "studio.ai.models.get_ai_models",
 	auto: true,
@@ -172,9 +190,9 @@ function onStream(data: any) {
 	streamBuffer.value += data.chunk || ""
 	const block = tryParseYamlBlock(streamBuffer.value)
 	if (block) {
-		const rootBlock = getBlockInstance(block as any)
-		canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
+		const rootBlock = getBlockInstance(block)
 		store.pageBlocks = [rootBlock]
+		canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
 	}
 }
 
@@ -190,10 +208,9 @@ async function onComplete(data: any) {
 	}
 
 	const rootBlock = getBlockInstance(block)
-	canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
 	store.pageBlocks = [rootBlock]
+	canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
 
-	await store.savePage()
 	toast.success("Page generated successfully")
 	prompt.value = ""
 	reloadSession()
@@ -206,20 +223,76 @@ function onError(data: any) {
 	error.value = data.message || "Generation failed. Please check your Studio Settings and try again."
 }
 
+function onModifyProgress(data: any) {
+	statusMessage.value = data.message || "Updating…"
+}
+
+function onModifyStream(data: any) {
+	modifyStreamBuffer.value += data.chunk || ""
+	const block = tryParseYamlBlock(modifyStreamBuffer.value)
+	if (block) {
+		replaceBlockInTree(data.component_id, getBlockInstance(block))
+	}
+}
+
+async function onModifyComplete(data: any) {
+	loading.value = false
+	statusMessage.value = ""
+	modifyStreamBuffer.value = ""
+
+	const block: Block = data.block
+	if (!block) {
+		error.value = "No block was returned. Try a more specific request."
+		return
+	}
+
+	replaceBlockInTree(data.component_id, getBlockInstance(block))
+	toast.success("Block updated")
+	prompt.value = ""
+	reloadSession()
+}
+
+function onModifyError(data: any) {
+	loading.value = false
+	statusMessage.value = ""
+	modifyStreamBuffer.value = ""
+	error.value = data.message || "Update failed. Please try again."
+}
+
+function replaceBlockInTree(componentId: string, newBlock: Block) {
+	const canvas = canvasStore.activeCanvas
+	if (!canvas) return
+	const oldBlock = canvas.findBlock(componentId)
+	if (!oldBlock) return
+	const parent = oldBlock.getParentBlock()
+	if (!parent) return
+	parent.replaceChild(oldBlock, newBlock)
+}
+
 function setupListeners() {
 	if (!socket || !pageId.value) return
-	socket.on(`ai_generation_progress_${pageId.value}`, onProgress)
-	socket.on(`ai_generation_stream_${pageId.value}`, onStream)
-	socket.on(`ai_generation_complete_${pageId.value}`, onComplete)
-	socket.on(`ai_generation_error_${pageId.value}`, onError)
+	const id = pageId.value
+	socket.on(`ai_generation_progress_${id}`, onProgress)
+	socket.on(`ai_generation_stream_${id}`, onStream)
+	socket.on(`ai_generation_complete_${id}`, onComplete)
+	socket.on(`ai_generation_error_${id}`, onError)
+	socket.on(`ai_modify_progress_${id}`, onModifyProgress)
+	socket.on(`ai_modify_stream_${id}`, onModifyStream)
+	socket.on(`ai_modify_complete_${id}`, onModifyComplete)
+	socket.on(`ai_modify_error_${id}`, onModifyError)
 }
 
 function detachListeners() {
 	if (!socket || !pageId.value) return
-	socket.off(`ai_generation_progress_${pageId.value}`, onProgress)
-	socket.off(`ai_generation_stream_${pageId.value}`, onStream)
-	socket.off(`ai_generation_complete_${pageId.value}`, onComplete)
-	socket.off(`ai_generation_error_${pageId.value}`, onError)
+	const id = pageId.value
+	socket.off(`ai_generation_progress_${id}`, onProgress)
+	socket.off(`ai_generation_stream_${id}`, onStream)
+	socket.off(`ai_generation_complete_${id}`, onComplete)
+	socket.off(`ai_generation_error_${id}`, onError)
+	socket.off(`ai_modify_progress_${id}`, onModifyProgress)
+	socket.off(`ai_modify_stream_${id}`, onModifyStream)
+	socket.off(`ai_modify_complete_${id}`, onModifyComplete)
+	socket.off(`ai_modify_error_${id}`, onModifyError)
 }
 
 watch(
@@ -244,15 +317,25 @@ async function generate() {
 	scrollToBottom()
 
 	try {
-		await call("studio.ai.page_generator.generate_page_from_prompt", {
-			prompt: prompt.value,
-			model: selectedModel.value,
-			page_id: pageId.value,
-		})
+		if (isModifyMode.value && selectedBlock.value) {
+			await call("studio.ai.page_generator.modify_block_from_prompt", {
+				prompt: prompt.value,
+				block_context: getBlockString(selectedBlock.value),
+				model: selectedModel.value,
+				page_id: pageId.value,
+				component_id: selectedBlock.value.componentId,
+			})
+		} else {
+			await call("studio.ai.page_generator.generate_page_from_prompt", {
+				prompt: prompt.value,
+				model: selectedModel.value,
+				page_id: pageId.value,
+			})
+		}
 	} catch (e: any) {
 		loading.value = false
 		statusMessage.value = ""
-		error.value = e?.message || "Failed to start generation. Please try again."
+		error.value = e?.message || "Failed to start. Please try again."
 	}
 }
 
diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index a98ee578..664b9a9d 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -177,14 +177,33 @@
 """
 
 
+MODIFY_SYSTEM_PROMPT = f"""You are an expert UI editor for Frappe Studio. You will receive the YAML of a selected block and a user request. Return a modified version of that block.
+
+RULES:
+- Preserve ALL id (componentId) values exactly as given — never change or omit them
+- Change ONLY what the user explicitly requests; leave everything else untouched
+- Return the COMPLETE block structure starting from the provided root node
+- Same YAML format, component catalog, and styling rules as generation apply
+- Same YAML STRING QUOTING rules apply — double-quote URLs and strings with apostrophes
+
+{COMPONENT_CATALOG}
+
+COMPONENT STYLING RULES (same as generation):
+- Always use CSS variables for colors (var(--ink-gray-9), var(--surface-white), etc.)
+- borderColor / borderWidth / borderStyle separately — never the `border` shorthand
+- boxShadow keywords only: sm | DEFAULT | md | lg | xl | 2xl | none
+- borderRadius: "none" (0px) | "sm" (0.25rem) | "DEFAULT" (0.5rem) | "md" (0.625rem) | "lg" (0.75rem) | "xl" (1rem) | "2xl" (1.25rem) | "full" (9999px)
+"""
+
+
 def call_llm(messages: list, model: str, task_tier: str, api_key: str, stream: bool = False):
 	params = TASK_PARAMS[task_tier]
 	return litellm.completion(model=model, messages=messages, api_key=api_key, stream=stream, **params)
 
 
-def _emit(event_suffix: str, page_id: str, user: str, **kwargs):
+def _emit(event_suffix: str, page_id: str, user: str, prefix: str = "ai_generation", **kwargs):
 	frappe.publish_realtime(
-		f"ai_generation_{event_suffix}_{page_id}",
+		f"{prefix}_{event_suffix}_{page_id}",
 		{"page_id": page_id, **kwargs},
 		user=user,
 	)
@@ -276,3 +295,66 @@ def clear_ai_session(page_id: str) -> dict:
 	session = AISession.get_or_create(page_id)
 	session.clear()
 	return {"status": "ok"}
+
+
+def run_modify_job(prompt: str, block_context: str, model: str, page_id: str, user: str, component_id: str):
+	settings = frappe.get_single("Studio Settings")
+	api_key = settings.get_password("ai_api_key", raise_exception=False)
+
+	session = AISession.get_or_create(page_id, model)
+	context = session.build_context_string()
+	session.add_message("user", prompt, task_type="modify", component_id=component_id)
+
+	_emit("progress", page_id, user, prefix="ai_modify", message="Updating block…")
+
+	compressed = BlockCodec.strip_context(block_context)
+	system = MODIFY_SYSTEM_PROMPT + (f"\n\nConversation history:\n{context}" if context else "")
+
+	content = ""
+	try:
+		llm_messages = [
+			{"role": "system", "content": system},
+			{"role": "user", "content": f"Current block:\n{compressed}\n\nRequest: {prompt}"},
+		]
+		for chunk in call_llm(llm_messages, model, "complex", api_key, stream=True):
+			delta = chunk.choices[0].delta.content
+			if not delta:
+				continue
+			content += delta
+			_emit("stream", page_id, user, prefix="ai_modify", chunk=delta, component_id=component_id)
+
+		logger.info(f"run_modify_job stream done | model={model} length={len(content)}")
+		block = BlockCodec.parse_blocks(content)
+		session.add_message("assistant", "Block updated.", task_type="modify", component_id=component_id)
+		_emit("complete", page_id, user, prefix="ai_modify", block=block, component_id=component_id)
+
+	except Exception as e:
+		logger.error(f"run_modify_job failed: {e}", exc_info=True)
+		frappe.log_error(title="Studio AI: modify error", message=str(e))
+		_emit("error", page_id, user, prefix="ai_modify", message=str(e))
+
+
+@frappe.whitelist()
+@has_page_write_perm()
+def modify_block_from_prompt(
+	prompt: str, block_context: str, model: str | None, page_id: str, component_id: str
+) -> dict:
+	settings = frappe.get_single("Studio Settings")
+	if not settings.get_password("ai_api_key", raise_exception=False):
+		frappe.throw(_("OpenRouter API key is not configured. Please set it in Studio Settings."))
+
+	resolved_model = model or ModelRegistry.get_default()
+
+	frappe.enqueue(
+		run_modify_job,
+		queue="long",
+		prompt=prompt,
+		block_context=block_context,
+		model=resolved_model,
+		page_id=page_id,
+		user=frappe.session.user,
+		component_id=component_id,
+	)
+
+	frappe.local.response.http_status_code = 202
+	return {"status": "accepted"}

From 8b8b521b0082fdeb5d1130091730189c834c6240 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Wed, 27 May 2026 23:22:06 +0530
Subject: [PATCH 24/57] refactor: reuse rules in generation + modify prompts

---
 studio/ai/page_generator.py | 57 +++++++++++++++++++------------------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index 664b9a9d..8abdd273 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -18,7 +18,7 @@
 	"complex": {"max_tokens": 40000, "temperature": 0.7},
 }
 
-COMPONENT_CATALOG = """
+COMPONENT_CATALOG = """AVAILABLE COMPONENTS:
 LAYOUT:
 - container: layout wrapper (renders as a div). No componentProps. Use baseStyles: display, flexDirection, gap, padding, width, height, flexWrap, alignItems, justifyContent, flexShrink, flex, etc.
 
@@ -76,6 +76,25 @@
 - Combobox: {placeholder: "string", options: [{group: "string", options: [{label, value}]}]}
 """
 
+STYLING_RULES = """COMPONENT STYLING RULES:
+- Always use CSS variables. Avoid raw hex colors/values.
+	- backgroundColor:  var(--surface-white) | var(--surface-gray-1..7) | var(--surface-cards) | var(--surface-red-1) | var(--surface-green-1) | var(--surface-amber-1) | var(--surface-blue-1)
+	- color (text): var(--ink-white) | var(--ink-gray-1..9)
+	- borderColor: var(--outline-white) | var(--outline-gray-1..5) | var(--outline-red-1..3) | var(--outline-green-1..2) | var(--outline-amber-1..2) | var(--outline-blue-1) | var(--outline-orange-1)
+	- borderWidth: e.g. 1px, 2px — borderStyle: solid | dashed | dotted
+	- NEVER use the `border` shorthand — always set borderColor, borderWidth, borderStyle as separate keys
+	- boxShadow: "sm" | "DEFAULT" | "md" | "lg" | "xl" | "2xl" | "none" (keywords only, not raw values)
+	- borderRadius: "none" (0px) | "sm" (0.25rem) | "DEFAULT" (0.5rem) | "md" (0.625rem) | "lg" (0.75rem) | "xl" (1rem) | "2xl" (1.25rem) | "full" (9999px)
+- Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
+- Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components — their props handle this. Only use style on components for layout (width, flex, margin, etc.).
+- TextBlock: use tag prop for semantics (h1/h2/h3 for headings, p for body). Set fontSize/fontWeight/color on TextBlock style."""
+
+YAML_QUOTING_RULES = """YAML STRING QUOTING (critical — unquoted special characters break parsing):
+- Always double-quote strings that contain any of: apostrophe/single-quote, `?`, `#`, `&`, `:`, `[`, `]`, `{`, `}`
+- URLs must always be double-quoted: `image: "https://example.com/img?id=1"` NOT `image: https://example.com/img?id=1`
+- Text with apostrophes must use double quotes: `text: "I'm a designer"` NOT `text: 'I'm a designer'`
+- Long text values (bio, description, body copy) must use block scalar style instead of inline: `text: |` on its own line, then the text indented — never inline in a flow mapping"""
+
 SYSTEM_PROMPT = f"""You are an expert UI builder for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact YAML block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component or native html element (div) or a Studio Vue component or a Frappe UI Vue component.
 
 OUTPUT FORMAT:
@@ -118,28 +137,11 @@
 - flexDirection: row for horizontal layouts, column for vertical
 - Use gap, padding for spacing. width: 100% for full-width sections. flex: 1 to fill space.
 
-COMPONENT STYLING RULES:
-- Always use CSS variables. Avoid raw hex colors/values.
-	- backgroundColor:  var(--surface-white) | var(--surface-gray-1..7) | var(--surface-cards) | var(--surface-red-1) | var(--surface-green-1) | var(--surface-amber-1) | var(--surface-blue-1)
-	- color (text): var(--ink-white) | var(--ink-gray-1..9)
-	- borderColor: var(--outline-white) | var(--outline-gray-1..5) | var(--outline-red-1..3) | var(--outline-green-1..2) | var(--outline-amber-1..2) | var(--outline-blue-1) | var(--outline-orange-1)
-	- borderWidth
-	- borderStyle: solid | dashed | dotted
-	- NEVER use the `border` shorthand — always set borderColor, borderWidth, borderStyle as separate keys
-	- boxShadow: "sm" | "DEFAULT" | "md" | "lg" | "xl" | "2xl" | "none" (keywords only, not raw values)
-	- borderRadius: "none" (0px) | "sm" (0.25rem) | "DEFAULT" (0.5rem) | "md" (0.625rem) | "lg" (0.75rem) | "xl" (1rem) | "2xl" (1.25rem) | "full" (9999px)
-- Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
-- Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components (eg: height on Button component) — their props handle this. Only use style on components for layout (width, flex, margin, etc.).
-- TextBlock: use tag prop for semantics (h1/h2/h3 for headings, p for body). Set fontSize/fontWeight/color on TextBlock style.
+{STYLING_RULES}
 
-AVAILABLE COMPONENTS:
 {COMPONENT_CATALOG}
 
-YAML STRING QUOTING (critical — unquoted special characters break parsing):
-- Always double-quote strings that contain any of: apostrophe/single-quote, `?`, `#`, `&`, `:`, `[`, `]`, `{{`, `}}`
-- URLs must always be double-quoted: `image: "https://example.com/img?id=1"` NOT `image: https://example.com/img?id=1`
-- Text with apostrophes must use double quotes: `text: "I'm a designer"` NOT `text: 'I'm a designer'`
-- Long text values (bio, description, body copy) must use block scalar style instead of inline: `text: |` on its own line, then the text indented — never inline in a flow mapping
+{YAML_QUOTING_RULES}
 
 RULES:
 - name must exactly match a component from the catalog above (or "div" for root, "container" for inner wrappers)
@@ -179,20 +181,19 @@
 
 MODIFY_SYSTEM_PROMPT = f"""You are an expert UI editor for Frappe Studio. You will receive the YAML of a selected block and a user request. Return a modified version of that block.
 
-RULES:
+OUTPUT FORMAT:
+Return ONLY valid compact YAML. No markdown fences, no explanations, no JSON.
+
+MODIFICATION RULES:
 - Preserve ALL id (componentId) values exactly as given — never change or omit them
 - Change ONLY what the user explicitly requests; leave everything else untouched
 - Return the COMPLETE block structure starting from the provided root node
-- Same YAML format, component catalog, and styling rules as generation apply
-- Same YAML STRING QUOTING rules apply — double-quote URLs and strings with apostrophes
 
 {COMPONENT_CATALOG}
 
-COMPONENT STYLING RULES (same as generation):
-- Always use CSS variables for colors (var(--ink-gray-9), var(--surface-white), etc.)
-- borderColor / borderWidth / borderStyle separately — never the `border` shorthand
-- boxShadow keywords only: sm | DEFAULT | md | lg | xl | 2xl | none
-- borderRadius: "none" (0px) | "sm" (0.25rem) | "DEFAULT" (0.5rem) | "md" (0.625rem) | "lg" (0.75rem) | "xl" (1rem) | "2xl" (1.25rem) | "full" (9999px)
+{STYLING_RULES}
+
+{YAML_QUOTING_RULES}
 """
 
 

From 556053135c007bc019b5a237c01cf216c16eec6b Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Thu, 28 May 2026 09:56:59 +0530
Subject: [PATCH 25/57] fix: pass icon usage guide in prompt

---
 studio/ai/models.py         | 1 +
 studio/ai/page_generator.py | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/studio/ai/models.py b/studio/ai/models.py
index 45416a96..46016efa 100644
--- a/studio/ai/models.py
+++ b/studio/ai/models.py
@@ -10,6 +10,7 @@ class ModelRegistry:
 			"label": "Claude Sonnet 4.6",
 			"vision_capable": True,
 		},
+		{"id": "openrouter/anthropic/claude-opus-4.6", "label": "Claude Opus 4.6", "vision_capable": True},
 		{"id": "openrouter/anthropic/claude-haiku-4-6", "label": "Claude Haiku 4.6", "vision_capable": True},
 		{"id": "openrouter/google/gemini-3.1-pro-preview", "label": "Gemini 3.1 Pro", "vision_capable": True},
 		{"id": "openrouter/google/gemini-3-flash-preview", "label": "Gemini 3 Flash", "vision_capable": True},
diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index 8abdd273..3738d605 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -58,8 +58,8 @@
 - Breadcrumbs: {items: [{label: "string", route: "string"}]}
 - Tabs: {tabs: [{label: "string"}]}
 - TabButtons: {buttons: [{label: "string", value: "string"}]}
-- Sidebar: {header: {title: "string", subtitle: "string"}, sections: [{label: "string", items: [{label: "string", icon: "string", to: "string"}]}]}
-
+- Sidebar: {header: {title: "string", subtitle: "string"}, sections: [{label: "string", items: [{label: "string", icon: "{{ getIcon('icon-name') }}", to: "string"}]}]}
+  # icon-name must be a valid kebab-case lucide icon from https://lucide.dev/icons
 DATA DISPLAY:
 - ListView: {columns: [{label: "string", key: "string", width: number}], rows: [{key: value}], rowKey: "string"}
 - NumberChart: {config: {title: "string", value: number, prefix: "string", delta: number}}

From 1f7546d4782ef084b6d13d19a7130c5adc07d715 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Thu, 28 May 2026 11:09:19 +0530
Subject: [PATCH 26/57] fix: left panel & chat panel styles and scrolling

---
 frontend/src/components/AIChatPanel.vue     | 27 ++++++++++++---------
 frontend/src/components/StudioLeftPanel.vue |  4 +--
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
index 8587836e..4d542e83 100644
--- a/frontend/src/components/AIChatPanel.vue
+++ b/frontend/src/components/AIChatPanel.vue
@@ -1,6 +1,8 @@
 <template>
-	<div class="flex h-full min-h-full flex-col bg-surface-white">
-		<div class="flex items-center justify-between border-b border-outline-gray-1 px-3 py-2.5">
+	<div class="flex flex-1 flex-col overflow-hidden bg-surface-white">
+		<div
+			class="flex shrink-0 items-center justify-between border-b border-outline-gray-1 bg-surface-white px-3 py-2.5"
+		>
 			<div class="text-[11px] leading-4 text-ink-gray-5">Session persists for this page</div>
 			<button
 				v-if="messages.length"
@@ -11,7 +13,7 @@
 			</button>
 		</div>
 
-		<div ref="messagesEl" class="no-scrollbar flex-1 space-y-4 overflow-y-auto px-4 py-4">
+		<div ref="messagesEl" class="no-scrollbar my-2 flex-1 space-y-4 overflow-y-auto px-4 py-4">
 			<div
 				v-if="!messages.length"
 				class="flex h-full flex-col items-center justify-center gap-2 pb-8 text-center"
@@ -38,14 +40,14 @@
 			</p>
 		</div>
 
-		<div class="border-t border-outline-gray-1 p-4">
+		<div class="shrink-0 border-t border-outline-gray-1 bg-surface-white p-4">
 			<ErrorMessage v-if="error" :message="error" class="mb-2" />
 
-			<div v-if="isModifyMode" class="mb-2 flex items-center gap-1.5 rounded bg-surface-gray-2 px-2 py-1">
-				<FeatherIcon name="edit-2" class="h-3 w-3 shrink-0 text-ink-gray-5" />
-				<span class="truncate text-xs text-ink-gray-6">
-					Editing: {{ selectedBlock?.blockName || selectedBlock?.componentName }}
-				</span>
+			<div v-if="isModifyMode" class="mb-2 flex items-center gap-1.5 rounded py-1">
+				<span class="truncate text-xs text-ink-gray-5">Editing:</span>
+				<Badge variant="subtle" size="sm">
+					{{ selectedBlock?.blockName || selectedBlock?.componentName }}
+				</Badge>
 			</div>
 
 			<div class="relative">
@@ -108,7 +110,7 @@
 
 <script lang="ts" setup>
 import { ref, computed, inject, watch, nextTick } from "vue"
-import { ErrorMessage, Button, FeatherIcon, call, createResource, Popover } from "frappe-ui"
+import { ErrorMessage, Button, Badge, FeatherIcon, call, createResource, Popover } from "frappe-ui"
 import { toast } from "vue-sonner"
 import useStudioStore from "@/stores/studioStore"
 import useCanvasStore from "@/stores/canvasStore"
@@ -171,7 +173,10 @@ const sessionResource = createResource({
 function scrollToBottom() {
 	nextTick(() => {
 		if (messagesEl.value) {
-			messagesEl.value.scrollIntoView({ block: "end", behavior: "smooth" })
+			messagesEl.value.scrollTo({
+				top: messagesEl.value.scrollHeight,
+				behavior: "smooth",
+			})
 		}
 	})
 }
diff --git a/frontend/src/components/StudioLeftPanel.vue b/frontend/src/components/StudioLeftPanel.vue
index 022bb3b8..cba4d70c 100644
--- a/frontend/src/components/StudioLeftPanel.vue
+++ b/frontend/src/components/StudioLeftPanel.vue
@@ -30,7 +30,7 @@
 			<div
 				v-show="store.studioLayout.showLeftPanel"
 				:style="{ width: `${store.studioLayout.leftPanelWidth - 48}px` }"
-				class="overflow-auto border-r-[1px] pb-5 hide-scrollbar"
+				class="flex flex-col overflow-auto border-r-[1px] hide-scrollbar"
 			>
 				<PanelResizer
 					:dimension="store.studioLayout.leftPanelWidth"
@@ -39,7 +39,7 @@
 					@resize="(width) => (store.studioLayout.leftPanelWidth = width)"
 				/>
 				<div
-					class="sticky top-0 z-[12] flex justify-between border-b-[1px] border-gray-200 bg-white p-3 text-base font-semibold text-gray-800"
+					class="sticky top-0 z-[12] flex shrink-0 justify-between border-b-[1px] border-gray-200 bg-white p-3 text-base font-semibold text-gray-800"
 				>
 					{{ activeTab }}
 					<IconButton

From 11f267008b75cc9e8a3af859c30efc2c49e24cb1 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Thu, 28 May 2026 11:15:27 +0530
Subject: [PATCH 27/57] fix: remove extra margin in chat panel

---
 frontend/src/components/AIChatPanel.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
index 4d542e83..3e8c8a45 100644
--- a/frontend/src/components/AIChatPanel.vue
+++ b/frontend/src/components/AIChatPanel.vue
@@ -13,7 +13,7 @@
 			</button>
 		</div>
 
-		<div ref="messagesEl" class="no-scrollbar my-2 flex-1 space-y-4 overflow-y-auto px-4 py-4">
+		<div ref="messagesEl" class="no-scrollbar flex-1 space-y-4 overflow-y-auto px-4 py-4">
 			<div
 				v-if="!messages.length"
 				class="flex h-full flex-col items-center justify-center gap-2 pb-8 text-center"
@@ -24,7 +24,9 @@
 
 			<template v-for="msg in messages" :key="msg.id">
 				<div v-if="msg.role === 'user'" class="flex flex-col items-end">
-					<div class="w-fit max-w-[88%] rounded-md border px-3 py-2 text-sm text-ink-gray-8">
+					<div
+						class="w-fit max-w-[88%] rounded-md border bg-surface-gray-1 px-3 py-2 text-sm text-ink-gray-8"
+					>
 						<div class="whitespace-pre-wrap break-words">{{ msg.content }}</div>
 					</div>
 				</div>

From 8899e8bdb6829410ded72e6d1e22e8622d55c139 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 11:12:47 +0530
Subject: [PATCH 28/57] feat: add more style details to system prompt

- instruct to use Style Panel properties and pass everything else to raw styles

- instruct to build responsive layouts (setting tablet styles and mobile styles)
---
 studio/ai/page_generator.py | 37 +++++++++++++++++++++++++++----------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index 3738d605..e1d50603 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -77,16 +77,31 @@
 """
 
 STYLING_RULES = """COMPONENT STYLING RULES:
+STYLE PROPERTY ROUTING — use the correct key:
+- `style:` (panel-editable) — use ONLY these properties:
+  Layout: display, flexDirection, justifyContent, alignItems, alignContent, alignSelf, flexWrap, flex, flexGrow, flexShrink, flexBasis, gap, rowGap, columnGap, overflowX, overflowY
+  Grid: gridTemplateColumns, gridTemplateRows, gridColumn, gridRow
+  Dimension: width, minWidth, maxWidth, height, minHeight, maxHeight
+  Position: position, top, right, bottom, left, zIndex
+  Spacing: margin, padding (and per-side: marginTop, marginRight, marginBottom, marginLeft, paddingTop, paddingRight, paddingBottom, paddingLeft)
+  Typography: fontWeight, fontSize, lineHeight, color, letterSpacing, textTransform, textAlign
+  Visual: backgroundColor, borderColor, borderWidth, borderStyle, borderRadius, boxShadow, cursor
+- `rstyle:` (raw styles) — for ALL other CSS properties not listed above: opacity, objectFit, objectPosition, whiteSpace, textOverflow, textDecoration, fontStyle, fontFamily, transform, transition, animation, wordBreak, overflowWrap, etc. Keep rstyle minimal — only include when genuinely needed.
+- `mstyle:` (mobile styles) and `tstyle:` (tablet styles) — same properties as `style`, but for mobile and tablet breakpoints. Only include properties that need to change on mobile/tablet — do not duplicate the entire style object.
+- Use %, rem for responsive widths. Top-level sections MUST be 100% width
+
+CSS VARIABLE RULES:
 - Always use CSS variables. Avoid raw hex colors/values.
-	- backgroundColor:  var(--surface-white) | var(--surface-gray-1..7) | var(--surface-cards) | var(--surface-red-1) | var(--surface-green-1) | var(--surface-amber-1) | var(--surface-blue-1)
-	- color (text): var(--ink-white) | var(--ink-gray-1..9)
-	- borderColor: var(--outline-white) | var(--outline-gray-1..5) | var(--outline-red-1..3) | var(--outline-green-1..2) | var(--outline-amber-1..2) | var(--outline-blue-1) | var(--outline-orange-1)
-	- borderWidth: e.g. 1px, 2px — borderStyle: solid | dashed | dotted
-	- NEVER use the `border` shorthand — always set borderColor, borderWidth, borderStyle as separate keys
-	- boxShadow: "sm" | "DEFAULT" | "md" | "lg" | "xl" | "2xl" | "none" (keywords only, not raw values)
-	- borderRadius: "none" (0px) | "sm" (0.25rem) | "DEFAULT" (0.5rem) | "md" (0.625rem) | "lg" (0.75rem) | "xl" (1rem) | "2xl" (1.25rem) | "full" (9999px)
+  - backgroundColor: var(--surface-white) | var(--surface-gray-1..7) | var(--surface-cards) | var(--surface-red-1) | var(--surface-green-1) | var(--surface-amber-1) | var(--surface-blue-1)
+  - color (text): var(--ink-white) | var(--ink-gray-1..9)
+  - boxShadow: "sm" | "DEFAULT" | "md" | "lg" | "xl" | "2xl" | "none" (keywords only, not raw values)
+  - borderColor: var(--outline-white) | var(--outline-gray-1..5) | var(--outline-red-1..3) | var(--outline-green-1..2) | var(--outline-amber-1..2) | var(--outline-blue-1) | var(--outline-orange-1)
+  - borderRadius: "none" (0px) | "sm" (0.25rem) | "DEFAULT" (0.5rem) | "md" (0.625rem) | "lg" (0.75rem) | "xl" (1rem) | "2xl" (1.25rem) | "full" (9999px)
+- NEVER use the `border` shorthand property or per-side border properties: borderTopColor, borderTopWidth, borderTopStyle, borderLeftColor, borderLeftWidth, borderLeftStyle, borderRightColor, borderRightWidth, borderRightStyle, borderBottomColor, borderBottomWidth, borderBottomStyle — these are NOT in the style panel
+- For full borders: borderColor, borderWidth (e.g. "1px"), borderStyle — always set all three together
+- For one-sided borders: use CSS shorthand values — e.g. top-only: borderWidth: "4px 0px 0px 0px", borderColor: "var(--outline-blue-1)", borderStyle: "solid"
 - Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
-- Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components — their props handle this. Only use style on components for layout (width, flex, margin, etc.).
+- Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components — their props handle this. Only use style on `container` components for layout (width, flex, margin, etc.).
 - TextBlock: use tag prop for semantics (h1/h2/h3 for headings, p for body). Set fontSize/fontWeight/color on TextBlock style."""
 
 YAML_QUOTING_RULES = """YAML STRING QUOTING (critical — unquoted special characters break parsing):
@@ -95,7 +110,7 @@
 - Text with apostrophes must use double quotes: `text: "I'm a designer"` NOT `text: 'I'm a designer'`
 - Long text values (bio, description, body copy) must use block scalar style instead of inline: `text: |` on its own line, then the text indented — never inline in a flow mapping"""
 
-SYSTEM_PROMPT = f"""You are an expert UI builder for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact YAML block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component or native html element (div) or a Studio Vue component or a Frappe UI Vue component.
+SYSTEM_PROMPT = f"""You are an expert UI developer specializing in creating responsive app pages for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact YAML block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component (from frappe-ui or Studio) or native html element (div).
 
 OUTPUT FORMAT:
 Return ONLY valid compact YAML. No markdown fences, no explanations, no JSON.
@@ -106,7 +121,9 @@
 label: descriptive name
 props:                        # component-specific props (flow style preferred)
   key: value
-style:                        # CSS-in-JS camelCase (flow style preferred)
+style:                        # panel-editable CSS (see STYLE PROPERTY ROUTING below)
+  key: value
+rstyle:                       # raw CSS for properties not in the style panel
   key: value
 mstyle:                       # mobile style overrides
   key: value

From b4a3830bb1240d0113cba7a2020f19765f972b07 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 11:14:43 +0530
Subject: [PATCH 29/57] fix: raw style wiring in block codec, yaml parsing
 breaking with ?

---
 frontend/src/utils/blockCodec.ts | 1 +
 studio/ai/block_codec.py         | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/utils/blockCodec.ts b/frontend/src/utils/blockCodec.ts
index 17dd92aa..7e930075 100644
--- a/frontend/src/utils/blockCodec.ts
+++ b/frontend/src/utils/blockCodec.ts
@@ -10,6 +10,7 @@ export function expandBlock(node: Record<string, any>): BlockOptions {
 	const block: BlockOptions = {
 		componentName: node.name ?? "container",
 		baseStyles: node.style ?? {},
+		rawStyles: node.rstyle ?? {},
 		componentProps: node.props ?? {},
 		componentSlots: node.slots ?? {},
 		mobileStyles: node.mstyle ?? {},
diff --git a/studio/ai/block_codec.py b/studio/ai/block_codec.py
index 9d4bb448..9189b360 100644
--- a/studio/ai/block_codec.py
+++ b/studio/ai/block_codec.py
@@ -22,7 +22,9 @@ def represent_mapping(self, tag, mapping, flow_style=None):
 
 
 def _str_representer(dumper, data):
-	unsafe = (":", "{", "}", "[", "]", "#", "&", "*", "!", "|", ">", "'", '"', "\n")
+	"""Use plain scalars where safe; single-quote only when the value contains
+	characters that would confuse the YAML parser."""
+	unsafe = (":", "{", "}", "[", "]", "#", "&", "*", "!", "|", ">", "'", '"', "?", "\n")
 	if any(c in data for c in unsafe):
 		return dumper.represent_scalar("tag:yaml.org,2002:str", data, style="'")
 	return dumper.represent_scalar("tag:yaml.org,2002:str", data)
@@ -75,6 +77,10 @@ def compress(block: dict, depth: int = 0) -> dict:
 		if style:
 			out["style"] = style
 
+		raw = block.get("rawStyles") or {}
+		if raw:
+			out["rstyle"] = raw
+
 		mob = block.get("mobileStyles") or {}
 		if mob:
 			out["mstyle"] = mob
@@ -103,6 +109,7 @@ def expand(node: dict) -> dict:
 		block: dict = {
 			"componentName": node.get("name", "container"),
 			"baseStyles": node.get("style") or {},
+			"rawStyles": node.get("rstyle") or {},
 			"componentProps": node.get("props") or {},
 			"componentSlots": node.get("slots") or {},
 			"mobileStyles": node.get("mstyle") or {},

From 8b3070075118315934feead3f14cc7e6dc9809b1 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 11:17:37 +0530
Subject: [PATCH 30/57] feat: add more cheaper models

---
 studio/ai/models.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/studio/ai/models.py b/studio/ai/models.py
index 46016efa..1345775b 100644
--- a/studio/ai/models.py
+++ b/studio/ai/models.py
@@ -15,6 +15,8 @@ class ModelRegistry:
 		{"id": "openrouter/google/gemini-3.1-pro-preview", "label": "Gemini 3.1 Pro", "vision_capable": True},
 		{"id": "openrouter/google/gemini-3-flash-preview", "label": "Gemini 3 Flash", "vision_capable": True},
 		{"id": "openrouter/openai/gpt-5-mini", "label": "GPT-5 Mini", "vision_capable": True},
+		{"id": "openrouter/qwen/qwen3.7-max", "label": "Qwen 3.7 Max", "vision_capable": False},
+		{"id": "openrouter/moonshotai/kimi-k2.6:free", "label": "Kimi K2.6 (free)", "vision_capable": True},
 	]
 
 	DEFAULT = "openrouter/anthropic/claude-sonnet-4-6"

From 83a24df2a60f4347565194a5efce7889f49a567a Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 12:38:35 +0530
Subject: [PATCH 31/57] chore: update md files

---
 AGENTS.md => agents.md | 3 ++-
 claude.md              | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)
 rename AGENTS.md => agents.md (94%)
 create mode 100644 claude.md

diff --git a/AGENTS.md b/agents.md
similarity index 94%
rename from AGENTS.md
rename to agents.md
index 892e042d..c5ab16c7 100644
--- a/AGENTS.md
+++ b/agents.md
@@ -10,7 +10,8 @@ Studio is a visual app builder for the Frappe Framework. It allows developers to
    - Choose clean code over clever code.
    - Write object oriented code as much as possible.
    - Keep function sizes small, ideally 10 lines.
-   - Don't keep too many files in a folder or module. Try and keep it under 15.
+   - Keep files small, between 100 and 300 lines
+   - Keep directories or module small, fewer than 15 files.
    - Avoid abbreviations.
    - Use standard API as much as possible.
    - Reuse. Write as little code as possible.
diff --git a/claude.md b/claude.md
new file mode 100644
index 00000000..0c0b499b
--- /dev/null
+++ b/claude.md
@@ -0,0 +1 @@
+./agents.md
\ No newline at end of file

From 8c570ea3e626e3530805743cdf16d79d4628841a Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 14:44:33 +0530
Subject: [PATCH 32/57] fix: don't show component rendering errors when AI
 response is streaming

---
 frontend/src/components/AIChatPanel.vue     | 6 ++++++
 frontend/src/components/StudioComponent.vue | 3 ++-
 frontend/src/stores/canvasStore.ts          | 4 ++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
index 3e8c8a45..55d0d4a3 100644
--- a/frontend/src/components/AIChatPanel.vue
+++ b/frontend/src/components/AIChatPanel.vue
@@ -194,6 +194,7 @@ function onProgress(data: any) {
 }
 
 function onStream(data: any) {
+	canvasStore.isAIStreaming = true
 	streamBuffer.value += data.chunk || ""
 	const block = tryParseYamlBlock(streamBuffer.value)
 	if (block) {
@@ -204,6 +205,7 @@ function onStream(data: any) {
 }
 
 async function onComplete(data: any) {
+	canvasStore.isAIStreaming = false
 	loading.value = false
 	statusMessage.value = ""
 	streamBuffer.value = ""
@@ -224,6 +226,7 @@ async function onComplete(data: any) {
 }
 
 function onError(data: any) {
+	canvasStore.isAIStreaming = false
 	loading.value = false
 	statusMessage.value = ""
 	streamBuffer.value = ""
@@ -235,6 +238,7 @@ function onModifyProgress(data: any) {
 }
 
 function onModifyStream(data: any) {
+	canvasStore.isAIStreaming = true
 	modifyStreamBuffer.value += data.chunk || ""
 	const block = tryParseYamlBlock(modifyStreamBuffer.value)
 	if (block) {
@@ -243,6 +247,7 @@ function onModifyStream(data: any) {
 }
 
 async function onModifyComplete(data: any) {
+	canvasStore.isAIStreaming = false
 	loading.value = false
 	statusMessage.value = ""
 	modifyStreamBuffer.value = ""
@@ -260,6 +265,7 @@ async function onModifyComplete(data: any) {
 }
 
 function onModifyError(data: any) {
+	canvasStore.isAIStreaming = false
 	loading.value = false
 	statusMessage.value = ""
 	modifyStreamBuffer.value = ""
diff --git a/frontend/src/components/StudioComponent.vue b/frontend/src/components/StudioComponent.vue
index 724beed4..dcd79c3d 100644
--- a/frontend/src/components/StudioComponent.vue
+++ b/frontend/src/components/StudioComponent.vue
@@ -348,7 +348,8 @@ watch(
 const error = ref<Error | null>(null)
 onErrorCaptured((err, _instance, info) => {
 	const isRouterError = err.message.includes("No match for")
-	if (isRouterError) {
+	if (isRouterError || canvasStore.isAIStreaming) {
+		error.value = null
 		return false
 	}
 	console.error(
diff --git a/frontend/src/stores/canvasStore.ts b/frontend/src/stores/canvasStore.ts
index 213ce137..5ee838c9 100644
--- a/frontend/src/stores/canvasStore.ts
+++ b/frontend/src/stores/canvasStore.ts
@@ -45,6 +45,8 @@ const useCanvasStore = defineStore("canvasStore", () => {
 		})
 	}
 
+	const isAIStreaming = ref(false)
+
 	// drag & drop
 	const isDragging = ref(false)
 	const layerDraggingOverBlock = ref<string | null>(null)
@@ -183,6 +185,8 @@ const useCanvasStore = defineStore("canvasStore", () => {
 		showCodeDialog,
 		editCode,
 		editableCode,
+		// ai streaming
+		isAIStreaming,
 		// drag & drop
 		dropTarget,
 		isDragging,

From b0003587ebad0babd00b994d7cce136fe493b2f7 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 15:47:18 +0530
Subject: [PATCH 33/57] fix(prompt): apply default border radius on
 cards/containers, update radius options, output format spec

---
 studio/ai/page_generator.py | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index e1d50603..ba244784 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -60,6 +60,7 @@
 - TabButtons: {buttons: [{label: "string", value: "string"}]}
 - Sidebar: {header: {title: "string", subtitle: "string"}, sections: [{label: "string", items: [{label: "string", icon: "{{ getIcon('icon-name') }}", to: "string"}]}]}
   # icon-name must be a valid kebab-case lucide icon from https://lucide.dev/icons
+
 DATA DISPLAY:
 - ListView: {columns: [{label: "string", key: "string", width: number}], rows: [{key: value}], rowKey: "string"}
 - NumberChart: {config: {title: "string", value: number, prefix: "string", delta: number}}
@@ -94,9 +95,9 @@
 - Always use CSS variables. Avoid raw hex colors/values.
   - backgroundColor: var(--surface-white) | var(--surface-gray-1..7) | var(--surface-cards) | var(--surface-red-1) | var(--surface-green-1) | var(--surface-amber-1) | var(--surface-blue-1)
   - color (text): var(--ink-white) | var(--ink-gray-1..9)
-  - boxShadow: "sm" | "DEFAULT" | "md" | "lg" | "xl" | "2xl" | "none" (keywords only, not raw values)
   - borderColor: var(--outline-white) | var(--outline-gray-1..5) | var(--outline-red-1..3) | var(--outline-green-1..2) | var(--outline-amber-1..2) | var(--outline-blue-1) | var(--outline-orange-1)
-  - borderRadius: "none" (0px) | "sm" (0.25rem) | "DEFAULT" (0.5rem) | "md" (0.625rem) | "lg" (0.75rem) | "xl" (1rem) | "2xl" (1.25rem) | "full" (9999px)
+  - borderRadius: "0px" (none) | "0.25rem" (sm) | "0.5rem" (DEFAULT) | "0.625rem" (md) | "0.75rem" (lg) | "1rem" (xl) | "1.25rem" (2xl) | "9999px" (full)
+- borderRadius — apply borderRadius (0.5rem by default) on cards, panels, containers by default, but NOT on full-width sections that span the entire viewport width.
 - NEVER use the `border` shorthand property or per-side border properties: borderTopColor, borderTopWidth, borderTopStyle, borderLeftColor, borderLeftWidth, borderLeftStyle, borderRightColor, borderRightWidth, borderRightStyle, borderBottomColor, borderBottomWidth, borderBottomStyle — these are NOT in the style panel
 - For full borders: borderColor, borderWidth (e.g. "1px"), borderStyle — always set all three together
 - For one-sided borders: use CSS shorthand values — e.g. top-only: borderWidth: "4px 0px 0px 0px", borderColor: "var(--outline-blue-1)", borderStyle: "solid"
@@ -104,7 +105,8 @@
 - Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components — their props handle this. Only use style on `container` components for layout (width, flex, margin, etc.).
 - TextBlock: use tag prop for semantics (h1/h2/h3 for headings, p for body). Set fontSize/fontWeight/color on TextBlock style."""
 
-YAML_QUOTING_RULES = """YAML STRING QUOTING (critical — unquoted special characters break parsing):
+OUTPUT_FORMAT_RULES = """YAML STRING QUOTING (critical — unquoted special characters break parsing):
+- Critical: Return ONLY a valid and compact YAML object. No markdown, no explanations.
 - Always double-quote strings that contain any of: apostrophe/single-quote, `?`, `#`, `&`, `:`, `[`, `]`, `{`, `}`
 - URLs must always be double-quoted: `image: "https://example.com/img?id=1"` NOT `image: https://example.com/img?id=1`
 - Text with apostrophes must use double quotes: `text: "I'm a designer"` NOT `text: 'I'm a designer'`
@@ -112,9 +114,6 @@
 
 SYSTEM_PROMPT = f"""You are an expert UI developer specializing in creating responsive app pages for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact YAML block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component (from frappe-ui or Studio) or native html element (div).
 
-OUTPUT FORMAT:
-Return ONLY valid compact YAML. No markdown fences, no explanations, no JSON.
-
 BLOCK SCHEMA:
 name: componentName          # required — must match catalog exactly
 originalElement: div|body    # required for container and root blocks
@@ -158,7 +157,7 @@
 
 {COMPONENT_CATALOG}
 
-{YAML_QUOTING_RULES}
+{OUTPUT_FORMAT_RULES}
 
 RULES:
 - name must exactly match a component from the catalog above (or "div" for root, "container" for inner wrappers)
@@ -182,7 +181,7 @@
   - name: container
     originalElement: div
     label: card
-    style: {{display: flex, flexDirection: column, gap: 16px, width: 100%, maxWidth: 400px, padding: 32px, backgroundColor: 'var(--surface-white)', borderRadius: '0.75rem', boxShadow: md}}
+    style: {{display: flex, flexDirection: column, gap: 16px, width: 100%, maxWidth: 400px, padding: 32px, backgroundColor: 'var(--surface-white)', borderRadius: '0.75rem'}}
     c:
     - name: TextBlock
       props: {{text: Sign In, tag: h2}}
@@ -198,9 +197,6 @@
 
 MODIFY_SYSTEM_PROMPT = f"""You are an expert UI editor for Frappe Studio. You will receive the YAML of a selected block and a user request. Return a modified version of that block.
 
-OUTPUT FORMAT:
-Return ONLY valid compact YAML. No markdown fences, no explanations, no JSON.
-
 MODIFICATION RULES:
 - Preserve ALL id (componentId) values exactly as given — never change or omit them
 - Change ONLY what the user explicitly requests; leave everything else untouched
@@ -210,7 +206,7 @@
 
 {STYLING_RULES}
 
-{YAML_QUOTING_RULES}
+{OUTPUT_FORMAT_RULES}
 """
 
 
@@ -348,6 +344,7 @@ def run_modify_job(prompt: str, block_context: str, model: str, page_id: str, us
 
 	except Exception as e:
 		logger.error(f"run_modify_job failed: {e}", exc_info=True)
+		logger.info(f"Raw LLM Output for Modify: \n{content}\n" + "=" * 40)
 		frappe.log_error(title="Studio AI: modify error", message=str(e))
 		_emit("error", page_id, user, prefix="ai_modify", message=str(e))
 

From cac93177b8221601f5004f424990f65644ca62ea Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 16:04:10 +0530
Subject: [PATCH 34/57] fix(prompt): pass fontSize options in TextBlock

---
 studio/ai/page_generator.py | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index ba244784..d326d6c6 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -23,7 +23,8 @@
 - container: layout wrapper (renders as a div). No componentProps. Use baseStyles: display, flexDirection, gap, padding, width, height, flexWrap, alignItems, justifyContent, flexShrink, flex, etc.
 
 TEXT & DISPLAY:
-- TextBlock: {text: "string", tag: "p|h1|h2|h3|h4|h5|h6|span"}
+- TextBlock: {text: "string", tag: "p|h1|h2|h3|h4|h5|h6|span", fontSize: "text-2xs(11px)|text-xs(12px)|text-sm(13px)|text-base(14px)|text-lg(16px)|text-xl(18px)|text-2xl(20px)|text-3xl(24px)|text-p-2xs|text-p-xs|text-p-sm|text-p-base|text-p-lg|text-p-xl|text-p-2xl|text-p-3xl"}
+  # text-* = tight line-height (UI labels, headings); text-p-* = relaxed line-height (body copy, descriptions)
 - Badge: {variant: "subtle|solid|outline", theme: "green|red|orange|blue|gray", size: "sm|md|lg", label: "string"}
 - Avatar: {shape: "circle|square", size: "xs|sm|md|lg|xl|2xl|3xl", label: "initials", image: "url"}
 - Progress: {value: 0-100, size: "sm|md|lg", label: "string"}
@@ -85,7 +86,7 @@
   Dimension: width, minWidth, maxWidth, height, minHeight, maxHeight
   Position: position, top, right, bottom, left, zIndex
   Spacing: margin, padding (and per-side: marginTop, marginRight, marginBottom, marginLeft, paddingTop, paddingRight, paddingBottom, paddingLeft)
-  Typography: fontWeight, fontSize, lineHeight, color, letterSpacing, textTransform, textAlign
+  Typography: fontWeight, lineHeight, color, letterSpacing, textTransform, textAlign
   Visual: backgroundColor, borderColor, borderWidth, borderStyle, borderRadius, boxShadow, cursor
 - `rstyle:` (raw styles) — for ALL other CSS properties not listed above: opacity, objectFit, objectPosition, whiteSpace, textOverflow, textDecoration, fontStyle, fontFamily, transform, transition, animation, wordBreak, overflowWrap, etc. Keep rstyle minimal — only include when genuinely needed.
 - `mstyle:` (mobile styles) and `tstyle:` (tablet styles) — same properties as `style`, but for mobile and tablet breakpoints. Only include properties that need to change on mobile/tablet — do not duplicate the entire style object.
@@ -102,8 +103,7 @@
 - For full borders: borderColor, borderWidth (e.g. "1px"), borderStyle — always set all three together
 - For one-sided borders: use CSS shorthand values — e.g. top-only: borderWidth: "4px 0px 0px 0px", borderColor: "var(--outline-blue-1)", borderStyle: "solid"
 - Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
-- Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components — their props handle this. Only use style on `container` components for layout (width, flex, margin, etc.).
-- TextBlock: use tag prop for semantics (h1/h2/h3 for headings, p for body). Set fontSize/fontWeight/color on TextBlock style."""
+- Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components — their props handle this. Only use style on `container` components for layout (width, flex, margin, etc.)."""
 
 OUTPUT_FORMAT_RULES = """YAML STRING QUOTING (critical — unquoted special characters break parsing):
 - Critical: Return ONLY a valid and compact YAML object. No markdown, no explanations.
@@ -184,8 +184,8 @@
     style: {{display: flex, flexDirection: column, gap: 16px, width: 100%, maxWidth: 400px, padding: 32px, backgroundColor: 'var(--surface-white)', borderRadius: '0.75rem'}}
     c:
     - name: TextBlock
-      props: {{text: Sign In, tag: h2}}
-      style: {{fontSize: 20px, fontWeight: '600', color: 'var(--ink-gray-9)'}}
+      props: {{text: Sign In, tag: h2, fontSize: text-2xl}}
+      style: {{fontWeight: '600', color: 'var(--ink-gray-9)'}}
     - name: TextInput
       props: {{placeholder: Email address}}
     - name: FormControl

From fd4ae561a3817a892f2c36373000886582154527 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 17:12:55 +0530
Subject: [PATCH 35/57] fix: AI chat panel styles

---
 frontend/src/components/AIChatPanel.vue | 6 +++---
 studio/ai/block_codec.py                | 3 ---
 studio/ai/models.py                     | 2 +-
 studio/ai/page_generator.py             | 5 +++--
 4 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
index 55d0d4a3..daa2bac0 100644
--- a/frontend/src/components/AIChatPanel.vue
+++ b/frontend/src/components/AIChatPanel.vue
@@ -25,19 +25,19 @@
 			<template v-for="msg in messages" :key="msg.id">
 				<div v-if="msg.role === 'user'" class="flex flex-col items-end">
 					<div
-						class="w-fit max-w-[88%] rounded-md border bg-surface-gray-1 px-3 py-2 text-sm text-ink-gray-8"
+						class="w-fit max-w-[88%] rounded-md border bg-surface-gray-1 px-3 py-2 text-p-xs text-ink-gray-8"
 					>
 						<div class="whitespace-pre-wrap break-words">{{ msg.content }}</div>
 					</div>
 				</div>
 				<div v-else class="flex flex-col items-start">
-					<div class="w-fit max-w-full text-sm text-ink-gray-8">
+					<div class="w-fit max-w-full text-p-xs text-ink-gray-8">
 						<div class="whitespace-pre-wrap break-words">{{ msg.content }}</div>
 					</div>
 				</div>
 			</template>
 
-			<p v-if="loading" class="text-xs italic text-ink-gray-5">
+			<p v-if="loading" class="text-xs text-ink-gray-5">
 				{{ statusMessage || "Generating…" }}
 			</p>
 		</div>
diff --git a/studio/ai/block_codec.py b/studio/ai/block_codec.py
index 9189b360..024d4bf3 100644
--- a/studio/ai/block_codec.py
+++ b/studio/ai/block_codec.py
@@ -32,9 +32,6 @@ def _str_representer(dumper, data):
 
 CompactDumper.add_representer(str, _str_representer)
 
-# Internal block fields the LLM should never see
-_STRIP_FIELDS = frozenset({"parentBlock", "isStudioComponent", "blockId", "__dirty", "selected", "isVisible"})
-
 
 def _to_yaml(data) -> str:
 	return yaml.dump(
diff --git a/studio/ai/models.py b/studio/ai/models.py
index 1345775b..08c88265 100644
--- a/studio/ai/models.py
+++ b/studio/ai/models.py
@@ -16,7 +16,7 @@ class ModelRegistry:
 		{"id": "openrouter/google/gemini-3-flash-preview", "label": "Gemini 3 Flash", "vision_capable": True},
 		{"id": "openrouter/openai/gpt-5-mini", "label": "GPT-5 Mini", "vision_capable": True},
 		{"id": "openrouter/qwen/qwen3.7-max", "label": "Qwen 3.7 Max", "vision_capable": False},
-		{"id": "openrouter/moonshotai/kimi-k2.6:free", "label": "Kimi K2.6 (free)", "vision_capable": True},
+		{"id": "openrouter/moonshotai/kimi-k2.6", "label": "Kimi K2.6", "vision_capable": True},
 	]
 
 	DEFAULT = "openrouter/anthropic/claude-sonnet-4-6"
diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index d326d6c6..5cc0156f 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -105,8 +105,9 @@
 - Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
 - Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components — their props handle this. Only use style on `container` components for layout (width, flex, margin, etc.)."""
 
-OUTPUT_FORMAT_RULES = """YAML STRING QUOTING (critical — unquoted special characters break parsing):
-- Critical: Return ONLY a valid and compact YAML object. No markdown, no explanations.
+OUTPUT_FORMAT_RULES = """YAML OUTPUT RULES (critical — invalid YAML breaks parsing):
+- Return ONLY a valid and compact YAML object. No markdown fences, no explanations.
+- NEVER put a bare `-` on its own line. List items must always start with `- key: value` on the SAME line as the dash:
 - Always double-quote strings that contain any of: apostrophe/single-quote, `?`, `#`, `&`, `:`, `[`, `]`, `{`, `}`
 - URLs must always be double-quoted: `image: "https://example.com/img?id=1"` NOT `image: https://example.com/img?id=1`
 - Text with apostrophes must use double quotes: `text: "I'm a designer"` NOT `text: 'I'm a designer'`

From cbc083462992ade43a30d423f772b7e160e9f3fd Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 17:42:23 +0530
Subject: [PATCH 36/57] fix: don't allow overwriting body's component id

---
 studio/ai/block_codec.py | 31 ++++++-------------------------
 1 file changed, 6 insertions(+), 25 deletions(-)

diff --git a/studio/ai/block_codec.py b/studio/ai/block_codec.py
index 024d4bf3..224fd38c 100644
--- a/studio/ai/block_codec.py
+++ b/studio/ai/block_codec.py
@@ -129,38 +129,19 @@ def parse_blocks(content: str) -> dict:
 		parsed = yaml.safe_load(cleaned)
 
 		if isinstance(parsed, list):
-			node = parsed[0] if parsed else {}
+			block = parsed[0] if parsed else {}
 		elif isinstance(parsed, dict):
-			node = parsed
+			block = parsed
 		else:
 			raise ValueError("LLM response is not a valid block object")
 
-		if not node:
+		if not block:
 			raise ValueError("LLM response produced an empty block")
 
-		return BlockCodec.expand(node)
+		if isinstance(block, dict) and not block.get("id"):
+			block["id"] = "root"
 
-	@staticmethod
-	def parse_partial(content: str) -> dict | None:
-		"""Best-effort parse of a partial YAML stream. Returns None on failure."""
-		if not content or not content.strip():
-			return None
-		try:
-			cleaned = _strip_fences(content)
-			parsed = yaml.safe_load(cleaned)
-			if isinstance(parsed, list):
-				node = parsed[0] if parsed else None
-			elif isinstance(parsed, dict):
-				node = parsed
-			else:
-				return None
-			if not node or not isinstance(node, dict):
-				return None
-			if "name" not in node:
-				return None
-			return BlockCodec.expand(node)
-		except yaml.YAMLError:
-			return None
+		return BlockCodec.expand(block)
 
 	@staticmethod
 	def strip_context(block_json: str, task_type: str = "full") -> str:

From cdb03489d504ac0ed0087572051c558d5e131852 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 18:12:47 +0530
Subject: [PATCH 37/57] refactor: move prompts to a separate file

---
 studio/ai/page_generator.py | 193 +-----------------------------------
 studio/ai/prompts.py        | 191 +++++++++++++++++++++++++++++++++++
 2 files changed, 192 insertions(+), 192 deletions(-)
 create mode 100644 studio/ai/prompts.py

diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index 5cc0156f..239666e2 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -6,6 +6,7 @@
 
 from studio.ai.block_codec import BlockCodec
 from studio.ai.models import ModelRegistry
+from studio.ai.prompts import MODIFY_SYSTEM_PROMPT, SYSTEM_PROMPT
 from studio.ai.session import AISession
 from studio.utils import has_page_write_perm
 
@@ -18,198 +19,6 @@
 	"complex": {"max_tokens": 40000, "temperature": 0.7},
 }
 
-COMPONENT_CATALOG = """AVAILABLE COMPONENTS:
-LAYOUT:
-- container: layout wrapper (renders as a div). No componentProps. Use baseStyles: display, flexDirection, gap, padding, width, height, flexWrap, alignItems, justifyContent, flexShrink, flex, etc.
-
-TEXT & DISPLAY:
-- TextBlock: {text: "string", tag: "p|h1|h2|h3|h4|h5|h6|span", fontSize: "text-2xs(11px)|text-xs(12px)|text-sm(13px)|text-base(14px)|text-lg(16px)|text-xl(18px)|text-2xl(20px)|text-3xl(24px)|text-p-2xs|text-p-xs|text-p-sm|text-p-base|text-p-lg|text-p-xl|text-p-2xl|text-p-3xl"}
-  # text-* = tight line-height (UI labels, headings); text-p-* = relaxed line-height (body copy, descriptions)
-- Badge: {variant: "subtle|solid|outline", theme: "green|red|orange|blue|gray", size: "sm|md|lg", label: "string"}
-- Avatar: {shape: "circle|square", size: "xs|sm|md|lg|xl|2xl|3xl", label: "initials", image: "url"}
-- Progress: {value: 0-100, size: "sm|md|lg", label: "string"}
-- Alert: {title: "string", description: "string", theme: "yellow|red|green|blue"}
-- ErrorMessage: {message: "string"}
-- FeatherIcon: {name: "feather-icon-name", class: "h-5 w-5"}
-- ImageView: {image: "url", size: "xs|sm|md|lg|xl"}
-- Divider: (no props)
-- Tooltip: {text: "string"}
-- HTML: {html: "<p>raw html</p>"}
-
-INPUTS:
-- TextInput: {placeholder: "string"}
-- Textarea: {placeholder: "string"}
-- FormControl: {type: "text|email|number|select|date|autocomplete|password", label: "string", placeholder: "string"}
-- Select: {placeholder: "string", options: [{label: "string", value: "string"}]}
-- Checkbox: {label: "string", checked: true|false}
-- Switch: {label: "string", description: "string", modelValue: true|false}
-- DatePicker: {placeholder: "string"}
-- TimePicker: {placeholder: "string"}
-- DateTimePicker: {placeholder: "string"}
-- MultiSelect: {placeholder: "string", options: [{label: "string", value: "string"}]}
-- Rating: {label: "string"}
-- FileUploader: {label: "string", fileTypes: "['image/*']"}
-- TextEditor: {modelValue: "string", editable: true, fixedMenu: true}
-
-ACTIONS:
-- Button: {label: "string", variant: "solid|subtle|outline|ghost", size: "sm|md|lg|xl|2xl", theme: "gray (DEFAULT — omit unless red/green/blue is semantically required)"}
-- Dropdown: {options: [{label: "string", icon: "feather-icon"}], button: {label: "string"}}
-
-NAVIGATION:
-- Breadcrumbs: {items: [{label: "string", route: "string"}]}
-- Tabs: {tabs: [{label: "string"}]}
-- TabButtons: {buttons: [{label: "string", value: "string"}]}
-- Sidebar: {header: {title: "string", subtitle: "string"}, sections: [{label: "string", items: [{label: "string", icon: "{{ getIcon('icon-name') }}", to: "string"}]}]}
-  # icon-name must be a valid kebab-case lucide icon from https://lucide.dev/icons
-
-DATA DISPLAY:
-- ListView: {columns: [{label: "string", key: "string", width: number}], rows: [{key: value}], rowKey: "string"}
-- NumberChart: {config: {title: "string", value: number, prefix: "string", delta: number}}
-- AxisChart: {config: {data: [{xKey: val, yKey: val}], xAxis: {key: "string", type: "time|category"}, yAxis: {title: "string"}, series: [{name: "string", type: "bar|line"}]}}
-- DonutChart: {config: {data: [{cat: val, val: number}], categoryColumn: "string", valueColumn: "string"}}
-- Filter: {doctype: "string", filters: {}}
-- Link: {doctype: "string"}
-- Tree: {nodeKey: "string", node: {name: "string", label: "string", children: []}}
-- Repeater: (no props — repeats child template over data)
-- Calendar: {config: {defaultMode: "Month"}, events: []}
-
-AUTOCOMPLETE:
-- Autocomplete: {placeholder: "string", options: [{label: "string", value: "string"}]}
-- Combobox: {placeholder: "string", options: [{group: "string", options: [{label, value}]}]}
-"""
-
-STYLING_RULES = """COMPONENT STYLING RULES:
-STYLE PROPERTY ROUTING — use the correct key:
-- `style:` (panel-editable) — use ONLY these properties:
-  Layout: display, flexDirection, justifyContent, alignItems, alignContent, alignSelf, flexWrap, flex, flexGrow, flexShrink, flexBasis, gap, rowGap, columnGap, overflowX, overflowY
-  Grid: gridTemplateColumns, gridTemplateRows, gridColumn, gridRow
-  Dimension: width, minWidth, maxWidth, height, minHeight, maxHeight
-  Position: position, top, right, bottom, left, zIndex
-  Spacing: margin, padding (and per-side: marginTop, marginRight, marginBottom, marginLeft, paddingTop, paddingRight, paddingBottom, paddingLeft)
-  Typography: fontWeight, lineHeight, color, letterSpacing, textTransform, textAlign
-  Visual: backgroundColor, borderColor, borderWidth, borderStyle, borderRadius, boxShadow, cursor
-- `rstyle:` (raw styles) — for ALL other CSS properties not listed above: opacity, objectFit, objectPosition, whiteSpace, textOverflow, textDecoration, fontStyle, fontFamily, transform, transition, animation, wordBreak, overflowWrap, etc. Keep rstyle minimal — only include when genuinely needed.
-- `mstyle:` (mobile styles) and `tstyle:` (tablet styles) — same properties as `style`, but for mobile and tablet breakpoints. Only include properties that need to change on mobile/tablet — do not duplicate the entire style object.
-- Use %, rem for responsive widths. Top-level sections MUST be 100% width
-
-CSS VARIABLE RULES:
-- Always use CSS variables. Avoid raw hex colors/values.
-  - backgroundColor: var(--surface-white) | var(--surface-gray-1..7) | var(--surface-cards) | var(--surface-red-1) | var(--surface-green-1) | var(--surface-amber-1) | var(--surface-blue-1)
-  - color (text): var(--ink-white) | var(--ink-gray-1..9)
-  - borderColor: var(--outline-white) | var(--outline-gray-1..5) | var(--outline-red-1..3) | var(--outline-green-1..2) | var(--outline-amber-1..2) | var(--outline-blue-1) | var(--outline-orange-1)
-  - borderRadius: "0px" (none) | "0.25rem" (sm) | "0.5rem" (DEFAULT) | "0.625rem" (md) | "0.75rem" (lg) | "1rem" (xl) | "1.25rem" (2xl) | "9999px" (full)
-- borderRadius — apply borderRadius (0.5rem by default) on cards, panels, containers by default, but NOT on full-width sections that span the entire viewport width.
-- NEVER use the `border` shorthand property or per-side border properties: borderTopColor, borderTopWidth, borderTopStyle, borderLeftColor, borderLeftWidth, borderLeftStyle, borderRightColor, borderRightWidth, borderRightStyle, borderBottomColor, borderBottomWidth, borderBottomStyle — these are NOT in the style panel
-- For full borders: borderColor, borderWidth (e.g. "1px"), borderStyle — always set all three together
-- For one-sided borders: use CSS shorthand values — e.g. top-only: borderWidth: "4px 0px 0px 0px", borderColor: "var(--outline-blue-1)", borderStyle: "solid"
-- Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
-- Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components — their props handle this. Only use style on `container` components for layout (width, flex, margin, etc.)."""
-
-OUTPUT_FORMAT_RULES = """YAML OUTPUT RULES (critical — invalid YAML breaks parsing):
-- Return ONLY a valid and compact YAML object. No markdown fences, no explanations.
-- NEVER put a bare `-` on its own line. List items must always start with `- key: value` on the SAME line as the dash:
-- Always double-quote strings that contain any of: apostrophe/single-quote, `?`, `#`, `&`, `:`, `[`, `]`, `{`, `}`
-- URLs must always be double-quoted: `image: "https://example.com/img?id=1"` NOT `image: https://example.com/img?id=1`
-- Text with apostrophes must use double quotes: `text: "I'm a designer"` NOT `text: 'I'm a designer'`
-- Long text values (bio, description, body copy) must use block scalar style instead of inline: `text: |` on its own line, then the text indented — never inline in a flow mapping"""
-
-SYSTEM_PROMPT = f"""You are an expert UI developer specializing in creating responsive app pages for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact YAML block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component (from frappe-ui or Studio) or native html element (div).
-
-BLOCK SCHEMA:
-name: componentName          # required — must match catalog exactly
-originalElement: div|body    # required for container and root blocks
-label: descriptive name
-props:                        # component-specific props (flow style preferred)
-  key: value
-style:                        # panel-editable CSS (see STYLE PROPERTY ROUTING below)
-  key: value
-rstyle:                       # raw CSS for properties not in the style panel
-  key: value
-mstyle:                       # mobile style overrides
-  key: value
-tstyle:                       # tablet style overrides
-  key: value
-slots:                        # componentSlots for frappe-ui components that hold child content
-  slotName: ...
-c:                            # children list
-- name: ...
-
-ROOT BLOCK:
-Always start with:
-name: div
-originalElement: body
-label: body
-style: {{display: flex, flexDirection: column, flexShrink: 0, width: inherit, overflowX: hidden, height: 100%}}
-c:
-- ...
-
-LAYOUT CONTAINERS (CRITICAL — originalElement is required or children won't render):
-name: container
-originalElement: div
-label: container
-style: {{display: flex, flexDirection: row|column, gap: ..., padding: ...}}
-c:
-- ...
-- Use container for all inner layout wrappers — never use "div" as name for inner blocks
-- flexDirection: row for horizontal layouts, column for vertical
-- Use gap, padding for spacing. width: 100% for full-width sections. flex: 1 to fill space.
-
-{STYLING_RULES}
-
-{COMPONENT_CATALOG}
-
-{OUTPUT_FORMAT_RULES}
-
-RULES:
-- name must exactly match a component from the catalog above (or "div" for root, "container" for inner wrappers)
-- style keys must be camelCase CSS (backgroundColor, borderRadius, fontSize, etc.)
-- Do NOT include id (componentId is auto-generated by Studio)
-- Do NOT include parentBlock
-- Omit keys whose value is null, empty string, empty dict, or empty list
-- Keep props to only what's relevant to the description
-
-EXAMPLE — "A login form with email, password and a submit button":
-name: div
-originalElement: body
-label: body
-style: {{display: flex, flexDirection: column, flexShrink: 0, width: inherit, overflowX: hidden, height: 100%}}
-c:
-- name: container
-  originalElement: div
-  label: page
-  style: {{display: flex, flexDirection: column, alignItems: center, justifyContent: center, flex: 1, padding: 24px}}
-  c:
-  - name: container
-    originalElement: div
-    label: card
-    style: {{display: flex, flexDirection: column, gap: 16px, width: 100%, maxWidth: 400px, padding: 32px, backgroundColor: 'var(--surface-white)', borderRadius: '0.75rem'}}
-    c:
-    - name: TextBlock
-      props: {{text: Sign In, tag: h2, fontSize: text-2xl}}
-      style: {{fontWeight: '600', color: 'var(--ink-gray-9)'}}
-    - name: TextInput
-      props: {{placeholder: Email address}}
-    - name: FormControl
-      props: {{type: password, label: Password, placeholder: Enter password}}
-    - name: Button
-      props: {{label: Sign In, variant: solid}}
-"""
-
-
-MODIFY_SYSTEM_PROMPT = f"""You are an expert UI editor for Frappe Studio. You will receive the YAML of a selected block and a user request. Return a modified version of that block.
-
-MODIFICATION RULES:
-- Preserve ALL id (componentId) values exactly as given — never change or omit them
-- Change ONLY what the user explicitly requests; leave everything else untouched
-- Return the COMPLETE block structure starting from the provided root node
-
-{COMPONENT_CATALOG}
-
-{STYLING_RULES}
-
-{OUTPUT_FORMAT_RULES}
-"""
-
 
 def call_llm(messages: list, model: str, task_tier: str, api_key: str, stream: bool = False):
 	params = TASK_PARAMS[task_tier]
diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
new file mode 100644
index 00000000..0294e58e
--- /dev/null
+++ b/studio/ai/prompts.py
@@ -0,0 +1,191 @@
+COMPONENT_CATALOG = """AVAILABLE COMPONENTS:
+LAYOUT:
+- container: layout wrapper (renders as a div). No componentProps. Use baseStyles: display, flexDirection, gap, padding, width, height, flexWrap, alignItems, justifyContent, flexShrink, flex, etc.
+
+TEXT & DISPLAY:
+- TextBlock: {text: "string", tag: "p|h1|h2|h3|h4|h5|h6|span", fontSize: "text-2xs(11px)|text-xs(12px)|text-sm(13px)|text-base(14px)|text-lg(16px)|text-xl(18px)|text-2xl(20px)|text-3xl(24px)|text-p-2xs|text-p-xs|text-p-sm|text-p-base|text-p-lg|text-p-xl|text-p-2xl|text-p-3xl"}
+  # text-* = tight line-height (UI labels, headings); text-p-* = relaxed line-height (body copy, descriptions)
+- Badge: {variant: "subtle|solid|outline", theme: "green|red|orange|blue|gray", size: "sm|md|lg", label: "string"}
+- Avatar: {shape: "circle|square", size: "xs|sm|md|lg|xl|2xl|3xl", label: "initials", image: "url"}
+- Progress: {value: 0-100, size: "sm|md|lg", label: "string"}
+- Alert: {title: "string", description: "string", theme: "yellow|red|green|blue"}
+- ErrorMessage: {message: "string"}
+- FeatherIcon: {name: "feather-icon-name", class: "h-5 w-5"}
+- ImageView: {image: "url", size: "xs|sm|md|lg|xl"}
+- Divider: (no props)
+- Tooltip: {text: "string"}
+- HTML: {html: "<p>raw html</p>"}
+
+INPUTS:
+- TextInput: {placeholder: "string"}
+- Textarea: {placeholder: "string"}
+- FormControl: {type: "text|email|number|select|date|autocomplete|password", label: "string", placeholder: "string"}
+- Select: {placeholder: "string", options: [{label: "string", value: "string"}]}
+- Checkbox: {label: "string", checked: true|false}
+- Switch: {label: "string", description: "string", modelValue: true|false}
+- DatePicker: {placeholder: "string"}
+- TimePicker: {placeholder: "string"}
+- DateTimePicker: {placeholder: "string"}
+- MultiSelect: {placeholder: "string", options: [{label: "string", value: "string"}]}
+- Rating: {label: "string"}
+- FileUploader: {label: "string", fileTypes: "['image/*']"}
+- TextEditor: {modelValue: "string", editable: true, fixedMenu: true}
+
+ACTIONS:
+- Button: {label: "string", variant: "solid|subtle|outline|ghost", size: "sm|md|lg|xl|2xl", theme: "gray (DEFAULT — omit unless red/green/blue is semantically required)"}
+- Dropdown: {options: [{label: "string", icon: "feather-icon"}], button: {label: "string"}}
+
+NAVIGATION:
+- Breadcrumbs: {items: [{label: "string", route: "string"}]}
+- Tabs: {tabs: [{label: "string"}]}
+- TabButtons: {buttons: [{label: "string", value: "string"}]}
+- Sidebar: {header: {title: "string", subtitle: "string"}, sections: [{label: "string", items: [{label: "string", icon: "{{ getIcon('icon-name') }}", to: "string"}]}]}
+  # icon-name must be a valid kebab-case lucide icon from https://lucide.dev/icons
+
+DATA DISPLAY:
+- ListView: {columns: [{label: "string", key: "string", width: number}], rows: [{key: value}], rowKey: "string"}
+- NumberChart: {config: {title: "string", value: number, prefix: "string", delta: number}}
+- AxisChart: {config: {data: [{xKey: val, yKey: val}], xAxis: {key: "string", type: "time|category"}, yAxis: {title: "string"}, series: [{name: "string", type: "bar|line"}]}}
+- DonutChart: {config: {data: [{cat: val, val: number}], categoryColumn: "string", valueColumn: "string"}}
+- Filter: {doctype: "string", filters: {}}
+- Link: {doctype: "string"}
+- Tree: {nodeKey: "string", node: {name: "string", label: "string", children: []}}
+- Repeater: (no props — repeats child template over data)
+- Calendar: {config: {defaultMode: "Month"}, events: []}
+
+AUTOCOMPLETE:
+- Autocomplete: {placeholder: "string", options: [{label: "string", value: "string"}]}
+- Combobox: {placeholder: "string", options: [{group: "string", options: [{label, value}]}]}
+"""
+
+STYLING_RULES = """COMPONENT STYLING RULES:
+STYLE PROPERTY ROUTING — use the correct key:
+- `style:` (panel-editable) — use ONLY these properties:
+  Layout: display, flexDirection, justifyContent, alignItems, alignContent, alignSelf, flexWrap, flex, flexGrow, flexShrink, flexBasis, gap, rowGap, columnGap, overflowX, overflowY
+  Grid: gridTemplateColumns, gridTemplateRows, gridColumn, gridRow
+  Dimension: width, minWidth, maxWidth, height, minHeight, maxHeight
+  Position: position, top, right, bottom, left, zIndex
+  Spacing: margin, padding (and per-side: marginTop, marginRight, marginBottom, marginLeft, paddingTop, paddingRight, paddingBottom, paddingLeft)
+  Typography: fontWeight, lineHeight, color, letterSpacing, textTransform, textAlign
+  Visual: backgroundColor, borderColor, borderWidth, borderStyle, borderRadius, boxShadow, cursor
+- `rstyle:` (raw styles) — for ALL other CSS properties not listed above: opacity, objectFit, objectPosition, whiteSpace, textOverflow, textDecoration, fontStyle, fontFamily, transform, transition, animation, wordBreak, overflowWrap, etc. Keep rstyle minimal — only include when genuinely needed.
+- `mstyle:` (mobile styles) and `tstyle:` (tablet styles) — same properties as `style`, but for mobile and tablet breakpoints. Only include properties that need to change on mobile/tablet — do not duplicate the entire style object.
+- Use %, rem for responsive widths. Top-level sections MUST be 100% width
+
+CSS VARIABLE RULES:
+- Always use CSS variables. Avoid raw hex colors/values.
+  - backgroundColor: var(--surface-white) | var(--surface-gray-1..7) | var(--surface-cards) | var(--surface-red-1) | var(--surface-green-1) | var(--surface-amber-1) | var(--surface-blue-1)
+  - color (text): var(--ink-white) | var(--ink-gray-1..9)
+  - borderColor: var(--outline-white) | var(--outline-gray-1..5) | var(--outline-red-1..3) | var(--outline-green-1..2) | var(--outline-amber-1..2) | var(--outline-blue-1) | var(--outline-orange-1)
+  - borderRadius: "0px" (none) | "0.25rem" (sm) | "0.5rem" (DEFAULT) | "0.625rem" (md) | "0.75rem" (lg) | "1rem" (xl) | "1.25rem" (2xl) | "9999px" (full)
+- borderRadius — apply borderRadius (0.5rem by default) on cards, panels, containers by default, but NOT on full-width sections that span the entire viewport width.
+- NEVER use the `border` shorthand property or per-side border properties: borderTopColor, borderTopWidth, borderTopStyle, borderLeftColor, borderLeftWidth, borderLeftStyle, borderRightColor, borderRightWidth, borderRightStyle, borderBottomColor, borderBottomWidth, borderBottomStyle — these are NOT in the style panel
+- For full borders: borderColor, borderWidth (e.g. "1px"), borderStyle — always set all three together
+- For one-sided borders: use CSS shorthand values — e.g. top-only: borderWidth: "4px 0px 0px 0px", borderColor: "var(--outline-blue-1)", borderStyle: "solid"
+- Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
+- Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components — their props handle this. Only use style on `container` components for layout (width, flex, margin, etc.)."""
+
+OUTPUT_FORMAT_RULES = """YAML OUTPUT RULES (critical — invalid YAML breaks parsing):
+- Return ONLY a valid and compact YAML object. No markdown fences, no explanations.
+- NEVER put a bare `-` on its own line. List items must always start with `- key: value` on the SAME line as the dash:
+- Always double-quote strings that contain any of: apostrophe/single-quote, `?`, `#`, `&`, `:`, `[`, `]`, `{`, `}`
+- URLs must always be double-quoted: `image: "https://example.com/img?id=1"` NOT `image: https://example.com/img?id=1`
+- Text with apostrophes must use double quotes: `text: "I'm a designer"` NOT `text: 'I'm a designer'`
+- Long text values (bio, description, body copy) must use block scalar style instead of inline: `text: |` on its own line, then the text indented — never inline in a flow mapping"""
+
+SYSTEM_PROMPT = f"""You are an expert UI developer specializing in creating responsive app pages for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact YAML block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component (from frappe-ui or Studio) or native html element (div).
+
+BLOCK SCHEMA:
+name: componentName          # required — must match catalog exactly
+originalElement: div|body    # required for container and root blocks
+label: descriptive name
+props:                        # component-specific props (flow style preferred)
+  key: value
+style:                        # panel-editable CSS (see STYLE PROPERTY ROUTING below)
+  key: value
+rstyle:                       # raw CSS for properties not in the style panel
+  key: value
+mstyle:                       # mobile style overrides
+  key: value
+tstyle:                       # tablet style overrides
+  key: value
+slots:                        # componentSlots for frappe-ui components that hold child content
+  slotName: ...
+c:                            # children list
+- name: ...
+
+ROOT BLOCK:
+Always start with:
+name: div
+originalElement: body
+label: body
+style: {{display: flex, flexDirection: column, flexShrink: 0, width: inherit, overflowX: hidden, height: 100%}}
+c:
+- ...
+
+LAYOUT CONTAINERS (CRITICAL — originalElement is required or children won't render):
+name: container
+originalElement: div
+label: container
+style: {{display: flex, flexDirection: row|column, gap: ..., padding: ...}}
+c:
+- ...
+- Use container for all inner layout wrappers — never use "div" as name for inner blocks
+- flexDirection: row for horizontal layouts, column for vertical
+- Use gap, padding for spacing. width: 100% for full-width sections. flex: 1 to fill space.
+
+{STYLING_RULES}
+
+{COMPONENT_CATALOG}
+
+{OUTPUT_FORMAT_RULES}
+
+RULES:
+- name must exactly match a component from the catalog above (or "div" for root, "container" for inner wrappers)
+- style keys must be camelCase CSS (backgroundColor, borderRadius, fontSize, etc.)
+- Do NOT include id (componentId is auto-generated by Studio)
+- Do NOT include parentBlock
+- Omit keys whose value is null, empty string, empty dict, or empty list
+- Keep props to only what's relevant to the description
+
+EXAMPLE — "A login form with email, password and a submit button":
+name: div
+originalElement: body
+label: body
+style: {{display: flex, flexDirection: column, flexShrink: 0, width: inherit, overflowX: hidden, height: 100%}}
+c:
+- name: container
+  originalElement: div
+  label: page
+  style: {{display: flex, flexDirection: column, alignItems: center, justifyContent: center, flex: 1, padding: 24px}}
+  c:
+  - name: container
+    originalElement: div
+    label: card
+    style: {{display: flex, flexDirection: column, gap: 16px, width: 100%, maxWidth: 400px, padding: 32px, backgroundColor: 'var(--surface-white)', borderRadius: '0.75rem'}}
+    c:
+    - name: TextBlock
+      props: {{text: Sign In, tag: h2, fontSize: text-2xl}}
+      style: {{fontWeight: '600', color: 'var(--ink-gray-9)'}}
+    - name: TextInput
+      props: {{placeholder: Email address}}
+    - name: FormControl
+      props: {{type: password, label: Password, placeholder: Enter password}}
+    - name: Button
+      props: {{label: Sign In, variant: solid}}
+"""
+
+
+MODIFY_SYSTEM_PROMPT = f"""You are an expert UI editor for Frappe Studio. You will receive the YAML of a selected block and a user request. Return a modified version of that block.
+
+MODIFICATION RULES:
+- Preserve ALL id (componentId) values exactly as given — never change or omit them
+- Change ONLY what the user explicitly requests; leave everything else untouched
+- Return the COMPLETE block structure starting from the provided root node
+
+{COMPONENT_CATALOG}
+
+{STYLING_RULES}
+
+{OUTPUT_FORMAT_RULES}
+"""

From bc7205e8f3df00a49cf104ec4997ad7865589a92 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 18:39:11 +0530
Subject: [PATCH 38/57] refactor: remove dead code

---
 studio/ai/page_generator.py |  2 ++
 studio/ai/session.py        | 26 --------------------------
 2 files changed, 2 insertions(+), 26 deletions(-)

diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index 239666e2..95e375da 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -106,6 +106,7 @@ def generate_page_from_prompt(prompt: str, model: str | None, page_id: str) -> d
 
 
 @frappe.whitelist()
+@has_page_write_perm()
 def get_ai_session(page_id: str, model: str | None = None) -> dict:
 	session = AISession.get_or_create(page_id, model)
 	return {
@@ -115,6 +116,7 @@ def get_ai_session(page_id: str, model: str | None = None) -> dict:
 
 
 @frappe.whitelist()
+@has_page_write_perm()
 def clear_ai_session(page_id: str) -> dict:
 	session = AISession.get_or_create(page_id)
 	session.clear()
diff --git a/studio/ai/session.py b/studio/ai/session.py
index e2d94ca8..2982cf5a 100644
--- a/studio/ai/session.py
+++ b/studio/ai/session.py
@@ -39,10 +39,6 @@ def get_or_create(cls, page_id: str, model: str | None = None, user: str | None
 		doc.insert(ignore_permissions=True)
 		return cls(doc)
 
-	@property
-	def name(self):
-		return self._doc.name
-
 	def get_messages(self) -> list[dict]:
 		try:
 			messages = json.loads(self._doc.messages_json or "[]")
@@ -83,14 +79,6 @@ def add_message(
 		)
 		self._save_messages(messages, task_type=task_type)
 
-	def update_message_metadata(self, message_id: str, extra_metadata: dict):
-		messages = self.get_messages()
-		for msg in messages:
-			if msg.get("id") == message_id:
-				msg.setdefault("metadata", {}).update(extra_metadata)
-				break
-		self._save_messages(messages)
-
 	def build_context_string(self) -> str:
 		history_lines = []
 		for message in self.get_messages()[-10:]:
@@ -105,20 +93,6 @@ def build_context_string(self) -> str:
 			return ""
 		return "Conversation history for this page:\n" + "\n".join(history_lines)
 
-	def set_running(self):
-		frappe.db.set_value(self.DOCTYPE, self._doc.name, "is_running", 1, update_modified=False)
-		frappe.db.commit()
-
-	def clear_running(self):
-		frappe.db.set_value(self.DOCTYPE, self._doc.name, "is_running", 0, update_modified=False)
-		frappe.db.commit()
-
-	@classmethod
-	def is_session_running(cls, session_id: str) -> bool:
-		if not session_id or not frappe.db.exists(cls.DOCTYPE, session_id):
-			return False
-		return bool(frappe.db.get_value(cls.DOCTYPE, session_id, "is_running"))
-
 	def clear(self):
 		self._doc.messages_json = "[]"
 		self._doc.last_task_type = None

From 1726627228483a66c96f91446f624fa6062b3a7b Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 18:59:55 +0530
Subject: [PATCH 39/57] fix: LLM's yaml output not quoting user facing strings

---
 studio/ai/prompts.py | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
index 0294e58e..a3100432 100644
--- a/studio/ai/prompts.py
+++ b/studio/ai/prompts.py
@@ -87,11 +87,12 @@
 
 OUTPUT_FORMAT_RULES = """YAML OUTPUT RULES (critical — invalid YAML breaks parsing):
 - Return ONLY a valid and compact YAML object. No markdown fences, no explanations.
-- NEVER put a bare `-` on its own line. List items must always start with `- key: value` on the SAME line as the dash:
-- Always double-quote strings that contain any of: apostrophe/single-quote, `?`, `#`, `&`, `:`, `[`, `]`, `{`, `}`
-- URLs must always be double-quoted: `image: "https://example.com/img?id=1"` NOT `image: https://example.com/img?id=1`
-- Text with apostrophes must use double quotes: `text: "I'm a designer"` NOT `text: 'I'm a designer'`
-- Long text values (bio, description, body copy) must use block scalar style instead of inline: `text: |` on its own line, then the text indented — never inline in a flow mapping"""
+- NEVER put a bare `-` on its own line. List items must always start with `- key: value` on the SAME line as the dash.
+- ALL human-readable text in props (text, label, placeholder, description, title, etc.) MUST be single-quoted:
+- Style property identifiers (flex, column, center, 100%, etc.) do NOT need quoting.
+- Values containing `?`, `#`, `&`, `[`, `]`, `{`, `}`, or `:` MUST be quoted even in style dicts.
+- URLs must always be single-quoted: `image: 'https://example.com/img?id=1'`
+- Long text values (bio, description, body copy) must use block scalar style: `text: |` on its own line, then text indented — never inline in a flow mapping"""
 
 SYSTEM_PROMPT = f"""You are an expert UI developer specializing in creating responsive app pages for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact YAML block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component (from frappe-ui or Studio) or native html element (div).
 
@@ -165,14 +166,14 @@
     style: {{display: flex, flexDirection: column, gap: 16px, width: 100%, maxWidth: 400px, padding: 32px, backgroundColor: 'var(--surface-white)', borderRadius: '0.75rem'}}
     c:
     - name: TextBlock
-      props: {{text: Sign In, tag: h2, fontSize: text-2xl}}
+      props: {{text: 'Sign In', tag: h2, fontSize: text-2xl}}
       style: {{fontWeight: '600', color: 'var(--ink-gray-9)'}}
     - name: TextInput
-      props: {{placeholder: Email address}}
+      props: {{placeholder: 'Email address'}}
     - name: FormControl
-      props: {{type: password, label: Password, placeholder: Enter password}}
+      props: {{type: password, label: 'Password', placeholder: 'Enter password'}}
     - name: Button
-      props: {{label: Sign In, variant: solid}}
+      props: {{label: 'Sign In', variant: solid}}
 """
 
 

From ddd557c42fc3f3fd2d963b8e7983e70a54f602a4 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 22:24:33 +0530
Subject: [PATCH 40/57] fix: panel messages

---
 frontend/src/components/AIChatPanel.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
index daa2bac0..bb81f1ee 100644
--- a/frontend/src/components/AIChatPanel.vue
+++ b/frontend/src/components/AIChatPanel.vue
@@ -18,8 +18,8 @@
 				v-if="!messages.length"
 				class="flex h-full flex-col items-center justify-center gap-2 pb-8 text-center"
 			>
-				<FeatherIcon name="cpu" class="h-8 w-8 text-ink-gray-3" />
-				<p class="text-xs text-ink-gray-4">Chat to create or edit page</p>
+				<FeatherIcon name="zap" class="h-8 w-8 text-ink-gray-3" />
+				<p class="text-xs text-ink-gray-4">Chat to create or edit this page</p>
 			</div>
 
 			<template v-for="msg in messages" :key="msg.id">
@@ -56,7 +56,7 @@
 				<textarea
 					v-model="prompt"
 					rows="4"
-					class="w-full resize-none rounded border border-[--surface-gray-2] bg-surface-gray-2 px-2 py-1.5 text-sm text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-[--outline-gray-modals] hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 disabled:cursor-not-allowed disabled:bg-surface-gray-1 disabled:text-ink-gray-5"
+					class="w-full resize-none rounded border border-[--surface-gray-2] bg-surface-gray-2 px-2 py-1.5 text-p-sm text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-[--outline-gray-modals] hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 disabled:cursor-not-allowed disabled:bg-surface-gray-1 disabled:text-ink-gray-5"
 					:placeholder="
 						isModifyMode ? 'Describe what to change in this block...' : 'Ask to create or edit this page...'
 					"

From 122e0af578d065b7d4d24a05a3217f267290d598 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 22:43:34 +0530
Subject: [PATCH 41/57] fix: add nudge to setup openrouter key to use AI chat

---
 frontend/src/components/AIChatPanel.vue       | 14 +++++++++++--
 .../src/components/StudioSettingsDialog.vue   | 20 ++++++++-----------
 frontend/src/components/StudioToolbar.vue     |  5 ++---
 frontend/src/data/studioSettings.ts           |  7 +++++++
 frontend/src/stores/studioStore.ts            |  2 ++
 5 files changed, 31 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/data/studioSettings.ts

diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
index bb81f1ee..d6dfbd7c 100644
--- a/frontend/src/components/AIChatPanel.vue
+++ b/frontend/src/components/AIChatPanel.vue
@@ -13,7 +13,14 @@
 			</button>
 		</div>
 
-		<div ref="messagesEl" class="no-scrollbar flex-1 space-y-4 overflow-y-auto px-4 py-4">
+		<div v-if="!isAIEnabled" class="flex flex-1 flex-col items-start gap-3 p-4">
+			<p class="text-p-xs text-ink-gray-6">
+				Configure an AI API key in Studio Settings to use the AI assistant.
+			</p>
+			<Button variant="subtle" label="Open Settings" @click="store.showStudioSettingsDialog = true" />
+		</div>
+
+		<div v-else ref="messagesEl" class="no-scrollbar flex-1 space-y-4 overflow-y-auto px-4 py-4">
 			<div
 				v-if="!messages.length"
 				class="flex h-full flex-col items-center justify-center gap-2 pb-8 text-center"
@@ -42,7 +49,7 @@
 			</p>
 		</div>
 
-		<div class="shrink-0 border-t border-outline-gray-1 bg-surface-white p-4">
+		<div v-if="isAIEnabled" class="shrink-0 border-t border-outline-gray-1 bg-surface-white p-4">
 			<ErrorMessage v-if="error" :message="error" class="mb-2" />
 
 			<div v-if="isModifyMode" class="mb-2 flex items-center gap-1.5 rounded py-1">
@@ -119,11 +126,14 @@ import useCanvasStore from "@/stores/canvasStore"
 import { getBlockInstance, getBlockString } from "@/utils/serializer"
 import { tryParseYamlBlock } from "@/utils/blockCodec"
 import type Block from "@/utils/block"
+import { studioSettings } from "@/data/studioSettings"
 
 const store = useStudioStore()
 const canvasStore = useCanvasStore()
 const socket = inject<any>("socket")
 
+const isAIEnabled = computed(() => !!studioSettings.doc?.ai_api_key)
+
 const prompt = ref("")
 const loading = ref(false)
 const error = ref("")
diff --git a/frontend/src/components/StudioSettingsDialog.vue b/frontend/src/components/StudioSettingsDialog.vue
index 39bc1b56..daad140b 100644
--- a/frontend/src/components/StudioSettingsDialog.vue
+++ b/frontend/src/components/StudioSettingsDialog.vue
@@ -38,8 +38,9 @@
 
 <script lang="ts" setup>
 import { ref, watch } from "vue"
-import { Dialog, FormControl, ErrorMessage, createDocumentResource } from "frappe-ui"
+import { Dialog, FormControl, ErrorMessage } from "frappe-ui"
 import { toast } from "vue-sonner"
+import { studioSettings } from "@/data/studioSettings"
 
 const showDialog = defineModel("showDialog", { type: Boolean, required: true })
 
@@ -47,19 +48,14 @@ const apiKey = ref("")
 const error = ref("")
 const saving = ref(false)
 
-const settings = createDocumentResource({
-	doctype: "Studio Settings",
-	name: "Studio Settings",
-	onSuccess(doc: any) {
-		apiKey.value = doc.ai_api_key || ""
-	},
-})
-
 watch(
 	() => showDialog.value,
-	(open) => {
+	async (open) => {
 		if (!open) return
-		settings.reload()
+		if (!studioSettings.doc) {
+			await studioSettings.reload()
+		}
+		apiKey.value = studioSettings.doc?.ai_api_key || ""
 		error.value = ""
 	},
 	{ immediate: true },
@@ -73,7 +69,7 @@ function reset() {
 function save() {
 	saving.value = true
 	error.value = ""
-	settings.setValue
+	studioSettings.setValue
 		.submit({
 			ai_api_key: apiKey.value,
 		})
diff --git a/frontend/src/components/StudioToolbar.vue b/frontend/src/components/StudioToolbar.vue
index 550a34bf..2084da54 100644
--- a/frontend/src/components/StudioToolbar.vue
+++ b/frontend/src/components/StudioToolbar.vue
@@ -21,7 +21,7 @@
 							{
 								label: 'Studio Settings',
 								icon: 'sliders',
-								onClick: () => (showStudioSettingsDialog = true),
+								onClick: () => (store.showStudioSettingsDialog = true),
 							},
 							{
 								label: 'Delete App',
@@ -134,7 +134,7 @@
 			:app="store.activeApp"
 			@update="(app: StudioApp) => store.setApp(app.name)"
 		/>
-		<StudioSettingsDialog v-model:showDialog="showStudioSettingsDialog" />
+		<StudioSettingsDialog v-model:showDialog="store.showStudioSettingsDialog" />
 	</div>
 </template>
 
@@ -164,5 +164,4 @@ const showExportAppDialog = ref(false)
 const canExportApp = computed(() => window.is_developer_mode && !isObjectEmpty(store.activeApp))
 
 const showAppDialog = ref(false)
-const showStudioSettingsDialog = ref(false)
 </script>
diff --git a/frontend/src/data/studioSettings.ts b/frontend/src/data/studioSettings.ts
new file mode 100644
index 00000000..bd343f1e
--- /dev/null
+++ b/frontend/src/data/studioSettings.ts
@@ -0,0 +1,7 @@
+import { createDocumentResource } from "frappe-ui"
+
+export const studioSettings = createDocumentResource({
+	doctype: "Studio Settings",
+	name: "Studio Settings",
+	auto: true,
+})
diff --git a/frontend/src/stores/studioStore.ts b/frontend/src/stores/studioStore.ts
index 60739db0..7a9e5156 100644
--- a/frontend/src/stores/studioStore.ts
+++ b/frontend/src/stores/studioStore.ts
@@ -44,6 +44,7 @@ const useStudioStore = defineStore("store", () => {
 	// dialogs
 	const showSlotEditorDialog = ref(false)
 	const showSearchBlock = ref(false)
+	const showStudioSettingsDialog = ref(false)
 
 	// studio apps
 	const activeApp = ref<StudioApp | null>(null)
@@ -460,6 +461,7 @@ const useStudioStore = defineStore("store", () => {
 		// dialogs
 		showSlotEditorDialog,
 		showSearchBlock,
+		showStudioSettingsDialog,
 		// studio app
 		activeApp,
 		setApp,

From 2f819133f1715af95a938e1fa1d88d41102c9a14 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 22:52:26 +0530
Subject: [PATCH 42/57] fix(prompt): add FormControl and FormLabel usage
 details

---
 frontend/src/components/AIChatPanel.vue | 2 +-
 studio/ai/prompts.py                    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
index d6dfbd7c..e2ba63af 100644
--- a/frontend/src/components/AIChatPanel.vue
+++ b/frontend/src/components/AIChatPanel.vue
@@ -65,7 +65,7 @@
 					rows="4"
 					class="w-full resize-none rounded border border-[--surface-gray-2] bg-surface-gray-2 px-2 py-1.5 text-p-sm text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:border-[--outline-gray-modals] hover:bg-surface-gray-3 focus:border-outline-gray-4 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 disabled:cursor-not-allowed disabled:bg-surface-gray-1 disabled:text-ink-gray-5"
 					:placeholder="
-						isModifyMode ? 'Describe what to change in this block...' : 'Ask to create or edit this page...'
+						isModifyMode ? 'Describe what to change in this block...' : 'Chat to create or edit this page...'
 					"
 					:disabled="loading"
 					@keydown.meta.enter="generate"
diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
index a3100432..0a273d08 100644
--- a/studio/ai/prompts.py
+++ b/studio/ai/prompts.py
@@ -19,7 +19,7 @@
 INPUTS:
 - TextInput: {placeholder: "string"}
 - Textarea: {placeholder: "string"}
-- FormControl: {type: "text|email|number|select|date|autocomplete|password", label: "string", placeholder: "string"}
+- FormControl: {type: "text|email|number|textarea|select|date|autocomplete|password|tel|url|range", label: "string", placeholder: "string", required: "boolean", options: [{label: "string", value: "string"}] (for select and autocomplete)}
 - Select: {placeholder: "string", options: [{label: "string", value: "string"}]}
 - Checkbox: {label: "string", checked: true|false}
 - Switch: {label: "string", description: "string", modelValue: true|false}
@@ -30,6 +30,7 @@
 - Rating: {label: "string"}
 - FileUploader: {label: "string", fileTypes: "['image/*']"}
 - TextEditor: {modelValue: "string", editable: true, fixedMenu: true}
+- FormLabel: {label: "string"} (for inputs that don't have a built-in label prop, e.g. Textarea, TextEditor, etc.)
 
 ACTIONS:
 - Button: {label: "string", variant: "solid|subtle|outline|ghost", size: "sm|md|lg|xl|2xl", theme: "gray (DEFAULT — omit unless red/green/blue is semantically required)"}

From 6b31b270dd568269834487e2a20fde16b2116d1c Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 23:08:41 +0530
Subject: [PATCH 43/57] fix: expand canvas as per content

---
 frontend/src/components/StudioCanvas.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/StudioCanvas.vue b/frontend/src/components/StudioCanvas.vue
index 492cf812..4e7eaa1b 100644
--- a/frontend/src/components/StudioCanvas.vue
+++ b/frontend/src/components/StudioCanvas.vue
@@ -18,7 +18,6 @@
 
 		<div
 			class="fixed flex gap-40"
-			:class="canvasStore.editingMode === 'page' ? 'h-full' : ''"
 			ref="canvas"
 			:style="{
 				transformOrigin: 'top center',

From 55ca90fa6891a7c91ed2f52811b253da7cd2ed1a Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Fri, 29 May 2026 23:26:02 +0530
Subject: [PATCH 44/57] fix(prompt): models not understanding name key in
 series (AxisChart)

---
 studio/ai/prompts.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
index 0a273d08..e46292c2 100644
--- a/studio/ai/prompts.py
+++ b/studio/ai/prompts.py
@@ -46,7 +46,7 @@
 DATA DISPLAY:
 - ListView: {columns: [{label: "string", key: "string", width: number}], rows: [{key: value}], rowKey: "string"}
 - NumberChart: {config: {title: "string", value: number, prefix: "string", delta: number}}
-- AxisChart: {config: {data: [{xKey: val, yKey: val}], xAxis: {key: "string", type: "time|category"}, yAxis: {title: "string"}, series: [{name: "string", type: "bar|line"}]}}
+- AxisChart: {config: {data: [{xKey: val, yKey: val}], xAxis: {key: "dataFieldName", type: "category|time"}, yAxis: {title: "string"}, series: [{name: "dataFieldName" (should match data field key, not label), type: "bar|line"}]}}
 - DonutChart: {config: {data: [{cat: val, val: number}], categoryColumn: "string", valueColumn: "string"}}
 - Filter: {doctype: "string", filters: {}}
 - Link: {doctype: "string"}

From 37e1b1f1c0721fafca1e0cd50b8122523da12f28 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Sat, 30 May 2026 01:05:55 +0530
Subject: [PATCH 45/57] perf: throttle streaming output

- browser crashes if the page is too big
---
 frontend/src/components/AIChatPanel.vue | 7 ++++++-
 studio/ai/prompts.py                    | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
index e2ba63af..29ea8c2f 100644
--- a/frontend/src/components/AIChatPanel.vue
+++ b/frontend/src/components/AIChatPanel.vue
@@ -125,6 +125,7 @@ import useStudioStore from "@/stores/studioStore"
 import useCanvasStore from "@/stores/canvasStore"
 import { getBlockInstance, getBlockString } from "@/utils/serializer"
 import { tryParseYamlBlock } from "@/utils/blockCodec"
+import { throttle } from "@/utils/helpers"
 import type Block from "@/utils/block"
 import { studioSettings } from "@/data/studioSettings"
 
@@ -206,13 +207,17 @@ function onProgress(data: any) {
 function onStream(data: any) {
 	canvasStore.isAIStreaming = true
 	streamBuffer.value += data.chunk || ""
+	renderStreamedBlock()
+}
+
+const renderStreamedBlock = throttle(() => {
 	const block = tryParseYamlBlock(streamBuffer.value)
 	if (block) {
 		const rootBlock = getBlockInstance(block)
 		store.pageBlocks = [rootBlock]
 		canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
 	}
-}
+}, 250)
 
 async function onComplete(data: any) {
 	canvasStore.isAIStreaming = false
diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
index e46292c2..799d8f00 100644
--- a/studio/ai/prompts.py
+++ b/studio/ai/prompts.py
@@ -144,7 +144,7 @@
 
 RULES:
 - name must exactly match a component from the catalog above (or "div" for root, "container" for inner wrappers)
-- style keys must be camelCase CSS (backgroundColor, borderRadius, fontSize, etc.)
+- style keys must be camelCase CSS (backgroundColor, borderRadius, etc.)
 - Do NOT include id (componentId is auto-generated by Studio)
 - Do NOT include parentBlock
 - Omit keys whose value is null, empty string, empty dict, or empty list

From 01bd8a31fcf1dc67cc244bcf459df4b1e162c081 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Sat, 30 May 2026 02:40:28 +0530
Subject: [PATCH 46/57] fix(prompt): include Designer persona in prompt

- LLM was mixing variants of Badges in the same view, adding more than 1 primary button and creating ugly UI at times
---
 studio/ai/prompts.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
index 799d8f00..30b2590a 100644
--- a/studio/ai/prompts.py
+++ b/studio/ai/prompts.py
@@ -95,7 +95,7 @@
 - URLs must always be single-quoted: `image: 'https://example.com/img?id=1'`
 - Long text values (bio, description, body copy) must use block scalar style: `text: |` on its own line, then text indented — never inline in a flow mapping"""
 
-SYSTEM_PROMPT = f"""You are an expert UI developer specializing in creating responsive app pages for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact YAML block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component (from frappe-ui or Studio) or native html element (div).
+SYSTEM_PROMPT = f"""You are an expert UI Web developer & designer specializing in creating responsive app pages for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact YAML block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component (from frappe-ui or Studio) or native html element (div).
 
 BLOCK SCHEMA:
 name: componentName          # required — must match catalog exactly

From 2972da84c04a1df4215504874f3728969e3087a5 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Sat, 30 May 2026 13:40:39 +0530
Subject: [PATCH 47/57] refactor: go back to JSON I/O format instead of YAML

- LLMs understand JSON better. Models were returning invalid and also giving inferior output quality
---
 frontend/package.json                   |   2 -
 frontend/src/components/AIChatPanel.vue |   6 +-
 frontend/src/utils/blockCodec.ts        | 146 +++++++++++++++++---
 studio/ai/block_codec.py                | 169 +++++++++++++++---------
 studio/ai/page_generator.py             |   6 +-
 studio/ai/prompts.py                    | 100 ++++----------
 yarn.lock                               |   7 +-
 7 files changed, 271 insertions(+), 165 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 25794cc7..60bedf7c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,7 +26,6 @@
 		"autoprefixer": "^10.4.2",
 		"codemirror": "^6.0.1",
 		"frappe-ui": "0.1.274",
-		"js-yaml": "^4.1.1",
 		"json5": "^2.2.3",
 		"marked": "^15.0.6",
 		"pinia": "^2.2.1",
@@ -41,7 +40,6 @@
 		"vuedraggable": "^4.1.0"
 	},
 	"devDependencies": {
-		"@types/js-yaml": "^4.0.9",
 		"eslint": "^8.19.0",
 		"eslint-plugin-vue": "^9.11.0",
 		"postcss": "^8.4.5",
diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
index 29ea8c2f..59cc6584 100644
--- a/frontend/src/components/AIChatPanel.vue
+++ b/frontend/src/components/AIChatPanel.vue
@@ -124,7 +124,7 @@ import { toast } from "vue-sonner"
 import useStudioStore from "@/stores/studioStore"
 import useCanvasStore from "@/stores/canvasStore"
 import { getBlockInstance, getBlockString } from "@/utils/serializer"
-import { tryParseYamlBlock } from "@/utils/blockCodec"
+import { tryParseJsonBlock } from "@/utils/blockCodec"
 import { throttle } from "@/utils/helpers"
 import type Block from "@/utils/block"
 import { studioSettings } from "@/data/studioSettings"
@@ -211,7 +211,7 @@ function onStream(data: any) {
 }
 
 const renderStreamedBlock = throttle(() => {
-	const block = tryParseYamlBlock(streamBuffer.value)
+	const block = tryParseJsonBlock(streamBuffer.value)
 	if (block) {
 		const rootBlock = getBlockInstance(block)
 		store.pageBlocks = [rootBlock]
@@ -255,7 +255,7 @@ function onModifyProgress(data: any) {
 function onModifyStream(data: any) {
 	canvasStore.isAIStreaming = true
 	modifyStreamBuffer.value += data.chunk || ""
-	const block = tryParseYamlBlock(modifyStreamBuffer.value)
+	const block = tryParseJsonBlock(modifyStreamBuffer.value)
 	if (block) {
 		replaceBlockInTree(data.component_id, getBlockInstance(block))
 	}
diff --git a/frontend/src/utils/blockCodec.ts b/frontend/src/utils/blockCodec.ts
index 7e930075..29b07941 100644
--- a/frontend/src/utils/blockCodec.ts
+++ b/frontend/src/utils/blockCodec.ts
@@ -1,8 +1,7 @@
 import { BlockOptions } from "@/types"
-import { load as yamlLoad } from "js-yaml"
 
 /**
- * Expand a compact YAML node (name/style/c/props...) into Studio block format
+ * Expand a compact node (name/style/c/props...) into Studio block format
  * (componentName/baseStyles/children/componentProps...).
  * Mirrors BlockCodec.expand() in studio/ai/block_codec.py.
  */
@@ -26,30 +25,145 @@ export function expandBlock(node: Record<string, any>): BlockOptions {
 }
 
 /**
- * Try to parse a partial YAML stream buffer into a Studio block.
- * On parse failure, walks backwards line by line dropping the trailing
- * incomplete line — fallback to handle mid-stream truncation and apostrophe-in-single-quote errors.
+ * Try to parse a partial JSON stream buffer into a Studio block.
+ * The buffer is usually incomplete mid-stream (unclosed strings/brackets), so we
+ * best-effort repair it: close the open string, drop dangling trailing tokens, and
+ * close open brackets. If that still fails we trim back one member and retry.
  */
-export function tryParseYamlBlock(buffer: string): BlockOptions | null {
-	if (!buffer.trim()) return null
-	const parsed = getValidPartialYAML(buffer)
+export function tryParseJsonBlock(buffer: string): BlockOptions | null {
+	const text = stripFences(buffer)
+	if (!text) return null
+	let parsed = parsePartialJson(text)
+	if (Array.isArray(parsed)) parsed = parsed[0]
 	if (!parsed || typeof parsed !== "object" || !("name" in parsed)) return null
 	return expandBlock(parsed as Record<string, any>)
 }
 
-function getValidPartialYAML(text: string): unknown {
+function stripFences(text: string): string {
+	return text
+		.trim()
+		.replace(/^```(?:json|yaml)?\s*/i, "")
+		.replace(/```\s*$/i, "")
+		.trim()
+}
+
+/**
+ * Escape stray double-quotes inside string values. A `"` only legitimately ends a
+ * string when the next non-space char is structural (`,` `}` `]` `:` or EOF);
+ * otherwise it's unescaped content (e.g. He said "hi") and we escape it.
+ */
+function escapeInnerQuotes(text: string): string {
+	let out = ""
+	let inString = false
+	for (let i = 0; i < text.length; i++) {
+		const ch = text[i]
+		if (!inString) {
+			out += ch
+			if (ch === '"') inString = true
+			continue
+		}
+		if (ch === "\\") {
+			out += ch + (text[i + 1] ?? "")
+			i++
+			continue
+		}
+		if (ch === '"') {
+			let j = i + 1
+			while (j < text.length && /\s/.test(text[j])) j++
+			const next = j < text.length ? text[j] : ""
+			if (next === "" || ",}]:".includes(next)) {
+				out += ch
+				inString = false
+			} else {
+				out += '\\"'
+			}
+			continue
+		}
+		out += ch
+	}
+	return out
+}
+
+function parsePartialJson(text: string): any {
 	try {
-		return yamlLoad(text)
+		return JSON.parse(text)
 	} catch {
-		const lines = text.split("\n")
-		for (let i = lines.length - 1; i > 0; i--) {
+		// fall through to repair
+	}
+
+	let working = escapeInnerQuotes(text)
+	for (let attempt = 0; attempt < 8; attempt++) {
+		const { candidate, trimmed } = repair(working)
+		if (candidate) {
 			try {
-				const result = yamlLoad(lines.slice(0, i).join("\n"))
-				if (result) return result
+				return JSON.parse(candidate)
 			} catch {
-				// keep trimming
+				// candidate didn't parse; retry on the trimmed buffer
 			}
 		}
-		return null
+		if (!trimmed || trimmed === working) return null
+		working = trimmed
+	}
+	return null
+}
+
+interface Repair {
+	candidate: string // best guess at a complete, parseable JSON string
+	trimmed: string // text with its last (incomplete) member removed, for retry
+}
+
+/**
+ * Scan `text` once, then produce:
+ *  - candidate: text with the open string closed, trailing comma/dangling key
+ *    dropped, and all open brackets closed.
+ *  - trimmed: text cut back to the last structural boundary (a top-of-container
+ *    `,`, `{` or `[`), so a failed candidate can be retried minus one member.
+ */
+function repair(text: string): Repair {
+	const closers: string[] = []
+	let inString = false
+	let escaped = false
+	let lastBoundary = -1
+
+	for (let i = 0; i < text.length; i++) {
+		const ch = text[i]
+		if (inString) {
+			if (escaped) escaped = false
+			else if (ch === "\\") escaped = true
+			else if (ch === '"') inString = false
+			continue
+		}
+		if (ch === '"') inString = true
+		else if (ch === "{") {
+			closers.push("}")
+			lastBoundary = i
+		} else if (ch === "[") {
+			closers.push("]")
+			lastBoundary = i
+		} else if (ch === "}" || ch === "]") closers.pop()
+		else if (ch === ",") lastBoundary = i
+	}
+
+	let candidate = inString ? text + '"' : text
+	let prev = ""
+	while (candidate !== prev) {
+		prev = candidate
+		candidate = candidate.replace(/\s+$/, "")
+		if (candidate.endsWith(",")) {
+			candidate = candidate.slice(0, -1)
+		} else {
+			// dangling `"key":` with no value yet
+			const dangling = candidate.match(/,?\s*"(?:[^"\\]|\\.)*"\s*:$/)
+			if (dangling) candidate = candidate.slice(0, candidate.length - dangling[0].length)
+		}
 	}
+	for (let i = closers.length - 1; i >= 0; i--) candidate += closers[i]
+
+	let trimmed = ""
+	if (lastBoundary >= 0) {
+		// keep an opening bracket (empty container is valid); drop a trailing comma
+		trimmed = text[lastBoundary] === "," ? text.slice(0, lastBoundary) : text.slice(0, lastBoundary + 1)
+	}
+
+	return { candidate, trimmed }
 }
diff --git a/studio/ai/block_codec.py b/studio/ai/block_codec.py
index 224fd38c..59e8e8ae 100644
--- a/studio/ai/block_codec.py
+++ b/studio/ai/block_codec.py
@@ -1,53 +1,6 @@
+import json
 import re
 
-import yaml
-
-
-class CompactDumper(yaml.Dumper):
-	"""Minimal-whitespace YAML dumper: indentless lists, flow style for flat dicts.
-	Two optimizations over the default Dumper:
-	1. indentless=True — removes the extra 2-space indent on list items inside
-	   mappings, which compounds in deeply nested block trees.
-	2. Flow style for flat dicts — turns multi-line style blocks into single-line
-	   {k: v, k: v} inline mappings, saving ~60% of style-dict tokens.
-	"""
-
-	def increase_indent(self, flow=False, indentless=False):
-		return super().increase_indent(flow=flow, indentless=True)
-
-	def represent_mapping(self, tag, mapping, flow_style=None):
-		if flow_style is None:
-			flow_style = all(not isinstance(v, (dict | list)) for v in mapping.values())
-		return super().represent_mapping(tag, mapping, flow_style=flow_style)
-
-
-def _str_representer(dumper, data):
-	"""Use plain scalars where safe; single-quote only when the value contains
-	characters that would confuse the YAML parser."""
-	unsafe = (":", "{", "}", "[", "]", "#", "&", "*", "!", "|", ">", "'", '"', "?", "\n")
-	if any(c in data for c in unsafe):
-		return dumper.represent_scalar("tag:yaml.org,2002:str", data, style="'")
-	return dumper.represent_scalar("tag:yaml.org,2002:str", data)
-
-
-CompactDumper.add_representer(str, _str_representer)
-
-
-def _to_yaml(data) -> str:
-	return yaml.dump(
-		data,
-		Dumper=CompactDumper,
-		sort_keys=False,
-		default_flow_style=False,
-		allow_unicode=True,
-		width=1000,
-	)
-
-
-def _strip_fences(text: str) -> str:
-	text = re.sub(r"^```(?:yaml|json)?\s*\n?", "", text.strip())
-	return re.sub(r"\n?```\s*$", "", text).strip()
-
 
 class BlockCodec:
 	@staticmethod
@@ -126,7 +79,7 @@ def expand(node: dict) -> dict:
 	@staticmethod
 	def parse_blocks(content: str) -> dict:
 		cleaned = _strip_fences(content)
-		parsed = yaml.safe_load(cleaned)
+		parsed = _loads_lenient(cleaned)
 
 		if isinstance(parsed, list):
 			block = parsed[0] if parsed else {}
@@ -144,10 +97,8 @@ def parse_blocks(content: str) -> dict:
 		return BlockCodec.expand(block)
 
 	@staticmethod
-	def strip_context(block_json: str, task_type: str = "full") -> str:
-		"""Compress a block to YAML for LLM context, extracting relevant subset."""
-		import json
-
+	def strip_context(block_json: str) -> str:
+		"""Compress a block to compact JSON for LLM context, extracting relevant subset."""
 		try:
 			data = json.loads(block_json)
 		except (json.JSONDecodeError, TypeError):
@@ -158,16 +109,7 @@ def strip_context(block_json: str, task_type: str = "full") -> str:
 		if not isinstance(data, dict):
 			return block_json
 
-		if task_type == "text_only":
-			texts = []
-			_collect_text(data, texts)
-			return "\n".join(texts)
-
-		if task_type == "image_attrs":
-			props = data.get("componentProps") or {}
-			return _to_yaml({"src": props.get("image", ""), "alt": props.get("alt", "")})
-
-		return _to_yaml([BlockCodec.compress(data)])
+		return _to_json(BlockCodec.compress(data))
 
 
 def _collect_text(block: dict, results: list):
@@ -182,3 +124,104 @@ def _collect_text(block: dict, results: list):
 				slot.get("slotContent", []) if isinstance(slot.get("slotContent"), list) else []
 			):
 				_collect_text(slot_child, results)
+
+
+def _to_json(data) -> str:
+	"""Compact, token-efficient JSON: no whitespace, unicode kept as-is."""
+	return json.dumps(data, separators=(",", ":"), ensure_ascii=False)
+
+
+def _strip_fences(text: str) -> str:
+	text = re.sub(r"^```(?:json|yaml)?\s*\n?", "", text.strip())
+	return re.sub(r"\n?```\s*$", "", text).strip()
+
+
+def _escape_inner_quotes(text: str) -> str:
+	"""Escape stray double-quotes inside string values. A `"` only legitimately
+	ends a string when the next non-space char is structural (`,` `}` `]` `:` or
+	EOF); otherwise it is unescaped content (e.g. He said "hi") and we escape it."""
+	out = []
+	i, n = 0, len(text)
+	in_string = False
+	while i < n:
+		ch = text[i]
+		if not in_string:
+			out.append(ch)
+			if ch == '"':
+				in_string = True
+			i += 1
+			continue
+		if ch == "\\":  # keep existing escape pair intact
+			out.append(ch)
+			if i + 1 < n:
+				out.append(text[i + 1])
+				i += 2
+			else:
+				i += 1
+			continue
+		if ch == '"':
+			j = i + 1
+			while j < n and text[j] in " \t\r\n":
+				j += 1
+			nxt = text[j] if j < n else ""
+			if nxt in (",", "}", "]", ":", ""):
+				out.append(ch)
+				in_string = False
+			else:
+				out.append('\\"')
+			i += 1
+			continue
+		out.append(ch)
+		i += 1
+	return "".join(out)
+
+
+def _close_open_structures(text: str) -> str:
+	"""Best-effort completion of a truncated JSON tail: close an unterminated
+	string, drop a dangling trailing comma or `"key":`, and close open brackets."""
+	closers = []
+	in_string = escaped = False
+	for ch in text:
+		if in_string:
+			if escaped:
+				escaped = False
+			elif ch == "\\":
+				escaped = True
+			elif ch == '"':
+				in_string = False
+			continue
+		if ch == '"':
+			in_string = True
+		elif ch == "{":
+			closers.append("}")
+		elif ch == "[":
+			closers.append("]")
+		elif ch in "}]" and closers:
+			closers.pop()
+
+	result = text + ('"' if in_string else "")
+	prev = None
+	while prev != result:
+		prev = result
+		result = result.rstrip()
+		if result.endswith(","):
+			result = result[:-1]
+		else:
+			result = re.sub(r',?\s*"(?:[^"\\]|\\.)*"\s*:$', "", result)
+	return result + "".join(reversed(closers))
+
+
+def _repair_json(text: str) -> str:
+	text = _escape_inner_quotes(text)
+	text = re.sub(r",\s*([}\]])", r"\1", text)  # trailing commas before } or ]
+	return _close_open_structures(text)
+
+
+def _loads_lenient(text: str):
+	"""Parse JSON, tolerating the common ways LLMs emit slightly-invalid JSON:
+	raw control chars (strict=False), unescaped inner quotes, trailing commas,
+	and truncation. Falls back to a repair pass only when strict parsing fails."""
+	try:
+		return json.loads(text, strict=False)
+	except json.JSONDecodeError:
+		return json.loads(_repair_json(text), strict=False)
diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index 95e375da..7b8fdcb8 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -34,10 +34,10 @@ def _emit(event_suffix: str, page_id: str, user: str, prefix: str = "ai_generati
 
 
 def _progress_stage(content: str) -> str | None:
-	"""Extract a human-readable stage from the tail of a partial YAML stream."""
-	lookback = content[-400:]
+	"""Extract a human-readable stage from the tail of a partial JSON stream."""
+	lookback = content[-400:].replace(" ", "")
 	for section_type in ("section", "nav", "header", "footer"):
-		if lookback.rfind(f"label: {section_type}") != -1 or lookback.rfind(f"name: {section_type}") != -1:
+		if f'"label":"{section_type}' in lookback or f'"name":"{section_type}' in lookback:
 			return f"Building {section_type}…"
 	return None
 
diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
index 30b2590a..d129146b 100644
--- a/studio/ai/prompts.py
+++ b/studio/ai/prompts.py
@@ -86,55 +86,35 @@
 - Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
 - Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components — their props handle this. Only use style on `container` components for layout (width, flex, margin, etc.)."""
 
-OUTPUT_FORMAT_RULES = """YAML OUTPUT RULES (critical — invalid YAML breaks parsing):
-- Return ONLY a valid and compact YAML object. No markdown fences, no explanations.
-- NEVER put a bare `-` on its own line. List items must always start with `- key: value` on the SAME line as the dash.
-- ALL human-readable text in props (text, label, placeholder, description, title, etc.) MUST be single-quoted:
-- Style property identifiers (flex, column, center, 100%, etc.) do NOT need quoting.
-- Values containing `?`, `#`, `&`, `[`, `]`, `{`, `}`, or `:` MUST be quoted even in style dicts.
-- URLs must always be single-quoted: `image: 'https://example.com/img?id=1'`
-- Long text values (bio, description, body copy) must use block scalar style: `text: |` on its own line, then text indented — never inline in a flow mapping"""
-
-SYSTEM_PROMPT = f"""You are an expert UI Web developer & designer specializing in creating responsive app pages for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact YAML block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component (from frappe-ui or Studio) or native html element (div).
-
-BLOCK SCHEMA:
-name: componentName          # required — must match catalog exactly
-originalElement: div|body    # required for container and root blocks
-label: descriptive name
-props:                        # component-specific props (flow style preferred)
-  key: value
-style:                        # panel-editable CSS (see STYLE PROPERTY ROUTING below)
-  key: value
-rstyle:                       # raw CSS for properties not in the style panel
-  key: value
-mstyle:                       # mobile style overrides
-  key: value
-tstyle:                       # tablet style overrides
-  key: value
-slots:                        # componentSlots for frappe-ui components that hold child content
-  slotName: ...
-c:                            # children list
-- name: ...
-
-ROOT BLOCK:
-Always start with:
-name: div
-originalElement: body
-label: body
-style: {{display: flex, flexDirection: column, flexShrink: 0, width: inherit, overflowX: hidden, height: 100%}}
-c:
-- ...
+OUTPUT_FORMAT_RULES = """JSON OUTPUT RULES (critical — invalid JSON breaks parsing):
+- Return ONLY a single valid, minified JSON object. No markdown fences, no comments, no explanations before or after.
+- Use double quotes for every key and every string value. Single quotes are NOT valid JSON.
+- No trailing commas. No bare/unquoted values except numbers, true, false, and null.
+- Omit keys whose value is null, empty string, empty object, or empty array.
+"""
+
+SYSTEM_PROMPT = f"""You are an expert UI Web developer & designer specializing in creating responsive app pages for Frappe Studio, a Vue.js-based low-code app builder. Your task is to generate a compact JSON block tree that Studio will render as a live Vue application. Each block in the tree maps to a Vue component (from frappe-ui or Studio) or native html element (div).
+
+BLOCK SCHEMA (each block is a JSON object with these optional keys):
+- "name": componentName        — required, must match the catalog exactly
+- "originalElement": "div"|"body" — required for container and root blocks
+- "label": descriptive name
+- "props": {{ }}                  — component-specific props
+- "style": {{ }}                  — panel-editable CSS (see STYLE PROPERTY ROUTING below)
+- "rstyle": {{ }}                 — raw CSS for properties not in the style panel
+- "mstyle": {{ }}                 — mobile style overrides
+- "tstyle": {{ }}                 — tablet style overrides
+- "slots": {{ }}                  — componentSlots for frappe-ui components that hold child content
+- "c": [ ]                       — children list (array of block objects)
+
+ROOT BLOCK — always start with:
+{{"name":"div","originalElement":"body","label":"body","style":{{"display":"flex","flexDirection":"column","flexShrink":0,"width":"inherit","overflowX":"hidden","height":"100%"}},"c":[ ... ]}}
 
 LAYOUT CONTAINERS (CRITICAL — originalElement is required or children won't render):
-name: container
-originalElement: div
-label: container
-style: {{display: flex, flexDirection: row|column, gap: ..., padding: ...}}
-c:
-- ...
+{{"name":"container","originalElement":"div","label":"container","style":{{"display":"flex","flexDirection":"row"|"column","gap":"...","padding":"..."}},"c":[ ... ]}}
 - Use container for all inner layout wrappers — never use "div" as name for inner blocks
-- flexDirection: row for horizontal layouts, column for vertical
-- Use gap, padding for spacing. width: 100% for full-width sections. flex: 1 to fill space.
+- flexDirection "row" for horizontal layouts, "column" for vertical
+- Use gap, padding for spacing. width "100%" for full-width sections. flex "1" to fill space.
 
 {STYLING_RULES}
 
@@ -147,38 +127,14 @@
 - style keys must be camelCase CSS (backgroundColor, borderRadius, etc.)
 - Do NOT include id (componentId is auto-generated by Studio)
 - Do NOT include parentBlock
-- Omit keys whose value is null, empty string, empty dict, or empty list
 - Keep props to only what's relevant to the description
 
 EXAMPLE — "A login form with email, password and a submit button":
-name: div
-originalElement: body
-label: body
-style: {{display: flex, flexDirection: column, flexShrink: 0, width: inherit, overflowX: hidden, height: 100%}}
-c:
-- name: container
-  originalElement: div
-  label: page
-  style: {{display: flex, flexDirection: column, alignItems: center, justifyContent: center, flex: 1, padding: 24px}}
-  c:
-  - name: container
-    originalElement: div
-    label: card
-    style: {{display: flex, flexDirection: column, gap: 16px, width: 100%, maxWidth: 400px, padding: 32px, backgroundColor: 'var(--surface-white)', borderRadius: '0.75rem'}}
-    c:
-    - name: TextBlock
-      props: {{text: 'Sign In', tag: h2, fontSize: text-2xl}}
-      style: {{fontWeight: '600', color: 'var(--ink-gray-9)'}}
-    - name: TextInput
-      props: {{placeholder: 'Email address'}}
-    - name: FormControl
-      props: {{type: password, label: 'Password', placeholder: 'Enter password'}}
-    - name: Button
-      props: {{label: 'Sign In', variant: solid}}
+{{"name":"div","originalElement":"body","label":"body","style":{{"display":"flex","flexDirection":"column","flexShrink":0,"width":"inherit","overflowX":"hidden","height":"100%"}},"c":[{{"name":"container","originalElement":"div","label":"page","style":{{"display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center","flex":"1","padding":"24px"}},"c":[{{"name":"container","originalElement":"div","label":"card","style":{{"display":"flex","flexDirection":"column","gap":"16px","width":"100%","maxWidth":"400px","padding":"32px","backgroundColor":"var(--surface-white)","borderRadius":"0.75rem"}},"c":[{{"name":"TextBlock","props":{{"text":"Sign In","tag":"h2","fontSize":"text-2xl"}},"style":{{"fontWeight":"600","color":"var(--ink-gray-9)"}}}},{{"name":"TextInput","props":{{"placeholder":"Email address"}}}},{{"name":"FormControl","props":{{"type":"password","label":"Password","placeholder":"Enter password"}}}},{{"name":"Button","props":{{"label":"Sign In","variant":"solid"}}}}]}}]}}]}}
 """
 
 
-MODIFY_SYSTEM_PROMPT = f"""You are an expert UI editor for Frappe Studio. You will receive the YAML of a selected block and a user request. Return a modified version of that block.
+MODIFY_SYSTEM_PROMPT = f"""You modify app page sections for Frappe Studio as an expert designer & developer. You will receive the JSON of a selected block and a user request. Return a modified version of that block.
 
 MODIFICATION RULES:
 - Preserve ALL id (componentId) values exactly as given — never change or omit them
diff --git a/yarn.lock b/yarn.lock
index 39f1ec9b..3df02b60 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1555,11 +1555,6 @@
   dependencies:
     "@types/unist" "*"
 
-"@types/js-yaml@^4.0.9":
-  version "4.0.9"
-  resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.9.tgz#cd82382c4f902fed9691a2ed79ec68c5898af4c2"
-  integrity sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==
-
 "@types/json-schema@^7.0.15":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
@@ -4327,7 +4322,7 @@ js-tokens@^9.0.1:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-9.0.1.tgz#2ec43964658435296f6761b34e10671c2d9527f4"
   integrity sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==
 
-js-yaml@^4.1.0, js-yaml@^4.1.1:
+js-yaml@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.1.tgz#854c292467705b699476e1a2decc0c8a3458806b"
   integrity sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==

From 95a4b63c616b8894df69b5d7278c8fb18975d5ba Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Sat, 30 May 2026 19:37:55 +0530
Subject: [PATCH 48/57] chore: remove dead code

---
 studio/ai/block_codec.py    | 127 ++++--------------------------------
 studio/ai/page_generator.py |   5 +-
 2 files changed, 14 insertions(+), 118 deletions(-)

diff --git a/studio/ai/block_codec.py b/studio/ai/block_codec.py
index 59e8e8ae..9e0de764 100644
--- a/studio/ai/block_codec.py
+++ b/studio/ai/block_codec.py
@@ -78,8 +78,8 @@ def expand(node: dict) -> dict:
 
 	@staticmethod
 	def parse_blocks(content: str) -> dict:
-		cleaned = _strip_fences(content)
-		parsed = _loads_lenient(cleaned)
+		cleaned = BlockCodec.strip_fences(content)
+		parsed = json.loads(cleaned, strict=False)
 
 		if isinstance(parsed, list):
 			block = parsed[0] if parsed else {}
@@ -109,119 +109,14 @@ def strip_context(block_json: str) -> str:
 		if not isinstance(data, dict):
 			return block_json
 
-		return _to_json(BlockCodec.compress(data))
-
-
-def _collect_text(block: dict, results: list):
-	props = block.get("componentProps") or {}
-	if text := props.get("text") or props.get("label") or props.get("placeholder"):
-		results.append(str(text))
-	for child in block.get("children", []):
-		_collect_text(child, results)
-	for slot in (block.get("componentSlots") or {}).values():
-		if isinstance(slot, dict):
-			for slot_child in (
-				slot.get("slotContent", []) if isinstance(slot.get("slotContent"), list) else []
-			):
-				_collect_text(slot_child, results)
-
-
-def _to_json(data) -> str:
-	"""Compact, token-efficient JSON: no whitespace, unicode kept as-is."""
-	return json.dumps(data, separators=(",", ":"), ensure_ascii=False)
-
-
-def _strip_fences(text: str) -> str:
-	text = re.sub(r"^```(?:json|yaml)?\s*\n?", "", text.strip())
-	return re.sub(r"\n?```\s*$", "", text).strip()
-
-
-def _escape_inner_quotes(text: str) -> str:
-	"""Escape stray double-quotes inside string values. A `"` only legitimately
-	ends a string when the next non-space char is structural (`,` `}` `]` `:` or
-	EOF); otherwise it is unescaped content (e.g. He said "hi") and we escape it."""
-	out = []
-	i, n = 0, len(text)
-	in_string = False
-	while i < n:
-		ch = text[i]
-		if not in_string:
-			out.append(ch)
-			if ch == '"':
-				in_string = True
-			i += 1
-			continue
-		if ch == "\\":  # keep existing escape pair intact
-			out.append(ch)
-			if i + 1 < n:
-				out.append(text[i + 1])
-				i += 2
-			else:
-				i += 1
-			continue
-		if ch == '"':
-			j = i + 1
-			while j < n and text[j] in " \t\r\n":
-				j += 1
-			nxt = text[j] if j < n else ""
-			if nxt in (",", "}", "]", ":", ""):
-				out.append(ch)
-				in_string = False
-			else:
-				out.append('\\"')
-			i += 1
-			continue
-		out.append(ch)
-		i += 1
-	return "".join(out)
-
-
-def _close_open_structures(text: str) -> str:
-	"""Best-effort completion of a truncated JSON tail: close an unterminated
-	string, drop a dangling trailing comma or `"key":`, and close open brackets."""
-	closers = []
-	in_string = escaped = False
-	for ch in text:
-		if in_string:
-			if escaped:
-				escaped = False
-			elif ch == "\\":
-				escaped = True
-			elif ch == '"':
-				in_string = False
-			continue
-		if ch == '"':
-			in_string = True
-		elif ch == "{":
-			closers.append("}")
-		elif ch == "[":
-			closers.append("]")
-		elif ch in "}]" and closers:
-			closers.pop()
-
-	result = text + ('"' if in_string else "")
-	prev = None
-	while prev != result:
-		prev = result
-		result = result.rstrip()
-		if result.endswith(","):
-			result = result[:-1]
-		else:
-			result = re.sub(r',?\s*"(?:[^"\\]|\\.)*"\s*:$', "", result)
-	return result + "".join(reversed(closers))
-
-
-def _repair_json(text: str) -> str:
-	text = _escape_inner_quotes(text)
-	text = re.sub(r",\s*([}\]])", r"\1", text)  # trailing commas before } or ]
-	return _close_open_structures(text)
+		return BlockCodec.to_json(BlockCodec.compress(data))
 
+	@staticmethod
+	def to_json(data) -> str:
+		"""Compact, token-efficient JSON: no whitespace, unicode kept as-is."""
+		return json.dumps(data, separators=(",", ":"), ensure_ascii=False)
 
-def _loads_lenient(text: str):
-	"""Parse JSON, tolerating the common ways LLMs emit slightly-invalid JSON:
-	raw control chars (strict=False), unescaped inner quotes, trailing commas,
-	and truncation. Falls back to a repair pass only when strict parsing fails."""
-	try:
-		return json.loads(text, strict=False)
-	except json.JSONDecodeError:
-		return json.loads(_repair_json(text), strict=False)
+	@staticmethod
+	def strip_fences(text: str) -> str:
+		text = re.sub(r"^```(?:json|yaml)?\s*\n?", "", text.strip())
+		return re.sub(r"\n?```\s*$", "", text).strip()
diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index 7b8fdcb8..bc0476c5 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -75,7 +75,8 @@ def run_generation_job(prompt: str, model: str, page_id: str, user: str):
 		_emit("complete", page_id, user, block=block)
 
 	except Exception as e:
-		logger.error(f"run_generation_job failed: {e}", exc_info=True)
+		logger.error(f"run_generation_job failed: {e}\n\n{content}", exc_info=True)
+		logger.info(f"Raw LLM Output for Generate: \n{content}\n")
 		frappe.log_error(title="Studio AI: generation error", message=str(e))
 		_emit("error", page_id, user, message=str(e))
 
@@ -156,7 +157,7 @@ def run_modify_job(prompt: str, block_context: str, model: str, page_id: str, us
 
 	except Exception as e:
 		logger.error(f"run_modify_job failed: {e}", exc_info=True)
-		logger.info(f"Raw LLM Output for Modify: \n{content}\n" + "=" * 40)
+		logger.info(f"Raw LLM Output for Modify: \n{content}\n")
 		frappe.log_error(title="Studio AI: modify error", message=str(e))
 		_emit("error", page_id, user, prefix="ai_modify", message=str(e))
 

From 4a725bbd77bdb4674eb0c5358f6b1e0232c9c951 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Sat, 30 May 2026 21:23:26 +0530
Subject: [PATCH 49/57] fix: fetch selected model from session

---
 frontend/src/components/AIChatPanel.vue |  9 ++---
 frontend/src/utils/blockCodec.ts        | 47 +++++++++++++------------
 studio/ai/prompts.py                    |  4 +--
 3 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
index 59cc6584..44ca52d6 100644
--- a/frontend/src/components/AIChatPanel.vue
+++ b/frontend/src/components/AIChatPanel.vue
@@ -158,11 +158,6 @@ const isModifyMode = computed(() => !!selectedBlock.value)
 const aiModels = createResource({
 	url: "studio.ai.models.get_ai_models",
 	auto: true,
-	onSuccess(data: any[]) {
-		if (data?.length && !selectedModel.value) {
-			selectedModel.value = data[0].id
-		}
-	},
 })
 
 const modelOptions = computed(() => (aiModels.data ?? []).map((m: any) => ({ label: m.label, value: m.id })))
@@ -176,8 +171,10 @@ const sessionResource = createResource({
 	url: "studio.ai.page_generator.get_ai_session",
 	onSuccess(data: any) {
 		messages.value = data.messages ?? []
-		if (data.selected_model && !selectedModel.value) {
+		if (data.selected_model) {
 			selectedModel.value = data.selected_model
+		} else if (modelOptions.value.length) {
+			selectedModel.value = modelOptions.value[0].value
 		}
 		scrollToBottom()
 	},
diff --git a/frontend/src/utils/blockCodec.ts b/frontend/src/utils/blockCodec.ts
index 29b07941..13527170 100644
--- a/frontend/src/utils/blockCodec.ts
+++ b/frontend/src/utils/blockCodec.ts
@@ -47,6 +47,30 @@ function stripFences(text: string): string {
 		.trim()
 }
 
+function parsePartialJson(text: string): any {
+	try {
+		return JSON.parse(text)
+	} catch {
+		// fall through to repair
+	}
+
+	let working = escapeInnerQuotes(text)
+	for (let attempt = 0; attempt < 8; attempt++) {
+		const { candidate, trimmed } = repair(working)
+		if (candidate) {
+			try {
+				return JSON.parse(candidate)
+			} catch {
+				// candidate didn't parse; retry on the trimmed buffer
+			}
+		}
+		if (!trimmed || trimmed === working) return null
+		working = trimmed
+	}
+	return null
+}
+
+
 /**
  * Escape stray double-quotes inside string values. A `"` only legitimately ends a
  * string when the next non-space char is structural (`,` `}` `]` `:` or EOF);
@@ -84,29 +108,6 @@ function escapeInnerQuotes(text: string): string {
 	return out
 }
 
-function parsePartialJson(text: string): any {
-	try {
-		return JSON.parse(text)
-	} catch {
-		// fall through to repair
-	}
-
-	let working = escapeInnerQuotes(text)
-	for (let attempt = 0; attempt < 8; attempt++) {
-		const { candidate, trimmed } = repair(working)
-		if (candidate) {
-			try {
-				return JSON.parse(candidate)
-			} catch {
-				// candidate didn't parse; retry on the trimmed buffer
-			}
-		}
-		if (!trimmed || trimmed === working) return null
-		working = trimmed
-	}
-	return null
-}
-
 interface Repair {
 	candidate: string // best guess at a complete, parseable JSON string
 	trimmed: string // text with its last (incomplete) member removed, for retry
diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
index d129146b..1f4f3240 100644
--- a/studio/ai/prompts.py
+++ b/studio/ai/prompts.py
@@ -88,8 +88,8 @@
 
 OUTPUT_FORMAT_RULES = """JSON OUTPUT RULES (critical — invalid JSON breaks parsing):
 - Return ONLY a single valid, minified JSON object. No markdown fences, no comments, no explanations before or after.
-- Use double quotes for every key and every string value. Single quotes are NOT valid JSON.
-- No trailing commas. No bare/unquoted values except numbers, true, false, and null.
+- Use double quotes for every key and every string value. No bare/unquoted values except numbers, true, false, and null. Single quotes are NOT valid JSON.
+- No trailing commas.
 - Omit keys whose value is null, empty string, empty object, or empty array.
 """
 

From 2347d921d3777f0aac6d66798af4eff1876fbc84 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Sun, 31 May 2026 00:09:18 +0530
Subject: [PATCH 50/57] fix: don't switch to Layers panel on block selection

---
 frontend/src/components/StudioCanvas.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/src/components/StudioCanvas.vue b/frontend/src/components/StudioCanvas.vue
index 4e7eaa1b..aed7c7a4 100644
--- a/frontend/src/components/StudioCanvas.vue
+++ b/frontend/src/components/StudioCanvas.vue
@@ -224,10 +224,6 @@ function selectBlock(block: Block, e: MouseEvent | null, multiSelect = false, se
 		setActiveBreakpoint(breakpoint)
 	}
 
-	if (block.isContainer()) {
-		store.studioLayout.leftPanelActiveTab = "Layers"
-	}
-
 	if (block.isText() || block.isContainer()) {
 		// combined props and styles
 		store.studioLayout.rightPanelActiveTab = "Styles"

From 67954a999e4abd5bd6988fecd64a9673eb452876 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Sun, 31 May 2026 11:30:18 +0530
Subject: [PATCH 51/57] fix(prompt): modelValue props missing

---
 studio/ai/prompts.py | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
index 1f4f3240..8cd3474e 100644
--- a/studio/ai/prompts.py
+++ b/studio/ai/prompts.py
@@ -10,24 +10,24 @@
 - Progress: {value: 0-100, size: "sm|md|lg", label: "string"}
 - Alert: {title: "string", description: "string", theme: "yellow|red|green|blue"}
 - ErrorMessage: {message: "string"}
-- FeatherIcon: {name: "feather-icon-name", class: "h-5 w-5"}
+- FeatherIcon: {name: "feather-icon-name", class: "h-5 w-5"} # (icons from https://feathericons.com/)
 - ImageView: {image: "url", size: "xs|sm|md|lg|xl"}
 - Divider: (no props)
 - Tooltip: {text: "string"}
 - HTML: {html: "<p>raw html</p>"}
 
 INPUTS:
-- TextInput: {placeholder: "string"}
-- Textarea: {placeholder: "string"}
-- FormControl: {type: "text|email|number|textarea|select|date|autocomplete|password|tel|url|range", label: "string", placeholder: "string", required: "boolean", options: [{label: "string", value: "string"}] (for select and autocomplete)}
-- Select: {placeholder: "string", options: [{label: "string", value: "string"}]}
+- TextInput: {modelValue: "string", placeholder: "string"}
+- Textarea: {modelValue: "string", placeholder: "string"}
+- FormControl: {modelValue: "string", type: "text|email|number|textarea|select|date|autocomplete|password|tel|url|range", label: "string", placeholder: "string", required: "boolean", options: [{label: "string", value: "string"}] (for select and autocomplete)}
+- Select: {modelValue: "string", placeholder: "string", options: [{label: "string", value: "string"}]}
 - Checkbox: {label: "string", checked: true|false}
 - Switch: {label: "string", description: "string", modelValue: true|false}
-- DatePicker: {placeholder: "string"}
-- TimePicker: {placeholder: "string"}
-- DateTimePicker: {placeholder: "string"}
-- MultiSelect: {placeholder: "string", options: [{label: "string", value: "string"}]}
-- Rating: {label: "string"}
+- DatePicker: {modelValue: "string", placeholder: "string"}
+- TimePicker: {modelValue: "string", placeholder: "string"}
+- DateTimePicker: {modelValue: "string", placeholder: "string"}
+- MultiSelect: {modelValue: [], placeholder: "string", options: [{label: "string", value: "string"}]}
+- Rating: {modelValue: 0, label: "string"}
 - FileUploader: {label: "string", fileTypes: "['image/*']"}
 - TextEditor: {modelValue: "string", editable: true, fixedMenu: true}
 - FormLabel: {label: "string"} (for inputs that don't have a built-in label prop, e.g. Textarea, TextEditor, etc.)
@@ -39,7 +39,7 @@
 NAVIGATION:
 - Breadcrumbs: {items: [{label: "string", route: "string"}]}
 - Tabs: {tabs: [{label: "string"}]}
-- TabButtons: {buttons: [{label: "string", value: "string"}]}
+- TabButtons: {buttons: [{label: "string", value: "string"}], modelValue: "string"}
 - Sidebar: {header: {title: "string", subtitle: "string"}, sections: [{label: "string", items: [{label: "string", icon: "{{ getIcon('icon-name') }}", to: "string"}]}]}
   # icon-name must be a valid kebab-case lucide icon from https://lucide.dev/icons
 
@@ -55,8 +55,8 @@
 - Calendar: {config: {defaultMode: "Month"}, events: []}
 
 AUTOCOMPLETE:
-- Autocomplete: {placeholder: "string", options: [{label: "string", value: "string"}]}
-- Combobox: {placeholder: "string", options: [{group: "string", options: [{label, value}]}]}
+- Autocomplete: {modelValue: "string", placeholder: "string", options: [{label: "string", value: "string"}]}
+- Combobox: {modelValue: "string", placeholder: "string", options: [{group: "string", options: [{label, value}]}]}
 """
 
 STYLING_RULES = """COMPONENT STYLING RULES:

From ba909629a0f007a088135d47853d40971ed61969 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Sun, 31 May 2026 12:16:57 +0530
Subject: [PATCH 52/57] fix: emit progress for actual blocks being built

---
 frontend/src/components/StudioCanvas.vue |  1 +
 studio/ai/page_generator.py              | 95 ++++++++++++++++--------
 2 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/StudioCanvas.vue b/frontend/src/components/StudioCanvas.vue
index aed7c7a4..566e8ea0 100644
--- a/frontend/src/components/StudioCanvas.vue
+++ b/frontend/src/components/StudioCanvas.vue
@@ -19,6 +19,7 @@
 		<div
 			class="fixed flex gap-40"
 			ref="canvas"
+			:class="canvasStore.editingMode === 'page' ? 'h-full' : ''"
 			:style="{
 				transformOrigin: 'top center',
 				transform: `scale(${canvasProps.scale}) translate(${canvasProps.translateX}px, ${canvasProps.translateY}px)`,
diff --git a/studio/ai/page_generator.py b/studio/ai/page_generator.py
index bc0476c5..8b0d8bf0 100644
--- a/studio/ai/page_generator.py
+++ b/studio/ai/page_generator.py
@@ -1,4 +1,5 @@
 import logging
+import time
 
 import frappe
 import litellm
@@ -25,7 +26,7 @@ def call_llm(messages: list, model: str, task_tier: str, api_key: str, stream: b
 	return litellm.completion(model=model, messages=messages, api_key=api_key, stream=stream, **params)
 
 
-def _emit(event_suffix: str, page_id: str, user: str, prefix: str = "ai_generation", **kwargs):
+def emit(event_suffix: str, page_id: str, user: str, prefix: str = "ai_generation", **kwargs):
 	frappe.publish_realtime(
 		f"{prefix}_{event_suffix}_{page_id}",
 		{"page_id": page_id, **kwargs},
@@ -33,27 +34,50 @@ def _emit(event_suffix: str, page_id: str, user: str, prefix: str = "ai_generati
 	)
 
 
-def _progress_stage(content: str) -> str | None:
-	"""Extract a human-readable stage from the tail of a partial JSON stream."""
-	lookback = content[-400:].replace(" ", "")
-	for section_type in ("section", "nav", "header", "footer"):
-		if f'"label":"{section_type}' in lookback or f'"name":"{section_type}' in lookback:
-			return f"Building {section_type}…"
-	return None
+PROGRESS_THROTTLE_SECS = 1.5
+GENERIC_BLOCK_NAMES = {"body", "div", "container"}
 
 
-def run_generation_job(prompt: str, model: str, page_id: str, user: str):
-	settings = frappe.get_single("Studio Settings")
-	api_key = settings.get_password("ai_api_key", raise_exception=False)
+def get_progress_stage(content: str) -> str | None:
+	"""Report the block currently being built — the most recently emitted block"""
+
+	def get_last_label(content: str) -> tuple[int, str] | None:
+		"""Return (position, value) of the last complete `"label":"value"` in the partial
+		JSON stream, or None if the label is absent or its value is still streaming."""
+		marker = '"label":"'
+		idx = content.rfind(marker)
+		if idx == -1:
+			return None
+		start = idx + len(marker)
+		end = content.find('"', start)
+		if end == -1:  # value not finished streaming yet
+			return None
+		value = content[start:end].strip()
+		return (idx, value) if value else None
+
+	candidates = []
+	found = get_last_label(content)
+	if found and found[1] not in GENERIC_BLOCK_NAMES:
+		candidates.append(found)
+	if not candidates:
+		return None
+	# the candidate appearing latest in the stream is the block being built now
+	_, value = max(candidates)
+	return f"Building {value}…"
+
 
+def run_generation_job(prompt: str, model: str, page_id: str, user: str):
+	api_key = get_api_key()
 	session = AISession.get_or_create(page_id, model)
 	context = session.build_context_string()
 	session.add_message("user", prompt, task_type="generate")
 
-	_emit("progress", page_id, user, message=f"Generating with {ModelRegistry.get_label(model)}…")
+	emit("progress", page_id, user, message=f"Generating with {ModelRegistry.get_label(model)}…")
 
 	system = SYSTEM_PROMPT + (f"\n\n{context}" if context else "")
 	content = ""
+	last_stage = None
+	last_progress_at = 0.0
 	try:
 		llm_messages = [
 			{"role": "system", "content": system},
@@ -64,21 +88,25 @@ def run_generation_job(prompt: str, model: str, page_id: str, user: str):
 			if not delta:
 				continue
 			content += delta
-			_emit("stream", page_id, user, chunk=delta)
-			stage = _progress_stage(content)
-			if stage:
-				_emit("progress", page_id, user, message=stage)
+			emit("stream", page_id, user, chunk=delta)
+
+			now = time.monotonic()
+			if now - last_progress_at >= PROGRESS_THROTTLE_SECS:
+				stage = get_progress_stage(content)
+				if stage and stage != last_stage:
+					emit("progress", page_id, user, message=stage)
+					last_stage, last_progress_at = stage, now
 
 		logger.info(f"run_generation_job stream done | model={model} length={len(content)}")
 		block = BlockCodec.parse_blocks(content)
 		session.add_message("assistant", "Page generated successfully.", task_type="generate")
-		_emit("complete", page_id, user, block=block)
+		emit("complete", page_id, user, block=block)
 
 	except Exception as e:
 		logger.error(f"run_generation_job failed: {e}\n\n{content}", exc_info=True)
 		logger.info(f"Raw LLM Output for Generate: \n{content}\n")
 		frappe.log_error(title="Studio AI: generation error", message=str(e))
-		_emit("error", page_id, user, message=str(e))
+		emit("error", page_id, user, message=str(e))
 
 
 @frappe.whitelist()
@@ -87,10 +115,7 @@ def generate_page_from_prompt(prompt: str, model: str | None, page_id: str) -> d
 	if not frappe.has_permission("Studio Page", ptype="write"):
 		frappe.throw(_("You do not have permission to modify pages"))
 
-	settings = frappe.get_single("Studio Settings")
-	if not settings.get_password("ai_api_key", raise_exception=False):
-		frappe.throw(_("OpenRouter API key is not configured. Please set it in Studio Settings."))
-
+	validate_api_key()
 	resolved_model = model or ModelRegistry.get_default()
 
 	frappe.enqueue(
@@ -125,14 +150,13 @@ def clear_ai_session(page_id: str) -> dict:
 
 
 def run_modify_job(prompt: str, block_context: str, model: str, page_id: str, user: str, component_id: str):
-	settings = frappe.get_single("Studio Settings")
-	api_key = settings.get_password("ai_api_key", raise_exception=False)
+	api_key = get_api_key()
 
 	session = AISession.get_or_create(page_id, model)
 	context = session.build_context_string()
 	session.add_message("user", prompt, task_type="modify", component_id=component_id)
 
-	_emit("progress", page_id, user, prefix="ai_modify", message="Updating block…")
+	emit("progress", page_id, user, prefix="ai_modify", message="Updating block…")
 
 	compressed = BlockCodec.strip_context(block_context)
 	system = MODIFY_SYSTEM_PROMPT + (f"\n\nConversation history:\n{context}" if context else "")
@@ -148,18 +172,18 @@ def run_modify_job(prompt: str, block_context: str, model: str, page_id: str, us
 			if not delta:
 				continue
 			content += delta
-			_emit("stream", page_id, user, prefix="ai_modify", chunk=delta, component_id=component_id)
+			emit("stream", page_id, user, prefix="ai_modify", chunk=delta, component_id=component_id)
 
 		logger.info(f"run_modify_job stream done | model={model} length={len(content)}")
 		block = BlockCodec.parse_blocks(content)
 		session.add_message("assistant", "Block updated.", task_type="modify", component_id=component_id)
-		_emit("complete", page_id, user, prefix="ai_modify", block=block, component_id=component_id)
+		emit("complete", page_id, user, prefix="ai_modify", block=block, component_id=component_id)
 
 	except Exception as e:
 		logger.error(f"run_modify_job failed: {e}", exc_info=True)
 		logger.info(f"Raw LLM Output for Modify: \n{content}\n")
 		frappe.log_error(title="Studio AI: modify error", message=str(e))
-		_emit("error", page_id, user, prefix="ai_modify", message=str(e))
+		emit("error", page_id, user, prefix="ai_modify", message=str(e))
 
 
 @frappe.whitelist()
@@ -167,10 +191,7 @@ def run_modify_job(prompt: str, block_context: str, model: str, page_id: str, us
 def modify_block_from_prompt(
 	prompt: str, block_context: str, model: str | None, page_id: str, component_id: str
 ) -> dict:
-	settings = frappe.get_single("Studio Settings")
-	if not settings.get_password("ai_api_key", raise_exception=False):
-		frappe.throw(_("OpenRouter API key is not configured. Please set it in Studio Settings."))
-
+	validate_api_key()
 	resolved_model = model or ModelRegistry.get_default()
 
 	frappe.enqueue(
@@ -186,3 +207,13 @@ def modify_block_from_prompt(
 
 	frappe.local.response.http_status_code = 202
 	return {"status": "accepted"}
+
+
+def get_api_key():
+	settings = frappe.get_single("Studio Settings")
+	return settings.get_password("ai_api_key", raise_exception=False)
+
+
+def validate_api_key():
+	if not get_api_key():
+		frappe.throw(_("OpenRouter API key is not configured. Please set it in Studio Settings."))

From d2fe35bba0df97d922f597f932cfea47b12d9985 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Sun, 31 May 2026 16:42:04 +0530
Subject: [PATCH 53/57] fix: repair JSON returned by LLMs using json_repair lib

- Models occasionally emit slightly-invalid JSON (unescaped quotes inside text, missing commas, truncation, trailing data), Repair as fallback
---
 pyproject.toml           | 1 +
 studio/ai/block_codec.py | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/pyproject.toml b/pyproject.toml
index 776128d1..b8fa6d4c 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -10,6 +10,7 @@ dynamic = ["version"]
 dependencies = [
     # "frappe~=15.0.0" # Installed and managed by bench.
     "litellm==1.83.7",
+    "json_repair>=0.59.10",
 ]
 
 [build-system]
diff --git a/studio/ai/block_codec.py b/studio/ai/block_codec.py
index 9e0de764..614f77f2 100644
--- a/studio/ai/block_codec.py
+++ b/studio/ai/block_codec.py
@@ -1,6 +1,8 @@
 import json
 import re
 
+from json_repair import repair_json
+
 
 class BlockCodec:
 	@staticmethod
@@ -79,7 +81,10 @@ def expand(node: dict) -> dict:
 	@staticmethod
 	def parse_blocks(content: str) -> dict:
 		cleaned = BlockCodec.strip_fences(content)
-		parsed = json.loads(cleaned, strict=False)
+		try:
+			parsed = json.loads(cleaned, strict=False)
+		except json.JSONDecodeError:
+			parsed = repair_json(cleaned, return_objects=True)
 
 		if isinstance(parsed, list):
 			block = parsed[0] if parsed else {}

From b050eaa35db76da55c0517536f076824954a560e Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Sun, 31 May 2026 20:19:42 +0530
Subject: [PATCH 54/57] fix: pause autosave and history tracking while
 generating pages/blocks

---
 claude.md                                | 35 +++++++++++++++++++++++-
 frontend/src/components/AIChatPanel.vue  | 12 ++++++++
 frontend/src/components/StudioCanvas.vue |  1 -
 frontend/src/pages/StudioPage.vue        |  3 +-
 frontend/src/utils/useCanvasHistory.ts   |  2 +-
 frontend/src/utils/useCanvasUtils.ts     |  6 ++--
 studio/ai/prompts.py                     |  6 ++--
 7 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/claude.md b/claude.md
index 0c0b499b..c5ab16c7 100644
--- a/claude.md
+++ b/claude.md
@@ -1 +1,34 @@
-./agents.md
\ No newline at end of file
+# Studio Project - Agent Context
+
+## Overview
+
+Studio is a visual app builder for the Frappe Framework. It allows developers to build modern web applications using a drag & drop layout builder, wire Frappe Framework data sources, edit component props and slots, and create reactive apps with dynamic variables and scripts.
+
+## Agent Guidelines & Code Conventions
+
+1. **Guidelines for writing good code for a developer**
+   - Choose clean code over clever code.
+   - Write object oriented code as much as possible.
+   - Keep function sizes small, ideally 10 lines.
+   - Keep files small, between 100 and 300 lines
+   - Keep directories or module small, fewer than 15 files.
+   - Avoid abbreviations.
+   - Use standard API as much as possible.
+   - Reuse. Write as little code as possible.
+   - Build the minimum working code, then iterate towards your goals.
+   - Don't add unnecessary dependencies unless required.
+   - Don't add unnecessary comments for simple code. Use it only when the code is not self-explanatory.
+2. **Frontend Development:**
+   - Rely on `frappe-ui` components (e.g., buttons, dialogs, inputs) instead of building them from scratch (local copy in ./frappe-ui/)
+   - Use Tailwind CSS for styling. Avoid writing raw CSS (`.css` files or `<style>` blocks) unless absolutely necessary. Use espresso tokens for styling
+3. **Backend Development:**
+   - Adhere to standard Frappe Framework conventions (Controller classes, hooks, `@frappe.whitelist()` methods).
+   - Migrations and schema changes are handled via DocTypes.
+4. **State Management & Reactivity:**
+   - Use frappe-ui
+   - Use VueUse for common composition utilities.
+   - Use Pinia for global state if needed, though most component states can be managed locally.
+5. **Data Fetching**
+   - Use `createResource`, `createDocumentResource`, `createListResource`, `call` from frappe-ui for data fetching
+   - Look at ./frontend/src/data/ for examples of data fetching composables
+   - Handle loading, error, and success states explicitly
diff --git a/frontend/src/components/AIChatPanel.vue b/frontend/src/components/AIChatPanel.vue
index 44ca52d6..66c1930e 100644
--- a/frontend/src/components/AIChatPanel.vue
+++ b/frontend/src/components/AIChatPanel.vue
@@ -127,6 +127,7 @@ import { getBlockInstance, getBlockString } from "@/utils/serializer"
 import { tryParseJsonBlock } from "@/utils/blockCodec"
 import { throttle } from "@/utils/helpers"
 import type Block from "@/utils/block"
+import type { PauseId } from "@/utils/useCanvasHistory"
 import { studioSettings } from "@/data/studioSettings"
 
 const store = useStudioStore()
@@ -142,6 +143,7 @@ const statusMessage = ref("")
 const selectedModel = ref("")
 const streamBuffer = ref("")
 const modifyStreamBuffer = ref("")
+let historyPauseId: PauseId | undefined
 const messages = ref<any[]>([])
 const messagesEl = ref<HTMLElement | null>(null)
 
@@ -231,6 +233,7 @@ async function onComplete(data: any) {
 	const rootBlock = getBlockInstance(block)
 	store.pageBlocks = [rootBlock]
 	canvasStore.activeCanvas?.setRootBlock(rootBlock, false)
+	historyPauseId = undefined
 
 	toast.success("Page generated successfully")
 	prompt.value = ""
@@ -239,6 +242,8 @@ async function onComplete(data: any) {
 
 function onError(data: any) {
 	canvasStore.isAIStreaming = false
+	canvasStore.activeCanvas?.history?.resume(historyPauseId)
+	historyPauseId = undefined
 	loading.value = false
 	statusMessage.value = ""
 	streamBuffer.value = ""
@@ -271,6 +276,8 @@ async function onModifyComplete(data: any) {
 	}
 
 	replaceBlockInTree(data.component_id, getBlockInstance(block))
+	canvasStore.activeCanvas?.history?.resume(historyPauseId, true)
+	historyPauseId = undefined
 	toast.success("Block updated")
 	prompt.value = ""
 	reloadSession()
@@ -278,6 +285,8 @@ async function onModifyComplete(data: any) {
 
 function onModifyError(data: any) {
 	canvasStore.isAIStreaming = false
+	canvasStore.activeCanvas?.history?.resume(historyPauseId)
+	historyPauseId = undefined
 	loading.value = false
 	statusMessage.value = ""
 	modifyStreamBuffer.value = ""
@@ -341,6 +350,7 @@ async function generate() {
 	messages.value = [...messages.value, { id: Date.now(), role: "user", content: prompt.value }]
 	scrollToBottom()
 
+	historyPauseId = canvasStore.activeCanvas?.history?.pause()
 	try {
 		if (isModifyMode.value && selectedBlock.value) {
 			await call("studio.ai.page_generator.modify_block_from_prompt", {
@@ -358,6 +368,8 @@ async function generate() {
 			})
 		}
 	} catch (e: any) {
+		canvasStore.activeCanvas?.history?.resume(historyPauseId)
+		historyPauseId = undefined
 		loading.value = false
 		statusMessage.value = ""
 		error.value = e?.message || "Failed to start. Please try again."
diff --git a/frontend/src/components/StudioCanvas.vue b/frontend/src/components/StudioCanvas.vue
index 566e8ea0..aed7c7a4 100644
--- a/frontend/src/components/StudioCanvas.vue
+++ b/frontend/src/components/StudioCanvas.vue
@@ -19,7 +19,6 @@
 		<div
 			class="fixed flex gap-40"
 			ref="canvas"
-			:class="canvasStore.editingMode === 'page' ? 'h-full' : ''"
 			:style="{
 				transformOrigin: 'top center',
 				transform: `scale(${canvasProps.scale}) translate(${canvasProps.translateX}px, ${canvasProps.translateY}px)`,
diff --git a/frontend/src/pages/StudioPage.vue b/frontend/src/pages/StudioPage.vue
index 75199d78..5d8a4622 100644
--- a/frontend/src/pages/StudioPage.vue
+++ b/frontend/src/pages/StudioPage.vue
@@ -212,7 +212,8 @@ watch(
 			store.selectedPage &&
 			!pageCanvas.value?.canvasProps?.settingCanvas &&
 			!store.settingPage &&
-			!store.savingPage
+			!store.savingPage &&
+			!canvasStore.isAIStreaming
 		) {
 			store.savingPage = true
 			if (canvasStore.editingMode === "page") {
diff --git a/frontend/src/utils/useCanvasHistory.ts b/frontend/src/utils/useCanvasHistory.ts
index b2336180..c5a95793 100644
--- a/frontend/src/utils/useCanvasHistory.ts
+++ b/frontend/src/utils/useCanvasHistory.ts
@@ -8,7 +8,7 @@ type CanvasState = {
 	block: string;
 	selectedBlockIds: Set<string>;
 };
-type PauseId = string & { __brand: "PauseId" };
+export type PauseId = string & { __brand: "PauseId" };
 
 const CAPACITY = 500;
 const DEBOUNCE_DELAY = 100;
diff --git a/frontend/src/utils/useCanvasUtils.ts b/frontend/src/utils/useCanvasUtils.ts
index 71f7c19c..396f7b90 100644
--- a/frontend/src/utils/useCanvasUtils.ts
+++ b/frontend/src/utils/useCanvasUtils.ts
@@ -2,7 +2,7 @@ import type { CanvasProps } from "@/types/StudioCanvas"
 import Block from "@/utils/block"
 
 import { nextTick, reactive, Ref } from "vue"
-import { useCanvasHistory } from "@/utils/useCanvasHistory"
+import { useCanvasHistory, type PauseId } from "@/utils/useCanvasHistory"
 import { useElementBounding } from "@vueuse/core"
 import { toast } from "vue-sonner"
 import useCanvasStore from "@/stores/canvasStore"
@@ -57,9 +57,9 @@ export function useCanvasUtils(
 		return rootComponent.value;
 	}
 
-	function setRootBlock(newBlock: Block, resetCanvas = false) {
+	function setRootBlock(newBlock: Block, resetCanvas = false, resetHistory = true) {
 		rootComponent.value = newBlock
-		if (canvasHistory.value) {
+		if (canvasHistory.value && resetHistory) {
 			canvasHistory.value.dispose();
 			setupHistory();
 		}
diff --git a/studio/ai/prompts.py b/studio/ai/prompts.py
index 8cd3474e..df4d5a7a 100644
--- a/studio/ai/prompts.py
+++ b/studio/ai/prompts.py
@@ -6,7 +6,7 @@
 - TextBlock: {text: "string", tag: "p|h1|h2|h3|h4|h5|h6|span", fontSize: "text-2xs(11px)|text-xs(12px)|text-sm(13px)|text-base(14px)|text-lg(16px)|text-xl(18px)|text-2xl(20px)|text-3xl(24px)|text-p-2xs|text-p-xs|text-p-sm|text-p-base|text-p-lg|text-p-xl|text-p-2xl|text-p-3xl"}
   # text-* = tight line-height (UI labels, headings); text-p-* = relaxed line-height (body copy, descriptions)
 - Badge: {variant: "subtle|solid|outline", theme: "green|red|orange|blue|gray", size: "sm|md|lg", label: "string"}
-- Avatar: {shape: "circle|square", size: "xs|sm|md|lg|xl|2xl|3xl", label: "initials", image: "url"}
+- Avatar: {shape: "circle|square", size: "xs|sm|md|lg|xl|2xl|3xl", label: "initials", image: "url" (publicly accessible)}
 - Progress: {value: 0-100, size: "sm|md|lg", label: "string"}
 - Alert: {title: "string", description: "string", theme: "yellow|red|green|blue"}
 - ErrorMessage: {message: "string"}
@@ -71,7 +71,7 @@
   Visual: backgroundColor, borderColor, borderWidth, borderStyle, borderRadius, boxShadow, cursor
 - `rstyle:` (raw styles) — for ALL other CSS properties not listed above: opacity, objectFit, objectPosition, whiteSpace, textOverflow, textDecoration, fontStyle, fontFamily, transform, transition, animation, wordBreak, overflowWrap, etc. Keep rstyle minimal — only include when genuinely needed.
 - `mstyle:` (mobile styles) and `tstyle:` (tablet styles) — same properties as `style`, but for mobile and tablet breakpoints. Only include properties that need to change on mobile/tablet — do not duplicate the entire style object.
-- Use %, rem for responsive widths. Top-level sections MUST be 100% width
+- Make sure entire page is RESPONSIVE - Use %, rem for responsive widths. Top-level sections MUST be 100% width
 
 CSS VARIABLE RULES:
 - Always use CSS variables. Avoid raw hex colors/values.
@@ -83,7 +83,7 @@
 - NEVER use the `border` shorthand property or per-side border properties: borderTopColor, borderTopWidth, borderTopStyle, borderLeftColor, borderLeftWidth, borderLeftStyle, borderRightColor, borderRightWidth, borderRightStyle, borderBottomColor, borderBottomWidth, borderBottomStyle — these are NOT in the style panel
 - For full borders: borderColor, borderWidth (e.g. "1px"), borderStyle — always set all three together
 - For one-sided borders: use CSS shorthand values — e.g. top-only: borderWidth: "4px 0px 0px 0px", borderColor: "var(--outline-blue-1)", borderStyle: "solid"
-- Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. Keep `theme` gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
+- Button: use size prop ("sm"|"md"|"lg"|"xl"|"2xl") for sizing — DO NOT set height in style. NEVER use any other `theme` except gray or default unless prompted. Only use colored themes (blue, red, green) when semantically meaningful: destructive actions → red, success/confirmed → green.
 - Avoid applying visual style (color, backgroundColor, borderColor, fontSize) to frappe-ui components — their props handle this. Only use style on `container` components for layout (width, flex, margin, etc.)."""
 
 OUTPUT_FORMAT_RULES = """JSON OUTPUT RULES (critical — invalid JSON breaks parsing):

From 078d0e42a10d81fccfb4c83ee8bf7dc124944644 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Mon, 1 Jun 2026 11:31:56 +0530
Subject: [PATCH 55/57] fix: set min canvas height to 100dvh, avoid clipping
 content

---
 frontend/src/components/StudioCanvas.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/StudioCanvas.vue b/frontend/src/components/StudioCanvas.vue
index aed7c7a4..6a09b5a7 100644
--- a/frontend/src/components/StudioCanvas.vue
+++ b/frontend/src/components/StudioCanvas.vue
@@ -43,7 +43,8 @@
 				</div>
 			</div>
 			<div
-				class="canvas relative flex h-full bg-surface-white shadow-2xl contain-layout"
+				class="canvas relative flex bg-surface-white shadow-2xl contain-layout"
+				:class="canvasStore.editingMode === 'page' ? 'min-h-[100dvh]' : ''"
 				:style="{
 					...canvasStyles,
 					background: canvasProps.background,

From 659ccbcec312a9623ee64cc2e670c27f5b531d23 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Mon, 1 Jun 2026 11:42:20 +0530
Subject: [PATCH 56/57] fix: pages panel spacing

---
 frontend/src/components/PagesPanel.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/PagesPanel.vue b/frontend/src/components/PagesPanel.vue
index 4d817d18..a4db2e88 100644
--- a/frontend/src/components/PagesPanel.vue
+++ b/frontend/src/components/PagesPanel.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="flex h-full flex-col">
-		<div class="flex flex-col space-y-1">
+	<div class="flex h-full flex-col overflow-hidden">
+		<div class="flex flex-col space-y-1 overflow-y-auto hide-scrollbar">
 			<div class="w-full" v-for="page in store.appPages" :key="page.name">
 				<div
 					@click="openPage(page)"
@@ -43,12 +43,14 @@
 			</div>
 		</div>
 
-		<router-link
-			v-if="store.activeApp"
-			:to="{ name: 'StudioPage', params: { appID: store.activeApp?.name, pageID: 'new' } }"
-		>
-			<Button icon-left="plus" class="mt-5 w-full">New Page</Button>
-		</router-link>
+		<div class="mt-4 flex-shrink-0">
+			<router-link
+				v-if="store.activeApp"
+				:to="{ name: 'StudioPage', params: { appID: store.activeApp?.name, pageID: 'new' } }"
+			>
+				<Button icon-left="plus" class="w-full">New Page</Button>
+			</router-link>
+		</div>
 	</div>
 </template>
 

From 15b21fb37c7528a7640a01b50fb1a2733338794e Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Mon, 1 Jun 2026 11:55:12 +0530
Subject: [PATCH 57/57] fix: left panel headers

---
 frontend/src/components/StudioLeftPanel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/StudioLeftPanel.vue b/frontend/src/components/StudioLeftPanel.vue
index cba4d70c..3d7d60ec 100644
--- a/frontend/src/components/StudioLeftPanel.vue
+++ b/frontend/src/components/StudioLeftPanel.vue
@@ -39,7 +39,7 @@
 					@resize="(width) => (store.studioLayout.leftPanelWidth = width)"
 				/>
 				<div
-					class="sticky top-0 z-[12] flex shrink-0 justify-between border-b-[1px] border-gray-200 bg-white p-3 text-base font-semibold text-gray-800"
+					class="sticky left-0 top-0 z-[12] flex w-full shrink-0 justify-between border-b-[1px] border-gray-200 bg-white p-3 text-base font-semibold text-gray-800"
 				>
 					{{ activeTab }}
 					<IconButton