From 0b1c537f7ace6a526a27fee712c3934303cdbe3f Mon Sep 17 00:00:00 2001
From: Tyom Semonov <inspiro@gmail.com>
Date: Sun, 22 Feb 2026 13:39:51 +0000
Subject: [PATCH 1/5] feat: add missing input elements to showcase modal and
 fix input styling

Add static_select, multi_static_select, file_input, and multiline
plain_text_input to the /showcase modal command. Fix inconsistent
text input heights (h-8 vs py-2) and add spacing between modal form fields.
---
 .../src/listeners/commands/showcase.ts        | 91 +++++++++++++++++++
 apps/ui/src/components/ModalOverlay.svelte    |  8 +-
 .../blockkit/elements/EmailInput.svelte       |  2 +-
 .../blockkit/elements/UrlInput.svelte         |  2 +-
 4 files changed, 100 insertions(+), 3 deletions(-)

diff --git a/apps/showcase-bot/src/listeners/commands/showcase.ts b/apps/showcase-bot/src/listeners/commands/showcase.ts
index 7df4069..c6b6ecb 100644
--- a/apps/showcase-bot/src/listeners/commands/showcase.ts
+++ b/apps/showcase-bot/src/listeners/commands/showcase.ts
@@ -228,6 +228,97 @@ export function register(app: App) {
                     ],
                   },
                 },
+                {
+                  type: 'input',
+                  label: { type: 'plain_text', text: 'Department' },
+                  element: {
+                    type: 'static_select',
+                    action_id: 'showcase_modal_department',
+                    placeholder: {
+                      type: 'plain_text',
+                      text: 'Select a department',
+                    },
+                    options: [
+                      {
+                        text: { type: 'plain_text', text: 'Engineering' },
+                        value: 'engineering',
+                      },
+                      {
+                        text: { type: 'plain_text', text: 'Design' },
+                        value: 'design',
+                      },
+                      {
+                        text: { type: 'plain_text', text: 'Marketing' },
+                        value: 'marketing',
+                      },
+                      {
+                        text: { type: 'plain_text', text: 'Sales' },
+                        value: 'sales',
+                      },
+                    ],
+                  },
+                },
+                {
+                  type: 'input',
+                  label: { type: 'plain_text', text: 'Skills' },
+                  element: {
+                    type: 'multi_static_select',
+                    action_id: 'showcase_modal_skills',
+                    placeholder: {
+                      type: 'plain_text',
+                      text: 'Select your skills',
+                    },
+                    options: [
+                      {
+                        text: { type: 'plain_text', text: 'JavaScript' },
+                        value: 'javascript',
+                      },
+                      {
+                        text: { type: 'plain_text', text: 'TypeScript' },
+                        value: 'typescript',
+                      },
+                      {
+                        text: { type: 'plain_text', text: 'Python' },
+                        value: 'python',
+                      },
+                      {
+                        text: { type: 'plain_text', text: 'Rust' },
+                        value: 'rust',
+                      },
+                      {
+                        text: { type: 'plain_text', text: 'Go' },
+                        value: 'go',
+                      },
+                    ],
+                  },
+                },
+                {
+                  type: 'input',
+                  label: { type: 'plain_text', text: 'Attachments' },
+                  element: {
+                    type: 'file_input',
+                    action_id: 'showcase_modal_attachments',
+                    max_files: 3,
+                  },
+                },
+                {
+                  type: 'input',
+                  label: { type: 'plain_text', text: 'Additional Notes' },
+                  hint: {
+                    type: 'plain_text',
+                    text: 'Any extra details or comments',
+                  },
+                  optional: true,
+                  element: {
+                    type: 'plain_text_input',
+                    action_id: 'showcase_modal_notes',
+                    multiline: true,
+                    placeholder: {
+                      type: 'plain_text',
+                      text: 'Enter any additional notes here...',
+                    },
+                  },
+                },
               ],
             },
           })
diff --git a/apps/ui/src/components/ModalOverlay.svelte b/apps/ui/src/components/ModalOverlay.svelte
index 0f9f992..0583665 100644
--- a/apps/ui/src/components/ModalOverlay.svelte
+++ b/apps/ui/src/components/ModalOverlay.svelte
@@ -339,7 +339,7 @@
       </div>
 
       <!-- Content -->
-      <div class="flex-1 overflow-y-auto p-5">
+      <div class="modal-content flex-1 overflow-y-auto p-5">
         <BlockKitRenderer
           blocks={modal.view.blocks}
           values={formValues}
@@ -380,3 +380,9 @@
     </div>
   </div>
 {/if}
+
+<style>
+  .modal-content :global(.p-block_kit_renderer) {
+    gap: 1rem;
+  }
+</style>
diff --git a/apps/ui/src/components/blockkit/elements/EmailInput.svelte b/apps/ui/src/components/blockkit/elements/EmailInput.svelte
index 92dbd2f..cf50d75 100644
--- a/apps/ui/src/components/blockkit/elements/EmailInput.svelte
+++ b/apps/ui/src/components/blockkit/elements/EmailInput.svelte
@@ -18,7 +18,7 @@
 
 <input
   type="email"
-  class="w-full bg-slack-input border border-white/20 rounded-lg px-3 h-8 text-slack-text placeholder:text-slack-text-muted focus:border-white/40 focus:outline-none"
+  class="w-full bg-slack-input border border-white/20 rounded-lg px-3 py-2 text-slack-text placeholder:text-slack-text-muted focus:border-white/40 focus:outline-none"
   {placeholder}
   value={displayValue}
   oninput={(e) => onChange?.(e.currentTarget.value)}
diff --git a/apps/ui/src/components/blockkit/elements/UrlInput.svelte b/apps/ui/src/components/blockkit/elements/UrlInput.svelte
index fdd8155..6421f55 100644
--- a/apps/ui/src/components/blockkit/elements/UrlInput.svelte
+++ b/apps/ui/src/components/blockkit/elements/UrlInput.svelte
@@ -18,7 +18,7 @@
 
 <input
   type="url"
-  class="w-full bg-slack-input border border-white/20 rounded-lg px-3 h-8 text-slack-text placeholder:text-slack-text-muted focus:border-white/40 focus:outline-none"
+  class="w-full bg-slack-input border border-white/20 rounded-lg px-3 py-2 text-slack-text placeholder:text-slack-text-muted focus:border-white/40 focus:outline-none"
   {placeholder}
   value={displayValue}
   oninput={(e) => onChange?.(e.currentTarget.value)}

From 449dec2301bbb93b045753886da50bc2171f265c Mon Sep 17 00:00:00 2001
From: Tyom Semonov <inspiro@gmail.com>
Date: Sun, 22 Feb 2026 14:05:25 +0000
Subject: [PATCH 2/5] fix: improve modal and input styling to match real Slack

- Make input labels bold, bright, and clickable to focus their field
- Update button styles: outlined secondary, solid primary/danger
- Add global cursor:pointer on buttons
- Show bot avatar icon in modal header
- Show header border only when content is scrolled
- Pass botId through view_open SSE event to UI
---
 apps/ui/src/app.css                           |  4 ++
 apps/ui/src/components/Message.svelte         |  4 +-
 apps/ui/src/components/ModalOverlay.svelte    | 50 ++++++++++++++++---
 .../blockkit/blocks/InputBlock.svelte         | 12 ++++-
 .../blockkit/elements/Button.svelte           | 21 ++++----
 apps/ui/src/lib/dispatcher.svelte.ts          |  2 +-
 apps/ui/src/lib/state.svelte.ts               |  1 +
 apps/ui/src/lib/state/bots.svelte.ts          |  8 ++-
 packages/slack/src/server/state.ts            |  1 +
 9 files changed, 81 insertions(+), 22 deletions(-)

diff --git a/apps/ui/src/app.css b/apps/ui/src/app.css
index 8520868..56e0cdf 100644
--- a/apps/ui/src/app.css
+++ b/apps/ui/src/app.css
@@ -3,6 +3,10 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+button {
+  cursor: pointer;
+}
+
 @theme inline {
   /* Typography */
   --font-sans:
diff --git a/apps/ui/src/components/Message.svelte b/apps/ui/src/components/Message.svelte
index 0dd9e15..8515aed 100644
--- a/apps/ui/src/components/Message.svelte
+++ b/apps/ui/src/components/Message.svelte
@@ -354,9 +354,7 @@
 <ContextMenu.Root>
   <ContextMenu.Trigger class="block">
     <div
-      class="group flex flex-col px-5 transition-colors duration-100 relative hover:bg-slack-hover {isGrouped
-        ? 'py-0.5'
-        : 'py-2'}"
+      class="group flex flex-col px-5 transition-colors duration-100 relative hover:bg-slack-hover py-2"
     >
       {#if isEphemeral}
         <div
diff --git a/apps/ui/src/components/ModalOverlay.svelte b/apps/ui/src/components/ModalOverlay.svelte
index 0583665..f3483ef 100644
--- a/apps/ui/src/components/ModalOverlay.svelte
+++ b/apps/ui/src/components/ModalOverlay.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { X } from '@lucide/svelte'
+  import { X, Sparkles } from '@lucide/svelte'
   import { simulatorState } from '../lib/state.svelte'
   import {
     submitView,
@@ -41,6 +41,16 @@
   // Track whether the user has attempted to submit (enables live revalidation)
   let hasSubmitted = $state(false)
 
+  // Track whether modal content is scrolled
+  let contentScrolled = $state(false)
+
+  // Look up the bot that opened the modal
+  const modalBot = $derived.by(() => {
+    const botId = simulatorState.activeModal?.botId
+    if (!botId) return undefined
+    return simulatorState.connectedBots.get(botId)
+  })
+
   /**
    * Extract initial values from modal blocks to pre-populate formValues
    */
@@ -148,6 +158,7 @@
       fileFormValues = {}
       validationErrors = {}
       hasSubmitted = false
+      contentScrolled = false
     }
   })
 
@@ -324,9 +335,31 @@
     >
       <!-- Header -->
       <div
-        class="flex items-center justify-between px-5 py-4 border-b border-white/10 shrink-0"
+        class="flex items-center gap-3 px-5 py-4 shrink-0 border-b transition-colors {contentScrolled
+          ? 'border-white/10'
+          : 'border-transparent'}"
       >
-        <h2 id="modal-title" class="text-lg font-semibold text-slack-text">
+        {#if modalBot}
+          <div
+            class="size-9 rounded-lg flex items-center justify-center shrink-0 {modalBot.iconUrl
+              ? ''
+              : 'bg-slack-bot-avatar text-white'}"
+          >
+            {#if modalBot.iconUrl}
+              <img
+                src={modalBot.iconUrl}
+                alt={modalBot.name}
+                class="size-9 rounded-lg object-cover"
+              />
+            {:else}
+              <Sparkles size={20} />
+            {/if}
+          </div>
+        {/if}
+        <h2
+          id="modal-title"
+          class="text-lg font-semibold text-slack-text flex-1"
+        >
           {modal.view.title?.text ?? 'Modal'}
         </h2>
         <button
@@ -339,7 +372,12 @@
       </div>
 
       <!-- Content -->
-      <div class="modal-content flex-1 overflow-y-auto p-5">
+      <div
+        class="modal-content flex-1 overflow-y-auto p-5"
+        onscroll={(e) => {
+          contentScrolled = e.currentTarget.scrollTop > 0
+        }}
+      >
         <BlockKitRenderer
           blocks={modal.view.blocks}
           values={formValues}
@@ -362,7 +400,7 @@
           {#if modal.view.close}
             <button
               onclick={handleClose}
-              class="px-4 py-2 rounded-lg bg-transparent border border-white/20 text-slack-text hover:bg-white/10 transition-colors"
+              class="px-4 py-2 rounded-lg bg-transparent border border-white/30 text-slack-text font-bold hover:border-white/50 hover:bg-white/5 transition-colors"
             >
               {modal.view.close.text}
             </button>
@@ -370,7 +408,7 @@
           {#if modal.view.submit}
             <button
               onclick={handleSubmit}
-              class="px-4 py-2 rounded-lg bg-slack-accent text-white hover:bg-slack-accent-hover transition-colors font-medium"
+              class="px-4 py-2 rounded-lg bg-slack-accent text-white hover:bg-slack-accent-hover transition-colors font-bold"
             >
               {modal.view.submit.text}
             </button>
diff --git a/apps/ui/src/components/blockkit/blocks/InputBlock.svelte b/apps/ui/src/components/blockkit/blocks/InputBlock.svelte
index ef23d4a..03214c2 100644
--- a/apps/ui/src/components/blockkit/blocks/InputBlock.svelte
+++ b/apps/ui/src/components/blockkit/blocks/InputBlock.svelte
@@ -87,7 +87,17 @@
 <div class="max-w-[620px]">
   {#if block.element.type !== 'file_input'}
     <!-- svelte-ignore a11y_label_has_associated_control -->
-    <label class="block text-sm text-slack-text-muted mb-1.5">
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <label
+      class="inline-block text-sm font-bold text-slack-text cursor-pointer mb-1.5"
+      onclick={(e) => {
+        const input = e.currentTarget.parentElement?.querySelector(
+          'input, textarea, select'
+        )
+        if (input instanceof HTMLElement) input.focus()
+      }}
+    >
       {renderText(block.label)}
     </label>
   {/if}
diff --git a/apps/ui/src/components/blockkit/elements/Button.svelte b/apps/ui/src/components/blockkit/elements/Button.svelte
index 7bdefd1..6163dea 100644
--- a/apps/ui/src/components/blockkit/elements/Button.svelte
+++ b/apps/ui/src/components/blockkit/elements/Button.svelte
@@ -56,23 +56,26 @@
 
 <style>
   .c-button {
-    height: 32px;
-    padding: 0 12px;
-    border-radius: 4px;
+    height: 36px;
+    padding: 0 16px;
+    border-radius: 8px;
     font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background-color 0.15s;
-    border: none;
+    font-weight: 700;
+    transition:
+      background-color 0.15s,
+      border-color 0.15s;
+    border: 1px solid transparent;
   }
 
   .c-button--outline {
-    background: rgba(255, 255, 255, 0.1);
+    background: transparent;
     color: var(--color-slack-text, #d1d2d3);
+    border-color: rgba(255, 255, 255, 0.3);
   }
 
   .c-button--outline:hover {
-    background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.5);
   }
 
   .c-button--primary {
diff --git a/apps/ui/src/lib/dispatcher.svelte.ts b/apps/ui/src/lib/dispatcher.svelte.ts
index e0ce796..9dcd275 100644
--- a/apps/ui/src/lib/dispatcher.svelte.ts
+++ b/apps/ui/src/lib/dispatcher.svelte.ts
@@ -399,7 +399,7 @@ function handleSSEEvent(event: {
         sseLogger.info(
           `Opening modal: ${event.viewId}, title: ${event.view.title?.text}`
         )
-        showModal(event.viewId, event.view)
+        showModal(event.viewId, event.view, event.botId)
         sseLogger.info(
           `Modal state after showModal: ${JSON.stringify(simulatorState.activeModal?.viewId)}`
         )
diff --git a/apps/ui/src/lib/state.svelte.ts b/apps/ui/src/lib/state.svelte.ts
index 7a8af4c..36e5d15 100644
--- a/apps/ui/src/lib/state.svelte.ts
+++ b/apps/ui/src/lib/state.svelte.ts
@@ -24,6 +24,7 @@ import {
 export interface ModalState {
   viewId: string
   view: SlackView
+  botId?: string
 }
 
 // Shared reactive state object using $state
diff --git a/apps/ui/src/lib/state/bots.svelte.ts b/apps/ui/src/lib/state/bots.svelte.ts
index 7e5b8de..0ea802c 100644
--- a/apps/ui/src/lib/state/bots.svelte.ts
+++ b/apps/ui/src/lib/state/bots.svelte.ts
@@ -76,8 +76,12 @@ export function getAllMessageShortcuts(): BotShortcutGroup[] {
 // =============================================================================
 
 // Show a modal
-export function showModal(viewId: string, view: SlackView): void {
-  simulatorState.activeModal = { viewId, view }
+export function showModal(
+  viewId: string,
+  view: SlackView,
+  botId?: string
+): void {
+  simulatorState.activeModal = { viewId, view, botId }
 }
 
 // Update an existing modal
diff --git a/packages/slack/src/server/state.ts b/packages/slack/src/server/state.ts
index 3b30f28..9177768 100644
--- a/packages/slack/src/server/state.ts
+++ b/packages/slack/src/server/state.ts
@@ -948,6 +948,7 @@ export class EmulatorState {
       type: 'view_open',
       viewId: viewState.id,
       view: viewState.view,
+      botId: viewState.botId,
     })
   }
 

From 08c98201dc348bee12893dd3066bf5596d0d27dd Mon Sep 17 00:00:00 2001
From: Tyom Semonov <inspiro@gmail.com>
Date: Sun, 22 Feb 2026 14:20:28 +0000
Subject: [PATCH 3/5] Add search results blocks example

---
 .../messages/blocks/16-search-results.json    | 157 ++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 apps/showcase-bot/src/messages/blocks/16-search-results.json

diff --git a/apps/showcase-bot/src/messages/blocks/16-search-results.json b/apps/showcase-bot/src/messages/blocks/16-search-results.json
new file mode 100644
index 0000000..ba6804d
--- /dev/null
+++ b/apps/showcase-bot/src/messages/blocks/16-search-results.json
@@ -0,0 +1,157 @@
+{
+  "blocks": [
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "We found *205 Hotels* in New Orleans, LA from *12/14 to 12/17*"
+      },
+      "accessory": {
+        "type": "overflow",
+        "action_id": "showcase_search_results_filter",
+        "options": [
+          {
+            "text": {
+              "type": "plain_text",
+              "emoji": true,
+              "text": "Option One"
+            },
+            "value": "value-0"
+          },
+          {
+            "text": {
+              "type": "plain_text",
+              "emoji": true,
+              "text": "Option Two"
+            },
+            "value": "value-1"
+          },
+          {
+            "text": {
+              "type": "plain_text",
+              "emoji": true,
+              "text": "Option Three"
+            },
+            "value": "value-2"
+          },
+          {
+            "text": {
+              "type": "plain_text",
+              "emoji": true,
+              "text": "Option Four"
+            },
+            "value": "value-3"
+          }
+        ]
+      }
+    },
+    {
+      "type": "divider"
+    },
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "*<fakeLink.toHotelPage.com|Windsor Court Hotel>*\n★★★★★\n$340 per night\nRated: 9.4 - Excellent"
+      },
+      "accessory": {
+        "type": "image",
+        "image_url": "https://api.slack.com/img/blocks/bkb_template_images/tripAgent_1.png",
+        "alt_text": "Windsor Court Hotel thumbnail"
+      }
+    },
+    {
+      "type": "context",
+      "elements": [
+        {
+          "type": "image",
+          "image_url": "https://api.slack.com/img/blocks/bkb_template_images/tripAgentLocationMarker.png",
+          "alt_text": "Location Pin Icon"
+        },
+        {
+          "type": "plain_text",
+          "emoji": true,
+          "text": "Location: Central Business District"
+        }
+      ]
+    },
+    {
+      "type": "divider"
+    },
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "*<fakeLink.toHotelPage.com|The Ritz-Carlton New Orleans>*\n★★★★★\n$340 per night\nRated: 9.1 - Excellent"
+      },
+      "accessory": {
+        "type": "image",
+        "image_url": "https://api.slack.com/img/blocks/bkb_template_images/tripAgent_2.png",
+        "alt_text": "Ritz-Carlton New Orleans thumbnail"
+      }
+    },
+    {
+      "type": "context",
+      "elements": [
+        {
+          "type": "image",
+          "image_url": "https://api.slack.com/img/blocks/bkb_template_images/tripAgentLocationMarker.png",
+          "alt_text": "Location Pin Icon"
+        },
+        {
+          "type": "plain_text",
+          "emoji": true,
+          "text": "Location: French Quarter"
+        }
+      ]
+    },
+    {
+      "type": "divider"
+    },
+    {
+      "type": "section",
+      "text": {
+        "type": "mrkdwn",
+        "text": "*<fakeLink.toHotelPage.com|Omni Royal Orleans Hotel>*\n★★★★★\n$419 per night\nRated: 8.8 - Excellent"
+      },
+      "accessory": {
+        "type": "image",
+        "image_url": "https://api.slack.com/img/blocks/bkb_template_images/tripAgent_3.png",
+        "alt_text": "Omni Royal Orleans Hotel thumbnail"
+      }
+    },
+    {
+      "type": "context",
+      "elements": [
+        {
+          "type": "image",
+          "image_url": "https://api.slack.com/img/blocks/bkb_template_images/tripAgentLocationMarker.png",
+          "alt_text": "Location Pin Icon"
+        },
+        {
+          "type": "plain_text",
+          "emoji": true,
+          "text": "Location: French Quarter"
+        }
+      ]
+    },
+    {
+      "type": "divider"
+    },
+    {
+      "type": "actions",
+      "elements": [
+        {
+          "type": "button",
+          "text": {
+            "type": "plain_text",
+            "emoji": true,
+            "text": "Next 2 Results"
+          },
+          "action_id": "showcase_search_results_next",
+          "value": "click_me_123"
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file

From 80049d9b9db7f7b47bdef122e6bd58da870e74ad Mon Sep 17 00:00:00 2001
From: Tyom Semonov <inspiro@gmail.com>
Date: Sun, 22 Feb 2026 14:31:28 +0000
Subject: [PATCH 4/5] Format code

---
 apps/showcase-bot/src/messages/blocks/16-search-results.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/showcase-bot/src/messages/blocks/16-search-results.json b/apps/showcase-bot/src/messages/blocks/16-search-results.json
index ba6804d..f09812f 100644
--- a/apps/showcase-bot/src/messages/blocks/16-search-results.json
+++ b/apps/showcase-bot/src/messages/blocks/16-search-results.json
@@ -154,4 +154,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}

From 8d55a4ab33ff39babfa344132f01d2c4f3683e07 Mon Sep 17 00:00:00 2001
From: Tyom Semonov <inspiro@gmail.com>
Date: Sun, 22 Feb 2026 14:39:27 +0000
Subject: [PATCH 5/5] fix: use native label for/id for input a11y and preserve
 modal botId

Replace the onclick/querySelector hack in InputBlock with proper
<label for> / id pairing on child input elements. This provides
native click-to-focus and keyboard accessibility, removing all
svelte-ignore a11y comments.

Fix updateModal dropping botId when replacing activeModal, which
caused the bot avatar to disappear on modal updates.

Also normalize relative imports to $lib/types in Button, EmailInput,
and UrlInput.
---
 .../blockkit/blocks/InputBlock.svelte           | 17 ++++++++---------
 .../components/blockkit/elements/Button.svelte  |  2 +-
 .../blockkit/elements/EmailInput.svelte         |  6 ++++--
 .../blockkit/elements/NumberInput.svelte        |  4 +++-
 .../blockkit/elements/PlainTextInput.svelte     |  5 ++++-
 .../blockkit/elements/StaticSelect.svelte       |  4 +++-
 .../blockkit/elements/UrlInput.svelte           |  6 ++++--
 apps/ui/src/lib/state/bots.svelte.ts            |  6 +++++-
 8 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/apps/ui/src/components/blockkit/blocks/InputBlock.svelte b/apps/ui/src/components/blockkit/blocks/InputBlock.svelte
index 03214c2..93bfa07 100644
--- a/apps/ui/src/components/blockkit/blocks/InputBlock.svelte
+++ b/apps/ui/src/components/blockkit/blocks/InputBlock.svelte
@@ -82,21 +82,15 @@
   function getFiles(actionId: string): UploadedFile[] {
     return fileValues[blockId]?.[actionId] ?? []
   }
+
+  const inputId = $derived(`input-${blockId}-${block.element.action_id}`)
 </script>
 
 <div class="max-w-[620px]">
   {#if block.element.type !== 'file_input'}
-    <!-- svelte-ignore a11y_label_has_associated_control -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
     <label
+      for={inputId}
       class="inline-block text-sm font-bold text-slack-text cursor-pointer mb-1.5"
-      onclick={(e) => {
-        const input = e.currentTarget.parentElement?.querySelector(
-          'input, textarea, select'
-        )
-        if (input instanceof HTMLElement) input.focus()
-      }}
     >
       {renderText(block.label)}
     </label>
@@ -106,6 +100,7 @@
     {#if block.element.type === 'plain_text_input'}
       {@const el = block.element as SlackPlainTextInputElement}
       <PlainTextInput
+        id={inputId}
         element={el}
         value={getInputValue(el.action_id)}
         onChange={(value) => onInputChange?.(blockId, el.action_id, value)}
@@ -113,6 +108,7 @@
     {:else if block.element.type === 'static_select'}
       {@const el = block.element as SlackStaticSelectElement}
       <StaticSelect
+        id={inputId}
         element={el}
         value={getSelectedOption(el.action_id)}
         onChange={(value) => onInputChange?.(blockId, el.action_id, value)}
@@ -137,6 +133,7 @@
     {:else if block.element.type === 'number_input'}
       {@const el = block.element as SlackNumberInputElement}
       <NumberInput
+        id={inputId}
         element={el}
         value={getInputValue(el.action_id)}
         onChange={(value) => onInputChange?.(blockId, el.action_id, value)}
@@ -144,6 +141,7 @@
     {:else if block.element.type === 'email_text_input'}
       {@const el = block.element as SlackEmailInputElement}
       <EmailInput
+        id={inputId}
         element={el}
         value={getInputValue(el.action_id)}
         onChange={(value) => onInputChange?.(blockId, el.action_id, value)}
@@ -151,6 +149,7 @@
     {:else if block.element.type === 'url_text_input'}
       {@const el = block.element as SlackUrlInputElement}
       <UrlInput
+        id={inputId}
         element={el}
         value={getInputValue(el.action_id)}
         onChange={(value) => onInputChange?.(blockId, el.action_id, value)}
diff --git a/apps/ui/src/components/blockkit/elements/Button.svelte b/apps/ui/src/components/blockkit/elements/Button.svelte
index 6163dea..a84c290 100644
--- a/apps/ui/src/components/blockkit/elements/Button.svelte
+++ b/apps/ui/src/components/blockkit/elements/Button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { SlackButtonElement } from '../../../lib/types'
+  import type { SlackButtonElement } from '$lib/types'
   import { renderText } from '../context'
   import ConfirmDialog from './ConfirmDialog.svelte'
 
diff --git a/apps/ui/src/components/blockkit/elements/EmailInput.svelte b/apps/ui/src/components/blockkit/elements/EmailInput.svelte
index cf50d75..c8cecd4 100644
--- a/apps/ui/src/components/blockkit/elements/EmailInput.svelte
+++ b/apps/ui/src/components/blockkit/elements/EmailInput.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-  import type { SlackEmailInputElement } from '../../../lib/types'
+  import type { SlackEmailInputElement } from '$lib/types'
   import { renderText } from '../context'
 
   interface Props {
+    id?: string
     element: SlackEmailInputElement
     value: string
     onChange?: (value: string) => void
   }
 
-  let { element, value, onChange }: Props = $props()
+  let { id, element, value, onChange }: Props = $props()
 
   const displayValue = $derived(value || element.initial_value || '')
   const placeholder = $derived(
@@ -17,6 +18,7 @@
 </script>
 
 <input
+  {id}
   type="email"
   class="w-full bg-slack-input border border-white/20 rounded-lg px-3 py-2 text-slack-text placeholder:text-slack-text-muted focus:border-white/40 focus:outline-none"
   {placeholder}
diff --git a/apps/ui/src/components/blockkit/elements/NumberInput.svelte b/apps/ui/src/components/blockkit/elements/NumberInput.svelte
index c1fee9a..b3bc313 100644
--- a/apps/ui/src/components/blockkit/elements/NumberInput.svelte
+++ b/apps/ui/src/components/blockkit/elements/NumberInput.svelte
@@ -3,17 +3,19 @@
   import { renderText } from '../context'
 
   interface Props {
+    id?: string
     element: SlackNumberInputElement
     value: string
     onChange?: (value: string) => void
   }
 
-  let { element, value, onChange }: Props = $props()
+  let { id, element, value, onChange }: Props = $props()
 
   const displayValue = $derived(value ?? element.initial_value ?? '')
 </script>
 
 <input
+  {id}
   type="number"
   class="w-full bg-slack-input border border-white/20 rounded-lg px-3 py-2 text-slack-text placeholder:text-slack-text-muted focus:border-white/40 focus:outline-none"
   placeholder={renderText(element.placeholder)}
diff --git a/apps/ui/src/components/blockkit/elements/PlainTextInput.svelte b/apps/ui/src/components/blockkit/elements/PlainTextInput.svelte
index 2c95aa2..efd257b 100644
--- a/apps/ui/src/components/blockkit/elements/PlainTextInput.svelte
+++ b/apps/ui/src/components/blockkit/elements/PlainTextInput.svelte
@@ -3,18 +3,20 @@
   import { renderText } from '../context'
 
   interface Props {
+    id?: string
     element: SlackPlainTextInputElement
     value: string
     onChange?: (value: string) => void
   }
 
-  let { element, value, onChange }: Props = $props()
+  let { id, element, value, onChange }: Props = $props()
 
   const displayValue = $derived(value || element.initial_value || '')
 </script>
 
 {#if element.multiline}
   <textarea
+    {id}
     class="w-full bg-slack-input border border-white/20 rounded-lg px-3 py-2 text-slack-text placeholder:text-slack-text-muted focus:border-white/40 focus:outline-none resize-none"
     rows={4}
     placeholder={renderText(element.placeholder)}
@@ -23,6 +25,7 @@
   ></textarea>
 {:else}
   <input
+    {id}
     type="text"
     class="w-full bg-slack-input border border-white/20 rounded-lg px-3 py-2 text-slack-text placeholder:text-slack-text-muted focus:border-white/40 focus:outline-none"
     placeholder={renderText(element.placeholder)}
diff --git a/apps/ui/src/components/blockkit/elements/StaticSelect.svelte b/apps/ui/src/components/blockkit/elements/StaticSelect.svelte
index 15211d0..1541a53 100644
--- a/apps/ui/src/components/blockkit/elements/StaticSelect.svelte
+++ b/apps/ui/src/components/blockkit/elements/StaticSelect.svelte
@@ -7,6 +7,7 @@
   import ConfirmDialog from './ConfirmDialog.svelte'
 
   interface Props {
+    id?: string
     element: SlackStaticSelectElement
     value?: SlackOption
     onChange?: (value: string) => void
@@ -14,7 +15,7 @@
     compact?: boolean
   }
 
-  let { element, value, onChange, compact = false }: Props = $props()
+  let { id, element, value, onChange, compact = false }: Props = $props()
 
   const selectedValue = $derived(
     value?.value ?? element.initial_option?.value ?? ''
@@ -49,6 +50,7 @@
 </script>
 
 <select
+  {id}
   class="c-select_input"
   class:c-select_input--compact={compact}
   value={selectedValue}
diff --git a/apps/ui/src/components/blockkit/elements/UrlInput.svelte b/apps/ui/src/components/blockkit/elements/UrlInput.svelte
index 6421f55..257e78f 100644
--- a/apps/ui/src/components/blockkit/elements/UrlInput.svelte
+++ b/apps/ui/src/components/blockkit/elements/UrlInput.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
-  import type { SlackUrlInputElement } from '../../../lib/types'
+  import type { SlackUrlInputElement } from '$lib/types'
   import { renderText } from '../context'
 
   interface Props {
+    id?: string
     element: SlackUrlInputElement
     value: string
     onChange?: (value: string) => void
   }
 
-  let { element, value, onChange }: Props = $props()
+  let { id, element, value, onChange }: Props = $props()
 
   const displayValue = $derived(value || element.initial_value || '')
   const placeholder = $derived(
@@ -17,6 +18,7 @@
 </script>
 
 <input
+  {id}
   type="url"
   class="w-full bg-slack-input border border-white/20 rounded-lg px-3 py-2 text-slack-text placeholder:text-slack-text-muted focus:border-white/40 focus:outline-none"
   {placeholder}
diff --git a/apps/ui/src/lib/state/bots.svelte.ts b/apps/ui/src/lib/state/bots.svelte.ts
index 0ea802c..ab451b4 100644
--- a/apps/ui/src/lib/state/bots.svelte.ts
+++ b/apps/ui/src/lib/state/bots.svelte.ts
@@ -87,7 +87,11 @@ export function showModal(
 // Update an existing modal
 export function updateModal(viewId: string, view: SlackView): void {
   if (simulatorState.activeModal?.viewId === viewId) {
-    simulatorState.activeModal = { viewId, view }
+    simulatorState.activeModal = {
+      viewId,
+      view,
+      botId: simulatorState.activeModal.botId,
+    }
   }
 }