🤖 refactor: rework edit mode UI to match app aesthetic (#1143)

## Summary

Reworks the editing message UI components to align with the rest of the
app's visual language.

### Changes

- **Color scheme**: Updated edit mode colors from green (`hsl(120)`) to
warm amber (`hsl(38)`) across all themes
- **EditCutoffBarrier**: New component following the app's barrier
pattern (like `InterruptedBarrier`, `RetryBarrier`) with gradient lines
and centered badge
- **Storybook**: Added `EditingMessage` story demonstrating the editing
state with amber input border and cutoff barrier

### Visual Changes

- Textarea border when editing a message: now amber instead of orange
- Edit cutoff barrier: now uses consistent barrier styling with gradient
lines
- Warning color language now consistent with `--color-interrupted`

---
_Generated with `mux` • Model: `claude-sonnet-4-20250514` • Thinking:
`low`_

Author: ammar-agent

src/browser/components/AIView.tsx

@@ -10,6 +10,7 @@ import React, {
 import { cn } from "@/common/lib/utils";
 import { MessageRenderer } from "./Messages/MessageRenderer";
 import { InterruptedBarrier } from "./Messages/ChatBarrier/InterruptedBarrier";
+import { EditCutoffBarrier } from "./Messages/ChatBarrier/EditCutoffBarrier";
 import { StreamingBarrier } from "./Messages/ChatBarrier/StreamingBarrier";
 import { RetryBarrier } from "./Messages/ChatBarrier/RetryBarrier";
 import { PinnedTodoList } from "./PinnedTodoList";
@@ -657,11 +658,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
                             }}
                           />
                         )}
-                        {isAtCutoff && (
-                          <div className="edit-cutoff-divider text-edit-mode bg-edit-mode/10 my-5 px-[15px] py-3 text-center text-xs font-medium">
-                            ⚠️ Messages below this line will be removed when you submit the edit
-                          </div>
-                        )}
+                        {isAtCutoff && <EditCutoffBarrier />}
                         {shouldShowInterruptedBarrier(msg) && <InterruptedBarrier />}
                       </React.Fragment>
                     );

src/browser/components/Messages/ChatBarrier/EditCutoffBarrier.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { cn } from "@/common/lib/utils";
+
+interface EditCutoffBarrierProps {
+  className?: string;
+}
+
+/**
+ * Barrier shown when editing a message to indicate where the cutoff point is.
+ * Messages below this barrier will be removed when the edit is submitted.
+ */
+export const EditCutoffBarrier: React.FC<EditCutoffBarrierProps> = ({ className }) => {
+  return (
+    <div className={cn("flex items-center gap-3 py-3 my-4", className)}>
+      <div
+        className="h-px flex-1"
+        style={{
+          background: `linear-gradient(to right, transparent, var(--color-edit-mode) 20%, var(--color-edit-mode) 80%, transparent)`,
+        }}
+      />
+      <div className="border-edit-mode/30 bg-edit-mode/10 text-edit-mode flex items-center gap-2 rounded-md border px-3 py-1.5 text-[11px] font-medium">
+        <span className="text-sm">⚠️</span>
+        <span>Messages below will be removed when you submit</span>
+      </div>
+      <div
+        className="h-px flex-1"
+        style={{
+          background: `linear-gradient(to right, transparent, var(--color-edit-mode) 20%, var(--color-edit-mode) 80%, transparent)`,
+        }}
+      />
+    </div>
+  );
+};

src/browser/stories/App.chat.stories.tsx

@@ -16,7 +16,7 @@ import {
 } from "./mockFactory";
 import { updatePersistedState } from "@/browser/hooks/usePersistedState";
 import { getModelKey } from "@/common/constants/storage";
-import { setupSimpleChatStory, setupStreamingChatStory } from "./storyHelpers";
+import { setupSimpleChatStory, setupStreamingChatStory, setWorkspaceInput } from "./storyHelpers";
 import { within, userEvent, waitFor } from "@storybook/test";
 
 export default {
@@ -663,3 +663,95 @@ export const ModelSelectorPrettyWithGateway: AppStory = {
     },
   },
 };
+
+/**
+ * Editing message state - shows the edit cutoff barrier and amber-styled input.
+ * Demonstrates the UI when a user clicks "Edit" on a previous message.
+ */
+export const EditingMessage: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() => {
+        const workspaceId = "ws-editing";
+
+        // Ensure a deterministic starting state (Chromatic/Storybook can preserve localStorage
+        // across story runs in the same session).
+        setWorkspaceInput(workspaceId, "");
+
+        return setupSimpleChatStory({
+          workspaceId,
+          messages: [
+            createUserMessage("msg-1", "Add authentication to the user API endpoint", {
+              historySequence: 1,
+              timestamp: STABLE_TIMESTAMP - 300000,
+            }),
+            createAssistantMessage(
+              "msg-2",
+              "I'll help you add authentication. Let me check the current implementation and add JWT validation.",
+              {
+                historySequence: 2,
+                timestamp: STABLE_TIMESTAMP - 290000,
+                toolCalls: [
+                  createFileReadTool(
+                    "call-1",
+                    "src/api/users.ts",
+                    "export function getUser(req, res) {\n  const user = db.users.find(req.params.id);\n  res.json(user);\n}"
+                  ),
+                ],
+              }
+            ),
+            createUserMessage("msg-3", "Actually, can you use a different approach?", {
+              historySequence: 3,
+              timestamp: STABLE_TIMESTAMP - 280000,
+            }),
+            createAssistantMessage(
+              "msg-4",
+              "Of course! I can use a different authentication approach. What would you prefer?",
+              {
+                historySequence: 4,
+                timestamp: STABLE_TIMESTAMP - 270000,
+              }
+            ),
+          ],
+        });
+      }}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    const storyRoot = document.getElementById("storybook-root") ?? canvasElement;
+    const canvas = within(storyRoot);
+
+    // Wait for user message actions to render (Edit buttons only appear on user messages)
+    const editButtons = await canvas.findAllByLabelText("Edit", {}, { timeout: 10000 });
+    if (editButtons.length === 0) throw new Error("No edit buttons found");
+
+    // Click edit on the first user message
+    await userEvent.click(editButtons[0]);
+
+    // Wait for the editing state to be applied
+    await waitFor(
+      () => {
+        const textarea = canvas.getByLabelText("Edit your last message");
+        if (!textarea.className.includes("border-editing-mode")) {
+          throw new Error("Textarea not in editing state");
+        }
+      },
+      { timeout: 2000 }
+    );
+
+    // Verify the edit cutoff barrier appears
+    await canvas.findByText(
+      "Messages below will be removed when you submit",
+      {},
+      { timeout: 2000 }
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Shows the editing message state with the amber-styled input border and edit cutoff barrier indicating messages that will be removed.",
+      },
+    },
+  },
+};

src/browser/styles/globals.css

@@ -53,13 +53,15 @@
     --color-exec-mode-hover: hsl(268.56 94.04% 67%);
     --color-exec-mode-light: hsl(268.56 94.04% 78%);
 
-    --color-edit-mode: hsl(120 50% 35%);
-    --color-edit-mode-hover: hsl(120 50% 47%);
-    --color-edit-mode-light: hsl(120 50% 62%);
+    /* Edit mode: amber/gold for editing warnings and barriers */
+    --color-edit-mode: hsl(38 80% 45%);
+    --color-edit-mode-hover: hsl(38 80% 55%);
+    --color-edit-mode-light: hsl(38 80% 65%);
 
     --color-read: hsl(210 70% 40%);
-    --color-editing-mode: hsl(30 100% 50%);
-    --color-editing-mode-alpha: hsla(30 100% 50% / 0.1);
+    /* Editing state: subtle amber border when editing a message */
+    --color-editing-mode: hsl(38 70% 50%);
+    --color-editing-mode-alpha: hsla(38 70% 50% / 0.08);
     --color-pending: hsl(30 100% 70%);
 
     --color-debug-mode: hsl(214 100% 64%);
@@ -300,13 +302,6 @@
   --color-exec-mode-hover: hsl(268.56 94.04% 67%);
   --color-exec-mode-light: hsl(268.56 94.04% 78%);
 
-  --color-edit-mode: hsl(120 50% 35%);
-  --color-edit-mode-hover: hsl(120 50% 45%);
-  --color-edit-mode-light: hsl(120 50% 60%);
-
-  --color-read: hsl(210 70% 40%);
-  --color-editing-mode: hsl(30 100% 50%);
-  --color-editing-mode-alpha: hsla(30 100% 50% / 0.08);
   --color-pending: hsl(30 100% 64%);
 
   --color-debug-mode: hsl(214 100% 56%);
@@ -508,6 +503,19 @@
   /* Theme override hook: redeclare tokens inside this block to swap palettes */
 }
 
+/* Solarized themes share the same semantic/mode colors (only surfaces differ). */
+:root[data-theme="solarized-light"],
+:root[data-theme="solarized-dark"] {
+  --color-edit-mode: hsl(38 80% 40%); /* amber */
+  --color-edit-mode-hover: hsl(38 80% 50%);
+  --color-edit-mode-light: hsl(38 80% 60%);
+
+  --color-read: hsl(205 69% 49%);
+  --color-editing-mode: hsl(38 70% 45%); /* amber */
+  --color-editing-mode-alpha: hsla(38 70% 45% / 0.1);
+}
+
+
 /* Solarized Light Theme */
 :root[data-theme="solarized-light"] {
   color-scheme: light;
@@ -532,13 +540,6 @@
   --color-exec-mode-hover: hsl(237 43% 70%);
   --color-exec-mode-light: hsl(237 43% 78%);
 
-  --color-edit-mode: hsl(68 100% 30%); /* green */
-  --color-edit-mode-hover: hsl(68 100% 40%);
-  --color-edit-mode-light: hsl(68 100% 52%);
-
-  --color-read: hsl(205 69% 49%);
-  --color-editing-mode: hsl(45 100% 35%); /* yellow */
-  --color-editing-mode-alpha: hsla(45 100% 35% / 0.1);
   --color-pending: hsl(18 89% 44%); /* orange */
 
   --color-debug-mode: hsl(205 69% 49%);
@@ -747,13 +748,6 @@
   --color-exec-mode-hover: hsl(237 43% 70%);
   --color-exec-mode-light: hsl(237 43% 78%);
 
-  --color-edit-mode: hsl(68 100% 30%); /* green */
-  --color-edit-mode-hover: hsl(68 100% 40%);
-  --color-edit-mode-light: hsl(68 100% 52%);
-
-  --color-read: hsl(205 69% 49%);
-  --color-editing-mode: hsl(45 100% 35%); /* yellow */
-  --color-editing-mode-alpha: hsla(45 100% 35% / 0.1);
   --color-pending: hsl(18 89% 44%); /* orange */
 
   --color-debug-mode: hsl(205 69% 49%);