fix: render extension widgets next to the editor

components/ChatWindow.tsx

@@ -9,6 +9,7 @@ import { MessageView } from "./MessageView";
 import { ChatInput, type ChatInputHandle } from "./ChatInput";
 import { ChatMinimap, useMessageRefs } from "./ChatMinimap";
 import { ExtensionStatusBar } from "./ExtensionStatusBar";
+import { ExtensionWidgets } from "./ExtensionWidgets";
 import { useI18n } from "@/hooks/useI18n";
 import { useAgentSession, type AgentPhase, type NoticeItem } from "@/hooks/useAgentSession";
 import { useAudio } from "@/hooks/useAudio";
@@ -486,7 +487,9 @@ export function ChatWindow({ session, newSessionCwd, onAgentEnd, onSessionCreate
               </div>
             </div>
             <NoticeShelf notices={notices} align="right" />
+            <ExtensionWidgets widgets={aboveEditorWidgets} />
             {chatInputElement}
+            <ExtensionWidgets widgets={belowEditorWidgets} />
           </div>
         </div>
       ) : (
@@ -510,8 +513,6 @@ export function ChatWindow({ session, newSessionCwd, onAgentEnd, onSessionCreate
         <div ref={scrollContainerRef} className="min-w-0 flex-1 overflow-x-hidden overflow-y-auto pt-4 [scrollbar-width:none]">
           <div style={{ minWidth: 0, padding: `0 ${CHAT_COLUMN_PADDING}px` }}>
             <div style={{ width: "100%", minWidth: 0, maxWidth: 820, margin: "0 auto" }}>
-              <ExtensionWidgets widgets={aboveEditorWidgets} />
-
             {(() => {
               const toolResultsMap = new Map<string, ToolResultMessage>();
               for (const msg of messages) {
@@ -746,40 +747,24 @@ export function ChatWindow({ session, newSessionCwd, onAgentEnd, onSessionCreate
           }}
         >
           <div style={{ maxWidth: 820, margin: "0 auto" }}>
-            <ExtensionWidgets widgets={belowEditorWidgets} />
+            <ExtensionWidgets widgets={aboveEditorWidgets} />
           </div>
         </div>
         {chatInputElement}
-        <ExtensionStatusBar statuses={extensionStatuses} />
-      </div>
-      </>
-      )}
-    </div>
-  );
-}
-
-function ExtensionWidgets({ widgets }: { widgets: Array<{ key: string; lines: string[] }> }) {
-  if (widgets.length === 0) return null;
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 10 }}>
-      {widgets.map((widget) => (
         <div
-          key={widget.key}
           style={{
-            border: "1px solid var(--border)",
-            borderRadius: 7,
-            background: "var(--bg-panel)",
-            overflow: "hidden",
+            padding: `0 ${CHAT_COLUMN_PADDING}px`,
+            paddingRight: isMobile ? CHAT_COLUMN_PADDING : CHAT_INPUT_RIGHT_PADDING,
           }}
         >
-          <div style={{ padding: "5px 9px", borderBottom: "1px solid var(--border)", color: "var(--text-dim)", fontSize: 11, fontFamily: "var(--font-mono)" }}>
-            {widget.key}
+          <div style={{ maxWidth: 820, margin: "0 auto" }}>
+            <ExtensionWidgets widgets={belowEditorWidgets} />
           </div>
-          <pre style={{ margin: 0, padding: "8px 9px", color: "var(--text-muted)", fontSize: 12, lineHeight: 1.5, whiteSpace: "pre-wrap", wordBreak: "break-word", fontFamily: "var(--font-mono)" }}>
-            {widget.lines.join("\n")}
-          </pre>
         </div>
-      ))}
+        <ExtensionStatusBar statuses={extensionStatuses} />
+      </div>
+      </>
+      )}
     </div>
   );
 }

components/ExtensionWidgets.test.mjs

@@ -0,0 +1,41 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { createJiti } from "jiti";
+
+const jiti = createJiti(import.meta.url, {
+  jsx: { runtime: "automatic" },
+  tsconfigPaths: true,
+});
+const {
+  ExtensionWidgets,
+  MAX_EXTENSION_WIDGET_LINES,
+} = await jiti.import("./ExtensionWidgets.tsx");
+
+test("renders short extension widgets without a truncation marker", () => {
+  const html = renderToStaticMarkup(
+    React.createElement(ExtensionWidgets, {
+      widgets: [{ key: "short", lines: ["first", "second"] }],
+    }),
+  );
+
+  assert.match(html, /first\nsecond/);
+  assert.doesNotMatch(html, /widget truncated/);
+});
+
+test("matches the Pi TUI extension widget line limit", () => {
+  const lines = Array.from(
+    { length: MAX_EXTENSION_WIDGET_LINES + 2 },
+    (_, index) => `line-${index + 1}`,
+  );
+  const html = renderToStaticMarkup(
+    React.createElement(ExtensionWidgets, {
+      widgets: [{ key: "long", lines }],
+    }),
+  );
+
+  assert.match(html, new RegExp(`line-${MAX_EXTENSION_WIDGET_LINES}`));
+  assert.doesNotMatch(html, new RegExp(`line-${MAX_EXTENSION_WIDGET_LINES + 1}`));
+  assert.match(html, /\.\.\. \(widget truncated\)/);
+});

components/ExtensionWidgets.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+export const MAX_EXTENSION_WIDGET_LINES = 10;
+
+function getDisplayLines(lines: string[]): string[] {
+  if (lines.length <= MAX_EXTENSION_WIDGET_LINES) return lines;
+  return [
+    ...lines.slice(0, MAX_EXTENSION_WIDGET_LINES),
+    "... (widget truncated)",
+  ];
+}
+
+export function ExtensionWidgets({ widgets }: { widgets: Array<{ key: string; lines: string[] }> }) {
+  if (widgets.length === 0) return null;
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 8, marginBottom: 10 }}>
+      {widgets.map((widget) => (
+        <div
+          key={widget.key}
+          style={{
+            border: "1px solid var(--border)",
+            borderRadius: 7,
+            background: "var(--bg-panel)",
+            overflow: "hidden",
+          }}
+        >
+          <div style={{ padding: "5px 9px", borderBottom: "1px solid var(--border)", color: "var(--text-dim)", fontSize: 11, fontFamily: "var(--font-mono)" }}>
+            {widget.key}
+          </div>
+          <pre style={{ margin: 0, padding: "8px 9px", color: "var(--text-muted)", fontSize: 12, lineHeight: 1.5, whiteSpace: "pre-wrap", wordBreak: "break-word", fontFamily: "var(--font-mono)" }}>
+            {getDisplayLines(widget.lines).join("\n")}
+          </pre>
+        </div>
+      ))}
+    </div>
+  );
+}