opencode-git-plugin 0.2.0

package/src/diff/panel.tsx

@@ -0,0 +1,156 @@
+/** @jsxImportSource @opentui/solid */
+import { createEffect, createMemo, Show } from "solid-js"
+import { generateSyntax } from "@opencode/theme/tui"
+import type { Context, PanelInput } from "@opencode/plugin/tui/context"
+import { DIFF_PANEL_NAME, SETTINGS_STORE_KEY } from "../config"
+import { notifyDiffClosed, useDiffStore } from "../state"
+import { friendlyError } from "../ui"
+import type { ScrollHandle } from "../types"
+import { DiffBody } from "./body"
+import { DiffHeader } from "./header"
+import { registerDiffKeymap } from "./keymap"
+import { createDiffSearch } from "./search"
+
+export function DiffPanel(props: { ctx: Context; input: PanelInput }) {
+  const ctx = props.ctx
+  const input = () => props.input
+  const theme = ctx.theme
+  const [diffState, setDiffState] = useDiffStore(ctx)
+  const [settings, setSettings] = ctx.storage.store(SETTINGS_STORE_KEY, {
+    initial: { syntax: false },
+  })
+  const toggleSyntax = () => {
+    void setSettings((draft) => {
+      draft.syntax = !draft.syntax
+    }).catch(() => {})
+  }
+  const isSyntaxViewActive = () =>
+    settings.syntax && !diffState.truncated && diffState.query === "" && diffState.patch !== ""
+  const syntaxHighlightStyle = createMemo(() => (settings.syntax ? generateSyntax(theme) : undefined))
+  const search = createDiffSearch(diffState)
+
+  createEffect(() => {
+    if (input().name !== DIFF_PANEL_NAME && diffState.panelOpen) {
+      setDiffState((draft) => {
+        draft.panelOpen = false
+      })
+    }
+  })
+
+  createEffect(() => {
+    if (input().name === DIFF_PANEL_NAME && !input().focused) {
+      try {
+        input().focus()
+      } catch {
+      }
+    }
+  })
+
+  let scrollEl: ScrollHandle | undefined
+
+  const safeScrollTo = (y: number) => {
+    const el = scrollEl
+    if (!el) return
+    try {
+      el.scrollTo({ x: 0, y: Math.max(0, y) })
+    } catch {
+    }
+  }
+
+  createEffect(() => {
+    const line = search.currentMatchIndex()
+    if (line < 0 || input().name !== DIFF_PANEL_NAME || !scrollEl) return
+    const target = Math.max(0, line - 10)
+    setTimeout(() => safeScrollTo(target), 50)
+  })
+
+  const scrollSyntaxBy = (delta: number) => {
+    if (!scrollEl) return
+    safeScrollTo(scrollEl.scrollTop + delta)
+  }
+
+  const stepSearchMatch = (dir: 1 | -1) => {
+    const m = search.matchIndices()
+    if (m.length === 0) return
+    setDiffState((draft) => {
+      draft.matchCursor = (draft.matchCursor + dir + m.length) % m.length
+    })
+  }
+
+  const clearSearch = () => {
+    setDiffState((draft) => {
+      draft.query = ""
+      draft.matchCursor = 0
+    })
+  }
+
+  const closeDiff = () => {
+    setDiffState((draft) => {
+      draft.panelOpen = false
+    })
+    ctx.ui.panel.close()
+    notifyDiffClosed()
+  }
+
+  const promptSearchQuery = async () => {
+    try {
+      const q = await ctx.ui.dialog.prompt({
+        title: "Search in diff",
+        placeholder: "Type to highlight matches",
+        value: diffState.query,
+      })
+      if (q === undefined) return
+      setDiffState((draft) => {
+        draft.query = q
+        draft.matchCursor = 0
+      })
+    } catch (e) {
+      ctx.ui.toast.show({ message: `Search failed: ${friendlyError(e)}`, variant: "error" })
+    }
+  }
+
+  registerDiffKeymap(ctx, {
+    input,
+    searching: () => diffState.query.length > 0,
+    hasMatches: () => search.matchIndices().length > 0,
+    syntaxActive: isSyntaxViewActive,
+    search: () => void promptSearchQuery(),
+    stepMatch: stepSearchMatch,
+    clearSearch,
+    close: closeDiff,
+    toggleSyntax,
+    scrollBy: scrollSyntaxBy,
+  })
+
+  return (
+    <Show when={input().name === DIFF_PANEL_NAME}>
+      <box flexDirection="column" gap={1} width="100%" height="100%">
+        <DiffHeader
+          theme={theme}
+          width={input().width}
+          file={diffState.file}
+          additions={diffState.additions}
+          deletions={diffState.deletions}
+          query={diffState.query}
+          matchCursor={diffState.matchCursor}
+          matchCount={search.matchIndices().length}
+          syntax={settings.syntax}
+          onSearch={() => void promptSearchQuery()}
+          onToggleSyntax={toggleSyntax}
+          onClose={closeDiff}
+        />
+        <DiffBody
+          theme={theme}
+          state={diffState}
+          rows={search.visibleRows()}
+          focused={input().focused}
+          syntaxActive={isSyntaxViewActive()}
+          syntaxStyle={syntaxHighlightStyle()}
+          onScrollRef={(el) => {
+            scrollEl = el
+          }}
+        />
+      </box>
+    </Show>
+  )
+}

package/src/diff/search.tsx

@@ -0,0 +1,38 @@
+import { createMemo } from "solid-js"
+import type { DiffRow, DiffViewState } from "../types"
+
+export function createDiffSearch(state: DiffViewState) {
+  const matchIndices = createMemo(() => {
+    const q = state.query.toLowerCase()
+    if (!q) return []
+    const out: number[] = []
+    state.lines.forEach((line, i) => {
+      if (line.text.toLowerCase().includes(q)) out.push(i)
+    })
+    return out
+  })
+
+  const currentMatchIndex = createMemo(() => {
+    const m = matchIndices()
+    if (m.length === 0) return -1
+    return m[((state.matchCursor % m.length) + m.length) % m.length]
+  })
+
+  let previousRows: DiffRow[] = []
+  const visibleRows = createMemo(() => {
+    const q = state.query.toLowerCase()
+    const cur = currentMatchIndex()
+    const prev = previousRows
+    const next = state.lines.map((line, idx) => {
+      const hit = q !== "" && line.text.toLowerCase().includes(q)
+      const rowState = (idx === cur ? "current" : hit ? "hit" : "plain") as DiffRow["state"]
+      const p = prev[idx]
+      if (p && p.kind === line.kind && p.text === line.text && p.line === line.line && p.state === rowState) return p
+      return { kind: line.kind, text: line.text, line: line.line, state: rowState }
+    })
+    previousRows = next
+    return next
+  })
+
+  return { matchIndices, currentMatchIndex, visibleRows }
+}

package/src/git/diff-parse.ts

@@ -0,0 +1,35 @@
+import type { DiffLine } from "../types"
+
+const DIFF_PREAMBLE_RE = /^(diff --git |index |new file mode|deleted file mode|similarity index|rename from|rename to|old mode|new mode)/
+const HUNK_HEADER_RE = /^@@ -\d+(?:,\d+)? \+(\d+)(?:,\d+)? @@ ?(.*)$/
+
+export function formatHunkHeader(raw: string): string {
+  const m = raw.match(HUNK_HEADER_RE)
+  if (!m) return raw
+  const [, newStart, trailingContext] = m
+  return trailingContext ? `⋯ ${trailingContext}` : `⋯ line ${newStart}`
+}
+
+export function parseDiff(patch: string): DiffLine[] {
+  const out: DiffLine[] = []
+  let newLine = 0
+  for (const line of patch.split("\n")) {
+    if (line === "") continue
+    if (line.startsWith("@@")) {
+      const m = line.match(HUNK_HEADER_RE)
+      if (m) newLine = parseInt(m[1], 10)
+      out.push({ kind: "hunk", text: formatHunkHeader(line) })
+    } else if (line.startsWith("+++") || line.startsWith("---")) {
+    } else if (DIFF_PREAMBLE_RE.test(line)) {
+    } else if (line.startsWith("Binary files")) {
+      out.push({ kind: "meta", text: line })
+    } else if (line.startsWith("+")) {
+      out.push({ kind: "add", text: line.slice(1), line: newLine++ })
+    } else if (line.startsWith("-")) {
+      out.push({ kind: "del", text: line.slice(1) })
+    } else {
+      out.push({ kind: "context", text: line.startsWith(" ") ? line.slice(1) : line, line: newLine++ })
+    }
+  }
+  return out
+}

package/src/git/index.ts

@@ -0,0 +1,3 @@
+export * from "./diff-parse"
+export * from "./porcelain"
+export * from "./runner"

package/src/git/porcelain.ts

@@ -0,0 +1,10 @@
+export function parseStagedPorcelain(porcelain: string): Set<string> {
+  const staged = new Set<string>()
+  for (const record of porcelain.split("\0")) {
+    if (record.length < 4) continue
+    const indexStatus = record[0]
+    if (indexStatus === " " || indexStatus === "?") continue
+    staged.add(record.slice(3))
+  }
+  return staged
+}

package/src/git/runner.ts

@@ -0,0 +1,45 @@
+import type { Context } from "@opencode/plugin/tui/context"
+import { GIT_POLL_MS, GIT_TIMEOUT_MS } from "../config"
+
+export function shellQuote(s: string): string {
+  return `'${s.replace(/'/g, `'\\''`)}'`
+}
+
+export type GitRunner = {
+  enqueue<T>(op: () => Promise<T>): Promise<T>
+  run(args: string): Promise<{ exit: number | undefined; output: string }>
+}
+
+export function createGitRunner(ctx: Context, directory: () => string): GitRunner {
+  let queue: Promise<void> = Promise.resolve()
+  const enqueue = <T,>(op: () => Promise<T>): Promise<T> => {
+    const run = queue.then(op)
+    queue = run.then(
+      () => undefined,
+      () => undefined,
+    )
+    return run
+  }
+  const run = async (args: string): Promise<{ exit: number | undefined; output: string }> => {
+    const location = { directory: directory() }
+    const created = await ctx.client.shell.create({
+      location,
+      command: `git ${args}`,
+      cwd: location.directory,
+    })
+    const id = created.data.id
+    try {
+      let final = await ctx.client.shell.get({ id, location })
+      for (let elapsed = 0; final.data.status === "running" && elapsed < GIT_TIMEOUT_MS; elapsed += GIT_POLL_MS) {
+        await new Promise((resolve) => setTimeout(resolve, GIT_POLL_MS))
+        final = await ctx.client.shell.get({ id, location })
+      }
+      if (final.data.status === "running") throw new Error(`Git command timed out after ${GIT_TIMEOUT_MS / 1000}s`)
+      const out = await ctx.client.shell.output({ id, location })
+      return { exit: final.data.exit, output: out.data.output }
+    } finally {
+      await ctx.client.shell.remove({ id, location }).catch(() => {})
+    }
+  }
+  return { enqueue, run }
+}

package/src/sidebar/file-list.tsx

@@ -0,0 +1,47 @@
+/** @jsxImportSource @opentui/solid */
+import { For } from "solid-js"
+import type { Context } from "@opencode/plugin/tui/context"
+import { FILE_ROW_BADGE_WIDTH } from "../config"
+import { filePathMaxWidth, statusBadge, truncatePath } from "../ui"
+import type { ChangeFile } from "../types"
+
+export function FileList(props: {
+  ctx: Context
+  files: ChangeFile[]
+  staged: Set<string>
+  selected: number
+  navMode: boolean
+  width: number
+  onSelect: (file: ChangeFile, index: number) => void
+}) {
+  const ctx = props.ctx
+  return (
+    <box flexDirection="column" gap={0}>
+      <For each={props.files}>
+        {(f, i) => {
+          const b = statusBadge(f.status, ctx.theme)
+          const label = () => (props.staged.has(f.file) ? `[${b.label}]` : ` ${b.label} `)
+          return (
+            <box flexDirection="row" gap={1} onMouseUp={() => props.onSelect(f, i())}>
+              <text fg={b.color} width={FILE_ROW_BADGE_WIDTH}>
+                <b>{label()}</b>
+              </text>
+              <text
+                fg={props.navMode && i() === props.selected ? ctx.theme.text.base : ctx.theme.text.muted}
+                wrapMode="none"
+              >
+                {truncatePath(
+                  f.file,
+                  filePathMaxWidth(props.width, { additions: f.additions, deletions: f.deletions }),
+                )}
+              </text>
+              <box flexGrow={1} />
+              <text fg={ctx.theme.diff.text.added}>+{f.additions}</text>
+              <text fg={ctx.theme.diff.text.removed}>-{f.deletions}</text>
+            </box>
+          )
+        }}
+      </For>
+    </box>
+  )
+}

package/src/sidebar/focus.tsx

@@ -0,0 +1,37 @@
+import { onCleanup } from "solid-js"
+import type { Context } from "@opencode/plugin/tui/context"
+import { DIFF_PANEL_NAME } from "../config"
+import type { RendererFocusEvents, RenderNode } from "../types"
+
+export function bindSidebarFocus(
+  ctx: Context,
+  opts: { container: () => RenderNode | undefined; active: () => boolean; exit: () => void },
+): void {
+  const isInsideSidebar = (node: RenderNode | null | undefined) => {
+    const container = opts.container()
+    let current = node
+    while (current) {
+      if (current === container) return true
+      current = current.parent
+    }
+    return false
+  }
+
+  const rendererEvents = ctx.renderer as unknown as RendererFocusEvents
+  const handleFocusedRenderable = (current: RenderNode | null) => {
+    if (!opts.active()) return
+    if (ctx.ui.panel.current()?.name === DIFF_PANEL_NAME) return
+    if (!isInsideSidebar(current)) opts.exit()
+  }
+  const handleFocusedEditor = (editor: unknown) => {
+    if (editor == null) return
+    if (opts.active()) opts.exit()
+  }
+
+  rendererEvents.on("focused_renderable", handleFocusedRenderable)
+  rendererEvents.on("focused_editor", handleFocusedEditor)
+  onCleanup(() => {
+    rendererEvents.off("focused_renderable", handleFocusedRenderable)
+    rendererEvents.off("focused_editor", handleFocusedEditor)
+  })
+}

package/src/sidebar/header.tsx

@@ -0,0 +1,55 @@
+/** @jsxImportSource @opentui/solid */
+import { Show } from "solid-js"
+import type { Context } from "@opencode/plugin/tui/context"
+
+export function SidebarHeader(props: {
+  ctx: Context
+  branch: string
+  fileCount: number
+  ready: boolean
+  additions: number
+  deletions: number
+  navMode: boolean
+  stageMode: boolean
+  hasStaged: boolean
+  onBranchClick: () => void
+  onCommit: () => void
+}) {
+  const ctx = props.ctx
+  return (
+    <box flexDirection="column" gap={0}>
+      <box flexDirection="row" gap={1}>
+        <text fg={ctx.theme.text.base}>
+          <b>Git Panel</b>
+        </text>
+        <box flexGrow={1} />
+        <Show when={props.branch && props.fileCount > 0}>
+          <text fg={ctx.theme.text.muted} onMouseUp={() => props.onBranchClick()}>
+            ▶ {props.branch}{" "}
+          </text>
+          <text fg={ctx.theme.text.base}>({props.fileCount})</text>
+        </Show>
+        <Show when={props.ready && props.fileCount > 0}>
+          <text fg={ctx.theme.diff.text.added}>+{props.additions}</text>
+          <text fg={ctx.theme.diff.text.removed}>-{props.deletions}</text>
+        </Show>
+      </box>
+      <Show when={props.ready && props.fileCount > 0 && props.navMode}>
+        <box flexDirection="row" gap={1}>
+          <box flexGrow={1} />
+          <Show
+            when={props.stageMode}
+            fallback={<text fg={ctx.theme.text.muted}>[← → : stage/unstage]</text>}
+          >
+            <text fg={ctx.theme.text.feedback.warning.base}>[click : stage/unstage]</text>
+          </Show>
+          <Show when={props.hasStaged}>
+            <text fg={ctx.theme.text.feedback.success.base} onMouseUp={() => props.onCommit()}>
+              [c : Commit]
+            </text>
+          </Show>
+        </box>
+      </Show>
+    </box>
+  )
+}

package/src/sidebar/index.ts

@@ -0,0 +1 @@
+export { GitChangesView } from "./view"

package/src/sidebar/keymap.ts

@@ -0,0 +1,143 @@
+import type { Accessor } from "solid-js"
+import type { Context, KeymapCommand } from "@opencode/plugin/tui/context"
+import { LIST_NAV_MODE } from "../config"
+import type { ChangeFile, FileBinds } from "../types"
+import type { ListNavigation } from "./list-navigation"
+
+export type FileActions = {
+  next(): void
+  prev(): void
+  open(): void
+  setStaged(stage: boolean): void
+  commit(): void
+}
+
+function buildFileCommands(actions: FileActions, binds: FileBinds, palette: boolean, hasFiles: boolean): KeymapCommand[] {
+  return [
+    {
+      id: "git-panel.next",
+      title: "Git Panel: Next File",
+      group: "Git Panel",
+      bind: binds.next,
+      enabled: hasFiles,
+      run: () => actions.next(),
+    },
+    {
+      id: "git-panel.prev",
+      title: "Git Panel: Previous File",
+      group: "Git Panel",
+      bind: binds.prev,
+      enabled: hasFiles,
+      run: () => actions.prev(),
+    },
+    {
+      id: "git-panel.open",
+      title: "Git Panel: Open Diff",
+      group: "Git Panel",
+      bind: binds.open,
+      palette: palette ? true : undefined,
+      enabled: hasFiles,
+      run: () => actions.open(),
+    },
+    {
+      id: "git-panel.stage",
+      title: "Git Panel: Stage File",
+      group: "Git Panel",
+      bind: binds.stage,
+      palette: palette ? true : undefined,
+      enabled: hasFiles,
+      run: () => actions.setStaged(true),
+    },
+    {
+      id: "git-panel.unstage",
+      title: "Git Panel: Unstage File",
+      group: "Git Panel",
+      bind: binds.unstage,
+      palette: palette ? true : undefined,
+      enabled: hasFiles,
+      run: () => actions.setStaged(false),
+    },
+    {
+      id: "git-panel.commit",
+      title: "Git Panel: Commit Staged",
+      group: "Git Panel",
+      bind: binds.commit,
+      palette: palette ? true : undefined,
+      run: () => actions.commit(),
+    },
+  ]
+}
+
+export function registerSidebarKeymaps(
+  ctx: Context,
+  deps: {
+    files: Accessor<ChangeFile[]>
+    nav: ListNavigation
+    diffOpen: () => boolean
+    actions: FileActions
+    requestRefresh: () => void
+  },
+): void {
+  const { files, nav, actions } = deps
+
+  ctx.keymap.layer(() => {
+    const hasFiles = files().length > 0
+    return {
+      mode: "global",
+      bindings: ["git-panel.focus-list", "git-panel.next", "git-panel.prev", "git-panel.open", "git-panel.stage", "git-panel.unstage", "git-panel.commit"],
+      commands: [
+        {
+          id: "git-panel.refresh",
+          title: "Git Panel: Refresh",
+          group: "Git Panel",
+          palette: true,
+          run: () => deps.requestRefresh(),
+        },
+        {
+          id: "git-panel.focus-list",
+          title: "Git Panel: Focus List",
+          group: "Git Panel",
+          bind: "<leader>G",
+          palette: true,
+          enabled: hasFiles,
+          run: () => nav.enter(),
+        },
+        ...buildFileCommands(actions, {}, true, hasFiles),
+      ],
+    }
+  })
+
+  ctx.keymap.layer(() => {
+    const hasFiles = files().length > 0
+    const canExitNav = nav.navMode() && !deps.diffOpen() && !nav.stageMode()
+    return {
+      mode: LIST_NAV_MODE,
+      priority: 10,
+      bindings: ["git-panel.next", "git-panel.prev", "git-panel.open", "git-panel.stage", "git-panel.unstage", "git-panel.commit", "git-panel.exit-stage-mode", "git-panel.unfocus-list"],
+      commands: [
+        ...buildFileCommands(
+          actions,
+          { next: "down", prev: "up", open: "return", stage: "right", unstage: "left", commit: "c" },
+          false,
+          hasFiles,
+        ),
+        {
+          id: "git-panel.exit-stage-mode",
+          title: "Git Panel: Exit Stage Mode",
+          group: "Git Panel",
+          bind: "escape",
+          enabled: nav.stageMode(),
+          run: () => nav.setStageMode(false),
+        },
+        {
+          id: "git-panel.unfocus-list",
+          title: "Git Panel: Exit List Navigation",
+          group: "Git Panel",
+          bind: "escape",
+          enabled: canExitNav,
+          run: () => nav.exit(),
+        },
+      ],
+    }
+  })
+}

package/src/sidebar/list-navigation.tsx

@@ -0,0 +1,96 @@
+import { createSignal, onCleanup, type Accessor } from "solid-js"
+import type { Context } from "@opencode/plugin/tui/context"
+import { LIST_NAV_MODE } from "../config"
+import type { ChangeFile } from "../types"
+
+export type ListNavigation = ReturnType<typeof createListNavigation>
+
+export function createListNavigation(ctx: Context, files: Accessor<ChangeFile[]>) {
+  const [navMode, setNavMode] = createSignal(false)
+  const [stageMode, setStageMode] = createSignal(false)
+  const [selected, setSelected] = createSignal(0)
+
+  let popListNavMode: (() => void) | null = null
+
+  const pushListNavMode = () => {
+    popListNavMode = ctx.keymap.mode.push(LIST_NAV_MODE)
+  }
+
+  const enter = () => {
+    if (popListNavMode) {
+      try {
+        if (ctx.keymap.mode.current() === LIST_NAV_MODE) return
+      } catch {
+        return
+      }
+      popListNavMode = null
+    }
+    pushListNavMode()
+    setNavMode(true)
+  }
+
+  const exit = () => {
+    try {
+      if (ctx.keymap.mode.current() === LIST_NAV_MODE) popListNavMode?.()
+    } catch {
+    }
+    popListNavMode = null
+    setNavMode(false)
+    setStageMode(false)
+  }
+
+  const ensure = () => {
+    if (!navMode()) return
+    try {
+      if (ctx.keymap.mode.current() !== LIST_NAV_MODE) {
+        popListNavMode = null
+        pushListNavMode()
+      }
+    } catch {
+    }
+  }
+
+  const selectNext = () => {
+    const count = files().length
+    if (count > 0) setSelected((prev) => (prev + 1) % count)
+  }
+
+  const selectPrevious = () => {
+    const count = files().length
+    if (count > 0) setSelected((prev) => (prev - 1 + count) % count)
+  }
+
+  const clampSelection = (count: number) => {
+    setSelected((prev) => Math.min(prev, Math.max(0, count - 1)))
+  }
+
+  const selectedFile = (): ChangeFile | undefined => {
+    const list = files()
+    return list[Math.min(selected(), list.length - 1)]
+  }
+
+  const toggleStageMode = () => {
+    if (files().length === 0) return
+    const next = !stageMode()
+    setStageMode(next)
+    if (next) enter()
+  }
+
+  onCleanup(exit)
+
+  return {
+    navMode,
+    stageMode,
+    setStageMode,
+    selected,
+    setSelected,
+    enter,
+    exit,
+    ensure,
+    selectNext,
+    selectPrevious,
+    clampSelection,
+    selectedFile,
+    toggleStageMode,
+  }
+}