From 40d97dcd4577f99cb3c586dc8dff5d9ca8c95e9d Mon Sep 17 00:00:00 2001
From: juki <chinahujunkai@gmail.com>
Date: Thu, 23 Apr 2026 04:21:49 +0800
Subject: [PATCH] feat(desktop): expand prompt composer inline

Signed-off-by: juki <chinahujunkai@gmail.com>
---
 apps/desktop/src/renderer/src/App.tsx         |  59 +++++----
 .../src/components/chat/PromptInput.tsx       | 115 ++++++++++++++++--
 apps/desktop/src/renderer/src/store.ts        |   7 ++
 packages/i18n/src/locales/en.json             |   2 +
 packages/i18n/src/locales/pt-BR.json          |   2 +
 packages/i18n/src/locales/zh-CN.json          |   2 +
 6 files changed, 157 insertions(+), 30 deletions(-)

diff --git a/apps/desktop/src/renderer/src/App.tsx b/apps/desktop/src/renderer/src/App.tsx
index cf150087..85856da5 100644
--- a/apps/desktop/src/renderer/src/App.tsx
+++ b/apps/desktop/src/renderer/src/App.tsx
@@ -44,6 +44,8 @@ export function App() {
   const sidebarCollapsed = useCodesignStore((s) => s.sidebarCollapsed);
   const activeReportLocalId = useCodesignStore((s) => s.activeReportLocalId);
   const closeReportDialog = useCodesignStore((s) => s.closeReportDialog);
+  const isPromptExpanded = useCodesignStore((s) => s.isPromptExpanded);
+  const setPromptExpanded = useCodesignStore((s) => s.setPromptExpanded);
 
   const [prompt, setPrompt] = useState('');
   const [sidebarWidth, setSidebarWidth] = useState(() =>
@@ -84,27 +86,32 @@ export function App() {
     if (view === 'workspace') setWorkspaceMounted(true);
   }, [view]);
 
-  const onResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    setIsResizing(true);
-
-    const onMove = (ev: MouseEvent) => {
+  const onResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
       const maxW = Math.round(window.innerWidth * 0.55);
-      const clamped = Math.min(Math.max(ev.clientX, 280), maxW);
-      setSidebarWidth(clamped);
-    };
-    const onUp = () => {
-      setIsResizing(false);
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
-    };
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  }, []);
+      setSidebarWidth(Math.min(Math.max(e.clientX, 280), maxW));
+      setPromptExpanded(false);
+      setIsResizing(true);
+
+      const onMove = (ev: MouseEvent) => {
+        const clamped = Math.min(Math.max(ev.clientX, 280), Math.round(window.innerWidth * 0.55));
+        setSidebarWidth(clamped);
+      };
+      const onUp = () => {
+        setIsResizing(false);
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      };
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    },
+    [setPromptExpanded],
+  );
 
   useEffect(() => {
     async function bootstrap(): Promise<void> {
@@ -236,7 +243,17 @@ export function App() {
           <div hidden={view !== 'workspace'} className="h-full flex flex-col">
             <div className="flex-1 min-h-0 flex relative">
               {isResizing && <div className="absolute inset-0 z-20 cursor-col-resize" />}
-              <div className="relative shrink-0" style={{ width: sidebarWidth }}>
+              <div
+                className={`relative shrink-0 ${isResizing ? '' : 'transition-[width] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]'}`}
+                style={{
+                  width: isPromptExpanded
+                    ? Math.min(
+                        Math.max(600, Math.round(window.innerWidth * 0.45)),
+                        Math.round(window.innerWidth * 0.55),
+                      )
+                    : sidebarWidth,
+                }}
+              >
                 <Sidebar prompt={prompt} setPrompt={setPrompt} onSubmit={submit} />
                 <div
                   role="separator"
diff --git a/apps/desktop/src/renderer/src/components/chat/PromptInput.tsx b/apps/desktop/src/renderer/src/components/chat/PromptInput.tsx
index df9144fd..103592a7 100644
--- a/apps/desktop/src/renderer/src/components/chat/PromptInput.tsx
+++ b/apps/desktop/src/renderer/src/components/chat/PromptInput.tsx
@@ -15,6 +15,42 @@ import { useCodesignStore } from '../../store';
 
 const MAX_TEXTAREA_ROWS = 6;
 
+function ExpandPromptIcon(): ReactNode {
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 16 16"
+      className="h-[14px] w-[14px]"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="miter"
+      strokeWidth="1.6"
+    >
+      <path d="M4.25 6.5V4.25H6.5" />
+      <path d="M11.75 9.5v2.25H9.5" />
+    </svg>
+  );
+}
+
+function CollapsePromptIcon(): ReactNode {
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 16 16"
+      className="h-[14px] w-[14px]"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="square"
+      strokeLinejoin="miter"
+      strokeWidth="1.6"
+    >
+      <path d="M6.5 3.75V6.5H3.75" />
+      <path d="M9.5 12.25V9.5h2.75" />
+    </svg>
+  );
+}
+
 export function getTextareaLineHeight(el: HTMLTextAreaElement): number {
   const styles = getComputedStyle(el);
   const lineHeight = Number.parseFloat(styles.lineHeight);
@@ -27,10 +63,28 @@ export function getTextareaLineHeight(el: HTMLTextAreaElement): number {
   return fontSize * leading;
 }
 
-function resizeTextarea(el: HTMLTextAreaElement): void {
+function resizeTextarea(el: HTMLTextAreaElement, isExpanded: boolean): boolean {
   const rowHeight = getTextareaLineHeight(el);
-  el.style.height = 'auto';
-  el.style.height = `${Math.min(el.scrollHeight, rowHeight * MAX_TEXTAREA_ROWS)}px`;
+
+  // Measure exact text height silently without painting a jump or breaking transitions
+  const cachedTransition = el.style.transition;
+  const cachedHeight = el.style.height;
+
+  el.style.transition = 'none';
+  el.style.height = '1px';
+  const trueScrollHeight = el.scrollHeight;
+
+  el.style.height = cachedHeight;
+  // Force a layout recalc so the browser commits the origin height before transitioning
+  void el.offsetHeight;
+  el.style.transition = cachedTransition;
+
+  if (isExpanded) {
+    el.style.height = `${Math.min(Math.max(trueScrollHeight, window.innerHeight * 0.4), window.innerHeight * 0.6)}px`;
+  } else {
+    el.style.height = `${Math.min(trueScrollHeight, rowHeight * MAX_TEXTAREA_ROWS)}px`;
+  }
+  return trueScrollHeight > rowHeight * 2.5;
 }
 
 export interface PromptInputProps {
@@ -106,9 +160,31 @@ export const PromptInput = forwardRef<PromptInputHandle, PromptInputProps>(funct
       ? `${elapsedSec}s`
       : `${Math.floor(elapsedSec / 60)}:${String(elapsedSec % 60).padStart(2, '0')}`;
 
+  const isExpanded = useCodesignStore((s) => s.isPromptExpanded);
+  const setIsExpanded = useCodesignStore((s) => s.setPromptExpanded);
+  const [showExpandIcon, setShowExpandIcon] = useState(false);
+
+  useEffect(() => {
+    const textarea = taRef.current;
+    if (textarea && textarea.value === prompt) {
+      const isOver = resizeTextarea(textarea, isExpanded);
+      setShowExpandIcon(isOver);
+      if (isExpanded) {
+        textarea.focus();
+      }
+    }
+  }, [prompt, isExpanded]);
+
   useEffect(() => {
-    if (taRef.current) resizeTextarea(taRef.current);
-  }, []);
+    if (!isExpanded) return;
+    const handleDocKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsExpanded(false);
+      }
+    };
+    document.addEventListener('keydown', handleDocKeyDown);
+    return () => document.removeEventListener('keydown', handleDocKeyDown);
+  }, [isExpanded, setIsExpanded]);
 
   useImperativeHandle(ref, () => ({
     focus: () => {
@@ -139,7 +215,9 @@ export const PromptInput = forwardRef<PromptInputHandle, PromptInputProps>(funct
 
   return (
     <form onSubmit={handleSubmit}>
-      <div className="relative rounded-[16px] bg-[var(--color-surface)] border-[1.5px] border-[var(--color-border-muted)] focus-within:border-[var(--color-accent)] transition-colors duration-150 ease-out">
+      <div
+        className={`relative rounded-[16px] bg-[var(--color-surface)] border-[1.5px] border-[var(--color-border-muted)] focus-within:border-[var(--color-accent)] transition-[border-color,shadow] duration-150 ease-out ${isExpanded ? 'shadow-[var(--shadow-elevated)]' : ''}`}
+      >
         {contextSummary ? (
           <div className="border-b border-[var(--color-border-subtle)] px-[12px] py-[10px]">
             {contextSummary}
@@ -150,15 +228,34 @@ export const PromptInput = forwardRef<PromptInputHandle, PromptInputProps>(funct
           value={prompt}
           onChange={(e) => {
             setPrompt(e.target.value);
-            resizeTextarea(e.currentTarget);
+            const isOver = resizeTextarea(e.currentTarget, isExpanded);
+            setShowExpandIcon(isOver);
           }}
           onKeyDown={handleKeyDown}
           placeholder={t('chat.placeholderRich')}
           rows={1}
-          className="codesign-prompt-textarea block w-full resize-none appearance-none border-0 bg-transparent px-[14px] pt-[12px] pb-[44px] text-[14px] leading-[1.55] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] shadow-none outline-none focus:outline-none focus:ring-0 min-h-[24px] overflow-y-auto"
-          style={{ fontFamily: 'var(--font-sans)' }}
+          className="codesign-prompt-textarea block w-full resize-none appearance-none border-0 bg-transparent pl-[14px] pr-[36px] pt-[12px] pb-[44px] text-[14px] leading-[1.55] text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] shadow-none outline-none focus:outline-none focus:ring-0 min-h-[24px] overflow-y-auto"
+          style={{
+            fontFamily: 'var(--font-sans)',
+            transition: 'height 0.2s cubic-bezier(0.2,0.8,0.2,1)',
+          }}
         />
 
+        <div
+          className={`absolute top-[8px] right-[8px] transition-opacity duration-200 z-[2] ${showExpandIcon || isExpanded ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}
+        >
+          <Tooltip label={isExpanded ? t('chat.collapse') : t('chat.expand')} side="top">
+            <button
+              type="button"
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="p-1.5 rounded-md text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors"
+              aria-label={isExpanded ? t('chat.collapse') : t('chat.expand')}
+            >
+              {isExpanded ? <CollapsePromptIcon /> : <ExpandPromptIcon />}
+            </button>
+          </Tooltip>
+        </div>
+
         {leadingAction ? (
           <div className="absolute bottom-[8px] left-[8px]">{leadingAction}</div>
         ) : null}
diff --git a/apps/desktop/src/renderer/src/store.ts b/apps/desktop/src/renderer/src/store.ts
index f8943e6c..3ead4658 100644
--- a/apps/desktop/src/renderer/src/store.ts
+++ b/apps/desktop/src/renderer/src/store.ts
@@ -224,6 +224,7 @@ interface CodesignState {
    *  only persisted to SQLite when the result arrives (done/error). */
   pendingToolCalls: ChatToolCallPayload[];
   sidebarCollapsed: boolean;
+  isPromptExpanded: boolean;
 
   // Workstream D — comments
   comments: CommentRow[];
@@ -404,6 +405,7 @@ interface CodesignState {
    *  panel to write a re-serialized EDITMODE block back into the artifact. */
   setPreviewHtml: (content: string) => void;
   setSidebarCollapsed: (collapsed: boolean) => void;
+  setPromptExpanded: (val: boolean) => void;
 
   // Workstream D — comments
   loadCommentsForCurrentDesign: () => Promise<void>;
@@ -1217,6 +1219,7 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
   chatMessages: [],
   chatLoaded: false,
   sidebarCollapsed: false,
+  isPromptExpanded: false,
 
   comments: [],
   commentsLoaded: false,
@@ -2324,6 +2327,10 @@ export const useCodesignStore = create<CodesignState>((set, get) => ({
     set({ sidebarCollapsed: collapsed });
   },
 
+  setPromptExpanded(val: boolean) {
+    set({ isPromptExpanded: val });
+  },
+
   async loadCommentsForCurrentDesign() {
     if (!window.codesign) return;
     const designId = get().currentDesignId;
diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json
index 455716d2..e6f2f5f6 100644
--- a/packages/i18n/src/locales/en.json
+++ b/packages/i18n/src/locales/en.json
@@ -99,6 +99,8 @@
     "sendAnywhere": "anywhere",
     "send": "Send prompt",
     "stop": "Stop generation",
+    "expand": "Expand prompt",
+    "collapse": "Collapse prompt",
     "placeholderRich": "Describe a design… try 'Pitch deck for a fintech startup'"
   },
   "sidebar": {
diff --git a/packages/i18n/src/locales/pt-BR.json b/packages/i18n/src/locales/pt-BR.json
index 7eb0cae0..3b5c41b9 100644
--- a/packages/i18n/src/locales/pt-BR.json
+++ b/packages/i18n/src/locales/pt-BR.json
@@ -99,6 +99,8 @@
     "sendAnywhere": "em qualquer lugar",
     "send": "Enviar prompt",
     "stop": "Parar geração",
+    "expand": "Expandir prompt",
+    "collapse": "Recolher prompt",
     "placeholderRich": "Descreva um design… tente 'Pitch deck para uma startup fintech'"
   },
   "sidebar": {
diff --git a/packages/i18n/src/locales/zh-CN.json b/packages/i18n/src/locales/zh-CN.json
index 6b31f6de..401e2d3a 100644
--- a/packages/i18n/src/locales/zh-CN.json
+++ b/packages/i18n/src/locales/zh-CN.json
@@ -99,6 +99,8 @@
     "sendAnywhere": "任意位置发送",
     "send": "发送提示词",
     "stop": "停止生成",
+    "expand": "展开提示词",
+    "collapse": "收起提示词",
     "placeholderRich": "描述你想要的设计… 试试「AI 创业公司的落地页」"
   },
   "sidebar": {