@sleepy-ai/cli 0.0.0-main-202607032053 → 0.1.4

package/src/cli/cmd/tui/component/prompt/offset.ts

@@ -0,0 +1,45 @@
+// The editor (@opentui/core) tracks cursor/extmark positions as display-WIDTH
+// offsets: a wide CJK character counts as 2 columns. The plainText we slice in
+// JS is a UTF-16 string where that same character is 1 unit. These helpers
+// translate between the two coordinate systems so the two never get mixed.
+// Inputs are assumed to sit on character (code-point) boundaries, which is all
+// the editor ever emits; an offset landing inside a wide char rounds up to the
+// next boundary.
+
+// The editor advances its offset by 1 for a newline and 2 for a tab, but
+// Bun.stringWidth returns 0 for both, so we special-case them to stay aligned
+// with the editor. (Pasted "\r" never reaches here — paste input is normalized
+// to "\n" and the editor itself maps "\r" to "\n".)
+function charWidth(ch: string): number {
+  if (ch === "\n") return 1
+  if (ch === "\t") return 2
+  return Bun.stringWidth(ch)
+}
+
+export function widthToStringIndex(text: string, widthOffset: number): number {
+  let width = 0
+  let index = 0
+  for (const ch of text) {
+    if (width >= widthOffset) break
+    width += charWidth(ch)
+    index += ch.length
+  }
+  return index
+}
+
+export function stringIndexToWidth(text: string, stringIndex: number): number {
+  let width = 0
+  let index = 0
+  for (const ch of text) {
+    if (index >= stringIndex) break
+    width += charWidth(ch)
+    index += ch.length
+  }
+  return width
+}
+
+// The character immediately after a width-based cursor offset, or undefined at
+// end of input. Used to decide whether an inserted mention needs a trailing space.
+export function charAfterCursor(text: string, cursorWidth: number): string | undefined {
+  return text.at(widthToStringIndex(text, cursorWidth))
+}

package/src/cli/cmd/tui/component/prompt/part.ts

@@ -0,0 +1,36 @@
+import { PartID } from "@/session/schema"
+import type { PromptInfo } from "./history"
+import { widthToStringIndex } from "./offset"
+
+type Item = PromptInfo["parts"][number]
+
+export function strip(part: Item & { id: string; messageID: string; sessionID: string }): Item {
+  const { id: _id, messageID: _messageID, sessionID: _sessionID, ...rest } = part
+  return rest
+}
+
+export function assign(part: Item): Item & { id: PartID } {
+  return {
+    ...part,
+    id: PartID.ascending(),
+  }
+}
+
+// Editor extmark offsets are display-WIDTH based (a wide CJK char counts as 2),
+// while plainText is a JS UTF-16 string (a CJK char is 1 unit). widthToStringIndex
+// converts a width offset into the matching UTF-16 string index so .slice lines up.
+// Replace each placeholder span (given in width-based offsets) in the editor
+// plainText with its real pasted content. Marks are applied right-to-left so
+// earlier offsets stay valid as the string is rewritten.
+export function expandPlaceholders(
+  plainText: string,
+  marks: { start: number; end: number; text: string }[],
+): string {
+  return [...marks]
+    .sort((a, b) => b.start - a.start)
+    .reduce((text, mark) => {
+      const start = widthToStringIndex(text, mark.start)
+      const end = widthToStringIndex(text, mark.end)
+      return text.slice(0, start) + mark.text + text.slice(end)
+    }, plainText)
+}

package/src/cli/cmd/tui/component/prompt/stash.tsx

@@ -0,0 +1,101 @@
+import path from "path"
+import { Global } from "@/global"
+import { Filesystem } from "@/util"
+import { onMount } from "solid-js"
+import { createStore, produce, unwrap } from "solid-js/store"
+import { createSimpleContext } from "../../context/helper"
+import { appendFile, writeFile } from "fs/promises"
+import type { PromptInfo } from "./history"
+
+export type StashEntry = {
+  input: string
+  parts: PromptInfo["parts"]
+  timestamp: number
+}
+
+const MAX_STASH_ENTRIES = 50
+
+export const { use: usePromptStash, provider: PromptStashProvider } = createSimpleContext({
+  name: "PromptStash",
+  init: () => {
+    const stashPath = path.join(Global.Path.state, "prompt-stash.jsonl")
+    onMount(async () => {
+      const text = await Filesystem.readText(stashPath).catch(() => "")
+      const lines = text
+        .split("\n")
+        .filter(Boolean)
+        .map((line) => {
+          try {
+            return JSON.parse(line)
+          } catch {
+            return null
+          }
+        })
+        .filter((line): line is StashEntry => line !== null)
+        .slice(-MAX_STASH_ENTRIES)
+
+      setStore("entries", lines)
+
+      // Rewrite file with only valid entries to self-heal corruption
+      if (lines.length > 0) {
+        const content = lines.map((line) => JSON.stringify(line)).join("\n") + "\n"
+        writeFile(stashPath, content).catch(() => {})
+      }
+    })
+
+    const [store, setStore] = createStore({
+      entries: [] as StashEntry[],
+    })
+
+    return {
+      list() {
+        return store.entries
+      },
+      push(entry: Omit<StashEntry, "timestamp">) {
+        const stash = structuredClone(unwrap({ ...entry, timestamp: Date.now() }))
+        let trimmed = false
+        setStore(
+          produce((draft) => {
+            draft.entries.push(stash)
+            if (draft.entries.length > MAX_STASH_ENTRIES) {
+              draft.entries = draft.entries.slice(-MAX_STASH_ENTRIES)
+              trimmed = true
+            }
+          }),
+        )
+
+        if (trimmed) {
+          const content = store.entries.map((line) => JSON.stringify(line)).join("\n") + "\n"
+          writeFile(stashPath, content).catch(() => {})
+          return
+        }
+
+        appendFile(stashPath, JSON.stringify(stash) + "\n").catch(() => {})
+      },
+      pop() {
+        if (store.entries.length === 0) return undefined
+        const entry = store.entries[store.entries.length - 1]
+        setStore(
+          produce((draft) => {
+            draft.entries.pop()
+          }),
+        )
+        const content =
+          store.entries.length > 0 ? store.entries.map((line) => JSON.stringify(line)).join("\n") + "\n" : ""
+        writeFile(stashPath, content).catch(() => {})
+        return entry
+      },
+      remove(index: number) {
+        if (index < 0 || index >= store.entries.length) return
+        setStore(
+          produce((draft) => {
+            draft.entries.splice(index, 1)
+          }),
+        )
+        const content =
+          store.entries.length > 0 ? store.entries.map((line) => JSON.stringify(line)).join("\n") + "\n" : ""
+        writeFile(stashPath, content).catch(() => {})
+      },
+    }
+  },
+})

package/src/cli/cmd/tui/component/spinner.tsx

@@ -0,0 +1,24 @@
+import { Show } from "solid-js"
+import { useTheme } from "../context/theme"
+import { useKV } from "../context/kv"
+import type { JSX } from "@opentui/solid"
+import type { RGBA } from "@opentui/core"
+import "opentui-spinner/solid"
+
+const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+
+export function Spinner(props: { children?: JSX.Element; color?: RGBA }) {
+  const { theme } = useTheme()
+  const kv = useKV()
+  const color = () => props.color ?? theme.textMuted
+  return (
+    <Show when={kv.get("animations_enabled", true)} fallback={<text fg={color()}>⋯ {props.children}</text>}>
+      <box flexDirection="row" gap={1}>
+        <spinner frames={frames} interval={80} color={color()} />
+        <Show when={props.children}>
+          <text fg={color()}>{props.children}</text>
+        </Show>
+      </box>
+    </Show>
+  )
+}

package/src/cli/cmd/tui/component/starry-background.tsx

@@ -0,0 +1,305 @@
+import { createEffect, createSignal, onCleanup, onMount, createMemo } from "solid-js"
+import { RGBA, StyledText, type BoxRenderable, type TextChunk, type TextRenderable } from "@opentui/core"
+import { useTheme, tint } from "@tui/context/theme"
+
+const STAR_CHARS_DARK = ["✦", "✧", "✦", "✧", "✦", "✧", "✦", " "]
+const STAR_CHARS_LIGHT = ["✦", "✧", "✦", "✧", "✦", "✧", "✦", " "]
+const HOT_CHAR = "✶"
+const HOT_THRESHOLD = 0.88
+const TWINKLE_INTERVAL = 200
+const DENSITY = 0.00394
+const METEOR_INTERVAL = 8000
+const METEOR_DURATION = 3600
+const METEOR_ANGLE = 0.36
+const METEOR_TAIL = 32
+const METEOR_FRAME_INTERVAL = 50
+const METEOR_STEP = 0.15
+
+type StarField = {
+  grid: string[][]
+  brightness: number[][]
+}
+
+type Meteor = {
+  at: number
+  startX: number
+  startY: number
+  speed: number
+}
+
+function appendChunk(chunks: TextChunk[], text: string, fg?: RGBA) {
+  const prev = chunks.at(-1)
+  if (prev?.fg?.equals(fg) && prev.bg === undefined && prev.attributes === 0) {
+    prev.text += text
+    return
+  }
+  chunks.push({ __isChunk: true, text, fg, attributes: 0 })
+}
+
+function generateField(w: number, h: number): StarField {
+  const grid: string[][] = []
+  const brightness: number[][] = []
+  for (let y = 0; y < h; y++) {
+    const row: string[] = []
+    const brow: number[] = []
+    for (let x = 0; x < w; x++) {
+      if (Math.random() < DENSITY) {
+        const idx = Math.floor(Math.random() * (STAR_CHARS_DARK.length - 1))
+        row.push(String(idx))
+        brow.push(0.15 + Math.random() * 0.4)
+      } else {
+        row.push(" ")
+        brow.push(0)
+      }
+    }
+    grid.push(row)
+    brightness.push(brow)
+  }
+  return { grid, brightness }
+}
+
+// Map a (col, row) within a 2×4 Braille sub-grid to its bit index in U+2800 patterns.
+// Layout: dots 1/2/3 in left column rows 0/1/2, dot 7 in left column row 3,
+// dots 4/5/6 in right column rows 0/1/2, dot 8 in right column row 3.
+function brailleBit(col: number, row: number): number {
+  if (col === 0) return row === 3 ? 6 : row
+  return row === 3 ? 7 : 3 + row
+}
+
+export function StarryBackground(props: { meteor?: () => boolean } = {}) {
+  const { theme } = useTheme()
+  const [field, setField] = createSignal<StarField>({ grid: [], brightness: [] })
+  const [size, setSize] = createSignal({ w: 80, h: 24 })
+  const [meteor, setMeteor] = createSignal<Meteor>()
+  const [frame, setFrame] = createSignal(0)
+  let timer: ReturnType<typeof setInterval> | undefined
+  let meteorTimer: ReturnType<typeof setInterval> | undefined
+  let frameTimer: ReturnType<typeof setInterval> | undefined
+  let box: BoxRenderable | undefined
+  let text: TextRenderable | undefined
+  let mounted = false
+
+  const sync = () => {
+    if (!box) return
+    const next = { w: box.width || 80, h: box.height || 24 }
+    const cur = size()
+    if (next.w === cur.w && next.h === cur.h) return
+    setSize(next)
+    setField(generateField(next.w, next.h))
+  }
+
+  onMount(() => {
+    mounted = true
+    sync()
+    box?.on("resize", sync)
+    timer = setInterval(() => {
+      if (!mounted) return
+      const { w, h } = size()
+      setField((prev) => {
+        const next = { grid: prev.grid, brightness: [...prev.brightness.map((r) => [...r])] }
+        const count = Math.floor(w * h * 0.008)
+        for (let i = 0; i < count; i++) {
+          const y = Math.floor(Math.random() * h)
+          const x = Math.floor(Math.random() * w)
+          if (next.grid[y]?.[x] && next.grid[y][x] !== " ") {
+            const r = Math.random()
+            // 12% chance of a "hot spike" (very bright), 68% normal bright, 20% dim
+            next.brightness[y][x] =
+              r < 0.12 ? 0.92 + Math.random() * 0.08 : r < 0.8 ? 0.7 + Math.random() * 0.22 : 0.05 + Math.random() * 0.2
+          }
+        }
+        return next
+      })
+    }, TWINKLE_INTERVAL)
+    meteorTimer = setInterval(() => {
+      if (!mounted) return
+      if (props.meteor && !props.meteor()) return
+      const { w, h } = size()
+      const startY = Math.floor(Math.random() * 2)
+      const speed = Math.max(0.011, Math.min(0.038, (h - startY) / (Math.sin(METEOR_ANGLE) * METEOR_DURATION)))
+      setMeteor({
+        at: performance.now(),
+        startX: w - Math.random() * Math.max(1, w * 0.15),
+        startY,
+        speed,
+      })
+      if (frameTimer) clearInterval(frameTimer)
+      frameTimer = setInterval(() => {
+        if (!mounted) {
+          if (frameTimer) clearInterval(frameTimer)
+          frameTimer = undefined
+          return
+        }
+        setFrame((n) => n + 1)
+        const m = meteor()
+        if (!m || performance.now() - m.at > METEOR_DURATION) {
+          if (frameTimer) {
+            clearInterval(frameTimer)
+            frameTimer = undefined
+          }
+          setMeteor(undefined)
+        }
+      }, METEOR_FRAME_INTERVAL)
+    }, METEOR_INTERVAL)
+  })
+
+  onCleanup(() => {
+    mounted = false
+    box?.off("resize", sync)
+    if (timer) {
+      clearInterval(timer)
+      timer = undefined
+    }
+    if (meteorTimer) {
+      clearInterval(meteorTimer)
+      meteorTimer = undefined
+    }
+    if (frameTimer) {
+      clearInterval(frameTimer)
+      frameTimer = undefined
+    }
+  })
+
+  const isDark = createMemo(() => {
+    const bg = theme.background
+    return (bg.r ?? 0) + (bg.g ?? 0) + (bg.b ?? 0) < 384
+  })
+
+  const content = createMemo(() => {
+    void frame()
+    const f = field()
+    if (!f.grid.length) return new StyledText([])
+    const dark = isDark()
+    const charSet = dark ? STAR_CHARS_DARK : STAR_CHARS_LIGHT
+    const meteorMap = new Map<string, { char: string; color: RGBA }>()
+    const m = meteor()
+    if (m) {
+      const elapsed = performance.now() - m.at
+      if (elapsed >= 0 && elapsed <= METEOR_DURATION) {
+        const distance = elapsed * m.speed
+        const dx = -Math.cos(METEOR_ANGLE)
+        const dy = Math.sin(METEOR_ANGLE)
+        const headX = m.startX + distance * dx
+        const headY = m.startY + distance * dy
+        const envelope = Math.sin((elapsed / METEOR_DURATION) * Math.PI)
+        const beamCore = dark ? RGBA.fromInts(255, 255, 255) : RGBA.fromInts(40, 60, 130)
+        const beamGlow = dark ? RGBA.fromInts(180, 215, 255) : RGBA.fromInts(80, 110, 170)
+        const gridH = f.grid.length
+        const gridW = f.grid[0]?.length ?? 0
+        // Walk the trajectory in fine steps and accumulate Braille dots per cell so
+        // the rendered beam visually traces the exact movement angle.
+        const cellAcc = new Map<string, { dots: number; minT: number }>()
+        const setDot = (px: number, py: number, t: number) => {
+          const subX = Math.floor(px * 2)
+          const subY = Math.floor(py * 4)
+          const cx = subX >> 1
+          const cy = subY >> 2
+          if (cx < 0 || cx >= gridW || cy < 0 || cy >= gridH) return
+          const bit = brailleBit(subX & 1, subY & 3)
+          const key = `${cx},${cy}`
+          const existing = cellAcc.get(key)
+          cellAcc.set(key, {
+            dots: (existing?.dots ?? 0) | (1 << bit),
+            minT: Math.min(existing?.minT ?? Infinity, t),
+          })
+        }
+        for (let t = 0; t <= METEOR_TAIL; t += METEOR_STEP) {
+          setDot(headX - t * dx, headY - t * dy, t)
+        }
+        // Round head: filled disk in Braille sub-pixel space. Sub-pixels are visually
+        // square (cell W:H ≈ 1:2, sub-grid 2×4), so a circle in this space renders as
+        // a circle on screen — giving the meteor a clear glowing core, not a hairline.
+        // Anchor the head circle on the SAME sub-pixel that the tail's t=0 step
+        // lights up — `setDot` uses Math.floor, so we must too. Using Math.round here
+        // would offset the disk by up to 1 sub-pixel below or to the side of the tip.
+        const headSubX = Math.floor(headX * 2)
+        const headSubY = Math.floor(headY * 4)
+        const headR2 = 1
+        for (let dsx = -1; dsx <= 1; dsx++) {
+          for (let dsy = -1; dsy <= 1; dsy++) {
+            if (dsx * dsx + dsy * dsy > headR2) continue
+            const subX = headSubX + dsx
+            const subY = headSubY + dsy
+            const cx = subX >> 1
+            const cy = subY >> 2
+            if (cx < 0 || cx >= gridW || cy < 0 || cy >= gridH) continue
+            const bit = brailleBit(subX & 1, subY & 3)
+            const key = `${cx},${cy}`
+            const existing = cellAcc.get(key)
+            cellAcc.set(key, {
+              dots: (existing?.dots ?? 0) | (1 << bit),
+              minT: 0,
+            })
+          }
+        }
+        for (const [key, val] of cellAcc) {
+          const fade = Math.pow(1 - val.minT / METEOR_TAIL, 1.3) * envelope
+          const headBlend = Math.max(0, 1 - val.minT / 5)
+          const color = tint(
+            theme.background,
+            tint(beamGlow, beamCore, headBlend),
+            Math.max(0.02, fade),
+          )
+          meteorMap.set(key, { char: String.fromCharCode(0x2800 + val.dots), color })
+        }
+      }
+    }
+    const chunks: TextChunk[] = []
+    f.grid.forEach((row, y) => {
+      row.forEach((cell, x) => {
+        const overlay = meteorMap.get(`${x},${y}`)
+        if (overlay) {
+          appendChunk(chunks, overlay.char, overlay.color)
+          return
+        }
+        const b = f.brightness[y]?.[x] ?? 0
+        if (cell === " " || b === 0) {
+          appendChunk(chunks, " ", theme.background)
+          return
+        }
+        const idx = parseInt(cell) || 0
+        const isHot = b >= HOT_THRESHOLD
+        const peak = isHot ? Math.min(1, (b - HOT_THRESHOLD) / (1 - HOT_THRESHOLD)) : 0
+        const char = isHot ? HOT_CHAR : charSet[idx % (charSet.length - 1)]
+        const baseColor = dark
+          ? tint(theme.background, RGBA.fromInts(237, 220, 170), Math.min(1, b * 1.05))
+          : tint(theme.background, RGBA.fromInts(117, 92, 47), Math.min(1, b * 0.95))
+        const starColor =
+          peak > 0
+            ? tint(baseColor, dark ? RGBA.fromInts(255, 255, 255) : RGBA.fromInts(60, 30, 0), peak * (dark ? 0.65 : 0.5))
+            : baseColor
+        appendChunk(chunks, char, starColor)
+      })
+      if (y < f.grid.length - 1) chunks.push({ __isChunk: true, text: "\n", attributes: 0 })
+    })
+    return new StyledText(chunks)
+  })
+
+  createEffect(() => {
+    if (!text) return
+    text.content = content()
+  })
+
+  return (
+    <box
+      ref={(item: BoxRenderable) => (box = item)}
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      zIndex={0}
+    >
+      <text
+        ref={(item: TextRenderable) => {
+          text = item
+          item.content = content()
+        }}
+        width="100%"
+        height="100%"
+        wrapMode="none"
+        selectable={false}
+      />
+    </box>
+  )
+}

package/src/cli/cmd/tui/component/startup-loading.tsx

@@ -0,0 +1,67 @@
+import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js"
+import { useTheme } from "../context/theme"
+import { Spinner } from "./spinner"
+import { isPlainTerminal } from "../util/terminal"
+
+export function StartupLoading(props: { ready: () => boolean }) {
+  const theme = useTheme().theme
+  const plainTerminal = isPlainTerminal()
+  const [show, setShow] = createSignal(false)
+  const text = createMemo(() => (props.ready() ? "Finishing startup..." : "Loading plugins..."))
+  let wait: NodeJS.Timeout | undefined
+  let hold: NodeJS.Timeout | undefined
+  let stamp = 0
+
+  createEffect(() => {
+    if (props.ready()) {
+      if (wait) {
+        clearTimeout(wait)
+        wait = undefined
+      }
+      if (!show()) return
+      if (hold) return
+
+      const left = 3000 - (Date.now() - stamp)
+      if (left <= 0) {
+        setShow(false)
+        return
+      }
+
+      hold = setTimeout(() => {
+        hold = undefined
+        setShow(false)
+      }, left).unref()
+      return
+    }
+
+    if (hold) {
+      clearTimeout(hold)
+      hold = undefined
+    }
+    if (show()) return
+    if (wait) return
+
+    wait = setTimeout(() => {
+      wait = undefined
+      stamp = Date.now()
+      setShow(true)
+    }, 500).unref()
+  })
+
+  onCleanup(() => {
+    if (wait) clearTimeout(wait)
+    if (hold) clearTimeout(hold)
+  })
+
+  return (
+    <Show when={show()}>
+      <box position="absolute" zIndex={5000} left={0} right={0} bottom={1} justifyContent="center" alignItems="center">
+        <box backgroundColor={plainTerminal ? undefined : theme.backgroundPanel} paddingLeft={1} paddingRight={1}>
+          <Show when={plainTerminal} fallback={<Spinner color={theme.textMuted}>{text()}</Spinner>}>
+            <text fg={theme.textMuted}>{text()}</text>
+          </Show>
+        </box>
+      </box>
+    </Show>
+  )
+}

package/src/cli/cmd/tui/component/task-item.tsx

@@ -0,0 +1,63 @@
+import { Show } from "solid-js"
+import { useTheme } from "../context/theme"
+import { useKV } from "../context/kv"
+import "opentui-spinner/solid"
+
+// Inlined (not the shared <Spinner>) so the animated glyph occupies exactly
+// one column inside the `[ ]` marker — matching the width and trailing space
+// of the static `[{glyph}] ` markers so every row's text aligns.
+const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+
+export interface TaskItemProps {
+  id: string
+  status: string
+  summary: string
+  owner?: string
+  depth: number
+}
+
+export function TaskItem(props: TaskItemProps) {
+  const { theme } = useTheme()
+  const kv = useKV()
+  const running = () => props.status === "in_progress"
+  const glyph =
+    props.status === "done"
+      ? "✓"
+      : props.status === "blocked"
+        ? "⏸"
+        : props.status === "abandoned"
+          ? "✗"
+          : " "
+  const fg = () => (running() ? theme.warning : theme.textMuted)
+  const indent = "  ".repeat(props.depth)
+
+  return (
+    <box flexDirection="row" gap={0}>
+      <text flexShrink={0} style={{ fg: fg() }}>
+        {indent}
+      </text>
+      <Show
+        when={running()}
+        fallback={
+          <text flexShrink={0} style={{ fg: fg() }}>
+            [{glyph}]{" "}
+          </text>
+        }
+      >
+        <box flexShrink={0} flexDirection="row" gap={0}>
+          <text style={{ fg: theme.warning }}>[</text>
+          <Show
+            when={kv.get("animations_enabled", true)}
+            fallback={<text style={{ fg: theme.warning }}>•</text>}
+          >
+            <spinner frames={spinnerFrames} interval={80} color={theme.warning} />
+          </Show>
+          <text style={{ fg: theme.warning }}>]{" "}</text>
+        </box>
+      </Show>
+      <text flexGrow={1} wrapMode="word" style={{ fg: fg() }}>
+        <span style={{ fg: theme.textMuted }}>{props.id}</span> {props.summary}
+      </text>
+    </box>
+  )
+}