fix(ui): support draft prompt command sessions (#446)

## Summary
- Show attachments added to the no-session draft prompt before a session
exists.
- Create and activate a real session before first-prompt slash commands
or shell commands execute.
- Keep existing session command behavior unchanged by adding an optional
PromptInput command handler.

## Validation
- npm run typecheck --workspace @codenomad/ui

Author: shantur

packages/ui/src/components/instance/instance-shell2.tsx

@@ -29,6 +29,7 @@ import PermissionNotificationBanner from "../permission-notification-banner"
 import PermissionApprovalModal from "../permission-approval-modal"
 import SessionView from "../session/session-view"
 import MessageSection from "../message-section"
+import PromptAttachmentsBar from "../prompt-input/PromptAttachmentsBar"
 import { formatTokenTotal } from "../../lib/formatters"
 import ContextMeter from "../context-meter"
 import { sseManager } from "../../lib/sse-manager"
@@ -50,7 +51,8 @@ import type { Attachment } from "../../types/attachment"
 import { setAgentModelPreference, useConfig } from "../../stores/preferences"
 import { showPromptDialog } from "../../stores/alerts"
 import { openSessionPreview, sessionPreviews, showSessionChat, showSessionPreview } from "../../stores/session-previews"
-import { createSession, getDefaultModel, providers, sendMessage, setActiveParentSession, updateSessionModel } from "../../stores/sessions"
+import { createSession, executeCustomCommand, getDefaultModel, providers, runShellCommand, sendMessage, setActiveParentSession, updateSessionModel } from "../../stores/sessions"
+import { getAttachments, removeAttachment } from "../../stores/attachments"
 
 import type { LayoutMode } from "./shell/types"
 import {
@@ -123,6 +125,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
   const [draftAgent, setDraftAgent] = createSignal("")
   const [draftModel, setDraftModel] = createSignal({ providerId: "", modelId: "" })
   const [draftModelManuallySelected, setDraftModelManuallySelected] = createSignal(false)
+  const [draftPromptInputApi, setDraftPromptInputApi] = createSignal<PromptInputApi | null>(null)
 
   // Worktree selector manages its own dialogs.
   const [showSessionSearch, setShowSessionSearch] = createSignal(false)
@@ -805,7 +808,16 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     setDraftModelManuallySelected(true)
   }
 
-  async function handleFirstPromptSend(prompt: string, attachments: Attachment[]) {
+  const draftAttachments = createMemo(() => getAttachments(props.instance.id, NO_SESSION_DRAFT_SESSION_ID))
+
+  function registerDraftPromptInputApi(api: PromptInputApi) {
+    setDraftPromptInputApi(api)
+    return () => {
+      setDraftPromptInputApi((current) => (current === api ? null : current))
+    }
+  }
+
+  async function createAndActivateDraftSession() {
     const agent = draftAgent()
     const model = draftModel()
     if (agent && model.providerId && model.modelId) {
@@ -816,9 +828,24 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
       await updateSessionModel(props.instance.id, session.id, model)
     }
     setActiveParentSession(props.instance.id, session.id)
+    return session
+  }
+
+  async function handleFirstPromptSend(prompt: string, attachments: Attachment[]) {
+    const session = await createAndActivateDraftSession()
     await sendMessage(props.instance.id, session.id, prompt, attachments)
   }
 
+  async function handleFirstPromptCommand(commandName: string, args: string) {
+    const session = await createAndActivateDraftSession()
+    await executeCustomCommand(props.instance.id, session.id, commandName, args)
+  }
+
+  async function handleFirstPromptShell(command: string) {
+    const session = await createAndActivateDraftSession()
+    await runShellCommand(props.instance.id, session.id, command)
+  }
+
   const sessionLayout = (
     <div
       class="session-shell-panels flex flex-1 min-h-0 overflow-x-hidden"
@@ -1079,14 +1106,32 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                       forceCompactStatusLayout={showEmbeddedSidebarToggle()}
                     />
 
+                    <Show when={draftAttachments().length > 0}>
+                      <PromptAttachmentsBar
+                        attachments={draftAttachments()}
+                        onRemoveAttachment={(attachmentId) => {
+                          const api = draftPromptInputApi()
+                          if (api) {
+                            api.removeAttachment(attachmentId)
+                            return
+                          }
+                          removeAttachment(props.instance.id, NO_SESSION_DRAFT_SESSION_ID, attachmentId)
+                        }}
+                        onExpandTextAttachment={(attachmentId) => draftPromptInputApi()?.expandTextAttachment(attachmentId)}
+                      />
+                    </Show>
+
                     <PromptInput
                       instanceId={props.instance.id}
                       instanceFolder={props.instance.folder}
                       sessionId={NO_SESSION_DRAFT_SESSION_ID}
                       isActive={props.isActiveInstance}
                       compactLayout={compactPromptLayout()}
                       onSend={handleFirstPromptSend}
+                      onCommand={handleFirstPromptCommand}
+                      onRunShell={handleFirstPromptShell}
                       escapeInDebounce={props.escapeInDebounce}
+                      registerPromptInputApi={registerDraftPromptInputApi}
                     />
                   </div>
                 }

packages/ui/src/components/prompt-input.tsx

@@ -357,7 +357,11 @@ export default function PromptInput(props: PromptInputProps) {
           await props.onSend(resolvedPrompt, [])
         }
       } else if (isKnownSlashCommand) {
-        await executeCustomCommand(props.instanceId, props.sessionId, commandName, resolvedCommandArgs)
+        if (props.onCommand) {
+          await props.onCommand(commandName, resolvedCommandArgs)
+        } else {
+          await executeCustomCommand(props.instanceId, props.sessionId, commandName, resolvedCommandArgs)
+        }
       } else {
         await props.onSend(resolvedPrompt, currentAttachments)
       }

packages/ui/src/components/prompt-input/types.ts

@@ -25,6 +25,7 @@ export interface PromptInputProps {
   // Phone/tablet layouts should keep the expanded prompt more compact.
   compactLayout?: boolean
   onSend: (prompt: string, attachments: Attachment[]) => Promise<void>
+  onCommand?: (commandName: string, args: string) => Promise<void>
   onRunShell?: (command: string) => Promise<void>
   disabled?: boolean
   escapeInDebounce?: boolean