nikcli 0.0.6

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

@@ -0,0 +1,63 @@
+import { onMount } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+import { clone } from "remeda"
+import { createSimpleContext } from "../../context/helper"
+import type { PromptInfo } from "./history"
+import { PromptStashStore, type StashEntry } from "@/prompt/stash-store"
+
+export type { StashEntry } from "@/prompt/stash-store"
+
+export const { use: usePromptStash, provider: PromptStashProvider } = createSimpleContext({
+  name: "PromptStash",
+  init: () => {
+    onMount(async () => {
+      const lines = await PromptStashStore.list()
+
+      setStore("entries", lines)
+    })
+
+    const [store, setStore] = createStore({
+      entries: [] as StashEntry[],
+    })
+
+    return {
+      list() {
+        return store.entries
+      },
+      push(entry: Omit<StashEntry, "timestamp" | "id">) {
+        const stash = clone({
+          ...entry,
+          id: `temp-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+          timestamp: Date.now(),
+        })
+        setStore(
+          produce((draft) => {
+            draft.entries.push(stash)
+          }),
+        )
+        void PromptStashStore.push(stash).then((entries) => setStore("entries", entries))
+      },
+      pop() {
+        if (store.entries.length === 0) return undefined
+        const entry = store.entries[store.entries.length - 1]
+        setStore(
+          produce((draft) => {
+            draft.entries.pop()
+          }),
+        )
+        void PromptStashStore.removeByID(entry.id).then((entries) => setStore("entries", entries))
+        return entry
+      },
+      remove(index: number) {
+        if (index < 0 || index >= store.entries.length) return
+        const entry = store.entries[index]
+        setStore(
+          produce((draft) => {
+            draft.entries.splice(index, 1)
+          }),
+        )
+        void PromptStashStore.removeByID(entry.id).then((entries) => setStore("entries", entries))
+      },
+    }
+  },
+})

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/startup-loading.tsx

@@ -0,0 +1,63 @@
+import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js"
+import { useTheme } from "../context/theme"
+import { Spinner } from "./spinner"
+
+export function StartupLoading(props: { ready: () => boolean }) {
+  const theme = useTheme().theme
+  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={theme.backgroundPanel} paddingLeft={1} paddingRight={1}>
+          <Spinner color={theme.textMuted}>{text()}</Spinner>
+        </box>
+      </box>
+    </Show>
+  )
+}

package/src/cli/cmd/tui/component/table/markdown-table.tsx

@@ -0,0 +1,267 @@
+import { extend } from "@opentui/solid"
+import { BoxRenderable, type BoxOptions, type RenderContext, OptimizedBuffer, RGBA } from "@opentui/core"
+
+export interface MarkdownTableOptions extends BoxOptions {
+  content?: string[][]
+  headers?: string[]
+  columnWidthMode?: "content" | "full"
+  columnFitter?: "proportional" | "balanced"
+  wrapMode?: "none" | "char" | "word"
+  showBorders?: boolean
+  selectable?: boolean
+}
+
+export class MarkdownTableRenderable extends BoxRenderable {
+  private _content: string[][]
+  private _headers: string[]
+  private _columnWidthMode: "content" | "full"
+  private _columnFitter: "proportional" | "balanced"
+  private _wrapMode: "none" | "char" | "word"
+  private _showBorders: boolean
+
+  private _columnWidths: number[] = []
+  private _rowHeights: number[] = []
+
+  constructor(ctx: RenderContext, options: MarkdownTableOptions = {}) {
+    super(ctx, {
+      border: options.showBorders ?? true,
+      overflow: "hidden",
+      flexShrink: 0,
+      ...options,
+    })
+
+    this._content = Array.isArray(options.content) ? options.content : []
+    this._headers = Array.isArray(options.headers) ? options.headers : []
+    this._columnWidthMode = options.columnWidthMode ?? "content"
+    this._columnFitter = options.columnFitter ?? "proportional"
+    this._wrapMode = options.wrapMode ?? "word"
+    this._showBorders = options.showBorders ?? true
+
+    this.calculateLayout()
+  }
+
+  set content(value: string[][]) {
+    this._content = Array.isArray(value) ? value : []
+    this.calculateLayout()
+    this.requestRender()
+  }
+
+  set headers(value: string[]) {
+    this._headers = Array.isArray(value) ? value : []
+    this.calculateLayout()
+    this.requestRender()
+  }
+
+  private calculateLayout(): void {
+    const content = Array.isArray(this._content) ? this._content : []
+    const headers = Array.isArray(this._headers) ? this._headers : []
+    const allRows = headers.length > 0 ? [headers, ...content] : content
+    if (allRows.length === 0) {
+      this._columnWidths = []
+      this._rowHeights = []
+      return
+    }
+
+    const colCount = Math.max(...allRows.map((row) => row.length))
+    this._columnWidths = new Array(colCount).fill(1)
+    this._rowHeights = new Array(allRows.length).fill(1)
+
+    for (let colIdx = 0; colIdx < colCount; colIdx++) {
+      for (const row of allRows) {
+        const cellText = row[colIdx] ?? ""
+        this._columnWidths[colIdx] = Math.max(this._columnWidths[colIdx], cellText.length + 2)
+      }
+    }
+
+    if (this._columnWidthMode === "full" && this.width > 0) {
+      const totalContentWidth = this._columnWidths.reduce((a, b) => a + b, 0)
+      const borderCount = this._showBorders ? colCount + 1 : 0
+      const availableWidth = this.width - borderCount
+
+      if (totalContentWidth < availableWidth && this._columnFitter === "proportional") {
+        const extra = availableWidth - totalContentWidth
+        const perCol = Math.floor(extra / colCount)
+        const remainder = extra % colCount
+        this._columnWidths = this._columnWidths.map((w, i) => w + perCol + (i < remainder ? 1 : 0))
+      }
+    }
+
+    for (let rowIdx = 0; rowIdx < allRows.length; rowIdx++) {
+      let maxHeight = 1
+      for (let colIdx = 0; colIdx < colCount; colIdx++) {
+        const cellText = allRows[rowIdx][colIdx] ?? ""
+        const colWidth = this._columnWidths[colIdx] ?? 1
+        const wrappedLines = this._wrapMode === "none" ? 1 : Math.ceil(cellText.length / (colWidth - 2))
+        maxHeight = Math.max(maxHeight, wrappedLines)
+      }
+      this._rowHeights[rowIdx] = maxHeight
+    }
+  }
+
+  protected override onResize(width: number, height: number): void {
+    this.calculateLayout()
+    super.onResize(width, height)
+  }
+
+  protected override renderSelf(buffer: OptimizedBuffer): void {
+    if (!this.visible) return
+
+    const allRows = this._headers.length > 0 ? [this._headers, ...this._content] : this._content
+    if (allRows.length === 0) return
+
+    const colCount = this._columnWidths.length
+    const hasHeaders = this._headers.length > 0
+
+    let currentY = this.y
+
+    for (let rowIdx = 0; rowIdx < allRows.length; rowIdx++) {
+      const row = allRows[rowIdx]
+      const isHeader = hasHeaders && rowIdx === 0
+
+      if (this._showBorders) {
+        let currentX = this.x
+        for (let colIdx = 0; colIdx < colCount; colIdx++) {
+          const colWidth = this._columnWidths[colIdx]
+
+          buffer.drawText("│", currentX, currentY, isHeader ? RGBA.fromHex("#7aa2f7")! : RGBA.fromHex("#c0caf5")!)
+
+          const cellText = row[colIdx] ?? ""
+          const paddedText = this.padCellText(cellText, colWidth - 2)
+          buffer.drawText(
+            paddedText,
+            currentX + 1,
+            currentY,
+            isHeader ? RGBA.fromHex("#7aa2f7")! : RGBA.fromHex("#c0caf5")!,
+          )
+
+          currentX += colWidth
+        }
+        buffer.drawText("│", currentX, currentY, isHeader ? RGBA.fromHex("#7aa2f7")! : RGBA.fromHex("#c0caf5")!)
+
+        if (rowIdx === 0 && hasHeaders) {
+          currentY++
+          currentX = this.x
+          for (let colIdx = 0; colIdx < colCount; colIdx++) {
+            const colWidth = this._columnWidths[colIdx]
+            buffer.drawText("├", currentX, currentY, RGBA.fromHex("#414868")!)
+            buffer.drawText("─".repeat(colWidth), currentX + 1, currentY, RGBA.fromHex("#414868")!)
+            currentX += colWidth
+          }
+          buffer.drawText("┤", currentX, currentY, RGBA.fromHex("#414868")!)
+        }
+      } else {
+        let currentX = this.x
+        for (let colIdx = 0; colIdx < colCount; colIdx++) {
+          const colWidth = this._columnWidths[colIdx]
+          const cellText = row[colIdx] ?? ""
+          const paddedText = this.padCellText(cellText, colWidth)
+          buffer.drawText(
+            paddedText,
+            currentX,
+            currentY,
+            isHeader ? RGBA.fromHex("#7aa2f7")! : RGBA.fromHex("#c0caf5")!,
+          )
+          currentX += colWidth
+        }
+      }
+
+      currentY++
+    }
+  }
+
+  private padCellText(text: string, width: number): string {
+    if (text.length >= width) {
+      return text.slice(0, width - 1) + "…"
+    }
+    return text + " ".repeat(width - text.length)
+  }
+}
+
+export function createMarkdownTableParser() {
+  function parseMarkdownTable(text: string): { headers: string[]; rows: string[][] } | null {
+    const lines = text
+      .trim()
+      .split("\n")
+      .filter((line) => line.trim())
+
+    if (lines.length < 2) return null
+
+    const tableLines = lines.filter((line) => line.trim().startsWith("|") && line.includes("|"))
+    if (tableLines.length < 2) return null
+
+    const dataLines = tableLines.filter((line) => !line.match(/^\|\s*[-:]+\s*\|/))
+    if (dataLines.length < 1) return null
+
+    const parseRow = (line: string): string[] => {
+      return line
+        .split("|")
+        .map((cell) => cell.trim())
+        .filter((_, i, arr) => i > 0 && i < arr.length - 1)
+    }
+
+    const headers = parseRow(dataLines[0])
+    const rows = dataLines.slice(1).map(parseRow)
+
+    return { headers, rows }
+  }
+
+  function isMarkdownTable(text: string): boolean {
+    return parseMarkdownTable(text) !== null
+  }
+
+  function extractTableFromText(text: string): { table: string; before: string; after: string } | null {
+    const lines = text.split("\n")
+    let tableStart = -1
+    let tableEnd = -1
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i]
+      if (line.trim().startsWith("|") && line.includes("|")) {
+        if (tableStart === -1) tableStart = i
+        tableEnd = i
+      } else if (tableStart !== -1 && tableEnd !== -1) {
+        break
+      }
+    }
+
+    if (tableStart === -1 || tableEnd === -1) return null
+
+    const table = lines.slice(tableStart, tableEnd + 1).join("\n")
+    const before = lines.slice(0, tableStart).join("\n")
+    const after = lines.slice(tableEnd + 1).join("\n")
+
+    return { table, before, after }
+  }
+
+  return {
+    parseMarkdownTable,
+    isMarkdownTable,
+    extractTableFromText,
+  }
+}
+
+export const MarkdownTable = (props: {
+  content?: string[][]
+  headers?: string[]
+  options?: {
+    columnWidthMode?: "content" | "full"
+    columnFitter?: "proportional" | "balanced"
+    wrapMode?: "none" | "char" | "word"
+    showBorders?: boolean
+  }
+}) => {
+  return (
+    <markdowntable
+      content={props.content ?? []}
+      headers={props.headers ?? []}
+      columnWidthMode={props.options?.columnWidthMode ?? "content"}
+      columnFitter={props.options?.columnFitter ?? "proportional"}
+      wrapMode={props.options?.wrapMode ?? "word"}
+      showBorders={props.options?.showBorders ?? true}
+    />
+  )
+}
+
+extend({ markdowntable: MarkdownTableRenderable })
+
+export { MarkdownTableRenderable as TextTable }

package/src/cli/cmd/tui/component/table-db/db/connections.ts

@@ -0,0 +1,75 @@
+import type { DBSchema, DBTable, DBColumn, DBForeignKey, DBIndex, TablePreview, QueryResult } from "./types"
+
+export interface IDBConnection {
+  readonly type: string
+  readonly connected: boolean
+  getSchema(): Promise<DBSchema>
+  getTablePreview(tableName: string, limit?: number): Promise<TablePreview>
+  executeQuery(sql: string): Promise<QueryResult>
+  executeCommand(sql: string): Promise<void>
+  createTable(name: string, columns: DBColumn[], foreignKeys?: DBForeignKey[]): Promise<void>
+  dropTable(name: string): Promise<void>
+  addColumn(tableName: string, column: DBColumn): Promise<void>
+  dropColumn(tableName: string, columnName: string): Promise<void>
+  modifyColumn(tableName: string, columnName: string, newDef: DBColumn): Promise<void>
+  getIndexes(): Promise<DBIndex[]>
+  createIndex(name: string, tableName: string, columns: string[], unique?: boolean): Promise<void>
+  dropIndex(name: string): Promise<void>
+  beginTransaction(): Promise<void>
+  commit(): Promise<void>
+  rollback(): Promise<void>
+  close(): void
+}
+
+export type ConnectionFactory = (config: ConnectionConfig) => Promise<IDBConnection>
+
+export interface ConnectionConfig {
+  type: string
+  path?: string
+  host?: string
+  port?: number
+  database?: string
+  username?: string
+  password?: string
+}
+
+export function parseConnectionString(connStr: string): ConnectionConfig {
+  if (
+    connStr.startsWith("sqlite://") ||
+    (!connStr.includes("://") &&
+      (connStr.endsWith(".db") || connStr.endsWith(".sqlite") || connStr.endsWith(".sqlite3")))
+  ) {
+    const path = connStr.startsWith("sqlite://") ? connStr.replace("sqlite://", "") : connStr.replace("file:", "")
+    return { type: "sqlite", path }
+  }
+
+  if (connStr.startsWith("postgres://") || connStr.startsWith("postgresql://")) {
+    const url = new URL(connStr)
+    return {
+      type: "postgres",
+      host: url.hostname,
+      port: parseInt(url.port || "5432"),
+      database: url.pathname.slice(1) || undefined,
+      username: url.username,
+      password: url.password,
+    }
+  }
+
+  if (connStr.startsWith("mysql://")) {
+    const url = new URL(connStr)
+    return {
+      type: "mysql",
+      host: url.hostname,
+      port: parseInt(url.port || "3306"),
+      database: url.pathname.slice(1) || undefined,
+      username: url.username,
+      password: url.password,
+    }
+  }
+
+  if (connStr.startsWith("duckdb://")) {
+    return { type: "duckdb", path: connStr.replace("duckdb://", "") }
+  }
+
+  return { type: "sqlite", path: connStr }
+}