@xenide-io/the-old-ui-theme 0.9.8 → 0.9.9

package/dist/suite.d.mts

@@ -486,7 +486,7 @@ interface SuiteAiChatMessage {
  * Suite-wide Ask AI chat — Notion-style continuous thread.
  * Lives in the sidebar (or any parent that mounts it). Not Kraken Deep Research.
  */
-declare function SuiteAiPanel({ presets, emptyState, title, fetchChat, sendMessage, clearChat, brandIcon: BrandIcon, spinner: Spinner, open: openProp, onOpenChange, suiteAppBases, onSwitchApp, onSameAppNavigate, resolveAction, isWaitingForReply, }: {
+declare function SuiteAiPanel({ presets, emptyState, title, fetchChat, sendMessage, editMessage, cancelMessage, clearChat, brandIcon: BrandIcon, spinner: Spinner, open: openProp, onOpenChange, suiteAppBases, onSwitchApp, onSameAppNavigate, resolveAction, isWaitingForReply, }: {
     presets?: SuiteAiPreset[];
     emptyState?: ReactNode;
     title?: string;
@@ -505,6 +505,19 @@ declare function SuiteAiPanel({ presets, emptyState, title, fetchChat, sendMessa
         messages: SuiteAiChatMessage[];
         reply: string;
     }>;
+    /** Rewrite the thread from a user message. Falls back to sendMessage. */
+    editMessage?: (params: {
+        index: number;
+        prompt: string;
+        signal?: AbortSignal;
+    }) => Promise<{
+        messages: SuiteAiChatMessage[];
+        reply: string;
+    }>;
+    /** Stop the in-flight reply on the server. */
+    cancelMessage?: () => Promise<{
+        messages?: SuiteAiChatMessage[];
+    }>;
     clearChat: () => Promise<void>;
     brandIcon?: ComponentType<{
         className?: string;

package/dist/suite.d.ts

@@ -486,7 +486,7 @@ interface SuiteAiChatMessage {
  * Suite-wide Ask AI chat — Notion-style continuous thread.
  * Lives in the sidebar (or any parent that mounts it). Not Kraken Deep Research.
  */
-declare function SuiteAiPanel({ presets, emptyState, title, fetchChat, sendMessage, clearChat, brandIcon: BrandIcon, spinner: Spinner, open: openProp, onOpenChange, suiteAppBases, onSwitchApp, onSameAppNavigate, resolveAction, isWaitingForReply, }: {
+declare function SuiteAiPanel({ presets, emptyState, title, fetchChat, sendMessage, editMessage, cancelMessage, clearChat, brandIcon: BrandIcon, spinner: Spinner, open: openProp, onOpenChange, suiteAppBases, onSwitchApp, onSameAppNavigate, resolveAction, isWaitingForReply, }: {
     presets?: SuiteAiPreset[];
     emptyState?: ReactNode;
     title?: string;
@@ -505,6 +505,19 @@ declare function SuiteAiPanel({ presets, emptyState, title, fetchChat, sendMessa
         messages: SuiteAiChatMessage[];
         reply: string;
     }>;
+    /** Rewrite the thread from a user message. Falls back to sendMessage. */
+    editMessage?: (params: {
+        index: number;
+        prompt: string;
+        signal?: AbortSignal;
+    }) => Promise<{
+        messages: SuiteAiChatMessage[];
+        reply: string;
+    }>;
+    /** Stop the in-flight reply on the server. */
+    cancelMessage?: () => Promise<{
+        messages?: SuiteAiChatMessage[];
+    }>;
     clearChat: () => Promise<void>;
     brandIcon?: ComponentType<{
         className?: string;

package/dist/suite.js

@@ -3493,6 +3493,8 @@ function SuiteAiPanel({
   title = "Shelly AI",
   fetchChat,
   sendMessage,
+  editMessage,
+  cancelMessage,
   clearChat,
   brandIcon: BrandIcon,
   spinner: Spinner,
@@ -3526,6 +3528,9 @@ function SuiteAiPanel({
   const textareaRef = (0, import_react12.useRef)(null);
   const abortRef = (0, import_react12.useRef)(null);
   const pendingPromptRef = (0, import_react12.useRef)(null);
+  const [editingIndex, setEditingIndex] = (0, import_react12.useState)(null);
+  const [editDraft, setEditDraft] = (0, import_react12.useState)("");
+  const [copiedIndex, setCopiedIndex] = (0, import_react12.useState)(null);
   const waiting = loading || isWaitingForReply;
   (0, import_react12.useEffect)(() => {
     function onOpen(event) {
@@ -3652,6 +3657,11 @@ function SuiteAiPanel({
     (_a = abortRef.current) == null ? void 0 : _a.abort();
     abortRef.current = null;
     setLoading(false);
+    if (!cancelMessage) return;
+    void cancelMessage().then((result) => {
+      if (result == null ? void 0 : result.messages) setMessages(result.messages);
+    }).catch(() => {
+    });
   }
   function retry() {
     var _a;
@@ -3660,6 +3670,55 @@ function SuiteAiPanel({
     if (lastUser) void ask(lastUser);
     else void hydrate();
   }
+  async function saveEdit(index) {
+    var _a;
+    const trimmed = editDraft.trim();
+    if (!trimmed || waiting) return;
+    setEditingIndex(null);
+    setEditDraft("");
+    setError("");
+    setAtBottom(true);
+    setMessages((prev) => prev.slice(0, index));
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setLoading(true);
+    try {
+      const result = editMessage ? await editMessage({
+        index,
+        prompt: trimmed,
+        signal: controller.signal
+      }) : await sendMessage({ prompt: trimmed, signal: controller.signal });
+      if (controller.signal.aborted) return;
+      const nextMessages = (_a = result.messages) != null ? _a : [];
+      setMessages(nextMessages);
+      notifySuiteMutated(
+        nextMessages.flatMap((message) => {
+          var _a2;
+          return (_a2 = message.actions) != null ? _a2 : [];
+        })
+      );
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      setError(
+        err instanceof Error ? err.message : "The AI request failed. Try again."
+      );
+      void hydrate();
+    } finally {
+      if (abortRef.current === controller) abortRef.current = null;
+      setLoading(false);
+    }
+  }
+  async function handleCopy(index, content) {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopiedIndex(index);
+      window.setTimeout(
+        () => setCopiedIndex((current) => current === index ? null : current),
+        1500
+      );
+    } catch (e) {
+    }
+  }
   async function handleClear() {
     if (loading) return;
     try {
@@ -3792,12 +3851,99 @@ function SuiteAiPanel({
                   var _a;
                   const isUser = message.role === "user";
                   if (isUser) {
+                    if (editingIndex === index) {
+                      return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                        "div",
+                        {
+                          className: "suite-msg-in suite-msg-in--user flex justify-end",
+                          "data-test": "ask-ai-user",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "w-full max-w-[85%] space-y-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                              "textarea",
+                              {
+                                autoFocus: true,
+                                value: editDraft,
+                                onChange: (event) => setEditDraft(event.target.value),
+                                onKeyDown: (event) => {
+                                  if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+                                    event.preventDefault();
+                                    void saveEdit(index);
+                                  }
+                                  if (event.key === "Escape") {
+                                    setEditingIndex(null);
+                                    setEditDraft("");
+                                  }
+                                },
+                                rows: 2,
+                                "data-test": "ask-ai-edit-input",
+                                className: "w-full resize-none rounded-2xl rounded-br-md border border-ph-border bg-ph-surface px-3 py-2 text-sm leading-relaxed text-ph-ink outline-none focus-visible:border-ph-brand/45 focus-visible:ring-2 focus-visible:ring-ph-focus/35"
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-end gap-2", children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => {
+                                    setEditingIndex(null);
+                                    setEditDraft("");
+                                  },
+                                  className: "inline-flex min-h-8 items-center rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
+                                  children: "Cancel"
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                                "button",
+                                {
+                                  type: "button",
+                                  "data-test": "ask-ai-edit-save",
+                                  disabled: !editDraft.trim() || waiting,
+                                  onClick: () => void saveEdit(index),
+                                  className: "inline-flex min-h-8 items-center rounded-lg bg-ph-brand px-2.5 text-xs font-medium text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
+                                  children: "Save"
+                                }
+                              )
+                            ] })
+                          ] })
+                        },
+                        `user-${index}`
+                      );
+                    }
                     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "div",
                       {
                         className: "suite-msg-in suite-msg-in--user flex justify-end",
                         "data-test": "ask-ai-user",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]", children: message.content })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "group flex items-end gap-1.5", children: [
+                          !waiting ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mb-0.5 flex items-center gap-0.5 opacity-100 transition-opacity [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:opacity-100", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => void handleCopy(index, message.content),
+                                "aria-label": copiedIndex === index ? "Copied" : "Copy message",
+                                "data-test": "ask-ai-copy",
+                                className: "flex h-7 w-7 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
+                                children: copiedIndex === index ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_iconoir_react8.Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_iconoir_react8.Copy, { className: "h-3.5 w-3.5" })
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => {
+                                  setEditDraft(message.content);
+                                  setEditingIndex(index);
+                                },
+                                "aria-label": "Edit message",
+                                "data-test": "ask-ai-edit",
+                                className: "flex h-7 w-7 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_iconoir_react8.EditPencil, { className: "h-3.5 w-3.5" })
+                              }
+                            )
+                          ] }) : null,
+                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]", children: message.content })
+                        ] })
                       },
                       `user-${index}`
                     );

package/dist/suite.mjs

@@ -2390,6 +2390,9 @@ import {
 import {
   ArrowDown,
   ArrowUp,
+  Check,
+  Copy,
+  EditPencil,
   Erase,
   Sparks,
   Square,
@@ -2470,6 +2473,8 @@ function SuiteAiPanel({
   title = "Shelly AI",
   fetchChat,
   sendMessage,
+  editMessage,
+  cancelMessage,
   clearChat,
   brandIcon: BrandIcon,
   spinner: Spinner,
@@ -2503,6 +2508,9 @@ function SuiteAiPanel({
   const textareaRef = useRef3(null);
   const abortRef = useRef3(null);
   const pendingPromptRef = useRef3(null);
+  const [editingIndex, setEditingIndex] = useState8(null);
+  const [editDraft, setEditDraft] = useState8("");
+  const [copiedIndex, setCopiedIndex] = useState8(null);
   const waiting = loading || isWaitingForReply;
   useEffect7(() => {
     function onOpen(event) {
@@ -2629,6 +2637,11 @@ function SuiteAiPanel({
     (_a = abortRef.current) == null ? void 0 : _a.abort();
     abortRef.current = null;
     setLoading(false);
+    if (!cancelMessage) return;
+    void cancelMessage().then((result) => {
+      if (result == null ? void 0 : result.messages) setMessages(result.messages);
+    }).catch(() => {
+    });
   }
   function retry() {
     var _a;
@@ -2637,6 +2650,55 @@ function SuiteAiPanel({
     if (lastUser) void ask(lastUser);
     else void hydrate();
   }
+  async function saveEdit(index) {
+    var _a;
+    const trimmed = editDraft.trim();
+    if (!trimmed || waiting) return;
+    setEditingIndex(null);
+    setEditDraft("");
+    setError("");
+    setAtBottom(true);
+    setMessages((prev) => prev.slice(0, index));
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setLoading(true);
+    try {
+      const result = editMessage ? await editMessage({
+        index,
+        prompt: trimmed,
+        signal: controller.signal
+      }) : await sendMessage({ prompt: trimmed, signal: controller.signal });
+      if (controller.signal.aborted) return;
+      const nextMessages = (_a = result.messages) != null ? _a : [];
+      setMessages(nextMessages);
+      notifySuiteMutated(
+        nextMessages.flatMap((message) => {
+          var _a2;
+          return (_a2 = message.actions) != null ? _a2 : [];
+        })
+      );
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      setError(
+        err instanceof Error ? err.message : "The AI request failed. Try again."
+      );
+      void hydrate();
+    } finally {
+      if (abortRef.current === controller) abortRef.current = null;
+      setLoading(false);
+    }
+  }
+  async function handleCopy(index, content) {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopiedIndex(index);
+      window.setTimeout(
+        () => setCopiedIndex((current) => current === index ? null : current),
+        1500
+      );
+    } catch (e) {
+    }
+  }
   async function handleClear() {
     if (loading) return;
     try {
@@ -2769,12 +2831,99 @@ function SuiteAiPanel({
                   var _a;
                   const isUser = message.role === "user";
                   if (isUser) {
+                    if (editingIndex === index) {
+                      return /* @__PURE__ */ jsx17(
+                        "div",
+                        {
+                          className: "suite-msg-in suite-msg-in--user flex justify-end",
+                          "data-test": "ask-ai-user",
+                          children: /* @__PURE__ */ jsxs14("div", { className: "w-full max-w-[85%] space-y-2", children: [
+                            /* @__PURE__ */ jsx17(
+                              "textarea",
+                              {
+                                autoFocus: true,
+                                value: editDraft,
+                                onChange: (event) => setEditDraft(event.target.value),
+                                onKeyDown: (event) => {
+                                  if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+                                    event.preventDefault();
+                                    void saveEdit(index);
+                                  }
+                                  if (event.key === "Escape") {
+                                    setEditingIndex(null);
+                                    setEditDraft("");
+                                  }
+                                },
+                                rows: 2,
+                                "data-test": "ask-ai-edit-input",
+                                className: "w-full resize-none rounded-2xl rounded-br-md border border-ph-border bg-ph-surface px-3 py-2 text-sm leading-relaxed text-ph-ink outline-none focus-visible:border-ph-brand/45 focus-visible:ring-2 focus-visible:ring-ph-focus/35"
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs14("div", { className: "flex justify-end gap-2", children: [
+                              /* @__PURE__ */ jsx17(
+                                "button",
+                                {
+                                  type: "button",
+                                  onClick: () => {
+                                    setEditingIndex(null);
+                                    setEditDraft("");
+                                  },
+                                  className: "inline-flex min-h-8 items-center rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
+                                  children: "Cancel"
+                                }
+                              ),
+                              /* @__PURE__ */ jsx17(
+                                "button",
+                                {
+                                  type: "button",
+                                  "data-test": "ask-ai-edit-save",
+                                  disabled: !editDraft.trim() || waiting,
+                                  onClick: () => void saveEdit(index),
+                                  className: "inline-flex min-h-8 items-center rounded-lg bg-ph-brand px-2.5 text-xs font-medium text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
+                                  children: "Save"
+                                }
+                              )
+                            ] })
+                          ] })
+                        },
+                        `user-${index}`
+                      );
+                    }
                     return /* @__PURE__ */ jsx17(
                       "div",
                       {
                         className: "suite-msg-in suite-msg-in--user flex justify-end",
                         "data-test": "ask-ai-user",
-                        children: /* @__PURE__ */ jsx17("div", { className: "w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]", children: message.content })
+                        children: /* @__PURE__ */ jsxs14("div", { className: "group flex items-end gap-1.5", children: [
+                          !waiting ? /* @__PURE__ */ jsxs14("div", { className: "mb-0.5 flex items-center gap-0.5 opacity-100 transition-opacity [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:opacity-100", children: [
+                            /* @__PURE__ */ jsx17(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => void handleCopy(index, message.content),
+                                "aria-label": copiedIndex === index ? "Copied" : "Copy message",
+                                "data-test": "ask-ai-copy",
+                                className: "flex h-7 w-7 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
+                                children: copiedIndex === index ? /* @__PURE__ */ jsx17(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx17(Copy, { className: "h-3.5 w-3.5" })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx17(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => {
+                                  setEditDraft(message.content);
+                                  setEditingIndex(index);
+                                },
+                                "aria-label": "Edit message",
+                                "data-test": "ask-ai-edit",
+                                className: "flex h-7 w-7 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
+                                children: /* @__PURE__ */ jsx17(EditPencil, { className: "h-3.5 w-3.5" })
+                              }
+                            )
+                          ] }) : null,
+                          /* @__PURE__ */ jsx17("div", { className: "w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]", children: message.content })
+                        ] })
                       },
                       `user-${index}`
                     );
@@ -2977,7 +3126,7 @@ function SuiteAiPanel({
 
 // src/suite/components/workspace-switcher.tsx
 import { useState as useState9 } from "react";
-import { Building, Check, NavArrowDown } from "iconoir-react";
+import { Building, Check as Check2, NavArrowDown } from "iconoir-react";
 import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function SuiteWorkspaceSwitcher({
   workspaces = [],
@@ -3062,7 +3211,7 @@ function SuiteWorkspaceSwitcher({
                       workspace.description ? /* @__PURE__ */ jsx18("span", { className: "block truncate text-xs text-ph-mutedtext", children: workspace.description }) : null
                     ] }),
                     workspace.id === currentId ? /* @__PURE__ */ jsx18(
-                      Check,
+                      Check2,
                       {
                         className: "h-4 w-4 shrink-0 text-ph-brand",
                         "aria-hidden": "true"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/suite/components/ai-panel.tsx

@@ -16,6 +16,9 @@ import {
 import {
   ArrowDown,
   ArrowUp,
+  Check,
+  Copy,
+  EditPencil,
   Erase,
   Sparks,
   Square,
@@ -157,6 +160,8 @@ export function SuiteAiPanel({
   title = "Shelly AI",
   fetchChat,
   sendMessage,
+  editMessage,
+  cancelMessage,
   clearChat,
   brandIcon: BrandIcon,
   spinner: Spinner,
@@ -180,6 +185,14 @@ export function SuiteAiPanel({
     prompt: string;
     signal?: AbortSignal;
   }) => Promise<{ messages: SuiteAiChatMessage[]; reply: string }>;
+  /** Rewrite the thread from a user message. Falls back to sendMessage. */
+  editMessage?: (params: {
+    index: number;
+    prompt: string;
+    signal?: AbortSignal;
+  }) => Promise<{ messages: SuiteAiChatMessage[]; reply: string }>;
+  /** Stop the in-flight reply on the server. */
+  cancelMessage?: () => Promise<{ messages?: SuiteAiChatMessage[] }>;
   clearChat: () => Promise<void>;
   brandIcon?: ComponentType<{ className?: string }>;
   spinner: ComponentType<{ className?: string }>;
@@ -220,6 +233,9 @@ export function SuiteAiPanel({
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const abortRef = useRef<AbortController | null>(null);
   const pendingPromptRef = useRef<string | null>(null);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [editDraft, setEditDraft] = useState("");
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
   const waiting = loading || isWaitingForReply;
 
   useEffect(() => {
@@ -356,6 +372,14 @@ export function SuiteAiPanel({
     abortRef.current?.abort();
     abortRef.current = null;
     setLoading(false);
+    if (!cancelMessage) return;
+    void cancelMessage()
+      .then((result) => {
+        if (result?.messages) setMessages(result.messages);
+      })
+      .catch(() => {
+        // Best-effort server cancel; the local abort already stopped the UI.
+      });
   }
 
   function retry() {
@@ -367,6 +391,58 @@ export function SuiteAiPanel({
     else void hydrate();
   }
 
+  async function saveEdit(index: number) {
+    const trimmed = editDraft.trim();
+    if (!trimmed || waiting) return;
+    setEditingIndex(null);
+    setEditDraft("");
+    setError("");
+    setAtBottom(true);
+    setMessages((prev) => prev.slice(0, index));
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setLoading(true);
+    try {
+      const result = editMessage
+        ? await editMessage({
+            index,
+            prompt: trimmed,
+            signal: controller.signal,
+          })
+        : await sendMessage({ prompt: trimmed, signal: controller.signal });
+      if (controller.signal.aborted) return;
+      const nextMessages = result.messages ?? [];
+      setMessages(nextMessages);
+      notifySuiteMutated(
+        nextMessages.flatMap((message) => message.actions ?? []),
+      );
+    } catch (err) {
+      if (controller.signal.aborted) return;
+      setError(
+        err instanceof Error
+          ? err.message
+          : "The AI request failed. Try again.",
+      );
+      void hydrate();
+    } finally {
+      if (abortRef.current === controller) abortRef.current = null;
+      setLoading(false);
+    }
+  }
+
+  async function handleCopy(index: number, content: string) {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopiedIndex(index);
+      window.setTimeout(
+        () => setCopiedIndex((current) => (current === index ? null : current)),
+        1500,
+      );
+    } catch {
+      // clipboard unavailable
+    }
+  }
+
   async function handleClear() {
     if (loading) return;
     try {
@@ -516,14 +592,102 @@ export function SuiteAiPanel({
           {messages.map((message, index) => {
             const isUser = message.role === "user";
             if (isUser) {
+              if (editingIndex === index) {
+                return (
+                  <div
+                    key={`user-${index}`}
+                    className="suite-msg-in suite-msg-in--user flex justify-end"
+                    data-test="ask-ai-user"
+                  >
+                    <div className="w-full max-w-[85%] space-y-2">
+                      <textarea
+                        autoFocus
+                        value={editDraft}
+                        onChange={(event) => setEditDraft(event.target.value)}
+                        onKeyDown={(event) => {
+                          if (
+                            event.key === "Enter" &&
+                            !event.shiftKey &&
+                            !event.nativeEvent.isComposing
+                          ) {
+                            event.preventDefault();
+                            void saveEdit(index);
+                          }
+                          if (event.key === "Escape") {
+                            setEditingIndex(null);
+                            setEditDraft("");
+                          }
+                        }}
+                        rows={2}
+                        data-test="ask-ai-edit-input"
+                        className="w-full resize-none rounded-2xl rounded-br-md border border-ph-border bg-ph-surface px-3 py-2 text-sm leading-relaxed text-ph-ink outline-none focus-visible:border-ph-brand/45 focus-visible:ring-2 focus-visible:ring-ph-focus/35"
+                      />
+                      <div className="flex justify-end gap-2">
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setEditingIndex(null);
+                            setEditDraft("");
+                          }}
+                          className="inline-flex min-h-8 items-center rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus"
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          type="button"
+                          data-test="ask-ai-edit-save"
+                          disabled={!editDraft.trim() || waiting}
+                          onClick={() => void saveEdit(index)}
+                          className="inline-flex min-h-8 items-center rounded-lg bg-ph-brand px-2.5 text-xs font-medium text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40"
+                        >
+                          Save
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                );
+              }
               return (
                 <div
                   key={`user-${index}`}
                   className="suite-msg-in suite-msg-in--user flex justify-end"
                   data-test="ask-ai-user"
                 >
-                  <div className="w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]">
-                    {message.content}
+                  <div className="group flex items-end gap-1.5">
+                    {!waiting ? (
+                      <div className="mb-0.5 flex items-center gap-0.5 opacity-100 transition-opacity [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:opacity-100">
+                        <button
+                          type="button"
+                          onClick={() => void handleCopy(index, message.content)}
+                          aria-label={
+                            copiedIndex === index ? "Copied" : "Copy message"
+                          }
+                          data-test="ask-ai-copy"
+                          className="flex h-7 w-7 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus"
+                        >
+                          {copiedIndex === index ? (
+                            <Check className="h-3.5 w-3.5" />
+                          ) : (
+                            <Copy className="h-3.5 w-3.5" />
+                          )}
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setEditDraft(message.content);
+                            setEditingIndex(index);
+                          }}
+                          aria-label="Edit message"
+                          data-test="ask-ai-edit"
+                          className="flex h-7 w-7 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus"
+                        >
+                          <EditPencil className="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                    ) : null}
+                    <div className="w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand px-3 py-2 text-sm leading-relaxed text-[var(--ph-on-accent)] [overflow-wrap:anywhere]">
+                      {message.content}
+                    </div>
                   </div>
                 </div>
               );