@vladimirven/openswe 0.1.0

package/src/components/ManualSessionModal.tsx

@@ -0,0 +1,191 @@
+/**
+ * ManualSessionModal component - Create a new manual session
+ *
+ * Collects a session name and creates a worktree + session entry.
+ */
+
+import { createSignal, createEffect, onCleanup, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import type { ManualSessionModalProps } from "./types"
+import { createManualSession } from "./session-utils"
+import { Footer } from "./Footer"
+import { useColors } from "./theme"
+import { logger } from "../utils/logger"
+
+// Bold attribute constant
+const BOLD = 1
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+
+export function ManualSessionModal(props: ManualSessionModalProps) {
+  const colors = useColors()
+  const modalWidth = 50
+  const maxNameLength = 40
+
+  const [name, setName] = createSignal("")
+  const [error, setError] = createSignal<string | null>(null)
+  const [creating, setCreating] = createSignal(false)
+  const [spinnerFrame, setSpinnerFrame] = createSignal(0)
+
+  // Spinner animation
+  createEffect(() => {
+    if (creating()) {
+      const interval = setInterval(() => {
+        setSpinnerFrame((prev) => (prev + 1) % SPINNER_FRAMES.length)
+      }, 80)
+      onCleanup(() => clearInterval(interval))
+    }
+  })
+
+  // Dynamic height based on error/creating state
+  const modalHeight = () => {
+    let height = 8 // Base: header(1) + label(1) + input(1) + footer(1) + borders(2) + padding(2)
+    if (error()) height += 1
+    if (creating()) height += 1
+    return height
+  }
+
+  const appendChar = (char: string) => {
+    setName((prev) => {
+      if (prev.length >= maxNameLength) return prev
+      return prev + char
+    })
+  }
+
+  const handleSubmit = async () => {
+    const trimmed = name().trim()
+    if (!trimmed) {
+      setError("Session name is required")
+      return
+    }
+
+    setCreating(true)
+    setError(null)
+    logger.debug("Creating manual session", { name: trimmed })
+
+    const result = await createManualSession(props.projectRoot, trimmed, {
+      aiSessionData: { backend: props.currentBackend }
+    })
+
+    if (!result.success || !result.session) {
+      const message = result.error ?? "Failed to create session"
+      logger.warn("Manual session creation failed", message)
+      setError(message)
+      setCreating(false)
+      return
+    }
+
+    logger.debug("Manual session created", { sessionId: result.session.id })
+
+    // Start the session (spawns opencode in tmux)
+    try {
+      await props.sessionManager.startSession({
+        sessionId: result.session.id,
+        // No prompt - launches interactive opencode TUI
+      })
+      logger.debug("Manual session started", { sessionId: result.session.id })
+    } catch (err) {
+      // Session created but failed to start - still close modal
+      // User can try to start it manually by pressing Enter
+      logger.error("Failed to start session:", err)
+    }
+
+    props.onSessionCreated()
+    props.onClose()
+  }
+
+  const extractChar = (event: { name?: string; sequence?: string }) => {
+    if (event.sequence && event.sequence.length === 1) {
+      return event.sequence
+    }
+    if (event.name === "space") return " "
+    if (event.name && event.name.length === 1) return event.name
+    return null
+  }
+
+  useKeyboard((event) => {
+    if (creating()) return
+
+    switch (event.name) {
+      case "escape":
+        props.onClose()
+        return
+      case "backspace":
+        setName((prev) => prev.slice(0, -1))
+        return
+      case "return":
+        handleSubmit()
+        return
+    }
+
+    const char = extractChar(event)
+    if (char) {
+      appendChar(char)
+      setError(null)
+    }
+  })
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <box
+        flexDirection="column"
+        width={modalWidth}
+        height={modalHeight()}
+        backgroundColor={colors().bg.secondary}
+        borderStyle="rounded"
+        borderColor={colors().border.accent}
+        overflow="hidden"
+      >
+        {/* Header */}
+        <box height={1} justifyContent="center" paddingLeft={1} paddingRight={1}>
+          <text fg={colors().text.primary} attributes={BOLD}>
+            New Manual Session
+          </text>
+        </box>
+
+        {/* Content area */}
+        <box flexDirection="column" flexGrow={1} paddingLeft={2} paddingRight={2} paddingTop={1}>
+          <box height={1}>
+            <text fg={colors().text.secondary}>Name:</text>
+          </box>
+
+          <box height={1}>
+            <text fg={colors().text.primary}>
+              {name() || "Type a session name"}
+            </text>
+          </box>
+
+          <Show when={error()}>
+            <box height={1}>
+              <text fg={colors().accent.error}>{error()}</text>
+            </box>
+          </Show>
+
+          <Show when={creating()}>
+            <box height={1} justifyContent="center">
+              <text fg={colors().accent.primary}>
+                {SPINNER_FRAMES[spinnerFrame()]} Creating session...
+              </text>
+            </box>
+          </Show>
+        </box>
+
+        {/* Footer */}
+        <Footer
+          actions={[
+            { key: "Enter", label: "Create" },
+            { key: "Esc", label: "Cancel" },
+          ]}
+          bgColor={colors().bg.primary}
+        />
+      </box>
+    </box>
+  )
+}

package/src/components/PhaseProgress.tsx

@@ -0,0 +1,45 @@
+/**
+ * PhaseProgress component - displays workflow phase progress
+ *
+ * Two variants:
+ * - inline: Just the phase name text (for session cards)
+ * - full: Progress bar + phase name (for preview pane)
+ */
+
+import { Show } from "solid-js"
+import type { PhaseProgressProps } from "./types"
+import {
+  PHASE_DISPLAY_NAMES,
+  getPhaseProgress,
+  generateProgressBar,
+} from "./types"
+import { useColors } from "./theme"
+
+export function PhaseProgress(props: PhaseProgressProps) {
+  const colors = useColors()
+  const displayName = () => PHASE_DISPLAY_NAMES[props.phase]
+  const progress = () => getPhaseProgress(props.phase)
+  const progressBar = () => generateProgressBar(progress(), 10)
+
+  // Color based on phase
+  const phaseColor = () => {
+    if (props.phase === "completed") return colors().accent.success
+    if (props.phase === "failed") return colors().accent.error
+    return colors().progress.text
+  }
+
+  return (
+    <Show
+      when={props.variant === "full"}
+      fallback={
+        <text fg={phaseColor()}>{displayName()}</text>
+      }
+    >
+      <box flexDirection="row" gap={1}>
+        <text fg={colors().progress.filled}>{progressBar()}</text>
+        <text fg={phaseColor()}>{displayName()}</text>
+        <text fg={colors().text.muted}>({progress()}%)</text>
+      </box>
+    </Show>
+  )
+}

package/src/components/Preview.tsx

@@ -0,0 +1,249 @@
+/**
+ * Preview component - right pane showing session terminal output
+ *
+ * Layout:
+ * - Header: Session name + PhaseProgress (full variant)
+ * - Separator
+ * - Terminal Output
+ * - Footer: Session duration + attach hint
+ */
+
+import { Show, createMemo, For } from "solid-js"
+import type { PreviewProps } from "./types"
+import type { Session } from "../store"
+import { getPhaseProgress } from "./types"
+import { useColors, type Colors } from "./theme"
+import { Footer } from "./Footer"
+import { truncate } from "../utils/format"
+import { parseAnsiLine } from "../utils/ansi-parser"
+import { getProvider, isProviderSupported } from "../providers"
+
+import { formatTokens } from "../utils/format"
+
+// Bold attribute constant
+const BOLD = 1
+const VERSION = "v0.1.0" // TODO: Get from package.json or config
+
+/**
+ * Format duration in human-readable form
+ */
+function formatDuration(startedAt: Date | undefined): string {
+  if (!startedAt) return ""
+
+  const diff = Date.now() - startedAt.getTime()
+  const seconds = Math.floor(diff / 1000)
+
+  if (seconds < 60) return `${seconds}s`
+
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = seconds % 60
+
+  if (minutes < 60) return `${minutes}m ${remainingSeconds}s`
+
+  const hours = Math.floor(minutes / 60)
+  const remainingMinutes = minutes % 60
+
+  return `${hours}h ${remainingMinutes}m`
+}
+
+/**
+ * StatusBanner component - shows attention status with icon
+ * Displays colored banner when session needs attention due to questions/errors
+ */
+function StatusBanner(props: { session: Session }) {
+  const colors = useColors()
+  const bannerInfo = createMemo(() => {
+    // General needs_attention (e.g., push failed)
+    return {
+      icon: "!",
+      text: props.session.attentionReason || "Needs attention",
+      color: colors().accent.warning,
+      bgColor: colors().accent.warning,
+    }
+  })
+
+  return (
+    <box
+      width="100%"
+      paddingLeft={1}
+      paddingRight={1}
+      paddingTop={0}
+      paddingBottom={0}
+    >
+      <box
+        flexDirection="row"
+        gap={1}
+        alignItems="center"
+      >
+        <text fg={bannerInfo().color}>{bannerInfo().icon}</text>
+        <text fg={bannerInfo().color}>{bannerInfo().text}</text>
+      </box>
+    </box>
+  )
+}
+
+export function Preview(props: PreviewProps) {
+  const colors = useColors()
+  const duration = createMemo(() => formatDuration(props.startedAt))
+  const isActive = createMemo(() => props.session?.status === "active")
+
+  // Resolve provider branding from session data if available, otherwise fall back to global prop
+  const resolvedBranding = createMemo(() => {
+    const sessionBackend = props.session?.aiSessionData?.backend
+    if (sessionBackend && isProviderSupported(sessionBackend)) {
+      try {
+        return getProvider(sessionBackend).branding
+      } catch {
+        // Fallback if provider lookup fails
+      }
+    }
+    return props.providerBranding
+  })
+
+  const borderColor = createMemo(() => resolvedBranding()?.accentColor ?? colors().border.primary)
+  const providerName = createMemo(() => resolvedBranding()?.displayName ?? "Terminal")
+  const terminalBackground = createMemo(() => resolvedBranding()?.terminalBackground)
+
+  return (
+    <box
+      flexDirection="column"
+      width="70%"
+      height="100%"
+      borderStyle="rounded"
+      borderColor={borderColor()}
+      title={` Preview [${providerName()}] `}
+    >
+      <Show
+        when={props.session}
+        fallback={<NoSelectionState />}
+      >
+        {(session) => (
+          /* Terminal View - Full Height */
+          <box flexDirection="column" width="100%" height="100%">
+             {/* Header with session info */}
+             <box
+                flexDirection="row"
+                width="100%"
+                paddingLeft={1}
+                paddingRight={1}
+                paddingTop={0}
+                paddingBottom={0}
+                justifyContent="space-between"
+                alignItems="flex-start"
+                overflow="hidden"
+              >
+                <box flexDirection="column" overflow="hidden" flexGrow={1} marginRight={1}>
+                  <text fg={colors().text.primary} attributes={BOLD}>
+                    {truncate(session().name, 60)}
+                  </text>
+                  <Show when={session().issueNumber}>
+                    <text fg={colors().text.secondary}>
+                      Issue #{session().issueNumber}
+                    </text>
+                  </Show>
+                </box>
+
+                {/* Right side metadata */}
+                <box flexDirection="column" alignItems="flex-end" marginRight={1}>
+                  <box flexDirection="row" gap={1}>
+                    <text fg={colors().text.muted}>
+                      {session().tokensUsed ? session().tokensUsed.toLocaleString() : "0"}
+                    </text>
+                    <text fg={colors().text.muted}>
+                      {getPhaseProgress(session().phase)}%
+                    </text>
+                    <text fg={colors().text.muted}>($0.00)</text>
+                    <text fg={colors().text.muted}>{VERSION}</text>
+                  </box>
+                </box>
+              </box>
+
+              {/* Status Banner for needs_attention */}
+              <Show when={session().status === "needs_attention"}>
+                <StatusBanner session={session()} />
+              </Show>
+
+              {/* Separator */}
+              <box width="100%" height={1} overflow="hidden">
+                <text fg={colors().border.secondary}>
+                  {"─".repeat(500)}
+                </text>
+              </box>
+
+              <box
+                flexDirection="column"
+                flexGrow={1}
+                width="100%"
+                paddingLeft={1}
+                paddingRight={1}
+                paddingTop={0}
+                justifyContent="flex-end"
+                overflow="hidden"
+                backgroundColor={terminalBackground()}
+              >
+                <Show
+                  when={props.session?.status === "active" && props.snapshotLines && props.snapshotLines.length > 0}
+                  fallback={
+                    <box height="100%" justifyContent="center" alignItems="center">
+                      <text fg={colors().text.muted}>Waiting for output...</text>
+                    </box>
+                  }
+                >
+                  <For each={props.snapshotLines}>
+                    {(line) => {
+                      const segments = parseAnsiLine(line)
+                      return (
+                        <box flexDirection="row">
+                          <For each={segments}>
+                            {(segment) => (
+                              <text
+                                fg={segment.fg || colors().text.primary}
+                                bg={segment.bg}
+                                attributes={segment.bold ? BOLD : undefined}
+                              >
+                                {segment.text}
+                              </text>
+                            )}
+                          </For>
+                        </box>
+                      )
+                    }}
+                  </For>
+                </Show>
+              </box>
+
+               {/* Footer */}
+               <Show when={isActive()}>
+                <Footer
+                  actions={[
+                    { key: "Enter", label: "Attach" },
+                    { key: "tmux-prefix+d", label: "Detach" }
+                  ]}
+                  message={duration() ? `Running for ${duration()}` : undefined}
+                />
+              </Show>
+          </box>
+        )}
+      </Show>
+    </box>
+  )
+}
+
+function NoSelectionState() {
+  const colors = useColors()
+  return (
+    <box
+      flexDirection="column"
+      width="100%"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+      gap={1}
+    >
+      <text fg={colors().text.muted}>No session selected</text>
+      <text fg={colors().text.secondary}>
+        Select a session to view terminal output
+      </text>
+    </box>
+  )
+}

package/src/components/ProviderSwitcherModal.tsx

@@ -0,0 +1,156 @@
+/**
+ * ProviderSwitcherModal component - Allows switching AI backends
+ *
+ * Displays a list of available AI providers and lets the user select one.
+ */
+
+import { createSignal, onMount, For } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import type { ProviderSwitcherModalProps } from "./types"
+import { getAllProviders, type Provider } from "../providers"
+import { Footer } from "./Footer"
+import { useColors } from "./theme"
+
+// Bold attribute constant
+const BOLD = 1
+
+export function ProviderSwitcherModal(props: ProviderSwitcherModalProps) {
+  const colors = useColors()
+  const [providers, setProviders] = createSignal<Provider[]>([])
+  const [focusedIndex, setFocusedIndex] = createSignal(0)
+
+  onMount(() => {
+    const all = getAllProviders()
+    setProviders(all)
+    
+    // Set initial focus to current backend
+    const idx = all.findIndex(p => p.id === props.currentBackend)
+    if (idx !== -1) {
+      setFocusedIndex(idx)
+    }
+  })
+
+  useKeyboard((event) => {
+    const list = providers()
+    
+    switch (event.name) {
+      case "escape":
+        props.onClose()
+        break
+        
+      case "j":
+      case "down":
+        setFocusedIndex(prev => 
+          Math.min(prev + 1, list.length - 1)
+        )
+        break
+        
+      case "k":
+      case "up":
+        setFocusedIndex(prev => 
+          Math.max(prev - 1, 0)
+        )
+        break
+        
+      case "enter":
+      case "return": {
+        const selected = list[focusedIndex()]
+        if (selected) {
+          props.onSelect(selected.id)
+        }
+        break
+      }
+    }
+  })
+
+  const modalWidth = 50
+  const modalHeight = 12
+
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <box
+        flexDirection="column"
+        width={modalWidth}
+        height={modalHeight}
+        backgroundColor={colors().bg.secondary}
+        borderStyle="rounded"
+        borderColor={colors().border.accent}
+        overflow="hidden"
+      >
+        {/* Header */}
+        <box
+          height={1}
+          justifyContent="center"
+          paddingLeft={1}
+          paddingRight={1}
+          marginBottom={1}
+        >
+          <text fg={colors().text.primary} attributes={BOLD}>
+            Select AI Provider
+          </text>
+        </box>
+
+        {/* List */}
+        <box flexDirection="column" flexGrow={1} paddingLeft={2} paddingRight={2}>
+          <For each={providers()}>
+            {(provider, i) => {
+              const isFocused = () => i() === focusedIndex()
+              const isCurrent = () => provider.id === props.currentBackend
+              
+              return (
+                <box
+                  height={1}
+                  flexDirection="row"
+                  alignItems="center"
+                  backgroundColor={isFocused() ? colors().bg.cardSelected : undefined}
+                >
+                  {/* Focus Indicator */}
+                  <box width={2}>
+                    <text fg={colors().accent.primary}>
+                      {isFocused() ? "▍" : " "}
+                    </text>
+                  </box>
+
+                  {/* Selection Indicator */}
+                  <box width={4}>
+                    <text 
+                      fg={isCurrent() ? colors().accent.success : colors().text.muted}
+                      attributes={isCurrent() ? BOLD : 0}
+                    >
+                      {isCurrent() ? "[✓]" : "[ ]"}
+                    </text>
+                  </box>
+
+                  {/* Provider Name */}
+                  <text 
+                    fg={isFocused() ? colors().text.primary : colors().text.secondary}
+                    attributes={isFocused() ? BOLD : 0}
+                  >
+                    {provider.branding.displayName}
+                  </text>
+                </box>
+              )
+            }}
+          </For>
+        </box>
+
+        {/* Footer */}
+        <Footer 
+          actions={[
+            { key: "Enter", label: "Select" },
+            { key: "Esc", label: "Cancel" }
+          ]} 
+          bgColor={colors().bg.primary} 
+        />
+      </box>
+    </box>
+  )
+}