feat: Add 3 critical UX improvements (save state, example prompts, auto-expand)

Implements three high-impact UX improvements identified from user journey analysis:

## 1. Save State Indicator (#1 Priority - CRITICAL)
**Problem**: Users had no visibility into whether changes were saved
**Solution**: Real-time visual feedback in top bar

- Created SaveStateManager to track save states (saved/saving/unsaved)
- Integrated into EditorEngine lifecycle
- CodeManager notifies on write start/complete/error
- Visual indicator shows: spinning "Saving...", checkmark "Saved", orange dot "Unsaved"
- Tooltip displays time since last save

**Files**:
- apps/web/client/src/components/store/editor/save-state/index.ts (NEW)
- apps/web/client/src/app/project/[id]/_components/top-bar/save-indicator.tsx (NEW)
- apps/web/client/src/components/store/editor/engine.ts
- apps/web/client/src/components/store/editor/code/index.ts
- apps/web/client/src/app/project/[id]/_components/top-bar/index.tsx

**Impact**: Builds user trust, eliminates confusion about save status

---

## 2. Example Prompts (#5 - Conversion Boost)
**Problem**: Empty chat provided no guidance for new users
**Solution**: Mode-specific clickable example prompts

- 3 examples per mode (CREATE/EDIT/ASK/FIX)
- Auto-send message on click
- Examples: "Add hero section", "Change button color", "Explain component", "Fix layout"

**Files**:
- apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/example-prompts.tsx (NEW)
- apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/index.tsx
- apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsx

**Impact**: Reduces time-to-first-message, lowers cognitive load

---

## 3. Auto-Expand Last Tool Call (#4 - Transparency)
**Problem**: Users manually clicked every tool to see AI actions
**Solution**: Latest tool call auto-expands

- Identifies last tool in message parts
- Passes defaultOpen flag to CollapsibleCodeBlock
- Previous tools remain collapsed
- Works with all code editing tools

**Files**:
- apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/index.tsx
- apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/tool-call-display.tsx
- apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx

**Impact**: Improves transparency, reduces clicks

---

## Testing
All changes type-checked successfully with `bun run typecheck`

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: paritoshk

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/example-prompts.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useEditorEngine } from '@/components/store/editor';
+import { ChatType } from '@onlook/models';
+import { Button } from '@onlook/ui/button';
+import { Icons } from '@onlook/ui/icons';
+import { observer } from 'mobx-react-lite';
+
+interface ExamplePrompt {
+    icon: keyof typeof Icons;
+    text: string;
+    prompt: string;
+}
+
+const EXAMPLE_PROMPTS: Record<ChatType, ExamplePrompt[]> = {
+    [ChatType.CREATE]: [
+        {
+            icon: 'MagicWand',
+            text: 'Add a hero section',
+            prompt: 'Create a modern hero section with a heading, subheading, and CTA button',
+        },
+        {
+            icon: 'Component',
+            text: 'Build a contact form',
+            prompt: 'Add a contact form with name, email, message fields and a submit button',
+        },
+        {
+            icon: 'Frame',
+            text: 'Create a navbar',
+            prompt: 'Build a responsive navigation bar with logo and menu items',
+        },
+    ],
+    [ChatType.EDIT]: [
+        {
+            icon: 'Pencil',
+            text: 'Change the button color',
+            prompt: 'Make the selected button blue with white text',
+        },
+        {
+            icon: 'Size',
+            text: 'Adjust spacing',
+            prompt: 'Increase the padding around the selected element',
+        },
+        {
+            icon: 'Text',
+            text: 'Update text content',
+            prompt: 'Change the heading text to say "Welcome to Our Platform"',
+        },
+    ],
+    [ChatType.ASK]: [
+        {
+            icon: 'QuestionMarkCircled',
+            text: 'Explain this component',
+            prompt: 'What does this component do and how does it work?',
+        },
+        {
+            icon: 'Code',
+            text: 'Show me the structure',
+            prompt: 'Explain the component hierarchy and data flow',
+        },
+        {
+            icon: 'InfoCircled',
+            text: 'Suggest improvements',
+            prompt: 'What improvements can I make to this component?',
+        },
+    ],
+    [ChatType.FIX]: [
+        {
+            icon: 'ExclamationTriangle',
+            text: 'Fix layout issues',
+            prompt: 'Fix any layout or alignment problems in the selected element',
+        },
+        {
+            icon: 'CrossCircled',
+            text: 'Debug errors',
+            prompt: 'Find and fix any errors or warnings in the code',
+        },
+        {
+            icon: 'Reset',
+            text: 'Optimize performance',
+            prompt: 'Improve the performance and remove any unnecessary code',
+        },
+    ],
+};
+
+interface ExamplePromptsProps {
+    onSelectPrompt: (prompt: string, type: ChatType) => void;
+}
+
+export const ExamplePrompts = observer(({ onSelectPrompt }: ExamplePromptsProps) => {
+    const editorEngine = useEditorEngine();
+    const chatMode = editorEngine.state.chatMode;
+    const prompts = EXAMPLE_PROMPTS[chatMode] || EXAMPLE_PROMPTS[ChatType.EDIT];
+
+    const getModeTitle = () => {
+        switch (chatMode) {
+            case ChatType.CREATE:
+                return 'Create something new';
+            case ChatType.EDIT:
+                return 'Edit your design';
+            case ChatType.ASK:
+                return 'Ask about your code';
+            case ChatType.FIX:
+                return 'Fix issues';
+            default:
+                return 'Try an example';
+        }
+    };
+
+    return (
+        <div className="flex-1 flex flex-col items-center justify-center text-foreground-tertiary/80 h-full px-6">
+            <Icons.EmptyState className="size-24 mb-4" />
+            <h3 className="text-lg font-medium text-foreground-secondary mb-2">
+                {getModeTitle()}
+            </h3>
+            <p className="text-sm text-foreground-tertiary/80 mb-6 text-center max-w-[300px]">
+                Start a conversation or try one of these examples
+            </p>
+            <div className="flex flex-col gap-2 w-full max-w-[320px]">
+                {prompts.map((example, index) => {
+                    const IconComponent = Icons[example.icon];
+                    return (
+                        <Button
+                            key={index}
+                            variant="outline"
+                            className="justify-start gap-3 h-auto py-3 px-4 text-left hover:bg-background-secondary/50 hover:border-foreground-secondary/30 transition-all"
+                            onClick={() => onSelectPrompt(example.prompt, chatMode)}
+                        >
+                            <IconComponent className="h-4 w-4 flex-shrink-0 text-foreground-secondary" />
+                            <span className="text-sm text-foreground-secondary">{example.text}</span>
+                        </Button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+});

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/index.tsx

@@ -16,18 +16,21 @@ import { useTranslations } from 'next-intl';
 import { useCallback } from 'react';
 import { AssistantMessage } from './assistant-message';
 import { ErrorMessage } from './error-message';
+import { ExamplePrompts } from './example-prompts';
 import { UserMessage } from './user-message';
 
 interface ChatMessagesProps {
     messages: ChatMessage[];
     onEditMessage: EditMessage;
+    onSendMessage: (content: string, type: import('@onlook/models').ChatType) => void;
     isStreaming: boolean;
     error?: Error;
 }
 
 export const ChatMessages = observer(({
     messages,
     onEditMessage,
+    onSendMessage,
     isStreaming,
     error,
 }: ChatMessagesProps) => {
@@ -64,12 +67,7 @@ export const ChatMessages = observer(({
     if (!messages || messages.length === 0) {
         return (
             !editorEngine.elements.selected.length && (
-                <div className="flex-1 flex flex-col items-center justify-center text-foreground-tertiary/80 h-full">
-                    <Icons.EmptyState className="size-32" />
-                    <p className="text-center text-regularPlus text-balance max-w-[300px]">
-                        {t(transKeys.editor.panels.edit.tabs.chat.emptyState)}
-                    </p>
-                </div>
+                <ExamplePrompts onSelectPrompt={onSendMessage} />
             )
         );
     }

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/index.tsx

@@ -17,6 +17,8 @@ const MessageContentComponent = ({
     isStream: boolean;
 }) => {
     let lastIncompleteToolIndex = -1;
+    let lastToolIndex = -1;
+
     if (isStream) {
         for (let i = parts.length - 1; i >= 0; i--) {
             const part = parts[i];
@@ -30,6 +32,15 @@ const MessageContentComponent = ({
         }
     }
 
+    // Find the last tool call (for auto-expand)
+    for (let i = parts.length - 1; i >= 0; i--) {
+        const part = parts[i];
+        if (part?.type.startsWith('tool-')) {
+            lastToolIndex = i;
+            break;
+        }
+    }
+
     const renderedParts = parts.map((part, idx) => {
         if (part?.type === 'text') {
             return (
@@ -41,13 +52,15 @@ const MessageContentComponent = ({
         } else if (part?.type.startsWith('tool-')) {
             const toolPart = part as ToolUIPart;// Only show loading animation for the last incomplete tool call
             const isLoadingThisTool = isStream && idx === lastIncompleteToolIndex;
+            const isLatestTool = idx === lastToolIndex;
             return (
                 <ToolCallDisplay
                     messageId={messageId}
                     toolPart={toolPart}
                     key={toolPart.toolCallId}
                     isStream={isLoadingThisTool}
                     applied={applied}
+                    isLatest={isLatestTool}
                 />
             );
         } else if (part?.type === 'reasoning') {

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/tool-call-display.tsx

@@ -13,12 +13,14 @@ const ToolCallDisplayComponent = ({
     messageId,
     toolPart,
     isStream,
-    applied
+    applied,
+    isLatest = false,
 }: {
     messageId: string,
     toolPart: ToolUIPart,
     isStream: boolean,
-    applied: boolean
+    applied: boolean,
+    isLatest?: boolean,
 }) => {
     const toolName = toolPart.type.split('-')[1];
 
@@ -91,6 +93,7 @@ const ToolCallDisplayComponent = ({
                 applied={applied}
                 isStream={isStream}
                 branchId={branchId}
+                defaultOpen={isLatest}
             />
         );
     }
@@ -116,6 +119,7 @@ const ToolCallDisplayComponent = ({
                 applied={applied}
                 isStream={isStream}
                 branchId={branchId}
+                defaultOpen={isLatest}
             />
         );
     }
@@ -141,6 +145,7 @@ const ToolCallDisplayComponent = ({
                 applied={applied}
                 isStream={isStream}
                 branchId={branchId}
+                defaultOpen={isLatest}
             />
         );
     }
@@ -166,6 +171,7 @@ const ToolCallDisplayComponent = ({
                 applied={applied}
                 isStream={isStream}
                 branchId={branchId}
+                defaultOpen={isLatest}
             />
         );
     }

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsx

@@ -28,6 +28,7 @@ export const ChatTabContent = ({
                 isStreaming={isStreaming}
                 error={error}
                 onEditMessage={editMessage}
+                onSendMessage={sendMessage}
             />
             <ErrorSection isStreaming={isStreaming} onSendMessage={sendMessage} />
             <ChatInput

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/code-display/collapsible-code-block.tsx

@@ -15,16 +15,18 @@ interface CollapsibleCodeBlockProps {
     applied: boolean;
     isStream?: boolean;
     branchId?: string;
+    defaultOpen?: boolean;
 }
 
 const CollapsibleCodeBlockComponent = ({
     path,
     content,
     isStream,
     branchId,
+    defaultOpen = false,
 }: CollapsibleCodeBlockProps) => {
     const editorEngine = useEditorEngine();
-    const [isOpen, setIsOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(defaultOpen);
     const [copied, setCopied] = useState(false);
 
     const copyToClipboard = () => {

apps/web/client/src/app/project/[id]/_components/top-bar/index.tsx

@@ -19,6 +19,7 @@ import { BranchDisplay } from './branch';
 import { ModeToggle } from './mode-toggle';
 import { ProjectBreadcrumb } from './project-breadcrumb';
 import { PublishButton } from './publish';
+import { SaveIndicator } from './save-indicator';
 
 export const TopBar = observer(() => {
     const stateManager = useStateManager();
@@ -50,6 +51,7 @@ export const TopBar = observer(() => {
             </div>
             <ModeToggle />
             <div className="flex flex-grow basis-0 justify-end items-center gap-1.5 mr-2">
+                <SaveIndicator />
                 <div className="flex items-center group">
                     <div className={`transition-all duration-200 ${isMembersPopoverOpen ? 'mr-2' : '-mr-2 group-hover:mr-2'}`}>
                         <Members onPopoverOpenChange={setIsMembersPopoverOpen} />

apps/web/client/src/app/project/[id]/_components/top-bar/save-indicator.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEditorEngine } from '@/components/store/editor';
+import type { SaveState } from '@/components/store/editor/save-state';
+import { Icons } from '@onlook/ui/icons';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
+import { observer } from 'mobx-react-lite';
+
+export const SaveIndicator = observer(() => {
+    const editorEngine = useEditorEngine();
+    const saveState: SaveState = editorEngine.saveState.saveState;
+
+    const getIndicatorContent = () => {
+        switch (saveState) {
+            case 'saving':
+                return (
+                    <div className="flex items-center gap-1.5 text-xs text-foreground-secondary">
+                        <Icons.Reload className="h-3 w-3 animate-spin" />
+                        <span>Saving...</span>
+                    </div>
+                );
+            case 'saved':
+                return (
+                    <div className="flex items-center gap-1.5 text-xs text-foreground-tertiary">
+                        <Icons.Check className="h-3 w-3" />
+                        <span>Saved</span>
+                    </div>
+                );
+            case 'unsaved':
+                return (
+                    <div className="flex items-center gap-1.5 text-xs text-orange-500">
+                        <Icons.Circle className="h-3 w-3 fill-current" />
+                        <span>Unsaved changes</span>
+                    </div>
+                );
+        }
+    };
+
+    const getTooltipContent = () => {
+        switch (saveState) {
+            case 'saving':
+                return 'Saving your changes...';
+            case 'saved':
+                return `Last saved ${editorEngine.saveState.formattedTimeSinceLastSave}`;
+            case 'unsaved':
+                return 'You have unsaved changes';
+        }
+    };
+
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <div className="flex items-center px-2 py-1 rounded-md hover:bg-background-secondary/50 transition-colors cursor-default">
+                    {getIndicatorContent()}
+                </div>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="mt-1" hideArrow>
+                <p>{getTooltipContent()}</p>
+            </TooltipContent>
+        </Tooltip>
+    );
+});

apps/web/client/src/components/store/editor/code/index.ts

@@ -24,6 +24,7 @@ export class CodeManager {
     }
 
     async write(action: Action) {
+        this.editorEngine.saveState.startSaving();
         try {
             // TODO: This is a hack to write code, we should refactor this
             if (action.type === 'write-code' && action.diffs[0]) {
@@ -36,12 +37,14 @@ export class CodeManager {
                 const requests = await this.collectRequests(action);
                 await this.writeRequest(requests);
             }
+            this.editorEngine.saveState.debouncedCompleteSave();
         } catch (error) {
             console.error('Error writing requests:', error);
             toast.error('Error writing requests', {
                 description: error instanceof Error ? error.message : 'Unknown error',
             });
             this.editorEngine.branches.activeError.addCodeApplicationError(error instanceof Error ? error.message : 'Unknown error', action);
+            this.editorEngine.saveState.markUnsaved();
         }
     }