opencode-git-plugin 0.2.0

package/src/sidebar/staging.tsx

@@ -0,0 +1,108 @@
+import { createMemo } from "solid-js"
+import type { Context } from "@opencode/plugin/tui/context"
+import { STAGED_STORE_KEY } from "../config"
+import { parseStagedPorcelain, shellQuote, type GitRunner } from "../git"
+import { friendlyError } from "../ui"
+
+export type Staging = ReturnType<typeof createStaging>
+
+export function createStaging(
+  ctx: Context,
+  git: GitRunner,
+  location: () => { directory: string },
+  refreshWorkingCopy: () => Promise<void>,
+) {
+  const [stagedMem, setStagedMem] = ctx.storage.memory(STAGED_STORE_KEY, {
+    initial: { directory: "", files: [] as string[] },
+  })
+  const staged = createMemo(() => new Set(stagedMem.files))
+
+  if (stagedMem.directory !== location().directory) {
+    setStagedMem((draft) => {
+      draft.directory = location().directory
+      draft.files = []
+    })
+  }
+
+  let refreshTask: Promise<void> | undefined
+
+  const fetchStatuses = async () => {
+    try {
+      const res = await git.run("status --porcelain=v1 -z -uall --no-renames")
+      if (res.exit === 0) {
+        const files = [...parseStagedPorcelain(res.output)]
+        setStagedMem((draft) => {
+          draft.files = files
+        })
+      }
+    } catch {
+    }
+  }
+
+  const scheduleRefresh = async () => {
+    if (refreshTask) return refreshTask
+    refreshTask = git.enqueue(fetchStatuses).finally(() => {
+      refreshTask = undefined
+    })
+    return refreshTask
+  }
+
+  const applyChange = (file: string, stage: boolean) => {
+    setStagedMem((draft) => {
+      const next = new Set(draft.files)
+      if (stage) next.add(file)
+      else next.delete(file)
+      draft.files = [...next]
+    })
+    void git.enqueue(async () => {
+      try {
+        let res = await git.run(stage ? `add -- ${shellQuote(file)}` : `restore --staged -- ${shellQuote(file)}`)
+        if (!stage && res.exit !== 0 && /could not resolve HEAD|ambiguous argument ['"]?HEAD|invalid object name ['"]?HEAD/i.test(res.output)) {
+          res = await git.run(`rm --cached -- ${shellQuote(file)}`)
+        }
+        if (res.exit !== 0) {
+          ctx.ui.toast.show({
+            message: `git ${stage ? "add" : "restore"} failed: ${res.output.trim().slice(0, 200)}`,
+            variant: "error",
+          })
+          await fetchStatuses()
+          return
+        }
+        await fetchStatuses()
+      } catch (e) {
+        ctx.ui.toast.show({ message: `git failed: ${friendlyError(e)}`, variant: "error" })
+        await fetchStatuses()
+        return
+      }
+    })
+  }
+
+  const toggle = (file: string) => {
+    applyChange(file, !staged().has(file))
+  }
+
+  const commit = async () => {
+    await scheduleRefresh()
+    if (staged().size === 0) {
+      ctx.ui.toast.show({ message: "Nothing staged — stage files with → first", variant: "warning" })
+      return
+    }
+    const message = await ctx.ui.dialog.prompt({ title: "Commit message", placeholder: "Describe the change" })
+    if (!message) return
+    await git.enqueue(async () => {
+      try {
+        const res = await git.run(`commit -m ${shellQuote(message)}`)
+        if (res.exit !== 0) {
+          ctx.ui.toast.show({ message: `git commit failed: ${res.output.trim().slice(0, 200)}`, variant: "error" })
+        } else {
+          ctx.ui.toast.show({ message: "Committed", variant: "success" })
+        }
+      } catch (e) {
+        ctx.ui.toast.show({ message: `git commit failed: ${friendlyError(e)}`, variant: "error" })
+      }
+      await refreshWorkingCopy()
+    })
+  }
+
+  return { staged, scheduleRefresh, applyChange, toggle, commit }
+}

package/src/sidebar/status.tsx

@@ -0,0 +1,29 @@
+/** @jsxImportSource @opentui/solid */
+import { Show } from "solid-js"
+import type { Context } from "@opencode/plugin/tui/context"
+
+export function SidebarStatus(props: {
+  ctx: Context
+  loading: boolean
+  error: string | undefined
+  hasFiles: boolean
+  branch: string
+}) {
+  const ctx = props.ctx
+  return (
+    <>
+      <Show when={props.loading}>
+        <text fg={ctx.theme.text.muted}>Loading…</text>
+      </Show>
+      <Show when={!props.loading && props.error}>
+        <text fg={ctx.theme.text.feedback.error.base}>{props.error}</text>
+      </Show>
+      <Show when={!props.loading && !props.error && !props.hasFiles && !props.branch}>
+        <text fg={ctx.theme.text.muted}>Empty repo — no commits yet</text>
+      </Show>
+      <Show when={!props.loading && !props.error && !props.hasFiles && !!props.branch}>
+        <text fg={ctx.theme.text.muted}>Working tree clean</text>
+      </Show>
+    </>
+  )
+}

package/src/sidebar/view.tsx

@@ -0,0 +1,159 @@
+/** @jsxImportSource @opentui/solid */
+import { createEffect, createSignal, onCleanup, Show } from "solid-js"
+import type { Context } from "@opencode/plugin/tui/context"
+import { createDiffOpener } from "../diff"
+import { createGitRunner } from "../git"
+import { setDiffClosedHandler, useDiffStore } from "../state"
+import type { ChangeFile, LayoutResizeEmitter, RenderNode } from "../types"
+import { FileList } from "./file-list"
+import { bindSidebarFocus } from "./focus"
+import { SidebarHeader } from "./header"
+import { registerSidebarKeymaps } from "./keymap"
+import { createListNavigation } from "./list-navigation"
+import { createStaging } from "./staging"
+import { SidebarStatus } from "./status"
+import { createWorkingCopy } from "./working-copy"
+
+export function GitChangesView(props: { ctx: Context }) {
+  const { ctx } = props
+  const [sidebarWidth, setSidebarWidth] = createSignal(46)
+  const [diffView] = useDiffStore(ctx)
+  let sidebarNode: RenderNode | undefined
+
+  const currentLocation = () => {
+    const loc = ctx.location ?? ctx.data.location.default()
+    return { directory: loc.directory }
+  }
+
+  const git = createGitRunner(ctx, () => currentLocation().directory)
+  const openDiff = createDiffOpener(ctx, currentLocation)
+  const workingCopy = createWorkingCopy(ctx, currentLocation, (count) => {
+    nav.clampSelection(count)
+    void staging.scheduleRefresh()
+  })
+  const staging = createStaging(ctx, git, currentLocation, workingCopy.refresh)
+  const nav = createListNavigation(ctx, workingCopy.files)
+
+  const openSelectedDiff = () => {
+    const f = nav.selectedFile()
+    if (f) void openDiff(f).catch(() => {})
+  }
+  const setSelectedFileStaged = (stage: boolean) => {
+    const f = nav.selectedFile()
+    if (f) staging.applyChange(f.file, stage)
+  }
+  const selectFile = (f: ChangeFile, index: number) => {
+    nav.setSelected(index)
+    if (nav.stageMode()) staging.toggle(f.file)
+    else void openDiff(f).catch(() => {})
+  }
+
+  void workingCopy.refresh().catch(() => {})
+  void staging.scheduleRefresh().catch(() => {})
+
+  registerSidebarKeymaps(ctx, {
+    files: workingCopy.files,
+    nav,
+    diffOpen: () => diffView.panelOpen,
+    requestRefresh: workingCopy.requestRefresh,
+    actions: {
+      next: nav.selectNext,
+      prev: nav.selectPrevious,
+      open: openSelectedDiff,
+      setStaged: setSelectedFileStaged,
+      commit: () => void staging.commit(),
+    },
+  })
+
+  const restoreListFocus = () => {
+    if (!nav.navMode() || diffView.panelOpen) return
+    nav.ensure()
+  }
+  setDiffClosedHandler(() => {
+    if (!nav.navMode() && workingCopy.files().length > 0) nav.enter()
+    restoreListFocus()
+  })
+  createEffect((wasOpen: boolean | undefined) => {
+    const open = diffView.panelOpen
+    if (wasOpen === true && open === false && nav.navMode()) {
+      setTimeout(() => restoreListFocus(), 0)
+    }
+    return open
+  })
+  bindSidebarFocus(ctx, {
+    container: () => sidebarNode,
+    active: () => nav.navMode() && !diffView.panelOpen,
+    exit: nav.exit,
+  })
+  onCleanup(() => setDiffClosedHandler(undefined))
+
+  const setSidebarRef = (el: RenderNode) => {
+    sidebarNode = el
+    setSidebarWidth(el.width)
+    const onNodeResize = () => setSidebarWidth(el.width)
+    ;(el as unknown as LayoutResizeEmitter).on("resize", onNodeResize)
+    onCleanup(() => (el as unknown as LayoutResizeEmitter).off("resize", onNodeResize))
+  }
+
+  const ready = () => !workingCopy.loading() && !workingCopy.error()
+  const hasFiles = () => workingCopy.files().length > 0
+
+  const sidebarBody = (
+    <>
+      <SidebarHeader
+        ctx={ctx}
+        branch={workingCopy.branch()}
+        fileCount={workingCopy.files().length}
+        ready={ready()}
+        additions={workingCopy.additions()}
+        deletions={workingCopy.deletions()}
+        navMode={nav.navMode()}
+        stageMode={nav.stageMode()}
+        hasStaged={staging.staged().size > 0}
+        onBranchClick={nav.toggleStageMode}
+        onCommit={() => void staging.commit()}
+      />
+      <SidebarStatus
+        ctx={ctx}
+        loading={workingCopy.loading()}
+        error={workingCopy.error()}
+        hasFiles={hasFiles()}
+        branch={workingCopy.branch()}
+      />
+      <Show when={ready() && hasFiles()}>
+        <FileList
+          ctx={ctx}
+          files={workingCopy.files()}
+          staged={staging.staged()}
+          selected={nav.selected()}
+          navMode={nav.navMode()}
+          width={sidebarWidth()}
+          onSelect={selectFile}
+        />
+      </Show>
+    </>
+  )
+
+  return (
+    <Show
+      when={nav.navMode()}
+      fallback={
+        <box flexDirection="column" gap={1} ref={setSidebarRef}>
+          {sidebarBody}
+        </box>
+      }
+    >
+      <box
+        flexDirection="column"
+        gap={1}
+        border={["top", "bottom"]}
+        borderStyle="rounded"
+        borderColor={ctx.theme.text.feedback.warning.base}
+        focusedBorderColor={ctx.theme.text.feedback.warning.base}
+        ref={setSidebarRef}
+      >
+        {sidebarBody}
+      </box>
+    </Show>
+  )
+}

package/src/sidebar/working-copy.tsx

@@ -0,0 +1,81 @@
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js"
+import type { Context } from "@opencode/plugin/tui/context"
+import { EVENT_REFRESH_DEBOUNCE_MS, REFRESH_STORE_KEY, intervalMs } from "../config"
+import { friendlyError } from "../ui"
+import type { ChangeFile } from "../types"
+
+export type WorkingCopy = ReturnType<typeof createWorkingCopy>
+
+export function createWorkingCopy(
+  ctx: Context,
+  location: () => { directory: string },
+  onRefreshed: (count: number) => void,
+) {
+  const [files, setFiles] = createSignal<ChangeFile[]>([])
+  const [branch, setBranch] = createSignal<string>("")
+  const [loading, setLoading] = createSignal(true)
+  const [error, setError] = createSignal<string | undefined>(undefined)
+
+  let isRefreshing = false
+  let lastEventRefreshAt = 0
+
+  const refresh = async () => {
+    if (isRefreshing) return
+    isRefreshing = true
+    try {
+      const loc = location()
+      const [statusRes, infoRes] = await Promise.all([
+        ctx.client.vcs.status({ location: loc }),
+        ctx.client.vcs.get({ location: loc }),
+      ])
+      const prevByFile = new Map(files().map((f) => [f.file, f]))
+      setFiles(
+        statusRes.data.map((d) => {
+          const p = prevByFile.get(d.file)
+          return p && p.additions === d.additions && p.deletions === d.deletions && p.status === d.status
+            ? p
+            : { ...d }
+        }),
+      )
+      setBranch(infoRes.data.branch.current ?? "")
+      setError(undefined)
+      onRefreshed(statusRes.data.length)
+    } catch (e) {
+      setError(friendlyError(e))
+    } finally {
+      setLoading(false)
+      isRefreshing = false
+    }
+  }
+
+  const additions = createMemo(() => files().reduce((n, f) => n + f.additions, 0))
+  const deletions = createMemo(() => files().reduce((n, f) => n + f.deletions, 0))
+
+  const [refreshSignal, bumpRefresh] = ctx.storage.memory(REFRESH_STORE_KEY, { initial: { nonce: 0 } })
+  const requestRefresh = () =>
+    bumpRefresh((draft) => {
+      draft.nonce += 1
+    })
+
+  createEffect((prev: number | undefined) => {
+    const nonce = refreshSignal.nonce
+    if (prev !== undefined) void refresh().catch(() => {})
+    return nonce
+  })
+
+  const timer = setInterval(() => void refresh().catch(() => {}), intervalMs(ctx))
+  const stopListening = ctx.data.listen(({ details }: { details: { type: string } }) => {
+    const t = details.type
+    if (!(t.includes("session") || t.includes("vcs") || t.includes("server.connected") || t.includes("location"))) return
+    const now = Date.now()
+    if (now - lastEventRefreshAt < EVENT_REFRESH_DEBOUNCE_MS) return
+    lastEventRefreshAt = now
+    void refresh().catch(() => {})
+  })
+  onCleanup(() => {
+    clearInterval(timer)
+    stopListening()
+  })
+
+  return { files, branch, loading, error, additions, deletions, refresh, requestRefresh }
+}

package/src/state/diff-store.ts

@@ -0,0 +1,34 @@
+import type { Context } from "@opencode/plugin/tui/context"
+import { DIFF_STORE_KEY } from "../config"
+import type { DiffViewState } from "../types"
+
+export const initialDiffState: DiffViewState = {
+  file: "",
+  additions: 0,
+  deletions: 0,
+  lines: [],
+  patch: "",
+  message: "",
+  truncated: false,
+  loading: false,
+  query: "",
+  matchCursor: 0,
+  panelOpen: false,
+}
+
+export function useDiffStore(ctx: Context) {
+  return ctx.storage.memory(DIFF_STORE_KEY, { initial: initialDiffState })
+}
+
+let diffClosedHandler: (() => void) | undefined
+
+export function setDiffClosedHandler(handler: (() => void) | undefined): void {
+  diffClosedHandler = handler
+}
+
+export function notifyDiffClosed(): void {
+  try {
+    diffClosedHandler?.()
+  } catch {
+  }
+}

package/src/state/index.ts

@@ -0,0 +1 @@
+export * from "./diff-store"

package/src/tui.tsx

@@ -0,0 +1,25 @@
+/** @jsxImportSource @opentui/solid */
+import { Plugin } from "@opencode/plugin/tui"
+import { DiffPanel } from "./diff"
+import { GitChangesView } from "./sidebar"
+
+export { parseDiff, parseStagedPorcelain } from "./git"
+
+export default Plugin.define({
+  id: "git-panel.cli",
+  setup(ctx) {
+    const unregisterSidebar = ctx.ui.slot({
+      append: "sidebar.content",
+      render: () => <GitChangesView ctx={ctx} />,
+    })
+    const unregisterPanel = ctx.ui.slot({
+      append: "session.panel",
+      render: (input) => <DiffPanel ctx={ctx} input={input} />,
+    })
+
+    return () => {
+      unregisterSidebar()
+      unregisterPanel()
+    }
+  },
+})

package/src/types.ts

@@ -0,0 +1,63 @@
+import type { Context } from "@opencode/plugin/tui/context"
+
+export type RenderNode = {
+  parent?: RenderNode | null
+  width: number
+}
+
+export type ScrollHandle = {
+  scrollTop: number
+  scrollTo(options: { x: number; y: number }): void
+}
+
+export type ChangeFile = {
+  file: string
+  additions: number
+  deletions: number
+  status: "added" | "deleted" | "modified"
+}
+
+export type DiffLineKind = "hunk" | "add" | "del" | "context" | "meta"
+export type DiffLine = { kind: DiffLineKind; text: string; line?: number }
+
+export type DiffViewState = {
+  file: string
+  additions: number
+  deletions: number
+  lines: DiffLine[]
+  patch: string
+  message: string
+  truncated: boolean
+  loading: boolean
+  query: string
+  matchCursor: number
+  panelOpen: boolean
+}
+
+export type DiffRow = {
+  kind: DiffLineKind
+  text: string
+  line: number | undefined
+  state: "current" | "hit" | "plain"
+}
+
+export type FileBinds = {
+  next?: string
+  prev?: string
+  open?: string
+  stage?: string
+  unstage?: string
+  commit?: string
+}
+
+export type RendererFocusEvents = {
+  on(event: "focused_renderable" | "focused_editor", listener: (...args: never[]) => void): void
+  off(event: "focused_renderable" | "focused_editor", listener: (...args: never[]) => void): void
+}
+
+export type LayoutResizeEmitter = {
+  on(event: "resize", listener: () => void): void
+  off(event: "resize", listener: () => void): void
+}
+
+export type Theme = Context["theme"]

package/src/ui/format.ts

@@ -0,0 +1,67 @@
+import type { Context } from "@opencode/plugin/tui/context"
+import type { ChangeFile, DiffLineKind } from "../types"
+import { FILE_ROW_BADGE_WIDTH } from "../config"
+
+type Theme = Context["theme"]
+type ThemeColor = Theme["text"]["base"]
+
+const ELLIPSIS = "..."
+const runtime = globalThis as { Bun?: { stringWidth?: (text: string) => number } }
+const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" })
+
+export function displayWidth(text: string): number {
+  return runtime.Bun?.stringWidth?.(text) ?? [...text].length
+}
+
+export function truncatePath(path: string, max: number): string {
+  if (displayWidth(path) <= max) return path
+  const budget = max - ELLIPSIS.length
+  if (budget <= 0) return ELLIPSIS.slice(0, Math.max(0, max))
+  const parts = Array.from(graphemes.segment(path), (s) => s.segment)
+  let width = 0
+  let start = parts.length
+  for (let i = parts.length - 1; i >= 0; i--) {
+    const w = displayWidth(parts[i])
+    if (width + w > budget) break
+    width += w
+    start = i
+  }
+  return ELLIPSIS + parts.slice(start).join("")
+}
+
+export function maxTextWidth(available: number, reserved: number): number {
+  return Math.max(8, available - reserved)
+}
+
+export function filePathMaxWidth(rowWidth: number, row: { additions: number; deletions: number }): number {
+  const gaps = 4
+  const fixed = FILE_ROW_BADGE_WIDTH + displayWidth(`+${row.additions}`) + displayWidth(`-${row.deletions}`)
+  return maxTextWidth(rowWidth, fixed + gaps)
+}
+
+export function friendlyError(e: unknown): string {
+  const msg = e instanceof Error ? e.message : String(e)
+  if (/not a git repository|not a repository|no git|vcs|worktree/i.test(msg)) return "Not a git repository"
+  return msg.length > 120 ? `${msg.slice(0, 117)}…` : msg
+}
+
+export function statusBadge(status: ChangeFile["status"], theme: Theme): { label: string; color: ThemeColor } {
+  if (status === "added") return { label: "A", color: theme.text.feedback.success.base }
+  if (status === "deleted") return { label: "D", color: theme.text.feedback.error.base }
+  return { label: "M", color: theme.text.feedback.warning.base }
+}
+
+export function diffLineStyle(theme: Theme, kind: DiffLineKind): { fg: ThemeColor; bg: ThemeColor | undefined } {
+  if (kind === "hunk") return { fg: theme.diff.text.hunkHeader, bg: undefined }
+  if (kind === "add") return { fg: theme.diff.text.added, bg: theme.diff.background.added }
+  if (kind === "del") return { fg: theme.diff.text.removed, bg: theme.diff.background.removed }
+  if (kind === "meta") return { fg: theme.text.muted, bg: undefined }
+  return { fg: theme.diff.text.context, bg: theme.diff.background.context }
+}
+
+export function diffLinePrefix(kind: DiffLineKind): string {
+  if (kind === "add") return "+"
+  if (kind === "del") return "-"
+  if (kind === "context") return " "
+  return ""
+}

package/src/ui/index.ts

@@ -0,0 +1,2 @@
+export * from "./format"
+export * from "./syntax"

package/src/ui/syntax.ts

@@ -0,0 +1,61 @@
+const SYNTAX_BY_LANGUAGE: Array<[string, string[]]> = [
+  ["typescript", ["ts", "mts", "cts", "tsx", "mtsx", "js", "mjs", "cjs", "jsx"]],
+  ["python", ["py"]],
+  ["rust", ["rs"]],
+  ["go", ["go"]],
+  ["java", ["java"]],
+  ["kotlin", ["kt", "kts"]],
+  ["ruby", ["rb"]],
+  ["php", ["php"]],
+  ["swift", ["swift"]],
+  ["c", ["c", "h"]],
+  ["cpp", ["cpp", "cc", "hpp"]],
+  ["csharp", ["cs"]],
+  ["css", ["css"]],
+  ["scss", ["scss"]],
+  ["less", ["less"]],
+  ["html", ["html", "htm"]],
+  ["xml", ["xml"]],
+  ["vue", ["vue"]],
+  ["svelte", ["svelte"]],
+  ["astro", ["astro"]],
+  ["json", ["json"]],
+  ["yaml", ["yaml", "yml"]],
+  ["toml", ["toml"]],
+  ["ini", ["ini"]],
+  ["markdown", ["md", "markdown"]],
+  ["bash", ["sh", "bash", "zsh"]],
+  ["sql", ["sql"]],
+  ["lua", ["lua"]],
+  ["r", ["r"]],
+  ["julia", ["jl"]],
+  ["haskell", ["hs"]],
+  ["ocaml", ["ml", "mli"]],
+  ["elixir", ["ex", "exs"]],
+  ["erlang", ["erl"]],
+  ["clojure", ["clj", "cljs"]],
+  ["scala", ["scala"]],
+  ["groovy", ["groovy"]],
+  ["dart", ["dart"]],
+  ["zig", ["zig"]],
+  ["nix", ["nix"]],
+  ["terraform", ["tf"]],
+  ["hcl", ["hcl"]],
+  ["dockerfile", ["dockerfile"]],
+  ["latex", ["tex"]],
+  ["diff", ["diff", "patch"]],
+]
+
+const LANGUAGE_BY_EXTENSION: Record<string, string> = Object.fromEntries(
+  SYNTAX_BY_LANGUAGE.flatMap(([lang, exts]) => exts.map((e) => [`.${e}`, lang])),
+)
+
+export function syntaxFiletype(file: string): string | undefined {
+  const dot = file.lastIndexOf(".")
+  if (dot < 0) {
+    const base = file.split("/").pop()?.toLowerCase() ?? ""
+    if (base === "dockerfile" || base === "makefile") return base
+    return undefined
+  }
+  return LANGUAGE_BY_EXTENSION[file.slice(dot).toLowerCase()]
+}

package/tui.ts

@@ -0,0 +1 @@
+export { default } from "./src/tui"