From c110965911286de7093688dfddcb069cc76f6e78 Mon Sep 17 00:00:00 2001
From: Hare <kei.hiracchi.0928@gmail.com>
Date: Fri, 21 Aug 2026 17:26:47 +0900
Subject: [PATCH] fix: remove redundant console chrome

---
 .../lib/workspace/console/ConsoleTasks.svelte |  1 -
 .../console/worker-console.ui.test.ts         | 28 +++++++++++++
 .../workers/[workerId]/console/+page.svelte   | 39 ++++++++++---------
 3 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/web/workspace/src/lib/workspace/console/ConsoleTasks.svelte b/web/workspace/src/lib/workspace/console/ConsoleTasks.svelte
index 5c0a57bc..7b461874 100644
--- a/web/workspace/src/lib/workspace/console/ConsoleTasks.svelte
+++ b/web/workspace/src/lib/workspace/console/ConsoleTasks.svelte
@@ -119,7 +119,6 @@
     display: grid;
     gap: 0.1rem;
     min-width: 0;
-    margin-bottom: -0.75rem;
     padding-inline: 0.75rem;
     font-size: 0.8rem;
     line-height: 1.35;
diff --git a/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts b/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts
index 47c808b8..610466b8 100644
--- a/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts
+++ b/web/workspace/src/lib/workspace/console/worker-console.ui.test.ts
@@ -435,6 +435,34 @@ Deno.test("Worker Console exposes a foldable timeline beside the scroll body", a
   );
 });
 
+Deno.test("Worker Console removes redundant chrome and uses shared alerts", async () => {
+  const page = await Deno.readTextFile(
+    new URL(
+      "./../../../routes/w/[workspaceId]/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte",
+      import.meta.url,
+    ),
+  );
+  const tasks = await Deno.readTextFile(
+    new URL("./ConsoleTasks.svelte", import.meta.url),
+  );
+
+  assert(
+    page.includes('<form class="console-composer"') &&
+      !page.includes('class="console-composer card"') &&
+      !page.includes(
+        "padding: var(--space-3) var(--space-6) var(--space-4)",
+      ) &&
+      page.includes('import { pushWorkspaceAlert }') &&
+      page.includes('title: "Worker control"') &&
+      page.includes('title: "Rewind targets"') &&
+      page.includes('pushWorkspaceAlert("error"') &&
+      !page.includes("controlNotice") &&
+      !page.includes("console-notice") &&
+      !tasks.includes("margin-bottom: -0.75rem"),
+    "Console should remove redundant card/spacing chrome and route control notices through workspace alerts",
+  );
+});
+
 Deno.test("Worker Console composer fits to content without manual resize", async () => {
   const consolePage = await Deno.readTextFile(
     new URL(
diff --git a/web/workspace/src/routes/w/[workspaceId]/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte b/web/workspace/src/routes/w/[workspaceId]/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte
index d2a75564..b3ecd60b 100644
--- a/web/workspace/src/routes/w/[workspaceId]/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte
+++ b/web/workspace/src/routes/w/[workspaceId]/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte
@@ -33,6 +33,7 @@
         type ConsoleViewScroll,
     } from "$lib/workspace/console/model";
     import type { Event as ProtocolEvent, Method as ProtocolMethod, RewindTarget, Segment } from "$lib/generated/protocol";
+    import { pushWorkspaceAlert } from "$lib/workspace/alerts/store";
     import { workspaceApiPath } from "$lib/workspace/api/http";
     import { workspaceMultiplexer, type WorkspaceMultiplexerSubscription } from "$lib/workspace/multiplexer";
     import type {
@@ -111,7 +112,6 @@
     let sendError = $state<string | null>(null);
     let rewindTargets = $state<RewindTarget[]>([]);
     let rewindHeadEntries = $state(0);
-    let controlNotice = $state<string | null>(null);
     let composerNotice = $state<string | null>(null);
     let protocolState = $state<"connecting" | "open" | "closed" | "error">(
         "connecting",
@@ -161,6 +161,9 @@
     };
 
     const consoleTarget = $derived({ workspaceId, runtimeId, workerId });
+    const controlAlertId = $derived(
+        `worker-console-control:${runtimeId}:${workerId}`,
+    );
 
     const workerViews = $derived(consoleWorkerViews(consoleProjection));
     const selectedWorkerView = $derived(
@@ -418,10 +421,18 @@
     function sendControl(method: ProtocolMethod, label: string) {
         try {
             sendProtocolMethod(method);
-            controlNotice = `${label} sent through Worker protocol.`;
+            pushWorkspaceAlert(
+                "info",
+                `${label} sent through Worker protocol.`,
+                { id: controlAlertId, title: "Worker control" },
+            );
         } catch (error) {
-            controlNotice = null;
-            sendError = error instanceof Error ? error.message : String(error);
+            const message = error instanceof Error ? error.message : String(error);
+            sendError = message;
+            pushWorkspaceAlert("error", message, {
+                id: controlAlertId,
+                title: "Worker control failed",
+            });
         }
     }
 
@@ -674,10 +685,13 @@
         if (event.event === "rewind_targets") {
             rewindHeadEntries = event.data.head_entries;
             rewindTargets = event.data.targets;
-            controlNotice =
+            pushWorkspaceAlert(
+                "info",
                 event.data.targets.length === 0
                     ? "No rewind targets are available."
-                    : `Loaded ${event.data.targets.length} rewind target(s).`;
+                    : `Loaded ${event.data.targets.length} rewind target(s).`,
+                { id: controlAlertId, title: "Rewind targets" },
+            );
             return;
         }
         if (event.event === "error") {
@@ -1324,10 +1338,6 @@
         </div>
     </section>
 
-    {#if controlNotice}
-        <p class="console-notice">{controlNotice}</p>
-    {/if}
-
     {#if rewindTargets.length > 0}
         <section class="card rewind-targets" aria-label="Rewind targets">
             <h3>Rewind targets</h3>
@@ -1509,7 +1519,7 @@
         }}
     />
 
-    <form class="console-composer card" onsubmit={sendMessage}>
+    <form class="console-composer" onsubmit={sendMessage}>
         <div class="composer-input-shell">
             <textarea
                 id="worker-console-message"
@@ -1653,12 +1663,6 @@
         color: var(--bg);
     }
 
-    .console-notice {
-        margin: 0;
-        color: var(--text-muted);
-        font-size: 0.86rem;
-    }
-
     .rewind-targets {
         display: flex;
         align-items: center;
@@ -1832,7 +1836,6 @@
         display: grid;
         gap: var(--space-3);
         margin-inline: calc(-1 * var(--space-6));
-        padding: var(--space-3) var(--space-6) var(--space-4);
         background: var(--bg);
     }