jonsoc 1.1.48 → 1.1.50

package/src/cli/cmd/tui/routes/session/footer.tsx

@@ -1,91 +0,0 @@
-import { createMemo, Match, onCleanup, onMount, Show, Switch } from "solid-js"
-import { useTheme } from "../../context/theme"
-import { useSync } from "../../context/sync"
-import { useDirectory } from "../../context/directory"
-import { useConnected } from "../../component/dialog-model"
-import { createStore } from "solid-js/store"
-import { useRoute } from "../../context/route"
-
-export function Footer() {
-  const { theme } = useTheme()
-  const sync = useSync()
-  const route = useRoute()
-  const mcp = createMemo(() => Object.values(sync.data.mcp).filter((x) => x.status === "connected").length)
-  const mcpError = createMemo(() => Object.values(sync.data.mcp).some((x) => x.status === "failed"))
-  const lsp = createMemo(() => Object.keys(sync.data.lsp))
-  const permissions = createMemo(() => {
-    if (route.data.type !== "session") return []
-    return sync.data.permission[route.data.sessionID] ?? []
-  })
-  const directory = useDirectory()
-  const connected = useConnected()
-
-  const [store, setStore] = createStore({
-    welcome: false,
-  })
-
-  onMount(() => {
-    // Track all timeouts to ensure proper cleanup
-    const timeouts: ReturnType<typeof setTimeout>[] = []
-
-    function tick() {
-      if (connected()) return
-      if (!store.welcome) {
-        setStore("welcome", true)
-        timeouts.push(setTimeout(() => tick(), 5000))
-        return
-      }
-
-      if (store.welcome) {
-        setStore("welcome", false)
-        timeouts.push(setTimeout(() => tick(), 10_000))
-        return
-      }
-    }
-    timeouts.push(setTimeout(() => tick(), 10_000))
-
-    onCleanup(() => {
-      timeouts.forEach(clearTimeout)
-    })
-  })
-
-  return (
-    <box flexDirection="row" justifyContent="space-between" gap={1} flexShrink={0}>
-      <text fg={theme.textMuted}>{directory()}</text>
-      <box gap={2} flexDirection="row" flexShrink={0}>
-        <Switch>
-          <Match when={store.welcome}>
-            <text fg={theme.text}>
-              Get started <span style={{ fg: theme.textMuted }}>/connect</span>
-            </text>
-          </Match>
-          <Match when={connected()}>
-            <Show when={permissions().length > 0}>
-              <text fg={theme.warning}>
-                <span style={{ fg: theme.warning }}>△</span> {permissions().length} Permission
-                {permissions().length > 1 ? "s" : ""}
-              </text>
-            </Show>
-            <text fg={theme.text}>
-              <span style={{ fg: lsp().length > 0 ? theme.success : theme.textMuted }}>•</span> {lsp().length} LSP
-            </text>
-            <Show when={mcp()}>
-              <text fg={theme.text}>
-                <Switch>
-                  <Match when={mcpError()}>
-                    <span style={{ fg: theme.error }}>⊙ </span>
-                  </Match>
-                  <Match when={true}>
-                    <span style={{ fg: theme.success }}>⊙ </span>
-                  </Match>
-                </Switch>
-                {mcp()} MCP
-              </text>
-            </Show>
-            <text fg={theme.textMuted}>/status</text>
-          </Match>
-        </Switch>
-      </box>
-    </box>
-  )
-}

package/src/cli/cmd/tui/routes/session/git-commit.tsx

@@ -1,59 +0,0 @@
-import { type Accessor } from "solid-js"
-import type { InputRenderable } from "@opentui/core"
-import { useTheme } from "@tui/context/theme"
-import { ActionButton } from "./navigator-ui"
-
-export type GitCommitProps = {
-  commitMessage: Accessor<string>
-  setCommitMessage: (msg: string) => void
-  onCommit: () => void
-}
-
-export function GitCommit(props: GitCommitProps) {
-  const theme = useTheme()
-  let input: InputRenderable
-
-  return (
-    <box
-      paddingLeft={1}
-      paddingRight={1}
-      paddingTop={1}
-      paddingBottom={1}
-      flexDirection="row"
-      gap={1}
-      flexShrink={0}
-      backgroundColor={theme.theme.background}
-      onMouseUp={(e) => e.stopPropagation()}
-    >
-      <box
-        flexGrow={1}
-        paddingLeft={1}
-        paddingRight={1}
-        backgroundColor={theme.theme.backgroundElement}
-        onMouseUp={() => input?.focus()}
-      >
-        <input
-          ref={(el) => (input = el)}
-          placeholder="Message..."
-          value={props.commitMessage()}
-          onInput={props.setCommitMessage}
-          onMouseUp={() => input?.focus()}
-          onKeyDown={(e) => {
-            if (e.name === "return" && (e.ctrl || e.meta)) {
-              props.onCommit()
-            }
-          }}
-          focusedBackgroundColor={theme.theme.backgroundElement}
-          cursorColor={theme.theme.primary}
-        />
-      </box>
-      <ActionButton
-        label="Commit"
-        onSelect={props.onCommit}
-        disabled={!props.commitMessage().trim()}
-        primary
-        flexGrow={0}
-      />
-    </box>
-  )
-}

package/src/cli/cmd/tui/routes/session/git-history.tsx

@@ -1,122 +0,0 @@
-import { type Accessor, createMemo, For, Show } from "solid-js"
-import { TextAttributes } from "@opentui/core"
-import type { ScrollAcceleration } from "@opentui/core"
-import { useTheme, selectedForeground } from "@tui/context/theme"
-import { Locale } from "@/util/locale"
-import type { VcsHistoryLine } from "@jonsoc/sdk/v2"
-
-class CustomSpeedScroll implements ScrollAcceleration {
-  constructor(private speed: number) {}
-
-  tick(_now?: number): number {
-    return this.speed
-  }
-
-  reset(): void {}
-}
-
-export type GitHistoryProps = {
-  branch: Accessor<string | undefined>
-  historyEntries: Accessor<VcsHistoryLine[]>
-  historyHeight: Accessor<number>
-  onBranchSwitcher: () => void
-  viewportOptions: any
-  verticalScrollbarOptions: any
-}
-
-export function GitHistory(props: GitHistoryProps) {
-  const theme = useTheme()
-
-  return (
-    <box height={props.historyHeight()} flexShrink={0}>
-      <box
-        paddingLeft={1}
-        paddingRight={1}
-        paddingTop={1}
-        paddingBottom={1}
-        flexDirection="row"
-        justifyContent="space-between"
-        backgroundColor={theme.theme.background}
-        border={["top"]}
-        borderColor={theme.theme.border}
-      >
-        <box flexDirection="row" gap={1} onMouseUp={props.onBranchSwitcher}>
-          <text fg={theme.theme.text}>
-            <b>History</b>
-          </text>
-          <Show when={props.branch()}>
-            <box backgroundColor={theme.theme.primary} paddingLeft={1} paddingRight={1}>
-              <text fg={selectedForeground(theme.theme, theme.theme.primary)} wrapMode="none">
-                {props.branch()}
-              </text>
-            </box>
-          </Show>
-        </box>
-        <text fg={theme.theme.textMuted}>{props.historyEntries().length} commits</text>
-      </box>
-      <scrollbox
-        flexGrow={1}
-        height="100%"
-        paddingBottom={1}
-        viewportOptions={props.viewportOptions}
-        verticalScrollbarOptions={props.verticalScrollbarOptions}
-        scrollAcceleration={new CustomSpeedScroll(3)}
-      >
-        <Show
-          when={props.historyEntries().length > 0}
-          fallback={<text fg={theme.theme.textMuted}>No commits yet</text>}
-        >
-          <box flexDirection="column" gap={0}>
-            <For each={props.historyEntries()}>{(entry) => <HistoryRow entry={entry} />}</For>
-          </box>
-        </Show>
-      </scrollbox>
-    </box>
-  )
-}
-
-function HistoryRow(props: { entry: VcsHistoryLine & { author?: string } }) {
-  const theme = useTheme()
-
-  const graph = () =>
-    props.entry.graph.replace(/\*/g, "●").replace(/\|/g, "│").replace(/\//g, "╯").replace(/\\/g, "╰").replace(/_/g, "─")
-
-  const cleanedRefs = createMemo(() => {
-    if (!props.entry.refs) return []
-    return props.entry.refs.map((r) => r.replace("HEAD -> ", "● "))
-  })
-
-  return (
-    <box flexDirection="row" gap={1}>
-      <text wrapMode="none" fg={theme.theme.accent}>
-        {graph()}
-      </text>
-      <box flexDirection="row" flexGrow={1} gap={1} overflow="hidden">
-        <text wrapMode="none" fg={theme.theme.text} flexGrow={1} flexShrink={1}>
-          {props.entry.subject}
-        </text>
-
-        <Show when={cleanedRefs().length > 0}>
-          <box flexDirection="row" gap={1} flexShrink={0} backgroundColor={theme.theme.background} paddingLeft={1}>
-            <For each={cleanedRefs()}>
-              {(ref) => {
-                const isHead = createMemo(() => ref.includes("● ") || ref.includes("tag: "))
-                const bg = createMemo(() => (isHead() ? theme.theme.warning : theme.theme.backgroundElement))
-                const fg = createMemo(() =>
-                  isHead() ? selectedForeground(theme.theme, theme.theme.warning) : theme.theme.textMuted,
-                )
-                return (
-                  <box backgroundColor={bg()} paddingLeft={1} paddingRight={1} flexShrink={0}>
-                    <text wrapMode="none" fg={fg()} attributes={isHead() ? TextAttributes.BOLD : undefined}>
-                      {ref.replace("tag: ", "🏷 ")}
-                    </text>
-                  </box>
-                )
-              }}
-            </For>
-          </box>
-        </Show>
-      </box>
-    </box>
-  )
-}

package/src/cli/cmd/tui/routes/session/header.tsx

@@ -1,185 +0,0 @@
-import { type Accessor, createMemo, createSignal, Match, Show, Switch } from "solid-js"
-import { useRouteData } from "@tui/context/route"
-import { useSync } from "@tui/context/sync"
-import { pipe, sumBy } from "remeda"
-import { useTheme } from "@tui/context/theme"
-import { SplitBorder } from "@tui/component/border"
-import type { AssistantMessage, Session } from "@jonsoc/sdk/v2"
-import { useCommandDialog } from "@tui/component/dialog-command"
-import { useKeybind } from "../../context/keybind"
-import { Installation } from "@/installation"
-import { useTerminalDimensions } from "@opentui/solid"
-
-type HeaderProps = {
-  navigatorOpen?: boolean
-  navigatorKeybind?: string
-  onNavigatorToggle?: () => void
-}
-
-const Title = (props: { session: Accessor<Session> }) => {
-  const { theme } = useTheme()
-  return (
-    <text fg={theme.text}>
-      <span style={{ bold: true }}>#</span> <span style={{ bold: true }}>{props.session().title}</span>
-    </text>
-  )
-}
-
-const ContextInfo = (props: { context: Accessor<string | undefined>; cost: Accessor<string> }) => {
-  const { theme } = useTheme()
-  return (
-    <Show when={props.context()}>
-      <text fg={theme.textMuted} wrapMode="none" flexShrink={0}>
-        {props.context()} ({props.cost()})
-      </text>
-    </Show>
-  )
-}
-
-export function Header(props: HeaderProps) {
-  const route = useRouteData("session")
-  const sync = useSync()
-  const session = createMemo(() => sync.session.get(route.sessionID)!)
-  const messages = createMemo(() => sync.data.message[route.sessionID] ?? [])
-
-  const cost = createMemo(() => {
-    const total = pipe(
-      messages(),
-      sumBy((x) => (x.role === "assistant" ? x.cost : 0)),
-    )
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-    }).format(total)
-  })
-
-  const context = createMemo(() => {
-    const last = messages().findLast((x) => x.role === "assistant" && x.tokens.output > 0) as AssistantMessage
-    if (!last) return
-    const total =
-      last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
-    const model = sync.data.provider.find((x) => x.id === last.providerID)?.models[last.modelID]
-    let result = total.toLocaleString()
-    if (model?.limit.context) {
-      result += "  " + Math.round((total / model.limit.context) * 100) + "%"
-    }
-    return result
-  })
-
-  const { theme } = useTheme()
-  const keybind = useKeybind()
-  const command = useCommandDialog()
-  const [hover, setHover] = createSignal<"parent" | "prev" | "next" | null>(null)
-  const [navigatorHover, setNavigatorHover] = createSignal(false)
-  const dimensions = useTerminalDimensions()
-  const narrow = createMemo(() => dimensions().width < 80)
-  const showNavigator = createMemo(() => Boolean(props.onNavigatorToggle))
-  const navigatorLabel = createMemo(() => (props.navigatorOpen ? "Hide navigator" : "Show navigator"))
-
-  return (
-    <box flexShrink={0}>
-      <box
-        paddingTop={1}
-        paddingBottom={1}
-        paddingLeft={2}
-        paddingRight={1}
-        {...SplitBorder}
-        border={["left"]}
-        borderColor={theme.border}
-        flexShrink={0}
-        backgroundColor={theme.backgroundPanel}
-      >
-        <Switch>
-          <Match when={session()?.parentID}>
-            <box flexDirection="column" gap={1}>
-              <box flexDirection={narrow() ? "column" : "row"} justifyContent="space-between" gap={narrow() ? 1 : 0}>
-                <box flexDirection="row" gap={1} alignItems="center">
-                  <Show when={showNavigator()}>
-                    <box
-                      onMouseOver={() => setNavigatorHover(true)}
-                      onMouseOut={() => setNavigatorHover(false)}
-                      onMouseUp={() => props.onNavigatorToggle?.()}
-                      backgroundColor={navigatorHover() ? theme.backgroundElement : theme.backgroundPanel}
-                    >
-                      <text fg={theme.text}>
-                        {navigatorLabel()}
-                        <Show when={props.navigatorKeybind}>
-                          <span style={{ fg: theme.textMuted }}> {props.navigatorKeybind}</span>
-                        </Show>
-                      </text>
-                    </box>
-                  </Show>
-                  <text fg={theme.text}>
-                    <b>Subagent session</b>
-                  </text>
-                </box>
-                <box flexDirection="row" gap={1} flexShrink={0}>
-                  <ContextInfo context={context} cost={cost} />
-                  <text fg={theme.textMuted}>v{Installation.VERSION}</text>
-                </box>
-              </box>
-              <box flexDirection="row" gap={2}>
-                <box
-                  onMouseOver={() => setHover("parent")}
-                  onMouseOut={() => setHover(null)}
-                  onMouseUp={() => command.trigger("session.parent")}
-                  backgroundColor={hover() === "parent" ? theme.backgroundElement : theme.backgroundPanel}
-                >
-                  <text fg={theme.text}>
-                    Parent <span style={{ fg: theme.textMuted }}>{keybind.print("session_parent")}</span>
-                  </text>
-                </box>
-                <box
-                  onMouseOver={() => setHover("prev")}
-                  onMouseOut={() => setHover(null)}
-                  onMouseUp={() => command.trigger("session.child.previous")}
-                  backgroundColor={hover() === "prev" ? theme.backgroundElement : theme.backgroundPanel}
-                >
-                  <text fg={theme.text}>
-                    Prev <span style={{ fg: theme.textMuted }}>{keybind.print("session_child_cycle_reverse")}</span>
-                  </text>
-                </box>
-                <box
-                  onMouseOver={() => setHover("next")}
-                  onMouseOut={() => setHover(null)}
-                  onMouseUp={() => command.trigger("session.child.next")}
-                  backgroundColor={hover() === "next" ? theme.backgroundElement : theme.backgroundPanel}
-                >
-                  <text fg={theme.text}>
-                    Next <span style={{ fg: theme.textMuted }}>{keybind.print("session_child_cycle")}</span>
-                  </text>
-                </box>
-              </box>
-            </box>
-          </Match>
-          <Match when={true}>
-            <box flexDirection={narrow() ? "column" : "row"} justifyContent="space-between" gap={1}>
-              <box flexDirection="row" gap={1} alignItems="center">
-                <Show when={showNavigator()}>
-                  <box
-                    onMouseOver={() => setNavigatorHover(true)}
-                    onMouseOut={() => setNavigatorHover(false)}
-                    onMouseUp={() => props.onNavigatorToggle?.()}
-                    backgroundColor={navigatorHover() ? theme.backgroundElement : theme.backgroundPanel}
-                  >
-                    <text fg={theme.text}>
-                      {navigatorLabel()}
-                      <Show when={props.navigatorKeybind}>
-                        <span style={{ fg: theme.textMuted }}> {props.navigatorKeybind}</span>
-                      </Show>
-                    </text>
-                  </box>
-                </Show>
-                <Title session={session} />
-              </box>
-              <box flexDirection="row" gap={1} flexShrink={0}>
-                <ContextInfo context={context} cost={cost} />
-                <text fg={theme.textMuted}>v{Installation.VERSION}</text>
-              </box>
-            </box>
-          </Match>
-        </Switch>
-      </box>
-    </box>
-  )
-}