import { Component, onMount, onCleanup, Show, createMemo, createEffect, createSignal } from "solid-js"
import type { Session } from "./types/session"
import type { Attachment } from "./types/attachment"
import FolderSelectionView from "./components/folder-selection-view"
import InstanceWelcomeView from "./components/instance-welcome-view"
import CommandPalette from "./components/command-palette"
import InstanceTabs from "./components/instance-tabs"
import SessionList from "./components/session-list"
import MessageStream from "./components/message-stream"
import PromptInput from "./components/prompt-input"
import InfoView from "./components/info-view"
import AgentSelector from "./components/agent-selector"
import ModelSelector from "./components/model-selector"
import KeyboardHint from "./components/keyboard-hint"
import { initMarkdown } from "./lib/markdown"
import { useTheme } from "./lib/theme"
import { createCommandRegistry } from "./lib/commands"
import type { Command } from "./lib/commands"
import {
  hasInstances,
  isSelectingFolder,
  setIsSelectingFolder,
  setHasInstances,
  showFolderSelection,
  setShowFolderSelection,
} from "./stores/ui"
import { toggleShowThinkingBlocks, preferences, addRecentFolder } from "./stores/preferences"
import {
  createInstance,
  instances,
  updateInstance,
  activeInstanceId,
  setActiveInstanceId,
  stopInstance,
  getActiveInstance,
  addLog,
} from "./stores/instances"
import {
  getSessions,
  activeSessionId,
  setActiveSession,
  setActiveParentSession,
  clearActiveParentSession,
  createSession,
  deleteSession,
  getSessionFamily,
  activeParentSessionId,
  getParentSessions,
  loadMessages,
  sendMessage,
  abortSession,
  updateSessionAgent,
  updateSessionModel,
  agents,
  isSessionBusy,
} from "./stores/sessions"
import { setupTabKeyboardShortcuts } from "./lib/keyboard"
import { isOpen as isCommandPaletteOpen, showCommandPalette, hideCommandPalette } from "./stores/command-palette"
import { registerNavigationShortcuts } from "./lib/shortcuts/navigation"
import { registerInputShortcuts } from "./lib/shortcuts/input"
import { registerAgentShortcuts } from "./lib/shortcuts/agent"
import { registerEscapeShortcut, setEscapeStateChangeHandler } from "./lib/shortcuts/escape"
import { keyboardRegistry } from "./lib/keyboard-registry"

const SessionView: Component<{
  sessionId: string
  activeSessions: Map<string, Session>
  instanceId: string
  instanceFolder: string
  escapeInDebounce: boolean
}> = (props) => {
  const session = () => props.activeSessions.get(props.sessionId)

  createEffect(() => {
    const currentSession = session()
    if (currentSession) {
      loadMessages(props.instanceId, currentSession.id).catch(console.error)
    }
  })

  async function handleSendMessage(prompt: string, attachments: Attachment[]) {
    await sendMessage(props.instanceId, props.sessionId, prompt, attachments)
  }

  async function handleRevert(messageId: string) {
    const instance = instances().get(props.instanceId)
    if (!instance || !instance.client) return

    try {
      console.log("Reverting to message:", messageId)

      await instance.client.session.revert({
        path: { id: props.sessionId },
        body: { messageID: messageId },
      })

      // Restore the message to input
      const currentSession = session()
      if (currentSession) {
        const revertedMessage = currentSession.messages.find((m) => m.id === messageId)
        const revertedInfo = currentSession.messagesInfo.get(messageId)

        if (revertedMessage && revertedInfo?.role === "user") {
          const textParts = revertedMessage.parts.filter((p: any) => p.type === "text")
          if (textParts.length > 0) {
            const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
            if (textarea) {
              textarea.value = textParts.map((p: any) => p.text).join("\n")
              textarea.dispatchEvent(new Event("input", { bubbles: true }))
              textarea.focus()
            }
          }
        }
      }

      console.log("Reverted to message - UI will update via SSE")
    } catch (error) {
      console.error("Failed to revert:", error)
      alert("Failed to revert to message")
    }
  }

  return (
    <Show
      when={session()}
      fallback={
        <div class="flex items-center justify-center h-full">
          <div class="text-center text-gray-500">Session not found</div>
        </div>
      }
    >
      {(s) => (
        <div class="session-view">
          <MessageStream
            instanceId={props.instanceId}
            sessionId={s().id}
            messages={s().messages || []}
            messagesInfo={s().messagesInfo}
            revert={s().revert}
            onRevert={handleRevert}
          />
          <PromptInput
            instanceId={props.instanceId}
            instanceFolder={props.instanceFolder}
            sessionId={s().id}
            onSend={handleSendMessage}
            escapeInDebounce={props.escapeInDebounce}
          />
        </div>
      )}
    </Show>
  )
}

const App: Component = () => {
  const { isDark } = useTheme()
  const commandRegistry = createCommandRegistry()
  const [escapeInDebounce, setEscapeInDebounce] = createSignal(false)

  createEffect(() => {
    void initMarkdown(isDark()).catch(console.error)
  })

  const activeInstance = createMemo(() => getActiveInstance())

  const activeSessions = createMemo(() => {
    const instance = activeInstance()
    if (!instance) return new Map()
    const instanceId = instance.id

    const parentId = activeParentSessionId().get(instanceId)
    if (!parentId) return new Map()

    const sessionFamily = getSessionFamily(instanceId, parentId)
    return new Map(sessionFamily.map((s) => [s.id, s]))
  })

  const activeSessionIdForInstance = createMemo(() => {
    const instance = activeInstance()
    if (!instance) return null
    return activeSessionId().get(instance.id) || null
  })

  const activeSessionForInstance = createMemo(() => {
    const sessionId = activeSessionIdForInstance()
    if (!sessionId || sessionId === "info") return null
    return activeSessions().get(sessionId) ?? null
  })

  const handleSidebarAgentChange = async (agent: string) => {
    const instance = activeInstance()
    const sessionId = activeSessionIdForInstance()
    if (!instance || !sessionId || sessionId === "info") return
    await updateSessionAgent(instance.id, sessionId, agent)
  }

  const handleSidebarModelChange = async (model: { providerId: string; modelId: string }) => {
    const instance = activeInstance()
    const sessionId = activeSessionIdForInstance()
    if (!instance || !sessionId || sessionId === "info") return
    await updateSessionModel(instance.id, sessionId, model)
  }

  const DEFAULT_SESSION_SIDEBAR_WIDTH = 280
  const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)

  async function handleSelectFolder(folderPath?: string, binaryPath?: string) {
    setIsSelectingFolder(true)
    try {
      let folder: string | null | undefined = folderPath

      if (!folder) {
        folder = await window.electronAPI.selectFolder()
        if (!folder) {
          return
        }
      }

      addRecentFolder(folder)
      const instanceId = await createInstance(folder, binaryPath)
      setHasInstances(true)
      setShowFolderSelection(false)

      console.log("Created instance:", instanceId, "Port:", instances().get(instanceId)?.port)
    } catch (error) {
      console.error("Failed to create instance:", error)
    } finally {
      setIsSelectingFolder(false)
    }
  }

  function handleNewInstanceRequest() {
    if (hasInstances()) {
      setShowFolderSelection(true)
    } else {
      handleSelectFolder()
    }
  }

  async function handleCloseInstance(instanceId: string) {
    if (confirm("Stop OpenCode instance? This will stop the server.")) {
      await stopInstance(instanceId)
      if (instances().size === 0) {
        setHasInstances(false)
      }
    }
  }

  async function handleNewSession(instanceId: string) {
    try {
      const session = await createSession(instanceId)
      setActiveParentSession(instanceId, session.id)
    } catch (error) {
      console.error("Failed to create session:", error)
    }
  }

  async function handleCloseSession(instanceId: string, sessionId: string) {
    const sessions = getSessions(instanceId)
    const session = sessions.find((s) => s.id === sessionId)

    const isParent = session?.parentId === null

    if (!isParent) {
      return
    }

    clearActiveParentSession(instanceId)
  }

  function setupCommands() {
    commandRegistry.register({
      id: "new-instance",
      label: "New Instance",
      description: "Open folder picker to create new instance",
      category: "Instance",
      keywords: ["folder", "project", "workspace"],
      shortcut: { key: "N", meta: true },
      action: handleNewInstanceRequest,
    })

    commandRegistry.register({
      id: "close-instance",
      label: "Close Instance",
      description: "Stop current instance's server",
      category: "Instance",
      keywords: ["stop", "quit", "close"],
      shortcut: { key: "W", meta: true },
      action: async () => {
        const instance = activeInstance()
        if (!instance) return
        await handleCloseInstance(instance.id)
      },
    })

    commandRegistry.register({
      id: "instance-next",
      label: "Next Instance",
      description: "Cycle to next instance tab",
      category: "Instance",
      keywords: ["switch", "navigate"],
      shortcut: { key: "]", meta: true },
      action: () => {
        const ids = Array.from(instances().keys())
        if (ids.length <= 1) return
        const current = ids.indexOf(activeInstanceId() || "")
        const next = (current + 1) % ids.length
        if (ids[next]) setActiveInstanceId(ids[next])
      },
    })

    commandRegistry.register({
      id: "instance-prev",
      label: "Previous Instance",
      description: "Cycle to previous instance tab",
      category: "Instance",
      keywords: ["switch", "navigate"],
      shortcut: { key: "[", meta: true },
      action: () => {
        const ids = Array.from(instances().keys())
        if (ids.length <= 1) return
        const current = ids.indexOf(activeInstanceId() || "")
        const prev = current <= 0 ? ids.length - 1 : current - 1
        if (ids[prev]) setActiveInstanceId(ids[prev])
      },
    })

    commandRegistry.register({
      id: "new-session",
      label: "New Session",
      description: "Create a new parent session",
      category: "Session",
      keywords: ["create", "start"],
      shortcut: { key: "N", meta: true, shift: true },
      action: async () => {
        const instance = activeInstance()
        if (!instance) return
        await handleNewSession(instance.id)
      },
    })

    commandRegistry.register({
      id: "close-session",
      label: "Close Session",
      description: "Close current parent session",
      category: "Session",
      keywords: ["close", "stop"],
      shortcut: { key: "W", meta: true, shift: true },
      action: async () => {
        const instance = activeInstance()
        const sessionId = activeSessionIdForInstance()
        if (!instance || !sessionId || sessionId === "info") return
        await handleCloseSession(instance.id, sessionId)
      },
    })

    commandRegistry.register({
      id: "switch-to-info",
      label: "Switch to Info",
      description: "Jump to info view for current instance",
      category: "Session",
      keywords: ["info", "info", "console", "output"],
      shortcut: { key: "L", meta: true, shift: true },
      action: () => {
        const instance = activeInstance()
        if (instance) setActiveSession(instance.id, "info")
      },
    })

    commandRegistry.register({
      id: "session-next",
      label: "Next Session",
      description: "Cycle to next session tab",
      category: "Session",
      keywords: ["switch", "navigate"],
      shortcut: { key: "]", meta: true, shift: true },
      action: () => {
        const instanceId = activeInstanceId()
        if (!instanceId) return
        const parentId = activeParentSessionId().get(instanceId)
        if (!parentId) return
        const familySessions = getSessionFamily(instanceId, parentId)
        const ids = familySessions.map((s) => s.id).concat(["info"])
        if (ids.length <= 1) return
        const current = ids.indexOf(activeSessionId().get(instanceId) || "")
        const next = (current + 1) % ids.length
        if (ids[next]) setActiveSession(instanceId, ids[next])
      },
    })

    commandRegistry.register({
      id: "session-prev",
      label: "Previous Session",
      description: "Cycle to previous session tab",
      category: "Session",
      keywords: ["switch", "navigate"],
      shortcut: { key: "[", meta: true, shift: true },
      action: () => {
        const instanceId = activeInstanceId()
        if (!instanceId) return
        const parentId = activeParentSessionId().get(instanceId)
        if (!parentId) return
        const familySessions = getSessionFamily(instanceId, parentId)
        const ids = familySessions.map((s) => s.id).concat(["info"])
        if (ids.length <= 1) return
        const current = ids.indexOf(activeSessionId().get(instanceId) || "")
        const prev = current <= 0 ? ids.length - 1 : current - 1
        if (ids[prev]) setActiveSession(instanceId, ids[prev])
      },
    })

    commandRegistry.register({
      id: "compact",
      label: "Compact Session",
      description: "Summarize and compact the current session",
      category: "Session",
      keywords: ["/compact", "summarize", "compress"],
      action: async () => {
        const instance = activeInstance()
        const sessionId = activeSessionIdForInstance()
        if (!instance || !instance.client || !sessionId || sessionId === "info") return

        const sessions = getSessions(instance.id)
        const session = sessions.find((s) => s.id === sessionId)
        if (!session) return

        try {
          console.log("Compacting session...")
          await instance.client.session.summarize({
            path: { id: sessionId },
            body: {
              providerID: session.model.providerId,
              modelID: session.model.modelId,
            },
          })
        } catch (error: any) {
          console.error("Failed to compact session:", error)
          const message = error?.message || "Failed to compact session"
          alert(`Compact failed: ${message}`)
        }
      },
    })

    commandRegistry.register({
      id: "undo",
      label: "Undo Last Message",
      description: "Revert the last message",
      category: "Session",
      keywords: ["/undo", "revert", "undo"],
      action: async () => {
        const instance = activeInstance()
        const sessionId = activeSessionIdForInstance()
        if (!instance || !instance.client || !sessionId || sessionId === "info") return

        const sessions = getSessions(instance.id)
        const session = sessions.find((s) => s.id === sessionId)
        if (!session) return

        // Find the message to revert to (previous user message before revert point)
        let after = 0
        const revert = session.revert

        if (revert?.messageID) {
          // Find the timestamp of the revert point
          for (let i = session.messages.length - 1; i >= 0; i--) {
            const msg = session.messages[i]
            const info = session.messagesInfo.get(msg.id)
            if (info?.id === revert.messageID) {
              after = info.time?.created || 0
              break
            }
          }
        }

        // Find the previous user message
        let messageID = ""
        for (let i = session.messages.length - 1; i >= 0; i--) {
          const msg = session.messages[i]
          const info = session.messagesInfo.get(msg.id)

          if (msg.type === "user" && info?.time?.created) {
            if (after > 0 && info.time.created >= after) {
              continue
            }
            messageID = msg.id
            break
          }
        }

        if (!messageID) {
          alert("Nothing to undo")
          return
        }

        try {
          // Find the reverted message to restore to input
          const revertedMessage = session.messages.find((m) => m.id === messageID)
          const revertedInfo = session.messagesInfo.get(messageID)

          console.log("Reverting to message:", messageID)

          await instance.client.session.revert({
            path: { id: sessionId },
            body: { messageID },
          })

          console.log("Revert API call completed")

          // Restore the reverted user message to the prompt input
          if (revertedMessage && revertedInfo?.role === "user") {
            const textParts = revertedMessage.parts.filter((p: any) => p.type === "text")
            if (textParts.length > 0) {
              const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
              if (textarea) {
                textarea.value = textParts.map((p: any) => p.text).join("\n")
                textarea.dispatchEvent(new Event("input", { bubbles: true }))
                textarea.focus()
              }
            }
          }

          console.log("Last message reverted - UI will update via SSE")
        } catch (error) {
          console.error("Failed to revert message:", error)
          alert("Failed to revert message")
        }
      },
    })

    commandRegistry.register({
      id: "open-model-selector",
      label: "Open Model Selector",
      description: "Choose a different model",
      category: "Agent & Model",
      keywords: ["model", "llm", "ai"],
      shortcut: { key: "M", meta: true, shift: true },
      action: () => {
        const modelInput = document.querySelector("[data-model-selector]") as HTMLInputElement
        if (modelInput) {
          modelInput.focus()
          setTimeout(() => {
            const event = new KeyboardEvent("keydown", {
              key: "ArrowDown",
              code: "ArrowDown",
              keyCode: 40,
              which: 40,
              bubbles: true,
              cancelable: true,
            })
            modelInput.dispatchEvent(event)
          }, 10)
        }
      },
    })

    commandRegistry.register({
      id: "open-agent-selector",
      label: "Open Agent Selector",
      description: "Choose a different agent",
      category: "Agent & Model",
      keywords: ["agent", "mode"],
      shortcut: { key: "A", meta: true, shift: true },
      action: () => {
        const agentTrigger = document.querySelector("[data-agent-selector]") as HTMLElement
        if (agentTrigger) {
          agentTrigger.focus()
          setTimeout(() => {
            const event = new KeyboardEvent("keydown", {
              key: "Enter",
              code: "Enter",
              keyCode: 13,
              which: 13,
              bubbles: true,
              cancelable: true,
            })
            agentTrigger.dispatchEvent(event)
          }, 50)
        }
      },
    })

    commandRegistry.register({
      id: "init",
      label: "Initialize AGENTS.md",
      description: "Create or update AGENTS.md file",
      category: "Agent & Model",
      keywords: ["/init", "agents", "initialize"],
      action: async () => {
        const instance = activeInstance()
        const sessionId = activeSessionIdForInstance()
        if (!instance || !instance.client || !sessionId || sessionId === "info") return

        const sessions = getSessions(instance.id)
        const session = sessions.find((s) => s.id === sessionId)
        if (!session) return

        try {
          // Generate ID similar to server format: timestamp in hex + random chars
          const timestamp = Date.now()
          const timePart = (timestamp * 0x1000).toString(16).padStart(12, "0")
          const randomPart = Math.random().toString(16).substring(2, 16)
          const messageID = `msg_${timePart}${randomPart}`

          await instance.client.session.init({
            path: { id: sessionId },
            body: {
              messageID,
              providerID: session.model.providerId,
              modelID: session.model.modelId,
            },
          })
          console.log("Initializing AGENTS.md...")
        } catch (error) {
          console.error("Failed to initialize AGENTS.md:", error)
        }
      },
    })

    commandRegistry.register({
      id: "clear-input",
      label: "Clear Input",
      description: "Clear the prompt textarea",
      category: "Input & Focus",
      keywords: ["clear", "reset"],
      shortcut: { key: "K", meta: true },
      action: () => {
        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
        if (textarea) textarea.value = ""
      },
    })

    commandRegistry.register({
      id: "thinking",
      label: () => `${preferences().showThinkingBlocks ? "Hide" : "Show"} Thinking Blocks`,
      description: "Show/hide AI thinking process",
      category: "System",
      keywords: ["/thinking", "toggle", "show", "hide"],
      action: toggleShowThinkingBlocks,
    })

    commandRegistry.register({
      id: "help",
      label: "Show Help",
      description: "Display keyboard shortcuts and help",
      category: "System",
      keywords: ["/help", "shortcuts", "help"],
      action: () => {
        console.log("Show help modal (not implemented)")
      },
    })
  }

  function handleExecuteCommand(commandId: string) {
    commandRegistry.execute(commandId)
  }

  onMount(() => {
    setEscapeStateChangeHandler(setEscapeInDebounce)

    setupCommands()

    setupTabKeyboardShortcuts(
      handleNewInstanceRequest,
      handleCloseInstance,
      handleNewSession,
      handleCloseSession,
      showCommandPalette,
    )

    registerNavigationShortcuts()
    registerInputShortcuts(
      () => {
        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
        if (textarea) textarea.value = ""
      },
      () => {
        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
        textarea?.focus()
      },
    )
    registerAgentShortcuts(
      () => {
        const modelInput = document.querySelector("[data-model-selector]") as HTMLInputElement
        if (modelInput) {
          modelInput.focus()
          setTimeout(() => {
            const event = new KeyboardEvent("keydown", {
              key: "ArrowDown",
              code: "ArrowDown",
              keyCode: 40,
              which: 40,
              bubbles: true,
              cancelable: true,
            })
            modelInput.dispatchEvent(event)
          }, 10)
        }
      },
      () => {
        const agentTrigger = document.querySelector("[data-agent-selector]") as HTMLElement
        if (agentTrigger) {
          agentTrigger.focus()
          setTimeout(() => {
            const event = new KeyboardEvent("keydown", {
              key: "Enter",
              code: "Enter",
              keyCode: 13,
              which: 13,
              bubbles: true,
              cancelable: true,
            })
            agentTrigger.dispatchEvent(event)
          }, 50)
        }
      },
    )
    registerEscapeShortcut(
      () => {
        if (showFolderSelection()) return true

        const instance = activeInstance()
        if (!instance) return false

        const sessionId = activeSessionIdForInstance()
        if (!sessionId || sessionId === "info") return false

        const sessions = getSessions(instance.id)
        const session = sessions.find((s) => s.id === sessionId)
        if (!session) return false

        return isSessionBusy(instance.id, sessionId)
      },
      async () => {
        if (showFolderSelection()) {
          setShowFolderSelection(false)
          return
        }

        const instance = activeInstance()
        const sessionId = activeSessionIdForInstance()
        if (!instance || !sessionId || sessionId === "info") return

        try {
          await abortSession(instance.id, sessionId)
          console.log("Session aborted successfully")
        } catch (error) {
          console.error("Failed to abort session:", error)
        }
      },
      () => {
        const active = document.activeElement as HTMLElement
        active?.blur()
      },
      hideCommandPalette,
    )

    const handleKeyDown = (e: KeyboardEvent) => {
      const target = e.target as HTMLElement

      const isInCombobox = target.closest('[role="combobox"]') !== null
      const isInListbox = target.closest('[role="listbox"]') !== null
      const isInAgentSelect = target.closest('[role="button"][data-agent-selector]') !== null

      if (isInCombobox || isInListbox || isInAgentSelect) {
        return
      }

      const shortcut = keyboardRegistry.findMatch(e)
      if (shortcut) {
        e.preventDefault()
        shortcut.handler()
      }
    }

    window.addEventListener("keydown", handleKeyDown)

    onCleanup(() => {
      window.removeEventListener("keydown", handleKeyDown)
    })

    window.electronAPI.onNewInstance(() => {
      handleNewInstanceRequest()
    })

    window.electronAPI.onInstanceStarted(({ id, port, pid, binaryPath }) => {
      console.log("Instance started:", { id, port, pid, binaryPath })
      updateInstance(id, { port, pid, status: "ready", binaryPath })
    })

    window.electronAPI.onInstanceError(({ id, error }) => {
      console.error("Instance error:", { id, error })
      updateInstance(id, { status: "error", error })
    })

    window.electronAPI.onInstanceStopped(({ id }) => {
      console.log("Instance stopped:", id)
      updateInstance(id, { status: "stopped" })
    })

    window.electronAPI.onInstanceLog(({ id, entry }) => {
      addLog(id, entry)
    })
  })

  return (
    <div class="h-screen w-screen flex flex-col">
      <Show
        when={!hasInstances()}
        fallback={
          <>
            <InstanceTabs
              instances={instances()}
              activeInstanceId={activeInstanceId()}
              onSelect={setActiveInstanceId}
              onClose={handleCloseInstance}
              onNew={handleNewInstanceRequest}
            />

            <Show when={activeInstance()}>
              {(instance) => (
                <>
                  <Show when={activeSessions().size > 0} fallback={<InstanceWelcomeView instance={instance()} />}>
                    <div class="flex flex-1 min-h-0">
                      {/* Session Sidebar */}
                      <div
                        class="session-sidebar flex flex-col bg-surface-secondary"
                        style={{ width: `${sessionSidebarWidth()}px` }}
                      >
                        <SessionList
                          instanceId={instance().id}
                          sessions={activeSessions()}
                          activeSessionId={activeSessionIdForInstance()}
                          onSelect={(id) => setActiveSession(instance().id, id)}
                          onClose={(id) => handleCloseSession(instance().id, id)}
                          onNew={() => handleNewSession(instance().id)}
                          showHeader
                          showFooter={false}
                          headerContent={
                            <div class="session-sidebar-header">
                              <span class="session-sidebar-title text-sm font-semibold text-primary">Sessions</span>
                              <div class="session-sidebar-shortcuts">
                                {(() => {
                                  const shortcut = keyboardRegistry.get("session-prev")
                                  return shortcut ? <KeyboardHint shortcuts={[shortcut]} separator="" /> : null
                                })()}
                                {(() => {
                                  const shortcut = keyboardRegistry.get("session-next")
                                  return shortcut ? <KeyboardHint shortcuts={[shortcut]} separator="" /> : null
                                })()}
                              </div>
                              <button
                                class="session-sidebar-new inline-flex items-center justify-center gap-1.5 rounded-md border border-base px-3 py-2 text-xs font-semibold transition-colors hover:border-accent-primary hover:text-accent-primary"
                                onClick={() => handleNewSession(instance().id)}
                                type="button"
                                aria-label="Create new session"
                                title="New session (Cmd/Ctrl+Shift+N)"
                              >
                                <span class="leading-none">New Session</span>
                              </button>
                            </div>
                          }

                          onWidthChange={setSessionSidebarWidth}
                        />
                        <div class="session-sidebar-separator border-t border-base" />
                        <Show when={activeSessionForInstance()}>
                          {(activeSession) => (
                            <div class="session-sidebar-controls px-3 py-3 border-r border-base flex flex-col gap-3">
                              <AgentSelector
                                instanceId={instance().id}
                                sessionId={activeSession().id}
                                currentAgent={activeSession().agent}
                                onAgentChange={handleSidebarAgentChange}
                              />
                              <ModelSelector
                                instanceId={instance().id}
                                sessionId={activeSession().id}
                                currentModel={activeSession().model}
                                onModelChange={handleSidebarModelChange}
                              />
                            </div>
                          )}
                        </Show>
                      </div>
                      {/* Main Content Area */}
                      <div class="content-area flex-1 min-h-0 overflow-hidden flex flex-col">
                        <Show
                          when={activeSessionIdForInstance() === "info"}
                          fallback={
                            <Show
                              when={activeSessionIdForInstance()}
                              keyed
                              fallback={
                                <div class="flex items-center justify-center h-full">
                                  <div class="text-center text-gray-500 dark:text-gray-400">
                                    <p class="mb-2">No session selected</p>
                                    <p class="text-sm">Select a session to view messages</p>
                                  </div>
                                </div>
                              }
                            >
                              {(sessionId) => (
                                <SessionView
                                  sessionId={sessionId}
                                  activeSessions={activeSessions()}
                                  instanceId={activeInstance()!.id}
                                  instanceFolder={activeInstance()!.folder}
                                  escapeInDebounce={escapeInDebounce()}
                                />
                              )}
                            </Show>
                          }
                        >
                          <InfoView instanceId={instance().id} />
                        </Show>
                      </div>
                    </div>
                  </Show>
                </>
              )}
            </Show>
          </>
        }
      >
        <FolderSelectionView onSelectFolder={handleSelectFolder} isLoading={isSelectingFolder()} />
      </Show>

      <CommandPalette
        open={isCommandPaletteOpen()}
        onClose={hideCommandPalette}
        commands={commandRegistry.getAll()}
        onExecute={handleExecuteCommand}
      />

      <Show when={showFolderSelection()}>
        <div class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center">
          <div class="w-full h-full relative">
            <button
              onClick={() => setShowFolderSelection(false)}
              class="absolute top-4 right-4 z-10 p-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
              title="Close (Esc)"
            >
              <svg
                class="w-5 h-5 text-gray-600 dark:text-gray-300"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
            <FolderSelectionView onSelectFolder={handleSelectFolder} isLoading={isSelectingFolder()} />
          </div>
        </div>
      </Show>
    </div>
  )
}

export default App