refactor(app): make session composer ownership explicit

# Conflicts:
#	packages/app/src/runtime/platform/platform.tsx
#	packages/app/src/session/composer/region.tsx
#	packages/app/src/session/screen.tsx

packages/app/src/composer/attachments/attachments.ts

@@ -1,4 +1,4 @@
-import { onMount } from "solid-js"
+import { onCleanup, onMount } from "solid-js"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import type { ComposerAttachment, ComposerPrompt } from "../types"
 
@@ -78,6 +78,7 @@ export type ComposerAttachmentConfig = {
   onError: (error: unknown) => void
   readClipboardImage?: () => Promise<File | null>
   getPathForFile?: (file: File) => string
+  onDragCancel?: (callback: () => void) => () => void
   store?: (file: File) => Promise<{ id: string; url: string }>
 }
 
@@ -90,6 +91,9 @@ export function createComposerAttachments(
     setDraggingType: (type: "image" | "@mention" | null) => void
   },
 ) {
+  const clearDrag = () => {
+    input.setDraggingType(null)
+  }
   const capture = () => {
     const prompt = input.capture()
     const editor = input.editor()
@@ -178,7 +182,7 @@ export function createComposerAttachments(
   const handleDrop = async (event: DragEvent) => {
     if (input.isDialogActive()) return
     event.preventDefault()
-    input.setDraggingType(null)
+    clearDrag()
     const plainText = event.dataTransfer?.getData("text/plain")
     if (plainText?.startsWith("file:")) {
       const path = plainText.slice("file:".length)
@@ -191,6 +195,8 @@ export function createComposerAttachments(
   }
 
   onMount(() => {
+    const cancel = input.onDragCancel?.(clearDrag)
+    if (cancel) onCleanup(cancel)
     makeEventListener(document, "dragover", (event) => {
       if (input.isDialogActive()) return
       event.preventDefault()
@@ -198,7 +204,10 @@ export function createComposerAttachments(
       else if (event.dataTransfer?.types.includes("text/plain")) input.setDraggingType("@mention")
     })
     makeEventListener(document, "dragleave", (event) => {
-      if (!input.isDialogActive() && !event.relatedTarget) input.setDraggingType(null)
+      if (!input.isDialogActive() && !event.relatedTarget) clearDrag()
+    })
+    makeEventListener(document, "keydown", (event) => {
+      if (event.key === "Escape") clearDrag()
     })
     makeEventListener(document, "drop", handleDrop)
   })

packages/app/src/composer/editor/editor.tsx

@@ -118,7 +118,6 @@ export function ComposerEditor(props: ComposerEditorProps) {
         class="group/composer relative min-h-[96px] w-full overflow-clip rounded-xl bg-v2-background-bg-base"
         classList={{
           "shadow-[var(--v2-elevation-raised)]": !props.borderUnderlay,
-          "border border-v2-icon-icon-info border-dashed": state.drag === "active",
         }}
         onSubmit={(event) => {
           event.preventDefault()
@@ -129,12 +128,6 @@ export function ComposerEditor(props: ComposerEditorProps) {
         onDragLeave={props.controller.onDragLeave}
         onDrop={props.controller.onDrop}
       >
-        <Show when={state.drag === "active"}>
-          <div class="pointer-events-none absolute inset-0 z-20 grid place-items-center rounded-xl bg-v2-background-bg-base/90 text-v2-text-text-base">
-            {i18n.t("ui.promptInput.dropFiles")}
-          </div>
-        </Show>
-
         <Show when={state.mode === "normal"}>
           <ComposerAttachments
             attachments={props.controller.attachments()}

packages/app/src/composer/model.ts

@@ -42,9 +42,14 @@ export function createComposerModel(adapter: ComposerAdapter, options?: { queue?
 
   const interaction = createComposerEditorState(prompt.mode.current())
   createEffect(
-    on(adapter.ready, (ready) => {
-      if (ready) interaction[1]("mode", prompt.mode.current())
-    }),
+    on(
+      () => (adapter.ready() ? prompt.mode.current() : undefined),
+      (mode) => {
+        if (!mode) return
+        // Project external draft changes without another mode write clearing restored retry metadata.
+        interaction[1](mode === "shell" ? { mode, popover: { type: "closed" } } : { mode })
+      },
+    ),
   )
   const mode = () => interaction[0].mode
   const history = createComposerHistory()
@@ -346,6 +351,7 @@ export function createComposerModel(adapter: ComposerAdapter, options?: { queue?
         }),
       readClipboardImage: platform.readClipboardImage,
       getPathForFile: platform.getPathForFile,
+      onDragCancel: platform.onDragCancel,
       store: platform.draftStore?.putBlob,
     },
     view: {

packages/app/src/index.css

@@ -319,6 +319,69 @@
     }
   }
 
+  @keyframes session-dropzone-enter {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes session-dropzone-content-enter {
+    from {
+      opacity: 0;
+      transform: translateY(4px) scale(0.96);
+    }
+  }
+
+  @keyframes session-dropzone-upload-enter {
+    from {
+      opacity: 0;
+      transform: translateY(4px) scale(0.92);
+    }
+  }
+
+  @keyframes session-dropzone-stripes-drift {
+    to {
+      background-position: 33.941px 0;
+    }
+  }
+
+  [data-component="session-dropzone"][data-visible="true"] {
+    animation: session-dropzone-enter 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  [data-component="session-dropzone"][data-visible="true"] [data-slot="session-dropzone-content"] {
+    animation: session-dropzone-content-enter 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  [data-component="session-dropzone"][data-visible="true"] [data-slot="session-dropzone-upload"] {
+    animation: session-dropzone-upload-enter 240ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  [data-component="session-dropzone"][data-visible="true"] [data-slot="session-dropzone-stripes"] {
+    animation: session-dropzone-stripes-drift 3s linear infinite;
+  }
+
+  [data-component="session-dropzone"] {
+    --session-dropzone-wash: 4%;
+    --session-dropzone-stripe: 7%;
+    --session-dropzone-card: var(--v2-background-bg-base);
+  }
+
+  [data-color-scheme="dark"] [data-component="session-dropzone"] {
+    --session-dropzone-wash: 6%;
+    --session-dropzone-stripe: 14%;
+    --session-dropzone-card: var(--v2-background-bg-layer-01);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-component="session-dropzone"][data-visible="true"],
+    [data-component="session-dropzone"][data-visible="true"] [data-slot="session-dropzone-content"],
+    [data-component="session-dropzone"][data-visible="true"] [data-slot="session-dropzone-upload"],
+    [data-component="session-dropzone"][data-visible="true"] [data-slot="session-dropzone-stripes"] {
+      animation: none;
+    }
+  }
+
   [data-slot="home-projects-scroll"] {
     timeline-scope: --home-projects-scroll;
   }

packages/app/src/runtime/platform/platform.tsx

@@ -59,6 +59,9 @@ type PlatformBase = {
   /** Resolve the native source path for a desktop File. */
   getPathForFile?(file: File): string
 
+  /** Observe native drag cancellation that does not reach the renderer event loop. */
+  onDragCancel?(callback: () => void): () => void
+
   /** Open a native save file dialog and write content to the selected path (desktop only) */
   saveFile?(opts: SaveFilePickerOptions, content: string): Promise<boolean>
 

packages/app/src/session/composer/adapter.ts

@@ -4,16 +4,14 @@ import { useComposerState } from "@/composer/persistence"
 import { useData } from "@/runtime/server/current"
 import { useServerSDK } from "@/runtime/server/client"
 import { useWorkspaceLocation } from "@/workspaces/location"
-import type { SessionModel } from "../model"
 
 export function createActiveComposerAdapter(input: {
-  session: SessionModel
+  sessionID: string
   controls: Accessor<ComposerControls>
   submitted: () => void
   setEditor: (element: HTMLDivElement) => void
 }) {
-  const id = input.session.identity.params.id
-  if (!id) throw new Error("Active Composer requires a Session ID")
+  const id = input.sessionID
 
   const prompt = useComposerState()
   prompt.current()

packages/app/src/session/composer/controller.ts

@@ -0,0 +1,57 @@
+import { createEffect, createMemo, on, type Accessor } from "solid-js"
+import type { ComposerControls } from "@/composer/adapter"
+import { setCursorPosition } from "@/composer/editor/dom"
+import { createComposerModel } from "@/composer/model"
+import { useSettings } from "@/settings/model"
+import { createActiveComposerAdapter } from "./adapter"
+import { createSessionQueue } from "./queue"
+import { createSessionComposerRegionController } from "./session-composer-region-controller"
+
+export function createSessionComposerController(input: {
+  sessionID: string
+  controls: Accessor<ComposerControls>
+  dock: Parameters<typeof createSessionComposerRegionController>[0]
+}) {
+  const settings = useSettings()
+  const region = createSessionComposerRegionController(input.dock)
+  let editor: HTMLDivElement | undefined
+  const adapter = createActiveComposerAdapter({
+    sessionID: input.sessionID,
+    controls: input.controls,
+    submitted: region.onResponseSubmit,
+    setEditor: (element) => {
+      editor = element
+      region.setPromptRef(element)
+    },
+  })
+  const queue = createSessionQueue({
+    sessionID: input.sessionID,
+    draft: adapter.state,
+    working: adapter.working,
+    behavior: settings.general.followUpBehavior,
+    restoreFocus: (cursor) => {
+      const target = editor
+      if (!target) return
+      requestAnimationFrame(() => {
+        target.focus()
+        setCursorPosition(target, cursor)
+      })
+    },
+  })
+  const composer = createComposerModel(adapter, { queue })
+  const editable = createMemo(() => region.showComposer() && !region.child())
+  // Requests hide the view without disposing its draft or queue edit.
+  createEffect(on(editable, () => composer.onDragLeave()))
+
+  return {
+    region,
+    queue,
+    composer,
+    drop: {
+      active: () => editable() && composer.state.drag === "active",
+      input: () => composer.model.selection.current()?.capabilities.input,
+    },
+  }
+}
+
+export type SessionComposerController = ReturnType<typeof createSessionComposerController>

packages/app/src/session/composer/queue.ts

@@ -4,7 +4,6 @@ import { useMutation } from "@tanstack/solid-query"
 import type { SessionInboxInfo } from "@opencode-ai/client/promise"
 import { SessionMessage } from "@opencode-ai/schema/session-message"
 import type { ComposerDelivery } from "@/composer/adapter"
-import type { ComposerModel } from "@/composer/model"
 import type { ComposerStateTarget } from "@/composer/submission-state"
 import type { ImageAttachmentPart, Prompt } from "@/composer/state"
 import { clonePrompt, promptLength } from "@/composer/prompt-parts"
@@ -30,7 +29,7 @@ export function createSessionQueue(input: {
   draft: ComposerStateTarget
   working: Accessor<boolean>
   behavior: Accessor<ComposerDelivery>
-  composer: Accessor<ComposerModel | undefined>
+  restoreFocus: (cursor: number) => void
 }) {
   const data = useData()
   const server = useServerSDK()
@@ -159,9 +158,9 @@ export function createSessionQueue(input: {
       },
     })
     const text = queuedPromptText(item)
-    input.composer()?.dispatch({ type: "mode.normal" })
+    input.draft.mode.set("normal")
     input.draft.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
-    input.composer()?.restoreFocus(text.length)
+    input.restoreFocus(text.length)
     return true
   }
   const cancelEdit = () => {
@@ -170,10 +169,10 @@ export function createSessionQueue(input: {
     setState("editing", undefined)
     // Mode first, then prompt, then retry: mode and prompt writes both clear
     // the retry marker.
-    input.composer()?.dispatch({ type: editing.stash.mode === "shell" ? "mode.shell" : "mode.normal" })
+    input.draft.mode.set(editing.stash.mode)
     input.draft.set(editing.stash.prompt, editing.stash.cursor)
     if (editing.stash.retry) input.draft.retry.set(editing.stash.retry)
-    input.composer()?.restoreFocus(editing.stash.cursor)
+    input.restoreFocus(editing.stash.cursor)
   }
   const confirmEdit = (delivery: ComposerDelivery) => {
     const editing = state.editing

packages/app/src/session/composer/region.tsx

@@ -4,9 +4,8 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { isScrollKeyTarget, scrollKey, scrollKeyOwner } from "@opencode-ai/ui/scroll-view"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { useNavigate } from "@solidjs/router"
-import { createEffect, on, onMount } from "solid-js"
+import { createEffect, createMemo, on, onMount, type Accessor } from "solid-js"
 import { Composer } from "@/composer/composer"
-import { createComposerModel, type ComposerModel } from "@/composer/model"
 import { useComposerState } from "@/composer/persistence"
 import { createComposerControls } from "@/composer/selection"
 import { setCursorPosition } from "@/composer/editor/dom"
@@ -25,18 +24,16 @@ import { restorePromptModel, syncPromptModel, syncSessionModel } from "../sessio
 import type { SessionTimelineInteraction } from "../timeline/interaction"
 import { createSessionRevert } from "../revert"
 import { SessionComposerRegion } from "./session-composer-region"
-import { createSessionComposerRegionController } from "./session-composer-region-controller"
-import { createActiveComposerAdapter } from "./adapter"
-import { createSessionQueue } from "./queue"
+import { createSessionComposerController, type SessionComposerController } from "./controller"
 import { SessionQueuePanel } from "./queue-panel"
 import { resolveSessionComposerSelection } from "./selection"
 import { createSessionRequestModel } from "../requests/model"
-import { useSettings } from "@/settings/model"
 
 export function createActiveSessionRegion(input: {
   session: SessionModel
   screen: SessionScreenLayout
   timeline: SessionTimelineInteraction
+  visible: Accessor<boolean>
 }) {
   const command = useCommand()
   const dialog = useDialog()
@@ -180,7 +177,30 @@ export function createActiveSessionRegion(input: {
     },
   ])
 
+  const dock = {
+    state,
+    parentID: input.session.data.parentID,
+    centered: input.screen.centered,
+    onResponseSubmit: input.timeline.actions.resume,
+    openParent,
+    setPromptRef: (element: HTMLDivElement) => {
+      promptRef = element
+    },
+    setDockRef: input.timeline.view.setDockRef,
+  }
+  const active = createMemo(
+    on(
+      () => (input.visible() ? input.session.identity.sessionID() : undefined),
+      (sessionID) => (sessionID ? createSessionComposerController({ sessionID, controls, dock }) : undefined),
+    ),
+  )
+
   return {
+    active,
+    drop: {
+      active: () => active()?.drop.active() ?? false,
+      input: () => active()?.drop.input(),
+    },
     actions: {
       timeline: {
         get revert() {
@@ -190,76 +210,25 @@ export function createActiveSessionRegion(input: {
         openAttachment,
       } satisfies SessionUserActions,
     },
-    region: {
-      centered: input.screen.centered,
-      openParent,
-      prompt,
-      setDockRef: input.timeline.view.setDockRef,
-      setPromptRef: (element: HTMLDivElement) => {
-        promptRef = element
-      },
-      state,
-    },
-    input: {
-      controls,
-      setPromptRef: (element: HTMLDivElement) => {
-        promptRef = element
-      },
-    },
-    submitted: () => input.timeline.actions.resume(),
+    requests: state,
     workspaceMoveEligible: () => true,
   }
 }
 
 export type ActiveSessionRegionModel = ReturnType<typeof createActiveSessionRegion>
 
-export function ActiveSessionComposerRegion(props: {
-  model: ActiveSessionRegionModel
-  session: SessionModel
-  onResponseSubmit: () => void
-}) {
-  const settings = useSettings()
-  const region = createSessionComposerRegionController({
-    state: props.model.region.state,
-    parentID: props.session.data.parentID,
-    centered: props.model.region.centered,
-    onResponseSubmit: props.onResponseSubmit,
-    openParent: props.model.region.openParent,
-    setPromptRef: props.model.region.setPromptRef,
-    setDockRef: props.model.region.setDockRef,
-  })
-  const adapter = createActiveComposerAdapter({
-    session: props.session,
-    controls: props.model.input.controls,
-    submitted: props.model.submitted,
-    setEditor: props.model.input.setPromptRef,
-  })
-  let composer: ComposerModel | undefined
-  const queue = createSessionQueue({
-    sessionID: requireSessionID(props.session),
-    draft: adapter.state,
-    working: adapter.working,
-    behavior: settings.general.followUpBehavior,
-    composer: () => composer,
-  })
-  composer = createComposerModel(adapter, { queue })
+export function ActiveSessionComposerRegion(props: { model: SessionComposerController }) {
   return (
     <SessionComposerRegion
-      controller={region}
+      controller={props.model.region}
       composer={
         <div class="relative">
-          <SessionQueuePanel queue={queue} />
+          <SessionQueuePanel queue={props.model.queue} />
           <div class="relative z-10">
-            <Composer model={composer} borderUnderlay />
+            <Composer model={props.model.composer} borderUnderlay />
           </div>
         </div>
       }
     />
   )
 }
-
-function requireSessionID(session: SessionModel) {
-  const id = session.identity.params.id
-  if (!id) throw new Error("Active Composer requires a Session ID")
-  return id
-}

packages/app/src/session/screen.tsx

@@ -12,8 +12,10 @@ import {
 } from "solid-js"
 import { createStore } from "solid-js/store"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
+import { Icon } from "@opencode-ai/ui/icon"
 import { MessageTimeline, SessionSummaryPanel } from "@/session/timeline/message-timeline"
 import { useServer } from "@/runtime/server/current"
+import { useLanguage } from "@/runtime/i18n/language"
 import { projectForSession } from "@/shell/layout/helpers"
 import type { SessionModel } from "@/session/model"
 import { SESSION_PANEL_WIDTH_MIN } from "@/session/session-panel-width"
@@ -39,6 +41,7 @@ const SessionMobileFiles = lazy(async () => {
 export function SessionScreen(props: { session: SessionModel }) {
   const session = props.session
   const server = useServer()
+  const language = useLanguage()
   const detailsProject = createMemo(() => {
     const info = session.data.info()
     return info ? projectForSession(info, server.ctx.sync.data.project) : undefined
@@ -60,6 +63,7 @@ export function SessionScreen(props: { session: SessionModel }) {
   const [elements, setElements] = createStore<{
     side?: HTMLDivElement
     bottomTerminal?: HTMLDivElement
+    dropzone?: HTMLDivElement
   }>({})
   const sideVisible = createMemo(() => isDesktop() && screen.side.layout().visible)
   const sideTerminalVisible = createMemo(() => isDesktop() && screen.terminal.side() && screen.terminal.open())
@@ -134,7 +138,20 @@ export function SessionScreen(props: { session: SessionModel }) {
     session,
     screen,
     timeline,
+    visible: conversationVisible,
   })
+  const dropLabel = createMemo(() => {
+    const input = composer.drop.input()
+    if (!input?.image && !input?.pdf) return language.t("ui.promptInput.dropFiles")
+    if (!input.pdf) return language.t("ui.promptInput.dropFiles.image")
+    if (!input.image) return language.t("ui.promptInput.dropFiles.pdf")
+    return language.t("ui.promptInput.dropFiles.imagePdf")
+  })
+  const dropPresence = createAnimatedPresence(
+    () => (composer.drop.active() ? dropLabel() : undefined),
+    () => elements.dropzone ?? null,
+    session.layout.tabKey,
+  )
 
   useUsageExceededDialogs()
 
@@ -176,7 +193,7 @@ export function SessionScreen(props: { session: SessionModel }) {
                           review.mobile.setTab("changes")
                           session.layout.view().terminal.close()
                         }}
-                        backgroundTasks={composer.region.state.background.tasks()}
+                        backgroundTasks={composer.requests.background.tasks()}
                       />
                     )}
                   </Show>
@@ -198,6 +215,63 @@ export function SessionScreen(props: { session: SessionModel }) {
 
   const sessionPanelContent = () => (
     <>
+      <div
+        data-slot="session-dropzone-blur"
+        data-visible={composer.drop.active()}
+        class="pointer-events-none absolute inset-0 z-[79] rounded-[inherit] opacity-[0.001] backdrop-blur-[1.5px] transition-opacity duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)] will-change-[opacity,backdrop-filter] data-[visible=true]:opacity-100 motion-reduce:transition-none"
+        style={{
+          "-webkit-mask-image":
+            "linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%)",
+          "-webkit-mask-composite": "source-in",
+          "mask-image":
+            "linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%), linear-gradient(to bottom, transparent 0%, black 28%, black 72%, transparent 100%)",
+          "mask-composite": "intersect",
+        }}
+      />
+      <Show when={dropPresence.present()}>
+        <div
+          ref={(element) => setElements("dropzone", element)}
+          data-component="session-dropzone"
+          data-visible={composer.drop.active()}
+          class="pointer-events-none absolute inset-0 z-[80] grid place-items-center overflow-hidden rounded-[inherit] bg-[color-mix(in_srgb,var(--v2-text-text-base)_var(--session-dropzone-wash),transparent)] opacity-100 transition-opacity duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)] data-[visible=false]:opacity-0 motion-reduce:transition-none"
+        >
+          <div class="absolute inset-0 bg-v2-background-bg-base/25" />
+          <div
+            class="absolute inset-y-0 left-1/2 w-full -translate-x-1/2 md:max-w-200 2xl:max-w-[1000px]"
+            style={{
+              "-webkit-mask-image": "linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%)",
+              "mask-image": "linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%)",
+            }}
+          >
+            <div
+              data-slot="session-dropzone-stripes"
+              class="absolute inset-0 opacity-60"
+              style={{
+                background:
+                  "repeating-linear-gradient(135deg, transparent 0px, transparent 12px, color-mix(in srgb, var(--v2-text-text-base) var(--session-dropzone-stripe), transparent) 12px, color-mix(in srgb, var(--v2-text-text-base) var(--session-dropzone-stripe), transparent) 24px)",
+                "-webkit-mask-image":
+                  "radial-gradient(ellipse 59% 40% at center, black 0%, rgba(0,0,0,0.72) 58%, transparent 100%)",
+                "mask-image":
+                  "radial-gradient(ellipse 59% 40% at center, black 0%, rgba(0,0,0,0.72) 58%, transparent 100%)",
+              }}
+            />
+          </div>
+          <div
+            data-slot="session-dropzone-content"
+            class="relative flex translate-y-0 flex-col items-center gap-5 opacity-100 transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)] data-[visible=false]:translate-y-1 data-[visible=false]:opacity-0 motion-reduce:transition-none"
+            data-visible={composer.drop.active()}
+          >
+            <div
+              data-slot="session-dropzone-upload"
+              class="flex size-10 items-center justify-center rounded-full bg-[var(--session-dropzone-card)] text-v2-icon-icon-muted shadow-[var(--v2-elevation-floating)]"
+              aria-hidden="true"
+            >
+              <Icon name="arrow-up" size="normal" class="text-v2-icon-icon-muted" />
+            </div>
+            <div class="text-[15px] font-[530] leading-6 text-v2-text-text-base">{dropPresence.value()}</div>
+          </div>
+        </div>
+      </Show>
       <Show when={!isDesktop() && !!session.identity.params.id}>{mobileTabs()}</Show>
       {/* Surface query errors without suspending session metadata while messages load. */}
       <Show when={timeline.resource.error}>
@@ -235,7 +309,7 @@ export function SessionScreen(props: { session: SessionModel }) {
                 <MessageTimeline
                   hideHeader={!isDesktop()}
                   session={session}
-                  background={composer.region.state.background}
+                  background={composer.requests.background}
                   actions={composer.actions.timeline}
                   scroll={timeline.scroll}
                   onResumeScroll={timeline.actions.resume}
@@ -263,10 +337,8 @@ export function SessionScreen(props: { session: SessionModel }) {
         </Switch>
       </div>
 
-      <Show when={conversationVisible() ? session.identity.params.id : undefined} keyed>
-        {(_id) => (
-          <ActiveSessionComposerRegion model={composer} session={session} onResponseSubmit={timeline.actions.resume} />
-        )}
+      <Show when={composer.active()} keyed>
+        {(model) => <ActiveSessionComposerRegion model={model} />}
       </Show>
     </>
   )

packages/app/src/session/session-frame.tsx

@@ -14,7 +14,7 @@ export function SessionRouteFrame(props: ParentProps<{ padded?: boolean }>) {
 export function SessionPanelFrame(props: ParentProps<{ raised?: boolean }>) {
   return (
     <div
-      class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-[10px] bg-v2-background-bg-base"
+      class="relative flex min-h-0 flex-1 flex-col overflow-hidden rounded-[10px] bg-v2-background-bg-base"
       classList={{
         "shadow-[var(--v2-elevation-raised)]": props.raised,
       }}

packages/app/test-browser/composer-drag-cancel.test.tsx

@@ -0,0 +1,36 @@
+import { expect, test } from "bun:test"
+import { render } from "solid-js/web"
+import { createComposerAttachments } from "@/composer/attachments/attachments"
+
+test("clears drag state on platform cancellation", async () => {
+  let cancel = () => {}
+  let subscribed = false
+  let dragging: "image" | "@mention" | null = "image"
+  const dispose = render(() => {
+    createComposerAttachments({
+      capture: () => ({ current: () => [], cursor: () => 0, set: () => {} }),
+      editor: () => undefined,
+      focusEditor: () => {},
+      addPart: () => false,
+      setDraggingType: (type) => (dragging = type),
+      directory: () => "",
+      isDialogActive: () => false,
+      warn: () => {},
+      duplicate: () => {},
+      onError: () => {},
+      onDragCancel: (callback) => {
+        cancel = callback
+        subscribed = true
+        return () => (subscribed = false)
+      },
+    })
+    return null
+  }, document.createElement("div"))
+  await Promise.resolve()
+
+  cancel()
+
+  expect(dragging).toBeNull()
+  dispose()
+  expect(subscribed).toBeFalse()
+})

packages/desktop/src/main/ipc.ts

@@ -4,7 +4,7 @@ import { app, BrowserWindow, MessageChannelMain } from "electron"
 import { Effect, Layer } from "effect"
 import { RpcServer } from "effect/unstable/rpc"
 import { DesktopRpcs } from "../shared/ipc-rpc"
-import { IpcTransportPort } from "../shared/ipc-transport"
+import { DragCancelEvent, IpcTransportPort } from "../shared/ipc-transport"
 import { DesktopFiles, openExternalURL } from "./files"
 import { appHandlers } from "./ipc-handlers/app"
 import { eventHandlers } from "./ipc-handlers/events"
@@ -59,6 +59,10 @@ export const registerIpcHandlers = Effect.gen(function* () {
     relaunch: lifecycle.relaunch,
   }
   const wire = (_event: Electron.Event, win: BrowserWindow) => {
+    win.webContents.on("before-input-event", (_event, input) => {
+      if (input.type !== "keyDown" || input.key !== "Escape") return
+      win.webContents.send(DragCancelEvent)
+    })
     win.webContents.on("did-finish-load", () => {
       if (win.isDestroyed() || win.webContents.isDestroyed()) return
       const channel = new MessageChannelMain()

packages/desktop/src/preload/index.ts

@@ -1,5 +1,5 @@
 import { contextBridge, ipcRenderer, webUtils } from "electron"
-import { IpcTransportPort } from "../shared/ipc-transport"
+import { DragCancelEvent, IpcTransportPort } from "../shared/ipc-transport"
 import { windowIDFromArguments } from "../shared/window-bootstrap"
 
 ipcRenderer.on(IpcTransportPort, (event) => {
@@ -7,6 +7,8 @@ ipcRenderer.on(IpcTransportPort, (event) => {
   if (port) window.postMessage(IpcTransportPort, "*", [port])
 })
 
+ipcRenderer.on(DragCancelEvent, () => window.dispatchEvent(new Event(DragCancelEvent)))
+
 contextBridge.exposeInMainWorld("electron", {
   windowID: windowIDFromArguments(process.argv),
   getPathForFile: (file: File) => webUtils.getPathForFile(file),

packages/desktop/src/renderer/platform/index.ts

@@ -7,6 +7,7 @@ import {
 import type { ElectronAPI } from "../api-types"
 import { setPinchZoomEnabled, webviewZoom } from "../window/zoom"
 import { windowFullscreen } from "../window/fullscreen"
+import { DragCancelEvent } from "../../shared/ipc-transport"
 import { createDesktopFiles } from "./files"
 import { createDesktopMenuAction } from "./menu"
 import { createDesktopNotify } from "./notifications"
@@ -53,6 +54,10 @@ export function createDesktopPlatform(
     windowFullscreen,
     getPinchZoomEnabled: () => api.getPinchZoomEnabled(),
     setPinchZoomEnabled,
+    onDragCancel: (callback) => {
+      window.addEventListener(DragCancelEvent, callback)
+      return () => window.removeEventListener(DragCancelEvent, callback)
+    },
     runDesktopMenuAction: createDesktopMenuAction(api),
     checkAppExists: async (appName) => {
       return api.checkAppExists(appName)

packages/desktop/src/shared/ipc-transport.ts

@@ -1 +1,2 @@
 export const IpcTransportPort = "desktop-rpc-port"
+export const DragCancelEvent = "opencode:drag-cancel"

packages/ui/src/i18n/en.ts

@@ -133,7 +133,10 @@ const source = {
 
   "ui.promptInput.noMatchingItems": "No matching items",
   "ui.promptInput.commands": "Commands",
-  "ui.promptInput.dropFiles": "Drop files to attach",
+  "ui.promptInput.dropFiles": "Drop files to add",
+  "ui.promptInput.dropFiles.image": "Drop images or files to add",
+  "ui.promptInput.dropFiles.pdf": "Drop PDFs or files to add",
+  "ui.promptInput.dropFiles.imagePdf": "Drop images, PDFs, or files to add",
   "ui.promptInput.removeAttachment": "Remove attachment",
   "ui.promptInput.label": "Prompt",
   "ui.promptInput.placeholder.shell": "Enter shell command…",