From a8c27f5752ec84eecfa0efa25d432d1ae5bd9e57 Mon Sep 17 00:00:00 2001
From: Hare <kei.hiracchi.0928@gmail.com>
Date: Wed, 22 Jul 2026 16:55:28 +0900
Subject: [PATCH] fix: remove console composer click shell

---
 .yoi/tickets/00001KY1ZKCPC/item.md            |  2 +-
 .yoi/tickets/00001KY1ZKCPC/thread.md          | 39 +++++++++++++++++++
 .../console/worker-console.ui.test.ts         |  6 ++-
 .../workers/[workerId]/console/+page.svelte   | 28 ++++++-------
 4 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/.yoi/tickets/00001KY1ZKCPC/item.md b/.yoi/tickets/00001KY1ZKCPC/item.md
index 0c8f24ab..d13e1440 100644
--- a/.yoi/tickets/00001KY1ZKCPC/item.md
+++ b/.yoi/tickets/00001KY1ZKCPC/item.md
@@ -2,7 +2,7 @@
 title: 'Backend runtime経由の操作をprotocol transportへ統一しTUI同等にする'
 state: 'planning'
 created_at: '2026-07-21T09:20:07Z'
-updated_at: '2026-07-22T07:23:32Z'
+updated_at: '2026-07-22T07:55:21Z'
 assignee: null
 readiness: 'draft'
 ---
diff --git a/.yoi/tickets/00001KY1ZKCPC/thread.md b/.yoi/tickets/00001KY1ZKCPC/thread.md
index e6ad3558..c37e74f2 100644
--- a/.yoi/tickets/00001KY1ZKCPC/thread.md
+++ b/.yoi/tickets/00001KY1ZKCPC/thread.md
@@ -463,3 +463,42 @@ Verification:
 - `git diff --check`
 
 ---
+
+<!-- event: comment author: assistant at: 2026-07-22T07:53:01Z -->
+
+## Comment
+
+Requested Web Console composer a11y/focus refactor before implementation:
+
+- Requirement: clicking anywhere in the composer input surface except the button should focus the textarea.
+- Preferred structure: do not add `role="button"` to a layout `<div>` and do not wrap the send button in a `<label>`.
+- Instead, make the textarea itself occupy the input surface and use padding/overlay layout for the footer and send button.
+- The send button remains structurally outside/above the textarea surface and handles submit normally.
+- Expected result: remove the clickable `<div>` a11y warning while preserving the composer click-to-focus behavior.
+
+---
+
+<!-- event: implementation_report author: assistant at: 2026-07-22T07:55:21Z -->
+
+## Implementation report
+
+Implementation report for Web Console composer focus/a11y refactor:
+
+- Removed the `onclick={handleComposerShellClick}` layout-div focus handler and deleted `handleComposerShellClick`.
+- Kept the composer shell as non-interactive layout.
+- Made the textarea itself occupy the input surface:
+  - larger min-height
+  - right/bottom padding reserved for the overlaid footer and send button
+  - `cursor: text`
+- Changed the footer to an absolute overlay with `pointer-events: none`, so clicks on non-button footer/composer area pass through to the textarea.
+- Kept the send button as a normal submit button with `pointer-events: auto`.
+- Updated the Web UI fixture test to assert the shell no longer has the click handler and the overlay pointer-event layout is present.
+
+Verification:
+- `cd web/workspace && deno test --allow-read=src --allow-env=VSCODE_TEXTMATE_DEBUG src/lib/workspace/console/worker-console.ui.test.ts`
+- `cd web/workspace && deno task check`
+- `git diff --check`
+
+Result: `svelte-check found 0 errors and 0 warnings`.
+
+---
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 2d4bdf5a..2c003a7f 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
@@ -152,14 +152,16 @@ Deno.test("Worker Console composer fits to content without manual resize", async
   );
   assert(
     consolePage.includes("use:fitTextarea={{ value: draft, maxRows: 10 }}") &&
-      consolePage.includes("class=\"composer-input-shell\" onclick={handleComposerShellClick}") &&
+      consolePage.includes("<div class=\"composer-input-shell\">") &&
+      !consolePage.includes("handleComposerShellClick") &&
       consolePage.includes("bind:this={composerTextareaElement}") &&
-      consolePage.includes("composerTextareaElement?.focus()") &&
       consolePage.includes('event.key === "PageUp" || event.key === "PageDown"') &&
       consolePage.includes("scrollConsoleByPage") &&
       consolePage.includes("class=\"composer-input-footer\"") &&
+      consolePage.includes("pointer-events: none") &&
       consolePage.includes("class=\"composer-footer-slot\"") &&
       consolePage.includes("class=\"composer-send-button\"") &&
+      consolePage.includes("pointer-events: auto") &&
       consolePage.includes("class=\"composer-send-icon\"") &&
       consolePage.includes('d="M8 6L12 2L16 6"') &&
       consolePage.includes(".console-composer textarea") &&
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 73544f9a..deff4139 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
@@ -376,17 +376,6 @@
         window.requestAnimationFrame(updateConsoleScrollMetrics);
     }
 
-    function handleComposerShellClick(event: MouseEvent) {
-        const target = event.target;
-        if (
-            target instanceof Element &&
-            target.closest("button, textarea, a")
-        ) {
-            return;
-        }
-        composerTextareaElement?.focus();
-    }
-
     function sendControl(method: ProtocolMethod, label: string) {
         try {
             sendProtocolMethod(method);
@@ -1317,7 +1306,7 @@
     {/if}
 
     <form class="console-composer card" onsubmit={sendMessage}>
-        <div class="composer-input-shell" onclick={handleComposerShellClick}>
+        <div class="composer-input-shell">
             <textarea
                 id="worker-console-message"
                 aria-label="Console input"
@@ -1603,8 +1592,7 @@
     }
 
     .composer-input-shell {
-        display: grid;
-        gap: var(--space-2);
+        position: relative;
         border: 1px solid var(--line);
         border-radius: 18px;
         background: var(--bg-raised);
@@ -1618,12 +1606,16 @@
     }
 
     .composer-input-footer {
+        position: absolute;
+        right: 0.7rem;
+        bottom: 0.7rem;
+        left: 1rem;
         display: grid;
         grid-template-columns: minmax(0, 1fr) auto;
         gap: var(--space-2);
         align-items: end;
         min-height: 2.35rem;
-        padding-left: 0.65rem;
+        pointer-events: none;
     }
 
     .composer-footer-slot {
@@ -1633,17 +1625,18 @@
     .console-composer textarea {
         box-sizing: border-box;
         width: 100%;
-        min-height: 0;
+        min-height: 5.35rem;
         resize: none;
         overflow-y: hidden;
         border: 0;
         border-radius: 14px;
         background: transparent;
-        padding: 0.55rem 0.65rem;
+        padding: 0.55rem 3.4rem 3rem 0.65rem;
         font: inherit;
         line-height: 1.45;
         color: var(--text-strong);
         outline: none;
+        cursor: text;
     }
 
     .console-composer textarea:disabled {
@@ -1661,6 +1654,7 @@
         color: var(--bg);
         cursor: pointer;
         padding: 0;
+        pointer-events: auto;
     }
 
     .composer-send-button:disabled {