@vladimirven/openswe 0.1.0

package/src/components/ScrollableText.tsx

@@ -0,0 +1,120 @@
+/**
+ * ScrollableText component - Displays text that scrolls horizontally if it exceeds width
+ *
+ * Behavior:
+ * - If text fits in width: Renders statically
+ * - If text exceeds width AND isActive is true: Scrolls horizontally (marquee)
+ * - If text exceeds width AND isActive is false: Truncates with ellipsis
+ */
+
+import { createSignal, createEffect, onCleanup, mergeProps, Show } from "solid-js"
+import { truncate } from "../utils/format"
+
+export interface ScrollableTextProps {
+  text: string
+  width: number
+  isActive?: boolean
+  fg?: string
+  attributes?: number
+  align?: "left" | "right" | "center"
+  speed?: number
+  delay?: number
+}
+
+export function ScrollableText(props: ScrollableTextProps) {
+  const merged = mergeProps({ 
+    isActive: true, 
+    speed: 200, 
+    delay: 1500,
+    align: "left"
+  }, props)
+
+  const [offset, setOffset] = createSignal(0)
+  const [isScrolling, setIsScrolling] = createSignal(false)
+
+  // Reset offset when active state or text changes
+  createEffect(() => {
+    // Dependencies
+    const text = merged.text
+    const active = merged.isActive
+
+    if (!active) {
+      setOffset(0)
+      setIsScrolling(false)
+      return
+    }
+
+    // If text fits, don't scroll
+    if (text.length <= merged.width) {
+      setOffset(0)
+      setIsScrolling(false)
+      return
+    }
+
+    // Reset offset initially
+    setOffset(0)
+    setIsScrolling(false)
+
+    // Start delay timer
+    const delayTimer = setTimeout(() => {
+      setIsScrolling(true)
+    }, merged.delay)
+
+    onCleanup(() => clearTimeout(delayTimer))
+  })
+
+  // Scrolling interval
+  createEffect(() => {
+    if (!isScrolling() || !merged.isActive) return
+
+    const interval = setInterval(() => {
+      setOffset((prev) => prev + 1)
+    }, merged.speed)
+
+    onCleanup(() => clearInterval(interval))
+  })
+
+  const displayText = () => {
+    const { text, width, isActive } = merged
+    
+    // Static case: Fits in width
+    if (text.length <= width) {
+      // Handle alignment
+      if (merged.align === "center") {
+        const pad = Math.floor((width - text.length) / 2)
+        return text.padStart(text.length + pad).padEnd(width)
+      }
+      if (merged.align === "right") {
+        return text.padStart(width)
+      }
+      return text.padEnd(width)
+    }
+
+    // Inactive case: Truncate
+    if (!isActive) {
+      return truncate(text, width)
+    }
+
+    // Active scrolling case
+    // We add spacing equal to width/3 (min 3 chars) between loops
+    const spacer = "   " 
+    const fullText = text + spacer
+    const currentOffset = offset() % fullText.length
+    
+    // Create the window
+    let slice = fullText.slice(currentOffset, currentOffset + width)
+    
+    // If slice is shorter than width (hit end of string), append start
+    if (slice.length < width) {
+      slice += fullText.slice(0, width - slice.length)
+    }
+    
+    return slice
+  }
+
+  return (
+    <text fg={merged.fg} attributes={merged.attributes}>
+      {displayText()}
+    </text>
+  )
+}

package/src/components/SessionCard.tsx

@@ -0,0 +1,60 @@
+/**
+ * SessionCard component - displays a single session in the list
+ *
+ * Layout (1 line):
+ * - Status icon + session name
+ */
+
+import type { SessionCardProps } from "./types"
+import { STATUS_ICONS } from "./types"
+import { ScrollableText } from "./ScrollableText"
+import { useColors } from "./theme"
+
+// Bold attribute constant
+const BOLD = 1
+
+export function SessionCard(props: SessionCardProps) {
+  const colors = useColors()
+  const statusIcon = () => STATUS_ICONS[props.session.status]
+  const statusColor = () => colors().status[props.session.status]
+  
+  // Calculate width for the name scrolling area
+  // availableWidth is total inner width of the card
+  // Subtract: 
+  // - Padding (L+R): 2
+  // - Status Icon + Gap: 2
+  const nameWidth = () => Math.max(10, props.availableWidth - 4)
+
+  return (
+    <box
+      flexDirection="row"
+      width="100%"
+      paddingLeft={1}
+      paddingRight={1}
+      paddingTop={0}
+      paddingBottom={0}
+      backgroundColor={
+        props.isSelected ? colors().bg.cardSelected : colors().bg.card
+      }
+      borderStyle={props.isSelected ? "rounded" : "single"}
+      borderColor={props.isSelected ? colors().accent.primary : colors().border.primary}
+      overflow="hidden"
+      justifyContent="space-between"
+      alignItems="center"
+    >
+      {/* Left: Status + Name */}
+      <box flexDirection="row" gap={1} overflow="hidden" flexShrink={1}>
+        <text fg={statusColor()} attributes={BOLD}>
+          {statusIcon()}
+        </text>
+        <ScrollableText
+          text={props.session.name}
+          width={nameWidth()}
+          isActive={props.isSelected}
+          fg={colors().text.primary}
+          attributes={props.isSelected ? BOLD : 0}
+        />
+      </box>
+    </box>
+  )
+}

package/src/components/SessionList.tsx

@@ -0,0 +1,79 @@
+/**
+ * SessionList component - left pane with scrollable session list
+ *
+ * Displays a list of SessionCards with:
+ * - Title showing total and active session counts
+ * - Empty state when no sessions exist
+ * - Scrollbox for overflow
+ */
+
+import { Show, For } from "solid-js"
+import type { SessionListProps } from "./types"
+import { SessionCard } from "./SessionCard"
+import { useColors } from "./theme"
+
+export function SessionList(props: SessionListProps) {
+  const colors = useColors()
+  const totalCount = () => props.sessions.length
+  const activeCount = () =>
+    props.sessions.filter((s) => s.status === "active").length
+
+  const title = () => ` Sessions (${activeCount()}/${totalCount()} active) `
+
+  return (
+    <box
+      flexDirection="column"
+      width="30%"
+      height="100%"
+      borderStyle="rounded"
+      borderColor={colors().border.primary}
+      title={title()}
+    >
+      <Show
+        when={props.sessions.length > 0}
+        fallback={<EmptyState />}
+      >
+        <scrollbox
+          flexDirection="column"
+          width="100%"
+          height="100%"
+          gap={1}
+          paddingTop={1}
+          paddingBottom={1}
+        >
+          <For each={props.sessions}>
+            {(session, index) => (
+              <SessionCard
+                session={session}
+                isSelected={index() === props.selectedIndex}
+                availableWidth={props.listWidth - 4}
+              />
+            )}
+          </For>
+        </scrollbox>
+      </Show>
+    </box>
+  )
+}
+
+function EmptyState() {
+  const colors = useColors()
+  return (
+    <box
+      flexDirection="column"
+      width="100%"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+      gap={1}
+    >
+      <text fg={colors().text.muted}>No sessions yet</text>
+      <text fg={colors().text.secondary}>
+        Press 'n' to create a new session
+      </text>
+      <text fg={colors().text.secondary}>
+        or 'i' to browse issues
+      </text>
+    </box>
+  )
+}

package/src/components/SessionTerminal.tsx

@@ -0,0 +1,89 @@
+/**
+ * SessionTerminal component - Full screen interactive terminal view
+ */
+
+import { For } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import type { Session } from "../store"
+import { useColors } from "./theme"
+
+export interface SessionTerminalProps {
+  session: Session
+  lines: string[]
+  onInput: (data: string) => void
+  onExit: () => void
+}
+
+export function SessionTerminal(props: SessionTerminalProps) {
+  const colors = useColors()
+
+  // Handle keyboard input
+  useKeyboard((event) => {
+    // Handle exit shortcut (Ctrl+C or Esc)
+    if (event.name === "c" && event.ctrl) {
+      props.onExit()
+      return
+    }
+    if (event.name === "escape") {
+      props.onExit()
+      return
+    }
+
+    // Map keys to input
+    if (event.name === "return") {
+      props.onInput("\r")
+    } else if (event.name === "backspace") {
+      props.onInput("\x7f") // DEL
+    } else if (event.name === "tab") {
+      props.onInput("\t")
+    } else if (event.name === "space") {
+      props.onInput(" ")
+    } else if (event.name && event.name.length === 1 && !event.ctrl && !event.meta) {
+      // Regular characters
+      props.onInput(event.name)
+    }
+  })
+
+  return (
+    <box
+      flexDirection="column"
+      width="100%"
+      height="100%"
+      backgroundColor={colors().bg.primary}
+    >
+      {/* Header */}
+      <box
+        height={1}
+        width="100%"
+        backgroundColor={colors().bg.secondary}
+        paddingLeft={1}
+        paddingRight={1}
+        justifyContent="space-between"
+      >
+        <text fg={colors().text.primary} attributes={1}>
+          Terminal: {props.session.name}
+        </text>
+        <text fg={colors().text.muted}>
+          [Esc] Detach
+        </text>
+      </box>
+
+      {/* Terminal Output */}
+      <scrollbox
+        flexDirection="column"
+        flexGrow={1}
+        width="100%"
+        paddingLeft={1}
+        paddingRight={1}
+        stickyScroll
+        stickyStart="bottom"
+      >
+        <For each={props.lines}>
+          {(line) => (
+            <text fg={colors().text.primary}>{line || " "}</text>
+          )}
+        </For>
+      </scrollbox>
+    </box>
+  )
+}

package/src/components/StatusBar.tsx

@@ -0,0 +1,84 @@
+/**
+ * StatusBar component - displays header and footer bars
+ *
+ * Two variants:
+ * - header: "OpenSWE | repo/name | [task badge] | [Backend]"
+ * - footer: Keybinding hints
+ */
+
+import { Show, For } from "solid-js"
+import type { StatusBarProps } from "./types"
+import type { ProviderBranding } from "../providers"
+import { Footer } from "./Footer"
+import { useColors, keybindings } from "./theme"
+
+// Bold attribute constant (bit 0 in text attributes)
+const BOLD = 1
+
+export function StatusBar(props: StatusBarProps) {
+  return (
+    <Show when={props.variant === "header"} fallback={<FooterBar />}>
+      <HeaderBar
+        repoName={props.repoName}
+        backend={props.backend}
+        sessionId={props.sessionId}
+        providerBranding={props.providerBranding}
+      />
+    </Show>
+  )
+}
+
+function HeaderBar(props: {
+  repoName?: string
+  backend?: string
+  sessionId?: string
+  providerBranding?: ProviderBranding
+}) {
+  const colors = useColors()
+  const headerBg = () => props.providerBranding?.headerBackground ?? props.providerBranding?.accentColor ?? colors().accent.primary
+  const backendDisplay = () => props.providerBranding?.displayName ?? props.backend
+
+  return (
+    <box
+      flexDirection="row"
+      width="100%"
+      height={1}
+      backgroundColor={headerBg()}
+      paddingLeft={1}
+      paddingRight={1}
+      justifyContent="space-between"
+    >
+      <box flexDirection="row" gap={1}>
+        <text fg={colors().text.inverse} attributes={BOLD}>
+          OpenSWE
+        </text>
+        <Show when={props.repoName}>
+          <text fg={colors().text.inverse}>|</text>
+          <text fg={colors().text.inverse}>{props.repoName}</text>
+        </Show>
+      </box>
+      <box flexDirection="row" gap={1}>
+        <Show when={props.sessionId}>
+          <text fg={colors().text.inverse}>ID: {props.sessionId}</text>
+        </Show>
+        <Show when={backendDisplay()}>
+          <text fg={colors().text.inverse}>[{backendDisplay()}]</text>
+        </Show>
+      </box>
+    </box>
+  )
+}
+
+function FooterBar() {
+  const actions = [
+    { key: keybindings.navigate, label: "Navigate" },
+    { key: keybindings.newSession, label: "New" },
+    { key: keybindings.issues, label: "Issues" },
+    { key: "a", label: "AI" },
+    { key: keybindings.theme, label: "Theme" },
+    { key: keybindings.help, label: "Help" },
+    { key: keybindings.quit, label: "Quit" },
+  ]
+
+  return <Footer actions={actions} />
+}

package/src/components/ThemeSwitcherModal.tsx

@@ -0,0 +1,237 @@
+/**
+ * ThemeSwitcherModal component - Allows switching UI themes
+ *
+ * Displays a scrollable list of available themes and lets the user select one.
+ */
+
+import { createSignal, onMount, For, createMemo } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import type { ThemeSwitcherModalProps } from "./types"
+import { useTheme } from "../theme"
+import { Footer } from "./Footer"
+import { useColors } from "./theme"
+
+// Bold attribute constant
+const BOLD = 1
+
+export function ThemeSwitcherModal(props: ThemeSwitcherModalProps) {
+  const { availableThemes } = useTheme()
+  const colors = useColors()
+  const [focusedIndex, setFocusedIndex] = createSignal(0)
+  
+  // Viewport state for scrolling
+  const VIEWPORT_HEIGHT = 10
+  const [viewportStart, setViewportStart] = createSignal(0)
+
+  const themes = createMemo(() => availableThemes())
+
+  onMount(() => {
+    const all = themes()
+    
+    // Set initial focus to current theme
+    const idx = all.findIndex(t => t === props.currentTheme)
+    if (idx !== -1) {
+      setFocusedIndex(idx)
+      // Center the initial selection in viewport if possible
+      const start = Math.max(0, Math.min(idx - Math.floor(VIEWPORT_HEIGHT / 2), all.length - VIEWPORT_HEIGHT))
+      setViewportStart(start)
+    }
+  })
+
+  // Ensure viewport follows focus
+  const updateViewport = (newIndex: number) => {
+    const currentStart = viewportStart()
+    
+    if (newIndex < currentStart) {
+      // Scrolled up past top
+      setViewportStart(newIndex)
+    } else if (newIndex >= currentStart + VIEWPORT_HEIGHT) {
+      // Scrolled down past bottom
+      setViewportStart(newIndex - VIEWPORT_HEIGHT + 1)
+    }
+  }
+
+  useKeyboard((event) => {
+    const list = themes()
+    
+    switch (event.name) {
+      case "escape":
+        props.onClose()
+        break
+        
+      case "j":
+      case "down": {
+        const next = Math.min(focusedIndex() + 1, list.length - 1)
+        setFocusedIndex(next)
+        updateViewport(next)
+        break
+      }
+        
+      case "k":
+      case "up": {
+        const prev = Math.max(focusedIndex() - 1, 0)
+        setFocusedIndex(prev)
+        updateViewport(prev)
+        break
+      }
+
+      case "pageup": {
+        const prev = Math.max(focusedIndex() - VIEWPORT_HEIGHT, 0)
+        setFocusedIndex(prev)
+        updateViewport(prev)
+        break
+      }
+
+      case "pagedown": {
+        const next = Math.min(focusedIndex() + VIEWPORT_HEIGHT, list.length - 1)
+        setFocusedIndex(next)
+        updateViewport(next)
+        break
+      }
+        
+      case "enter":
+      case "return": {
+        const selected = list[focusedIndex()]
+        if (selected) {
+          props.onSelect(selected)
+        }
+        break
+      }
+    }
+  })
+
+  // Visible items based on viewport
+  const visibleThemes = createMemo(() => {
+    const all = themes()
+    const start = viewportStart()
+    return all.slice(start, start + VIEWPORT_HEIGHT).map((name, i) => ({
+      name,
+      originalIndex: start + i
+    }))
+  })
+
+  // Calculate scrollbar
+  const scrollbarInfo = createMemo(() => {
+    const total = themes().length
+    const start = viewportStart()
+    const height = VIEWPORT_HEIGHT
+    
+    if (total <= height) return null
+    
+    const trackHeight = height
+    const thumbHeight = Math.max(1, Math.floor((height / total) * trackHeight))
+    const thumbTop = Math.floor((start / (total - height)) * (trackHeight - thumbHeight))
+    
+    return { thumbHeight, thumbTop }
+  })
+
+  const modalWidth = 50
+  // Header + List + Footer + Padding
+  const modalHeight = VIEWPORT_HEIGHT + 6
+
+  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 Theme ({focusedIndex() + 1}/{themes().length})
+          </text>
+        </box>
+
+        {/* List Container with Scrollbar */}
+        <box flexDirection="row" flexGrow={1} paddingLeft={2} paddingRight={1} marginBottom={1}>
+          {/* List */}
+          <box flexDirection="column" flexGrow={1}>
+            <For each={visibleThemes()}>
+              {(item) => {
+                const isFocused = () => item.originalIndex === focusedIndex()
+                const isCurrent = () => item.name === props.currentTheme
+
+                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>
+
+                    {/* Theme Name */}
+                    <text
+                      fg={isFocused() ? colors().text.primary : colors().text.secondary}
+                      attributes={isFocused() ? BOLD : 0}
+                    >
+                      {item.name}
+                    </text>
+                  </box>
+                )
+              }}
+            </For>
+          </box>
+
+          {/* Scrollbar */}
+          <box width={1} flexDirection="column" marginLeft={1}>
+            {scrollbarInfo() && (
+              <>
+                {/* Track above thumb */}
+                <box height={scrollbarInfo()!.thumbTop} />
+
+                {/* Thumb */}
+                <box height={scrollbarInfo()!.thumbHeight}>
+                  <text fg={colors().border.accent}>|</text>
+                </box>
+              </>
+            )}
+          </box>
+        </box>
+
+        {/* Footer */}
+        <Footer
+          actions={[
+            { key: "Enter", label: "Select" },
+            { key: "Esc", label: "Cancel" }
+          ]}
+          bgColor={colors().bg.primary}
+        />
+      </box>
+    </box>
+  )
+}