ci: six e2e shards

With four, the shard of the long workspace tests took 8 minutes while
the others took 4 to 5.

components/chat/chat-panel.tsx

@@ -1,10 +1,10 @@
 import {
     ChevronDown,
     Download,
-    FilePlus,
     MessageSquareDashed,
     PanelRightClose,
-    Settings,
+    Settings2,
+    SquarePen,
 } from "lucide-react"
 import { useRef } from "react"
 import { DevXmlSimulator } from "@/components/dev-xml-simulator"
@@ -139,14 +139,14 @@ export function ChatPanel({
                         disabled={engine.isBusy}
                         data-testid="new-chat-button"
                     >
-                        <FilePlus />
+                        <SquarePen />
                     </IconButton>
                     <IconButton
                         label={dict.nav.settings}
                         onClick={() => openSettings()}
                         data-testid="settings-button"
                     >
-                        <Settings />
+                        <Settings2 />
                     </IconButton>
                     {!mobile && (
                         <IconButton
@@ -173,7 +173,7 @@ export function ChatPanel({
                 />
             )}
 
-            <div className="shrink-0 px-4 pt-1 pb-3">
+            <div className="shrink-0 p-2.5 pt-1">
                 <Composer
                     placeholder={
                         engine.messages.length > 0 &&

components/chat/lobby-hero.tsx

@@ -18,18 +18,14 @@ interface Example {
     file?: { path: string; name: string; type: string }
 }
 
-/** Secondary start buttons: outlined, so they read as clickable */
-const startButtonClass =
-    "inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-card px-3 text-[13px] text-foreground transition-colors hover:bg-accent [&_svg]:text-muted-foreground"
-
 async function loadExampleFile(file: NonNullable<Example["file"]>) {
     const response = await fetch(getAssetUrl(file.path))
     const blob = await response.blob()
     return new File([blob], file.name, { type: file.type })
 }
 
-/** One start-screen example: a small picture over its title */
+/** One start-screen choice: a small picture, a title and one line */
-function ExampleTile({
+function ExampleCard({
     onClick,
     title,
     description,
@@ -39,7 +35,6 @@ function ExampleTile({
 }: {
     onClick: () => void
     title: string
-    /** Shown as the tooltip: the title alone names the example */
     description: string
     picture: React.ReactNode
     /** An icon on a tinted tile instead of a diagram on paper */
@@ -50,20 +45,24 @@ function ExampleTile({
         <button
             type="button"
             onClick={onClick}
-            title={description}
+            className="group/example flex min-w-0 items-center gap-2.5 rounded-xl border border-border bg-card p-1.5 pr-2.5 text-left transition-colors hover:border-foreground/25"
-            className="group/example flex min-w-0 flex-col gap-2 rounded-xl border border-border bg-card p-1.5 pb-2.5 text-left transition-colors hover:border-foreground/25"
             data-testid={testId}
         >
             <span
                 className={cn(
-                    "flex h-16 w-full items-center justify-center overflow-hidden rounded-lg",
+                    "flex h-12 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg",
                     plain ? "bg-muted" : "sheet-light bg-white",
                 )}
             >
                 {picture}
             </span>
-            <span className="px-1 text-[13px] leading-snug font-medium text-foreground">
+            <span className="min-w-0 flex-1">
-                {title}
+                <span className="line-clamp-2 text-[13px] leading-snug font-medium text-foreground">
+                    {title}
+                </span>
+                <span className="mt-0.5 block truncate text-xs text-muted-foreground">
+                    {description}
+                </span>
             </span>
         </button>
     )
@@ -93,7 +92,6 @@ export function LobbyHero({
             key: "paper",
             title: dict.examples.paperToDiagram,
             description: dict.examples.paperDescription,
-            image: "/paper_demo.svg",
             prompt: "Summarize this paper as a diagram",
             file: {
                 path: "/chain-of-thought.txt",
@@ -187,12 +185,10 @@ export function LobbyHero({
                 placeholder={t.placeholder}
             />
 
-            {/* Examples: one row of tiles; the ways to bring your own
-                diagram follow as a separate group */}
             <div
                 className={cn(
                     "mt-5 grid gap-2",
-                    compact ? "grid-cols-1" : "grid-cols-5",
+                    compact ? "grid-cols-1" : "grid-cols-3",
                 )}
             >
                 {examples.map((example) =>
@@ -213,7 +209,7 @@ export function LobbyHero({
                             </span>
                         </button>
                     ) : (
-                        <ExampleTile
+                        <ExampleCard
                             key={example.key}
                             onClick={() => pickExample(example)}
                             title={example.title}
@@ -225,7 +221,7 @@ export function LobbyHero({
                                     <img
                                         src={getAssetUrl(example.image)}
                                         alt=""
-                                        className="max-h-14 max-w-[88%] object-contain transition-transform duration-300 group-hover/example:scale-[1.06]"
+                                        className="max-h-10 max-w-[56px] object-contain transition-transform duration-300 group-hover/example:scale-[1.06]"
                                     />
                                 ) : (
                                     <FileText className="size-5 text-muted-foreground" />
@@ -235,34 +231,48 @@ export function LobbyHero({
                         />
                     ),
                 )}
+                {!compact && (
+                    <ExampleCard
+                        onClick={onOpenFile}
+                        title={dict.workspace.openFile}
+                        description={t.openFileHint}
+                        picture={
+                            <FileUp className="size-5 text-muted-foreground" />
+                        }
+                        plain
+                    />
+                )}
             </div>
-            <p className="mt-2.5 text-center text-xs text-faint">
+            <p className="mt-3 text-center text-xs text-faint">
                 {dict.examples.cachedNote}
             </p>
 
-            {/* Ways to start without an example, as plain buttons */}
+            <div className="mt-6 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-[13px] text-muted-foreground">
-            <div className="mt-6 flex flex-wrap items-center justify-center gap-2">
                 {engine.sessions.length > 0 && (
                     <SessionMenu align="center" onOpenFile={onOpenFile}>
-                        <button type="button" className={startButtonClass}>
+                        <button
+                            type="button"
+                            className="inline-flex items-center gap-1.5 hover:text-foreground"
+                        >
                             <History className="size-4" />
                             {t.recent}
                         </button>
                     </SessionMenu>
                 )}
-                <button
+                {compact && (
-                    type="button"
+                    <button
-                    onClick={onOpenFile}
+                        type="button"
-                    className={startButtonClass}
+                        onClick={onOpenFile}
-                    data-testid="open-file"
+                        className="inline-flex items-center gap-1.5 hover:text-foreground"
-                >
+                    >
-                    <FileUp className="size-4" />
+                        <FileUp className="size-4" />
-                    {dict.workspace.openFile}
+                        {dict.workspace.openFile}
-                </button>
+                    </button>
+                )}
                 <button
                     type="button"
                     onClick={onDrawYourself}
-                    className={startButtonClass}
+                    className="inline-flex items-center gap-1.5 hover:text-foreground"
                     data-testid="draw-yourself"
                 >
                     <Pencil className="size-4" />

components/chat/tool-activity.tsx

@@ -2,6 +2,7 @@ import {
     AlertCircle,
     Check,
     ChevronDown,
+    Code2,
     Copy,
     Library,
     PenTool,
@@ -179,23 +180,17 @@ function VersionCard({
         </button>
     )
 
-    // What the AI wrote: a text link in the summary line, so the card's
+    // What the AI wrote, on every card (main showed it on every tool call)
-    // only button is the action (undo or restore)
+    const codeButton = (
-    const summaryLine = (
+        <button
-        <div className="text-xs text-muted-foreground">
+            type="button"
-            {summary}
+            onClick={() => setShowCode((v) => !v)}
-            {/* The link wraps as one unit with its separator */}
+            aria-label={showCode ? t.hideCode : t.showCode}
-            <span className="whitespace-nowrap">
+            title={showCode ? t.hideCode : t.showCode}
-                <span aria-hidden> · </span>
+            className="inline-flex size-7 shrink-0 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground"
-                <button
+        >
-                    type="button"
+            <Code2 className="size-4" />
-                    onClick={() => setShowCode((v) => !v)}
+        </button>
-                    className="underline decoration-foreground/30 underline-offset-2 hover:text-foreground hover:decoration-foreground"
-                >
-                    {showCode ? t.hideCode : t.showCode}
-                </button>
-            </span>
-        </div>
     )
     const codePanel = showCode && (
         <div className="relative border-t border-border bg-surface-1 px-3 py-2.5">
@@ -236,12 +231,15 @@ function VersionCard({
                         />
                     </button>
                     {badge}
-                    <div className="min-w-0 flex-1">
+                    <div className="min-w-0 flex-1" title={summary}>
                         <div className="truncate text-[13px] text-foreground">
                             {title}
                         </div>
-                        {summaryLine}
+                        <div className="truncate text-xs text-muted-foreground">
+                            {summary}
+                        </div>
                     </div>
+                    {codeButton}
                     {restoreButton}
                 </div>
                 {codePanel}
@@ -273,12 +271,17 @@ function VersionCard({
                     {t.compare}
                 </span>
             </button>
-            {/* Title row with the action; the summary runs under both */}
+            <div className="flex items-center gap-2.5 px-3 py-2.5">
-            <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2.5 px-3 py-2.5">
                 {badge}
-                <div className="truncate text-[13px] font-medium text-foreground">
+                <div className="min-w-0 flex-1" title={summary}>
-                    {title}
+                    <div className="truncate text-[13px] font-medium text-foreground">
+                        {title}
+                    </div>
+                    <div className="line-clamp-2 text-xs text-muted-foreground">
+                        {summary}
+                    </div>
                 </div>
+                {codeButton}
                 {canUndo ? (
                     <button
                         type="button"
@@ -297,9 +300,6 @@ function VersionCard({
                 ) : (
                     restoreButton
                 )}
-                <div className="col-span-2 col-start-2 mt-0.5">
-                    {summaryLine}
-                </div>
             </div>
             {codePanel}
         </div>

components/model-selector.tsx

@@ -220,14 +220,14 @@ export function ModelSelector({
                             <span className="min-w-0 truncate text-xs">
                                 {selectedModel
                                     ? shortModelName(selectedModel.modelId)
-                                    : dict.modelConfig.serverDefault}
+                                    : dict.modelConfig.default}
                             </span>
                         ) : (
                             // Keep an sr-only label for screen readers when hidden
                             <span className="sr-only">
                                 {selectedModel
                                     ? selectedModel.modelId
-                                    : dict.modelConfig.serverDefault}
+                                    : dict.modelConfig.default}
                             </span>
                         )}
                         <ChevronDown className="h-3 w-3 flex-shrink-0 text-muted-foreground" />

components/workspace/workspace.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { MessageSquare, PanelRightOpen, Settings, Shapes } from "lucide-react"
+import { MessageSquare, PanelRightOpen, Settings2, Shapes } from "lucide-react"
 import { usePathname, useRouter } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
 import { CanvasStage } from "@/components/canvas/canvas-stage"
@@ -100,7 +100,7 @@ function StartBar({
                 onClick={() => openSettings()}
                 data-testid="settings-button"
             >
-                <Settings />
+                <Settings2 />
             </IconButton>
         </div>
     )

lib/i18n/dictionaries/en.json

@@ -72,7 +72,7 @@
         "replicateDescription": "Upload and replicate an existing flowchart",
         "creativeDrawing": "Creative drawing",
         "creativeDescription": "Draw something fun and creative",
-        "cachedNote": "Examples use saved answers: they appear instantly and don't call the AI.",
+        "cachedNote": "Examples open instantly and don't use your model.",
         "mcpServer": "MCP Server",
         "mcpDescription": "Use in Claude Desktop, VS Code & Cursor"
     },
@@ -96,7 +96,7 @@
         "language": "Language",
         "languageDescription": "Choose your interface language.",
         "theme": "Theme",
-        "themeDescription": "Light or dark interface. The canvas follows the same theme.",
+        "themeDescription": "Light or dark interface. The diagram always stays on a white sheet, the way it exports.",
         "diagramStyle": "Diagram style",
         "diagramStyleDescription": "How the AI draws new diagrams: Styled uses colors and icons, Minimal keeps shapes plain.",
         "sendShortcut": "Send shortcut",
@@ -400,7 +400,7 @@
         "searchModels": "Search models...",
         "noModelsFound": "No models found.",
         "default": "Default",
-        "serverDefault": "Server model",
+        "serverDefault": "Server Default",
         "serverModels": "Server Models",
         "userModels": "User Models",
         "configureModels": "Configure Models...",
@@ -695,7 +695,7 @@
     },
     "lobby": {
         "title": "What would you like to draw?",
-        "lede": "Describe a diagram or upload a screenshot or PDF. You get a draw.io diagram you can keep editing and export.",
+        "lede": "Describe a diagram, or upload a screenshot or PDF. You get a regular draw.io diagram that you can keep editing and export.",
         "placeholder": "For example: a login sequence diagram with SMS codes and retries",
         "recent": "Recent diagrams",
         "drawYourself": "Start with a blank canvas",

lib/i18n/dictionaries/ja.json

@@ -72,7 +72,7 @@
         "replicateDescription": "既存のフローチャートをアップロードして複製",
         "creativeDrawing": "自由なイラスト",
         "creativeDescription": "楽しくてクリエイティブなものを描く",
-        "cachedNote": "例は保存済みの回答を使うので、すぐに表示され、AI を呼び出しません。",
+        "cachedNote": "例はすぐに開き、モデルは使いません。",
         "mcpServer": "MCP サーバー",
         "mcpDescription": "Claude Desktop、VS Code、Cursor で使用"
     },
@@ -96,7 +96,7 @@
         "language": "言語",
         "languageDescription": "インターフェース言語を選択します。",
         "theme": "テーマ",
-        "themeDescription": "画面をライトにするかダークにするか。キャンバスも同じテーマになります。",
+        "themeDescription": "画面をライトにするかダークにするか。図はエクスポートしたときと同じく、常に白い用紙の上に表示されます。",
         "diagramStyle": "図のスタイル",
         "diagramStyleDescription": "AI が新しい図を描くときのスタイル。スタイル付きは色やアイコンを使い、ミニマルは素朴な図形だけにします。",
         "sendShortcut": "送信のショートカット",
@@ -355,7 +355,7 @@
         "searchModels": "モデルを検索...",
         "noModelsFound": "モデルが見つかりません。",
         "default": "デフォルト",
-        "serverDefault": "サーバーのモデル",
+        "serverDefault": "サーバーデフォルト",
         "serverModels": "サーバーモデル",
         "userModels": "ユーザーモデル",
         "configureModels": "モデルを設定...",
@@ -695,7 +695,7 @@
     },
     "lobby": {
         "title": "どんな図を描きますか？",
-        "lede": "図を説明するか、スクリーンショットや PDF をアップロードしてください。できあがるのは編集もエクスポートもできる draw.io の図です。",
+        "lede": "図の内容を説明するか、スクリーンショットや PDF をアップロードしてください。できあがるのは通常の draw.io の図なので、続けて編集もエクスポートもできます。",
         "placeholder": "例：SMS 認証とリトライを含むログインのシーケンス図",
         "recent": "最近の図",
         "drawYourself": "白紙のキャンバスから始める",

lib/i18n/dictionaries/zh-Hant.json

@@ -72,7 +72,7 @@
         "replicateDescription": "上傳並複製現有流程圖",
         "creativeDrawing": "創意繪畫",
         "creativeDescription": "繪製有趣且富有創意的內容",
-        "cachedNote": "範例使用保存好的答案，立即顯示，不呼叫 AI。",
+        "cachedNote": "範例會立即開啟，不呼叫模型。",
         "mcpServer": "MCP 伺服器",
         "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
     },
@@ -96,7 +96,7 @@
         "language": "語言",
         "languageDescription": "選擇介面語言。",
         "theme": "主題",
-        "themeDescription": "介面用淺色還是深色，畫布跟隨同一主題。",
+        "themeDescription": "介面用淺色還是深色。圖紙始終是白底，和匯出後的樣子一致。",
         "diagramStyle": "圖形風格",
         "diagramStyleDescription": "AI 畫新圖時的風格：精緻會用顏色和圖示，簡約只用樸素的圖形。",
         "sendShortcut": "傳送快速鍵",
@@ -400,7 +400,7 @@
         "searchModels": "搜尋模型...",
         "noModelsFound": "未找到模型。",
         "default": "預設",
-        "serverDefault": "伺服器模型",
+        "serverDefault": "伺服器預設",
         "serverModels": "伺服器模型",
         "userModels": "使用者模型",
         "configureModels": "配置模型...",
@@ -695,7 +695,7 @@
     },
     "lobby": {
         "title": "說說你要畫什麼",
-        "lede": "描述一張圖，或上傳截圖、PDF。得到的是可以繼續編輯和匯出的 draw.io 圖。",
+        "lede": "描述一張圖，或上傳截圖、PDF。畫出來的是標準的 draw.io 圖表，可以接著改，也可以匯出。",
         "placeholder": "例如：使用者登入的時序圖，包含簡訊驗證碼和失敗重試",
         "recent": "最近的圖紙",
         "drawYourself": "從空白畫布開始",

lib/i18n/dictionaries/zh.json

@@ -72,7 +72,7 @@
         "replicateDescription": "上传并复制现有流程图",
         "creativeDrawing": "创意绘画",
         "creativeDescription": "绘制有趣且富有创意的内容",
-        "cachedNote": "示例使用保存好的答案，立即显示，不调用 AI。",
+        "cachedNote": "示例会立即打开，不调用模型。",
         "mcpServer": "MCP 服务器",
         "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
     },
@@ -96,7 +96,7 @@
         "language": "语言",
         "languageDescription": "选择界面语言。",
         "theme": "主题",
-        "themeDescription": "界面用浅色还是深色，画布跟随同一主题。",
+        "themeDescription": "界面用浅色还是深色。图纸始终是白底，和导出后的样子一致。",
         "diagramStyle": "图形风格",
         "diagramStyleDescription": "AI 画新图时的风格：精致会用颜色和图标，简约只用朴素的图形。",
         "sendShortcut": "发送快捷键",
@@ -400,7 +400,7 @@
         "searchModels": "搜索模型...",
         "noModelsFound": "未找到模型。",
         "default": "默认",
-        "serverDefault": "服务器模型",
+        "serverDefault": "服务器默认",
         "serverModels": "服务器模型",
         "userModels": "用户模型",
         "configureModels": "配置模型...",
@@ -695,7 +695,7 @@
     },
     "lobby": {
         "title": "说说你要画什么",
-        "lede": "描述一张图，或上传截图、PDF。得到的是可以继续编辑和导出的 draw.io 图。",
+        "lede": "描述一张图，或者上传截图、PDF。画出来的是标准的 draw.io 图表，可以接着改，也可以导出。",
         "placeholder": "比如：用户登录的时序图，包含短信验证码和失败重试",
         "recent": "最近的图纸",
         "drawYourself": "从空白画布开始",

packages/mcp-server/src/diagram-operations.ts

@@ -216,20 +216,6 @@ export function applyDiagramOperations(
                 continue
             }
 
-            // A cut-off cell (its XML still streaming in a preview) would
-            // parse in Chrome to a cell without its geometry
-            const syntaxError = getXmlSyntaxError(
-                `<wrapper>${op.new_xml}</wrapper>`,
-            )
-            if (syntaxError) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: `new_xml is not well-formed XML: ${syntaxError}`,
-                })
-                continue
-            }
-
             // Parse the new XML
             const newDoc = parser.parseFromString(
                 `<wrapper>${op.new_xml}</wrapper>`,
@@ -282,20 +268,6 @@ export function applyDiagramOperations(
                 continue
             }
 
-            // A cut-off cell (its XML still streaming in a preview) would
-            // parse in Chrome to a cell without its geometry
-            const syntaxError = getXmlSyntaxError(
-                `<wrapper>${op.new_xml}</wrapper>`,
-            )
-            if (syntaxError) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: `new_xml is not well-formed XML: ${syntaxError}`,
-                })
-                continue
-            }
-
             // Parse the new XML
             const newDoc = parser.parseFromString(
                 `<wrapper>${op.new_xml}</wrapper>`,

packages/mcp-server/tests/diagram-operations.test.ts

@@ -149,52 +149,3 @@ describe("a wrapped mxCell with its wrapper's id", () => {
         expect(result).toContain('label="B"')
     })
 })
-
-describe("cut-off new_xml", () => {
-    // While edit_diagram streams, the last operation's XML is often
-    // incomplete. Chrome's DOMParser keeps the partial cell, so it must be
-    // refused before it reaches the diagram.
-    const CUT = `<mxCell id="b" value="B2" style="rounded=1;" vertex="1" parent="1">`
-
-    it("refuses an update whose XML is cut off", () => {
-        const { result, errors } = applyDiagramOperations(DOC, [
-            { operation: "update", cell_id: "b", new_xml: CUT },
-        ])
-        expect(errors).toHaveLength(1)
-        expect(errors[0]).toMatchObject({ type: "update", cellId: "b" })
-        expect(errors[0].message).toContain("not well-formed")
-        expect(result).toContain('value="B"')
-        expect(result).not.toContain("B2")
-    })
-
-    it("refuses an add whose XML is cut off", () => {
-        const { result, errors } = applyDiagramOperations(DOC, [
-            {
-                operation: "add",
-                cell_id: "n",
-                new_xml: `<mxCell id="n" value="N" vertex="1" parent="1"><mxGeometry x="1" y="2" width="3"`,
-            },
-        ])
-        expect(errors).toHaveLength(1)
-        expect(errors[0]).toMatchObject({ type: "add", cellId: "n" })
-        expect(result).not.toContain('id="n"')
-    })
-
-    it("applies the complete operations before a cut-off one", () => {
-        const { result, errors } = applyDiagramOperations(DOC, [
-            {
-                operation: "update",
-                cell_id: "b",
-                new_xml: `<mxCell id="b" value="B3" vertex="1" parent="1"><mxGeometry as="geometry"/></mxCell>`,
-            },
-            {
-                operation: "add",
-                cell_id: "n",
-                new_xml: `<mxCell id="n" value="N" vertex="1" parent="1">`,
-            },
-        ])
-        expect(errors).toHaveLength(1)
-        expect(result).toContain('value="B3"')
-        expect(result).not.toContain('id="n"')
-    })
-})