jonsoc 1.1.48 → 1.1.50

package/src/cli/cmd/tui/component/dialog-stash.tsx

@@ -1,87 +0,0 @@
-import { useDialog } from "@tui/ui/dialog"
-import { DialogSelect } from "@tui/ui/dialog-select"
-import { createMemo, createSignal } from "solid-js"
-import { Locale } from "@/util/locale"
-import { useTheme } from "../context/theme"
-import { useKeybind } from "../context/keybind"
-import { usePromptStash, type StashEntry } from "./prompt/stash"
-
-function getRelativeTime(timestamp: number): string {
-  const now = Date.now()
-  const diff = now - timestamp
-  const seconds = Math.floor(diff / 1000)
-  const minutes = Math.floor(seconds / 60)
-  const hours = Math.floor(minutes / 60)
-  const days = Math.floor(hours / 24)
-
-  if (seconds < 60) return "just now"
-  if (minutes < 60) return `${minutes}m ago`
-  if (hours < 24) return `${hours}h ago`
-  if (days < 7) return `${days}d ago`
-  return Locale.datetime(timestamp)
-}
-
-function getStashPreview(input: string, maxLength: number = 50): string {
-  const firstLine = input.split("\n")[0].trim()
-  return Locale.truncate(firstLine, maxLength)
-}
-
-export function DialogStash(props: { onSelect: (entry: StashEntry) => void }) {
-  const dialog = useDialog()
-  const stash = usePromptStash()
-  const { theme } = useTheme()
-  const keybind = useKeybind()
-
-  const [toDelete, setToDelete] = createSignal<number>()
-
-  const options = createMemo(() => {
-    const entries = stash.list()
-    // Show most recent first
-    return entries
-      .map((entry, index) => {
-        const isDeleting = toDelete() === index
-        const lineCount = (entry.input.match(/\n/g)?.length ?? 0) + 1
-        return {
-          title: isDeleting ? `Press ${keybind.print("stash_delete")} again to confirm` : getStashPreview(entry.input),
-          bg: isDeleting ? theme.error : undefined,
-          value: index,
-          description: getRelativeTime(entry.timestamp),
-          footer: lineCount > 1 ? `~${lineCount} lines` : undefined,
-        }
-      })
-      .toReversed()
-  })
-
-  return (
-    <DialogSelect
-      title="Stash"
-      options={options()}
-      onMove={() => {
-        setToDelete(undefined)
-      }}
-      onSelect={(option) => {
-        const entries = stash.list()
-        const entry = entries[option.value]
-        if (entry) {
-          stash.remove(option.value)
-          props.onSelect(entry)
-        }
-        dialog.clear()
-      }}
-      keybind={[
-        {
-          keybind: keybind.all.stash_delete?.[0],
-          title: "delete",
-          onTrigger: (option) => {
-            if (toDelete() === option.value) {
-              stash.remove(option.value)
-              setToDelete(undefined)
-              return
-            }
-            setToDelete(option.value)
-          },
-        },
-      ]}
-    />
-  )
-}

package/src/cli/cmd/tui/component/dialog-status.tsx

@@ -1,164 +0,0 @@
-import { TextAttributes } from "@opentui/core"
-import { useTheme } from "../context/theme"
-import { useSync } from "@tui/context/sync"
-import { For, Match, Switch, Show, createMemo } from "solid-js"
-import { Installation } from "@/installation"
-
-export type DialogStatusProps = {}
-
-export function DialogStatus() {
-  const sync = useSync()
-  const { theme } = useTheme()
-
-  const enabledFormatters = createMemo(() => sync.data.formatter.filter((f) => f.enabled))
-
-  const plugins = createMemo(() => {
-    const list = sync.data.config.plugin ?? []
-    const result = list.map((value) => {
-      if (value.startsWith("file://")) {
-        const path = value.substring("file://".length)
-        const parts = path.split("/")
-        const filename = parts.pop() || path
-        if (!filename.includes(".")) return { name: filename }
-        const basename = filename.split(".")[0]
-        if (basename === "index") {
-          const dirname = parts.pop()
-          const name = dirname || basename
-          return { name }
-        }
-        return { name: basename }
-      }
-      const index = value.lastIndexOf("@")
-      if (index <= 0) return { name: value, version: "latest" }
-      const name = value.substring(0, index)
-      const version = value.substring(index + 1)
-      return { name, version }
-    })
-    return result.toSorted((a, b) => a.name.localeCompare(b.name))
-  })
-
-  return (
-    <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
-      <box flexDirection="row" justifyContent="space-between">
-        <text fg={theme.text} attributes={TextAttributes.BOLD}>
-          Status
-        </text>
-        <text fg={theme.textMuted}>esc</text>
-      </box>
-      <text fg={theme.textMuted}>JonsOC v{Installation.VERSION}</text>
-      <Show when={Object.keys(sync.data.mcp).length > 0} fallback={<text fg={theme.text}>No MCP Servers</text>}>
-        <box>
-          <text fg={theme.text}>{Object.keys(sync.data.mcp).length} MCP Servers</text>
-          <For each={Object.entries(sync.data.mcp)}>
-            {([key, item]) => (
-              <box flexDirection="row" gap={1}>
-                <text
-                  flexShrink={0}
-                  style={{
-                    fg: (
-                      {
-                        connected: theme.success,
-                        failed: theme.error,
-                        disabled: theme.textMuted,
-                        needs_auth: theme.warning,
-                        needs_client_registration: theme.error,
-                      } as Record<string, typeof theme.success>
-                    )[item.status],
-                  }}
-                >
-                  •
-                </text>
-                <text fg={theme.text} wrapMode="word">
-                  <b>{key}</b>{" "}
-                  <span style={{ fg: theme.textMuted }}>
-                    <Switch fallback={item.status}>
-                      <Match when={item.status === "connected"}>Connected</Match>
-                      <Match when={item.status === "failed" && item}>{(val) => val().error}</Match>
-                      <Match when={item.status === "disabled"}>Disabled in configuration</Match>
-                      <Match when={(item.status as string) === "needs_auth"}>
-                        Needs authentication (run: jonsoc mcp auth {key})
-                      </Match>
-                      <Match when={(item.status as string) === "needs_client_registration" && item}>
-                        {(val) => (val() as { error: string }).error}
-                      </Match>
-                    </Switch>
-                  </span>
-                </text>
-              </box>
-            )}
-          </For>
-        </box>
-      </Show>
-      {sync.data.lsp.length > 0 && (
-        <box>
-          <text fg={theme.text}>{sync.data.lsp.length} LSP Servers</text>
-          <For each={sync.data.lsp}>
-            {(item) => (
-              <box flexDirection="row" gap={1}>
-                <text
-                  flexShrink={0}
-                  style={{
-                    fg: {
-                      connected: theme.success,
-                      error: theme.error,
-                    }[item.status],
-                  }}
-                >
-                  •
-                </text>
-                <text fg={theme.text} wrapMode="word">
-                  <b>{item.id}</b> <span style={{ fg: theme.textMuted }}>{item.root}</span>
-                </text>
-              </box>
-            )}
-          </For>
-        </box>
-      )}
-      <Show when={enabledFormatters().length > 0} fallback={<text fg={theme.text}>No Formatters</text>}>
-        <box>
-          <text fg={theme.text}>{enabledFormatters().length} Formatters</text>
-          <For each={enabledFormatters()}>
-            {(item) => (
-              <box flexDirection="row" gap={1}>
-                <text
-                  flexShrink={0}
-                  style={{
-                    fg: theme.success,
-                  }}
-                >
-                  •
-                </text>
-                <text wrapMode="word" fg={theme.text}>
-                  <b>{item.name}</b>
-                </text>
-              </box>
-            )}
-          </For>
-        </box>
-      </Show>
-      <Show when={plugins().length > 0} fallback={<text fg={theme.text}>No Plugins</text>}>
-        <box>
-          <text fg={theme.text}>{plugins().length} Plugins</text>
-          <For each={plugins()}>
-            {(item) => (
-              <box flexDirection="row" gap={1}>
-                <text
-                  flexShrink={0}
-                  style={{
-                    fg: theme.success,
-                  }}
-                >
-                  •
-                </text>
-                <text wrapMode="word" fg={theme.text}>
-                  <b>{item.name}</b>
-                  {item.version && <span style={{ fg: theme.textMuted }}> @{item.version}</span>}
-                </text>
-              </box>
-            )}
-          </For>
-        </box>
-      </Show>
-    </box>
-  )
-}

package/src/cli/cmd/tui/component/dialog-tag.tsx

@@ -1,44 +0,0 @@
-import { createMemo, createResource } from "solid-js"
-import { DialogSelect } from "@tui/ui/dialog-select"
-import { useDialog } from "@tui/ui/dialog"
-import { useSDK } from "@tui/context/sdk"
-import { createStore } from "solid-js/store"
-
-export function DialogTag(props: { onSelect?: (value: string) => void }) {
-  const sdk = useSDK()
-  const dialog = useDialog()
-
-  const [store] = createStore({
-    filter: "",
-  })
-
-  const [files] = createResource(
-    () => [store.filter],
-    async () => {
-      const result = await sdk.client.find.files({
-        query: store.filter,
-      })
-      if (result.error) return []
-      const sliced = (result.data ?? []).slice(0, 5)
-      return sliced
-    },
-  )
-
-  const options = createMemo(() =>
-    (files() ?? []).map((file) => ({
-      value: file,
-      title: file,
-    })),
-  )
-
-  return (
-    <DialogSelect
-      title="Autocomplete"
-      options={options()}
-      onSelect={(option) => {
-        props.onSelect?.(option.value)
-        dialog.clear()
-      }}
-    />
-  )
-}

package/src/cli/cmd/tui/component/dialog-theme-list.tsx

@@ -1,50 +0,0 @@
-import { DialogSelect, type DialogSelectRef } from "../ui/dialog-select"
-import { useTheme } from "../context/theme"
-import { useDialog } from "../ui/dialog"
-import { onCleanup, onMount } from "solid-js"
-
-export function DialogThemeList() {
-  const theme = useTheme()
-  const options = Object.keys(theme.all())
-    .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
-    .map((value) => ({
-      title: value,
-      value: value,
-    }))
-  const dialog = useDialog()
-  let confirmed = false
-  let ref: DialogSelectRef<string>
-  const initial = theme.selected
-
-  onCleanup(() => {
-    if (!confirmed) theme.set(initial)
-  })
-
-  return (
-    <DialogSelect
-      title="Themes"
-      options={options}
-      current={initial}
-      onMove={(opt) => {
-        theme.set(opt.value)
-      }}
-      onSelect={(opt) => {
-        theme.set(opt.value)
-        confirmed = true
-        dialog.clear()
-      }}
-      ref={(r) => {
-        ref = r
-      }}
-      onFilter={(query) => {
-        if (query.length === 0) {
-          theme.set(initial)
-          return
-        }
-
-        const first = ref.filtered[0]
-        if (first) theme.set(first.value)
-      }}
-    />
-  )
-}

package/src/cli/cmd/tui/component/dynamic-layout.tsx

@@ -1,86 +0,0 @@
-import { createMemo, For, Show } from "solid-js"
-import { useLayout, type PanelType, type PanelPosition } from "@tui/context/layout"
-import { useTheme } from "@tui/context/theme"
-import { useTerminalDimensions } from "@opentui/solid"
-import type { JSX } from "solid-js"
-
-interface DynamicLayoutProps {
-  chat: JSX.Element
-  explorer: JSX.Element
-  viewer: JSX.Element
-}
-
-export function DynamicLayout(props: DynamicLayoutProps) {
-  const layout = useLayout()
-  const { theme } = useTheme()
-  const dimensions = useTerminalDimensions()
-
-  const totalWidth = createMemo(() => {
-    const dims = dimensions()
-    return dims?.width ? dims.width - 4 : 80
-  })
-
-  const getPanelWidth = (position: PanelPosition) => {
-    const panel = layout.getPanelAt(position)
-    if (!panel || !panel.visible) return 0
-    const total = totalWidth()
-
-    // Calculate total width of all visible panels for normalization
-    const visiblePanels = layout.panels.filter((p) => p.visible)
-    const totalVisibleWidth = visiblePanels.reduce((sum, p) => sum + p.width, 0)
-
-    // Normalize width so visible panels fill 100% of available space
-    if (totalVisibleWidth === 0) return 0
-    const normalizedWidth = (panel.width / totalVisibleWidth) * 100
-    return Math.floor((total * normalizedWidth) / 100)
-  }
-
-  const getPanelContent = (type: PanelType) => {
-    switch (type) {
-      case "chat":
-        return props.chat
-      case "explorer":
-        return props.explorer
-      case "viewer":
-        return props.viewer
-    }
-  }
-
-  const safeDimensions = createMemo(() => {
-    const dims = dimensions()
-    return {
-      width: dims?.width ?? 80,
-      height: dims?.height ?? 24,
-    }
-  })
-
-  return (
-    <box width={safeDimensions().width} height={safeDimensions().height} flexDirection="row">
-      <For each={[0, 1, 2]}>
-        {(position) => {
-          const panel = createMemo(() => layout.getPanelAt(position as PanelPosition))
-          const width = createMemo(() => getPanelWidth(position as PanelPosition))
-
-          return (
-            <>
-              {/* Thin border between panels using line character */}
-              <Show
-                when={position > 0 && layout.getPanelAt((position - 1) as PanelPosition)?.visible && panel()?.visible}
-              >
-                <box width={1} height="100%">
-                  <text fg={theme.border}>{"│\n".repeat(safeDimensions().height)}</text>
-                </box>
-              </Show>
-
-              <Show when={panel()?.visible}>
-                <box width={width()} height="100%">
-                  {getPanelContent(panel()!.type)}
-                </box>
-              </Show>
-            </>
-          )
-        }}
-      </For>
-    </box>
-  )
-}

package/src/cli/cmd/tui/component/inspector-overlay.tsx

@@ -1,247 +0,0 @@
-import { useRenderer, useTerminalDimensions } from "@opentui/solid"
-import { RGBA, type Renderable, ScrollBoxRenderable } from "@opentui/core"
-import { createEffect, createMemo, Show, createSignal } from "solid-js"
-import { useInspector } from "../context/inspector"
-import { useTheme } from "../context/theme"
-import { Clipboard } from "@tui/util/clipboard"
-import { useToast } from "../ui/toast"
-
-// Get absolute position
-// renderable.x/y already recursively include all parent offsets and scroll translations
-function getAbsolutePosition(renderable: Renderable): { x: number; y: number } {
-  return { x: renderable.x, y: renderable.y }
-}
-
-// Check if point is inside renderable bounds
-function isPointInside(renderable: Renderable, px: number, py: number): boolean {
-  const pos = getAbsolutePosition(renderable)
-  return px >= pos.x && px < pos.x + renderable.width && py >= pos.y && py < pos.y + renderable.height
-}
-
-// Find the topmost element at position (excluding the overlay itself)
-function findElementAtPositionTree(root: Renderable, x: number, y: number, excludeId?: string): Renderable | null {
-  let found: Renderable | null = null
-  let foundArea = Infinity
-
-  function traverse(renderable: Renderable) {
-    // Skip if this is the element to exclude
-    if (excludeId && renderable.id === excludeId) return
-
-    // Check if point is inside this renderable
-    if (isPointInside(renderable, x, y)) {
-      const area = renderable.width * renderable.height
-      // Prefer smaller elements (more specific)
-      if (area < foundArea) {
-        found = renderable
-        foundArea = area
-      }
-    }
-
-    // Check children (recurse into all children)
-    for (const child of renderable.getChildren()) {
-      traverse(child)
-    }
-  }
-
-  // Start traversal from root's children (skip root itself)
-  for (const child of root.getChildren()) {
-    traverse(child)
-  }
-
-  return found
-}
-
-// Normalize margin/padding values to numbers
-function normalizeSpacing(value: string | number | null | undefined): number {
-  if (typeof value === "number") return value
-  if (typeof value === "string" && value.endsWith("%")) return 0 // Can't easily calc %
-  if (value === "auto") return 0
-  return 0
-}
-
-// Build a path from root to this element for context
-function getElementPath(renderable: Renderable): string {
-  const parts: string[] = []
-  let current: Renderable | null = renderable
-
-  while (current) {
-    // Skip auto-generated IDs, use type instead
-    const isAutoGen = /^box-\d+$|^text-\d+$/.test(current.id)
-    const name = isAutoGen ? current.constructor.name.replace("Renderable", "") : current.id
-    parts.unshift(name)
-    current = current.parent
-  }
-
-  return parts.join(" > ")
-}
-
-// Get element info for display
-function getElementInfo(renderable: Renderable) {
-  const pos = getAbsolutePosition(renderable)
-  const path = getElementPath(renderable)
-
-  // Try to find a meaningful name
-  const isAutoGen = /^box-\d+$|^text-\d+$/.test(renderable.id)
-  const displayName = isAutoGen ? path.split(" > ").pop() || renderable.id : renderable.id
-
-  // Get source location if available
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const source = (
-    renderable as unknown as { __source?: { fileName?: string; lineNumber?: number; componentName?: string } }
-  ).__source
-
-  return {
-    id: renderable.id,
-    displayName,
-    path,
-    type: renderable.constructor.name,
-    x: pos.x,
-    y: pos.y,
-    width: renderable.width,
-    height: renderable.height,
-    source,
-    margin: {
-      top: normalizeSpacing(renderable.marginTop),
-      right: normalizeSpacing(renderable.marginRight),
-      bottom: normalizeSpacing(renderable.marginBottom),
-      left: normalizeSpacing(renderable.marginLeft),
-    },
-    padding: {
-      top: normalizeSpacing(renderable.paddingTop),
-      right: normalizeSpacing(renderable.paddingRight),
-      bottom: normalizeSpacing(renderable.paddingBottom),
-      left: normalizeSpacing(renderable.paddingLeft),
-    },
-  }
-}
-
-export function InspectorOverlay() {
-  const inspector = useInspector()
-  const { theme } = useTheme()
-  const dimensions = useTerminalDimensions()
-  const renderer = useRenderer()
-  const toast = useToast()
-
-  const [hoveredElement, setHoveredElement] = createSignal<Renderable | null>(null)
-
-  const isEnabled = () => inspector.enabled()
-
-  // Colors for different visual elements - more transparent
-  const colors = createMemo(() => ({
-    content: theme.primary,
-    padding: theme.warning,
-    margin: theme.info,
-    text: theme.text,
-    panelBg: RGBA.fromInts(30, 30, 30, 220), // 80% opacity dark background
-    overlayBg: RGBA.fromInts(0, 0, 0, 51), // 20% opacity = 80% transparent
-    border: theme.border,
-    marginBg: RGBA.fromInts(255, 140, 0, 25), // Orange - more transparent
-    paddingBg: RGBA.fromInts(255, 215, 0, 25), // Yellow - more transparent
-    contentBg: RGBA.fromInts(0, 255, 127, 15), // Green - more transparent
-    marginBorder: RGBA.fromInts(255, 140, 0, 120),
-    paddingBorder: RGBA.fromInts(255, 215, 0, 120),
-    contentBorder: RGBA.fromInts(0, 255, 127, 120),
-  }))
-
-  createEffect(() => {
-    if (!isEnabled()) {
-      inspector.setHoveredInfo(null)
-      setHoveredElement(null)
-    }
-  })
-
-  const mouse = () => inspector.mousePos()
-  const dims = () => dimensions()
-
-  // Find element under cursor (manually traverse to skip the overlay)
-  const findElementAtPosition = (x: number, y: number): Renderable | null => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return findElementAtPositionTree(renderer.root as any, x, y, "inspector-overlay")
-  }
-
-  // Get element info for display
-  const elementInfo = createMemo(() => {
-    const el = hoveredElement()
-    if (!el) return null
-    return getElementInfo(el)
-  })
-
-  return (
-    <Show when={isEnabled()}>
-      <box
-        id="inspector-overlay"
-        position="absolute"
-        top={0}
-        left={0}
-        width={dims().width}
-        height={dims().height}
-        zIndex={9999}
-        backgroundColor={colors().overlayBg}
-        onMouseMove={(e) => {
-          inspector.setMousePos({ x: e.x, y: e.y })
-          const el = findElementAtPosition(e.x, e.y)
-          setHoveredElement(el)
-        }}
-        onMouseUp={async () => {
-          const el = hoveredElement()
-          if (el) {
-            const info = getElementInfo(el)
-            // Build source info string
-            const sourceInfo = info.source
-              ? `${info.source.componentName || info.displayName} ${info.width}x${info.height} ${info.source.fileName}:${info.source.lineNumber}`
-              : `${info.displayName} ${info.width}x${info.height}`
-            await Clipboard.copy(sourceInfo)
-              .then(() => toast.show({ message: `Copied: ${info.displayName}`, variant: "info" }))
-              .catch(() => toast.show({ message: "Failed to copy", variant: "error" }))
-          }
-          inspector.setEnabled(false)
-        }}
-      >
-        {/* Element highlight - exact element bounds */}
-        <Show when={elementInfo()}>
-          {(info) => (
-            <box
-              position="absolute"
-              top={info().y}
-              left={info().x}
-              width={info().width}
-              height={info().height}
-              border={["left", "right", "top", "bottom"]}
-              borderColor={colors().contentBorder}
-              backgroundColor={colors().contentBg}
-            />
-          )}
-        </Show>
-
-        {/* Position tooltip near cursor */}
-        <Show when={mouse().y > 4 && elementInfo()}>
-          {(info) => {
-            const source = info().source
-            const displayText = source
-              ? `${source.componentName || info().displayName} ${info().width}x${info().height}`
-              : `${info().displayName} ${info().width}x${info().height}`
-            const sourceText = source ? `${source.fileName}:${source.lineNumber}` : ""
-
-            return (
-              <box
-                position="absolute"
-                top={mouse().y - 2}
-                left={Math.min(mouse().x + 2, dims().width - 20)}
-                paddingLeft={1}
-                paddingRight={1}
-                backgroundColor={theme.backgroundElement}
-                border={["left", "right", "top", "bottom"]}
-                borderColor={theme.border}
-              >
-                <text fg={theme.primary}>{displayText}</text>
-                <Show when={sourceText}>
-                  <text fg={theme.textMuted}>{sourceText}</text>
-                </Show>
-              </box>
-            )
-          }}
-        </Show>
-      </box>
-    </Show>
-  )
-}