jonsoc 1.1.50 → 1.1.51

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

@@ -0,0 +1,365 @@
+import { useSync } from "@tui/context/sync"
+import { createEffect, createMemo, For, Show, Switch, Match } from "solid-js"
+import { createStore } from "solid-js/store"
+import type { ScrollAcceleration } from "@opentui/core"
+import { useTheme } from "../../context/theme"
+import { Locale } from "@/util/locale"
+import path from "path"
+import type { AssistantMessage } from "@jonsoc/sdk/v2"
+import { Global } from "@/global"
+import { Installation } from "@/installation"
+import { useKeybind } from "../../context/keybind"
+import { useDirectory } from "../../context/directory"
+import { useKV } from "../../context/kv"
+import { TodoItem } from "../../component/todo-item"
+
+class CustomSpeedScroll implements ScrollAcceleration {
+  constructor(private speed: number) {}
+
+  tick(_now?: number): number {
+    return this.speed
+  }
+
+  reset(): void {}
+}
+
+export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
+  const sync = useSync()
+  const { theme } = useTheme()
+  const session = createMemo(() => sync.session.get(props.sessionID)!)
+  const diff = createMemo(() => sync.data.session_diff[props.sessionID] ?? [])
+  const todo = createMemo(() => sync.data.todo[props.sessionID] ?? [])
+  const messages = createMemo(() => sync.data.message[props.sessionID] ?? [])
+
+  const kv = useKV()
+  const [showScrollbar] = kv.signal("scrollbar_enabled", true)
+  const readExpanded = () => {
+    const stored = kv.get("session_sidebar_expanded")
+    if (!stored || typeof stored !== "object" || Array.isArray(stored)) {
+      return {
+        mcp: true,
+        diff: true,
+        todo: true,
+        lsp: true,
+      }
+    }
+    return {
+      mcp: typeof stored.mcp === "boolean" ? stored.mcp : true,
+      diff: typeof stored.diff === "boolean" ? stored.diff : true,
+      todo: typeof stored.todo === "boolean" ? stored.todo : true,
+      lsp: typeof stored.lsp === "boolean" ? stored.lsp : true,
+    }
+  }
+  const [expanded, setExpanded] = createStore(readExpanded())
+
+  // Sort MCP servers alphabetically for consistent display order
+  const mcpEntries = createMemo(() => Object.entries(sync.data.mcp).sort(([a], [b]) => a.localeCompare(b)))
+
+  // Count connected and error MCP servers for collapsed header display
+  const connectedMcpCount = createMemo(() => mcpEntries().filter(([_, item]) => item.status === "connected").length)
+  const errorMcpCount = createMemo(
+    () =>
+      mcpEntries().filter(
+        ([_, item]) =>
+          item.status === "failed" || item.status === "needs_auth" || item.status === "needs_client_registration",
+      ).length,
+  )
+
+  const cost = createMemo(() => {
+    const total = messages().reduce((sum, x) => sum + (x.role === "assistant" ? x.cost : 0), 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]
+    return {
+      tokens: total.toLocaleString(),
+      percentage: model?.limit.context ? Math.round((total / model.limit.context) * 100) : null,
+    }
+  })
+
+  const directory = useDirectory()
+
+  const viewportOptions = createMemo(() => ({
+    paddingLeft: 1,
+    paddingRight: showScrollbar() ? 2 : 1,
+  }))
+  const verticalScrollbarOptions = createMemo(() => ({
+    paddingLeft: 1,
+    visible: showScrollbar(),
+    trackOptions: {
+      backgroundColor: theme.backgroundPanel,
+      foregroundColor: theme.border,
+    },
+  }))
+
+  const hasProviders = createMemo(() =>
+    sync.data.provider.some((x) => x.id !== "jonsoc" || Object.values(x.models).some((y) => y.cost?.input !== 0)),
+  )
+  const gettingStartedDismissed = createMemo(() => kv.get("dismissed_getting_started", false))
+
+  createEffect(() => {
+    kv.set("session_sidebar_expanded", {
+      mcp: expanded.mcp,
+      diff: expanded.diff,
+      todo: expanded.todo,
+      lsp: expanded.lsp,
+    })
+  })
+
+  return (
+    <Show when={session()}>
+      <box
+        backgroundColor={theme.backgroundPanel}
+        width={42}
+        height="100%"
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={2}
+        position={props.overlay ? "absolute" : "relative"}
+      >
+        <scrollbox
+          flexGrow={1}
+          height="100%"
+          viewportOptions={viewportOptions()}
+          verticalScrollbarOptions={verticalScrollbarOptions()}
+          scrollAcceleration={new CustomSpeedScroll(3)}
+        >
+          <box flexShrink={0} gap={1} paddingRight={1}>
+            <box paddingRight={1}>
+              <text fg={theme.text}>
+                <b>{session().title}</b>
+              </text>
+              <Show when={session().share?.url}>
+                <text fg={theme.textMuted}>{session().share!.url}</text>
+              </Show>
+            </box>
+            <box>
+              <text fg={theme.text}>
+                <b>Context</b>
+              </text>
+              <text fg={theme.textMuted}>{context()?.tokens ?? 0} tokens</text>
+              <text fg={theme.textMuted}>{context()?.percentage ?? 0}% used</text>
+              <text fg={theme.textMuted}>{cost()} spent</text>
+            </box>
+            <Show when={mcpEntries().length > 0}>
+              <box>
+                <box
+                  flexDirection="row"
+                  gap={1}
+                  onMouseDown={() => mcpEntries().length > 2 && setExpanded("mcp", !expanded.mcp)}
+                >
+                  <Show when={mcpEntries().length > 2}>
+                    <text fg={theme.text}>{expanded.mcp ? "▼" : "▶"}</text>
+                  </Show>
+                  <text fg={theme.text}>
+                    <b>MCP</b>
+                    <Show when={!expanded.mcp}>
+                      <span style={{ fg: theme.textMuted }}>
+                        {" "}
+                        ({connectedMcpCount()} active
+                        {errorMcpCount() > 0 ? `, ${errorMcpCount()} error${errorMcpCount() > 1 ? "s" : ""}` : ""})
+                      </span>
+                    </Show>
+                  </text>
+                </box>
+                <Show when={mcpEntries().length <= 2 || expanded.mcp}>
+                  <For each={mcpEntries()}>
+                    {([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">
+                          {key}{" "}
+                          <span style={{ fg: theme.textMuted }}>
+                            <Switch fallback={item.status}>
+                              <Match when={item.status === "connected"}>Connected</Match>
+                              <Match when={item.status === "failed" && item}>{(val) => <i>{val().error}</i>}</Match>
+                              <Match when={item.status === "disabled"}>Disabled</Match>
+                              <Match when={(item.status as string) === "needs_auth"}>Needs auth</Match>
+                              <Match when={(item.status as string) === "needs_client_registration"}>
+                                Needs client ID
+                              </Match>
+                            </Switch>
+                          </span>
+                        </text>
+                      </box>
+                    )}
+                  </For>
+                </Show>
+              </box>
+            </Show>
+            <box>
+              <box
+                flexDirection="row"
+                gap={1}
+                onMouseDown={() => sync.data.lsp.length > 2 && setExpanded("lsp", !expanded.lsp)}
+              >
+                <Show when={sync.data.lsp.length > 2}>
+                  <text fg={theme.text}>{expanded.lsp ? "▼" : "▶"}</text>
+                </Show>
+                <text fg={theme.text}>
+                  <b>LSP</b>
+                </text>
+              </box>
+              <Show when={sync.data.lsp.length <= 2 || expanded.lsp}>
+                <Show when={sync.data.lsp.length === 0}>
+                  <text fg={theme.textMuted}>
+                    {sync.data.config.lsp === false
+                      ? "LSPs have been disabled in settings"
+                      : "LSPs will activate as files are read"}
+                  </text>
+                </Show>
+                <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.textMuted}>
+                        {item.id} {item.root}
+                      </text>
+                    </box>
+                  )}
+                </For>
+              </Show>
+            </box>
+            <Show when={todo().length > 0 && todo().some((t) => t.status !== "completed")}>
+              <box>
+                <box
+                  flexDirection="row"
+                  gap={1}
+                  onMouseDown={() => todo().length > 2 && setExpanded("todo", !expanded.todo)}
+                >
+                  <Show when={todo().length > 2}>
+                    <text fg={theme.text}>{expanded.todo ? "▼" : "▶"}</text>
+                  </Show>
+                  <text fg={theme.text}>
+                    <b>Todo</b>
+                  </text>
+                </box>
+                <Show when={todo().length <= 2 || expanded.todo}>
+                  <For each={todo()}>{(todo) => <TodoItem status={todo.status} content={todo.content} />}</For>
+                </Show>
+              </box>
+            </Show>
+            <Show when={diff().length > 0}>
+              <box>
+                <box
+                  flexDirection="row"
+                  gap={1}
+                  onMouseDown={() => diff().length > 2 && setExpanded("diff", !expanded.diff)}
+                >
+                  <Show when={diff().length > 2}>
+                    <text fg={theme.text}>{expanded.diff ? "▼" : "▶"}</text>
+                  </Show>
+                  <text fg={theme.text}>
+                    <b>Modified Files</b>
+                  </text>
+                </box>
+                <Show when={diff().length <= 2 || expanded.diff}>
+                  <For each={diff() || []}>
+                    {(item) => {
+                      return (
+                        <box flexDirection="row" gap={1} justifyContent="space-between">
+                          <text fg={theme.textMuted} wrapMode="none">
+                            {item.file}
+                          </text>
+                          <box flexDirection="row" gap={1} flexShrink={0}>
+                            <Show when={item.additions}>
+                              <text fg={theme.diffAdded}>+{item.additions}</text>
+                            </Show>
+                            <Show when={item.deletions}>
+                              <text fg={theme.diffRemoved}>-{item.deletions}</text>
+                            </Show>
+                          </box>
+                        </box>
+                      )
+                    }}
+                  </For>
+                </Show>
+              </box>
+            </Show>
+          </box>
+        </scrollbox>
+
+        <box flexShrink={0} gap={1} paddingTop={1}>
+          <Show when={!hasProviders() && !gettingStartedDismissed()}>
+            <box
+              backgroundColor={theme.backgroundElement}
+              paddingTop={1}
+              paddingBottom={1}
+              paddingLeft={2}
+              paddingRight={2}
+              flexDirection="row"
+              gap={1}
+            >
+              <text flexShrink={0} fg={theme.text}>
+                ⬖
+              </text>
+              <box flexGrow={1} gap={1}>
+                <box flexDirection="row" justifyContent="space-between">
+                  <text fg={theme.text}>
+                    <b>Getting started</b>
+                  </text>
+                  <text fg={theme.textMuted} onMouseDown={() => kv.set("dismissed_getting_started", true)}>
+                    ✕
+                  </text>
+                </box>
+                <text fg={theme.textMuted}>JonsOC includes free models so you can start immediately.</text>
+                <text fg={theme.textMuted}>
+                  Connect from 75+ providers to use other models, including Claude, GPT, Gemini etc
+                </text>
+                <box flexDirection="row" gap={1} justifyContent="space-between">
+                  <text fg={theme.text}>Connect provider</text>
+                  <text fg={theme.textMuted}>/connect</text>
+                </box>
+              </box>
+            </box>
+          </Show>
+          <text>
+            <span style={{ fg: theme.textMuted }}>{directory().split("/").slice(0, -1).join("/")}/</span>
+            <span style={{ fg: theme.text }}>{directory().split("/").at(-1)}</span>
+          </text>
+          <text fg={theme.textMuted}>
+            <span style={{ fg: theme.success }}>•</span> <b>Open</b>
+            <span style={{ fg: theme.text }}>
+              <b>Code</b>
+            </span>{" "}
+            <span>{Installation.VERSION}</span>
+          </text>
+        </box>
+      </box>
+    </Show>
+  )
+}

package/src/cli/cmd/tui/routes/session/vcs-diff-viewer.tsx

@@ -0,0 +1,37 @@
+import { type Accessor } from "solid-js"
+import { useTheme } from "@tui/context/theme"
+
+export type VcsDiffViewerProps = {
+    diff: Accessor<string | undefined>
+    fileType: string
+    wrapMode: "word" | "none"
+}
+
+export function VcsDiffViewer(props: VcsDiffViewerProps) {
+    const theme = useTheme()
+
+    return (
+        <box paddingTop={1}>
+            <text fg={theme.theme.textMuted}>Git diff</text>
+            <diff
+                diff={props.diff() ?? ""}
+                view="unified"
+                filetype={props.fileType}
+                syntaxStyle={theme.syntax()}
+                showLineNumbers={true}
+                width="100%"
+                wrapMode={props.wrapMode}
+                fg={theme.theme.text}
+                addedBg={theme.theme.diffAddedBg}
+                removedBg={theme.theme.diffRemovedBg}
+                contextBg={theme.theme.diffContextBg}
+                addedSignColor={theme.theme.diffHighlightAdded}
+                removedSignColor={theme.theme.diffHighlightRemoved}
+                lineNumberFg={theme.theme.diffLineNumber}
+                lineNumberBg={theme.theme.diffContextBg}
+                addedLineNumberBg={theme.theme.diffAddedLineNumberBg}
+                removedLineNumberBg={theme.theme.diffRemovedLineNumberBg}
+            />
+        </box>
+    )
+}