jonsoc 1.1.50 → 1.1.51

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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,185 @@
+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>
+  )
+}