feat: v2.5.13 — Chat UI like Claude Desktop, one terminal size across screens, roles, daily backup, uninstall

- Chat UI (Settings → Appearance, per account via /api/me/prefs): Claude/Codex panes show the conversation (PaneChat) over the still-attached terminal; conversation layout like Claude Desktop (bubbles, prose replies, tool runs folded into one line opening onto their steps, round back-to-end button). - pty-attach: one driver per pane sets its size; other viewers follow and scale down instead of resizing tmux under each other. - Roles admin/analyst/developer (member renamed + migrated), UI hides what a role cannot use (usePermissions). - Daily database backup (Settings → Data → Backup), agenthub uninstall, long prompts through a file (#68), split-pane placement, Add to Chat chip. Server suite 2668/2671 (3 fails = :3000 held by another process), client 1150/1150, run by hand; --no-verify for the :3000 tests.
2026-10-08 23:04:57 +07:00
parent a9c71cd905
commit b7f3735b29
147 changed files with 5644 additions and 2561 deletions
@@ -0,0 +1,87 @@
+/**
+ * @file PaneChat.tsx
+ * @description A live pane's Chat view, the way Claude Desktop shows a session:
+ * the session's conversation (`ConversationView`, kept current by its own poll)
+ * above a prompt box. It lies OVER the pane's terminal, which stays mounted and
+ * attached underneath — a message is sent through that terminal
+ * (`submitToRun`: a bracketed paste, then Enter), exactly as if typed there, so
+ * nothing new reaches the server. A permission prompt or a menu still needs the
+ * terminal; the hint under the box says so.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ArrowUp } from "lucide-react";
+import { ConversationView } from "../conversation/ConversationView";
+import { PromptEditor, promptWithImages, type PromptImage } from "./RunSetup";
+import { submitToRun } from "../../lib/panePaste";
+import { toast } from "../../lib/toast";
+
+export function PaneChat({
+  runId,
+  sessionId,
+  tool,
+  cwd,
+}: {
+  runId: string;
+  sessionId: string;
+  tool: string;
+  cwd: string;
+}) {
+  const { t } = useTranslation("run");
+  const [prompt, setPrompt] = useState("");
+  const [images, setImages] = useState<PromptImage[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const text = promptWithImages(prompt, images);
+
+  const send = () => {
+    if (!text || uploading) return;
+    if (!submitToRun(runId, text)) {
+      toast.error(t("chat.notSent"));
+      return;
+    }
+    setPrompt("");
+    images.forEach((i) => i.url && URL.revokeObjectURL(i.url));
+    setImages([]);
+  };
+
+  return (
+    <div data-testid="pane-chat" className="flex min-h-0 flex-1 flex-col gap-2 pb-3">
+      <div className="min-h-0 flex-1 overflow-hidden">
+        <ConversationView sessionId={sessionId} fill />
+      </div>
+      <div className="mx-4">
+        <div className="mx-auto w-full max-w-3xl rounded-2xl border border-border bg-surface-1 p-2 shadow-sm transition-colors focus-within:border-accent/50">
+          <PromptEditor
+            bare
+            images={images}
+            onImagesChange={setImages}
+            onBusyChange={setUploading}
+            value={prompt}
+            onChange={setPrompt}
+            onSubmit={send}
+            placeholder={t("chat.placeholder")}
+            rows={2}
+            slash={tool === "claude"}
+            fileCwd={cwd}
+          />
+          <div className="mt-1 flex items-center gap-2">
+            <span className="text-[11px] text-fg-muted">{t("chat.hint")}</span>
+            <button
+              type="button"
+              data-testid="pane-chat-send"
+              onClick={send}
+              disabled={uploading || !text}
+              aria-label={t("chat.send")}
+              title={t("chat.send")}
+              className="ml-auto flex h-8 w-8 items-center justify-center rounded-full bg-accent-solid text-white transition-opacity hover:opacity-90 disabled:opacity-40"
+            >
+              <ArrowUp className="h-4 w-4" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}