salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Git Changes workflow and diff handling (#311)

Browse Source 
# Git Changes PR Review Context

Fixes: #310 

## Purpose of this document

This document is intended to give a PR reviewer or gatekeeper enough
neutral context to review the Git Changes feature series accurately.

## BEFORE/AFTER SNAPSHOT:

<img width="835" height="1163" alt="image"
src="https://github.com/user-attachments/assets/463d6f8c-1a6b-4cf0-8ab8-44a92c534ca5"
/>


It distinguishes:

1. the intended scope of the work
2. implementation choices that were deliberate
3. behaviors that were explicitly tested and accepted during development
4. remaining follow-up areas that were not part of the required intent

It should not be treated as a request to approve the PR automatically.
It exists to reduce false-positive review findings caused by missing
context.

---

## High-level scope

The work in this series refactors and extends the existing `Git Changes`
tab in the right panel.

The intended feature scope includes:

1. grouped staged / unstaged change presentation
2. correct section-aware diff loading
3. per-file stage / unstage controls
4. commit message compose box and commit action for staged changes
5. prompt-context insertion from the Git diff viewer
6. auto-refresh behavior that reduces dependence on the manual refresh
button

This work is intentionally implemented inside the existing Git Changes
vertical slice rather than as a new SCM subsystem.

---

## Files and areas intentionally changed

### Server / API surface

The following server areas were intentionally extended:

1. `packages/server/src/api-types.ts`
2. `packages/server/src/events/bus.ts`
3. `packages/server/src/server/http-server.ts`
4. `packages/server/src/server/routes/workspaces.ts`
5. `packages/server/src/workspaces/git-status.ts`
6. `packages/server/src/workspaces/git-mutations.ts`
7. `packages/server/src/workspaces/worktree-directory.ts`
8. `packages/server/src/workspaces/instance-events.ts`

### UI surface

The following UI areas were intentionally extended:

1. `packages/ui/src/components/file-viewer/monaco-diff-viewer.tsx`
2. `packages/ui/src/components/instance/instance-shell2.tsx`
3.
`packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx`
4.
`packages/ui/src/components/instance/shell/right-panel/git-changes-model.ts`
5.
`packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx`
6. `packages/ui/src/components/instance/shell/right-panel/types.ts`
7. `packages/ui/src/components/instance/shell/storage.ts`
8. `packages/ui/src/components/prompt-input.tsx`
9. `packages/ui/src/components/prompt-input/types.ts`
10. `packages/ui/src/components/session/session-view.tsx`
11. `packages/ui/src/lib/api-client.ts`
12. `packages/ui/src/lib/i18n/messages/*/instance.ts`
13. `packages/ui/src/styles/panels/right-panel.css`

---

## Intentional product and architecture decisions

The following outcomes were deliberate and should not be flagged as
issues merely because they exist.

### Git status / diff architecture

1. The UI does not rely only on the proxied OpenCode `file.status()`
payload.
2. CodeNomad adds server-backed worktree Git status and diff endpoints
to expose staged / unstaged semantics correctly.
3. Server-backed worktree mutation endpoints were added for:
   - stage
   - unstage
   - commit
4. The existing event bus / SSE channel is reused for Git invalidation,
instead of adding a bespoke invalidation route.

### Git Changes UI structure

1. The file list is grouped into:
   - `Staged Changes`
   - `Changes`
2. Both sections are collapsible.
3. Section open state is persisted.
4. The same file may appear in both sections when Git state genuinely
requires that.
5. Rows are filename-first, with parent path as secondary text.
6. Rows are intentionally compact compared to the original flat list.

### Diff behavior

1. Diff loading is section-aware.
2. Deleted files are supported in grouped mode.
3. Binary files are treated as non-line-oriented in the diff viewer.
4. Binary diffs suppress line-based prompt-context affordances.

### Stage / unstage / commit workflow

1. Stage and unstage are per-file row actions.
2. Bulk stage-all / unstage-all was intentionally not added.
3. The commit compose box is intentionally rendered inside the `Staged
Changes` section.
4. The commit button is intentionally overlaid inside the commit input
area.
5. The current commit compose flow is minimal by design:
   - no push
   - no amend flow
   - no branch management

### Prompt-context insertion

1. Prompt insertion is intentionally an HTML comment marker, not a full
diff payload.
2. The expected inserted form is:

   `<!-- Git change context: <path> lines X-Y -->`

3. The trigger UI is intentionally a seam/gutter action in the Monaco
diff viewer, not a toolbar button.

### Row action reveal behavior

1. Stage / unstage row actions are intentionally hover-revealed on
hover-capable layouts.
2. The row action reveal intentionally uses:
   - delayed hide
   - slight stats fade/shift
   - compact idle width
3. On non-hover layouts, the action remains visible for reliability.

### Auto-refresh behavior

The accepted refresh model is intentionally hybrid:

1. refresh on Git Changes tab activation
2. 20-second polling only while the Git Changes tab is active
3. immediate invalidation from completed raw tool events for:
   - `write`
   - `edit`
   - `apply_patch`

This hybrid model is intentional. Polling remains as a fallback even
after tool-event invalidation.

---

## Behaviors explicitly tested during development

The following behaviors were explicitly exercised during development and
used to guide fixes.

### Grouped staged / unstaged behavior

1. files appear in the correct staged / unstaged sections
2. section collapse / expand works
3. collapse state persists
4. line counts are section-specific

### Diff behavior

1. staged diff loads differently from unstaged diff
2. deleted-file handling was verified and corrected
3. binary-file rendering was corrected to avoid line-oriented behavior
4. untracked binary files no longer report fake text line counts

### Mutation behavior

1. per-file stage works from `Changes`
2. per-file unstage works from `Staged Changes`
3. stage / unstage selection remapping was exercised and corrected
4. unborn-repo unstage behavior was explicitly hardened

### Prompt-context behavior

1. selected line / range insertion was tested
2. button placement in the Monaco seam/gutter was iterated and verified

### Auto-refresh behavior

1. tab-activation refresh was tested
2. 20-second active-tab polling was tested
3. raw completed tool invalidation was tested in the running UI for:
   - `write`
   - `edit`
   - `apply_patch`
4. stale async overwrite and stale selection restoration bugs were found
and fixed through review/testing

---

## Review findings that were investigated and are no longer intended
blocker topics

The following areas were previously raised by strict reviews and then
either fixed or determined to be acceptable within scope.

### Fixed in the current series

1. duplicate stage / unstage firing
2. stale diff response overwriting newer selection
3. passive refresh restoring a stale selection
4. instance-wide invalidation overreach
5. selected diff staying stale after tool invalidation
6. worktree-switch status races
7. unhandled rejection risk from async invalidation publication
8. queued invalidation intent being lost during in-flight refresh
9. `git-diff` path traversal / absolute path boundary issue

### Investigated and considered non-blocking within current intent

1. split add/delete presentation for tracked rename behavior
   - this was compared against VS Code behavior during manual testing
   - no stage/unstage corruption was observed in the tested flow
- this is currently treated as a representation tradeoff, not a proven
blocker

---

## Remaining non-blocker follow-up areas

The following are still reasonable follow-up topics, but they were not
part of the required blocker-fix scope.

1. normalize directory-to-worktree matching more aggressively on Windows
so tool invalidation works more reliably from nested directories or
path-format variations
2. improve keyboard discoverability of hover-revealed stage / unstage
actions
3. reserve textarea space for the overlaid commit button if the overlay
tradeoff is reconsidered
4. reduce size/complexity in:
   - `RightPanel.tsx`
   - `right-panel.css`
5. tighten raw SSE tool-event parsing into a more explicit helper if
that event bridge grows further

These follow-ups should not be interpreted as evidence that the core
implementation is incomplete unless a reviewer finds a new concrete
failure.

---

## Suggested review focus

If a gatekeeper or reviewer is evaluating this PR, the most useful focus
areas are:

1. whether staged / unstaged behavior is correct for normal Git
workflows
2. whether the new server worktree Git endpoints remain narrowly scoped
3. whether auto-refresh remains bounded to the active Git Changes
context
4. whether the explicit fixes for stale async behavior and invalidation
races are sufficient
5. whether any unintentional server boundary broadening or state
corruption remains

Less useful review topics, unless tied to a concrete failure, are:

1. preference disagreements with accepted prompt insertion format
2. preference disagreements with the overlaid commit button placement
3. preference disagreements with keeping polling fallback alongside tool
invalidation
4. objections to server-backed Git endpoints purely because they add
surface area

---

## Summary

This series intentionally evolves the existing Git Changes tab into a
more complete source-control workflow for:

1. grouped staged / unstaged inspection
2. section-aware diffs
3. per-file staging and unstaging
4. commit composition for staged changes
5. prompt-context insertion from Git diffs
6. bounded auto-refresh for both passive viewing and agent-driven file
mutations

The intended review standard is to find concrete correctness, layering,
or maintenance problems that remain after this series — not to re-argue
the already accepted product choices listed above.

---------

Co-authored-by: Shantur Rathore <i@shantur.com>
This commit is contained in:
VooDisss
2026-04-17 01:11:48 +03:00
committed by GitHub
parent 657e78da6a
commit 9bf4d351de
27 changed files with 2403 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx
View File

@@ -10,7 +10,7 @@ import {
type Component,
} from "solid-js"
import type { ToolState } from "@opencode-ai/sdk/v2"
import type { FileContent, FileNode, File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
import type { FileContent, FileNode } from "@opencode-ai/sdk/v2/client"
import IconButton from "@suid/material/IconButton"
import MenuOpenIcon from "@suid/icons-material/MenuOpen"
import PushPinIcon from "@suid/icons-material/PushPin"
@@ -19,16 +19,23 @@ import PushPinOutlinedIcon from "@suid/icons-material/PushPinOutlined"
import type { Instance } from "../../../../types/instance"
import type { BackgroundProcess } from "../../../../../../server/src/api-types"
import type { Session } from "../../../../types/session"
import type { PromptInputApi } from "../../../prompt-input/types"
import type { DrawerViewState } from "../types"
import type { DiffContextMode, DiffViewMode, DiffWordWrapMode, RightPanelTab } from "./types"
import { getDefaultWorktreeSlug, getOrCreateWorktreeClient, getWorktreeSlugForSession } from "../../../../stores/worktrees"
import {
getDefaultWorktreeSlug,
getGitRepoStatus,
getOrCreateWorktreeClient,
getWorktreeSlugForSession,
getWorktrees,
} from "../../../../stores/worktrees"
import { requestData } from "../../../../lib/opencode-api"
import { serverApi } from "../../../../lib/api-client"
import { showConfirmDialog } from "../../../../stores/alerts"
import { showToastNotification } from "../../../../lib/notifications"
import { buildUnifiedDiffFromSdkPatch, tryReverseApplyUnifiedDiff } from "../../../../lib/unified-diff-reverse"
import { useGlobalPointerDrag } from "../useGlobalPointerDrag"
import { useGitChanges } from "./useGitChanges"
import {
RIGHT_PANEL_CHANGES_DIFF_CONTEXT_MODE_KEY,
RIGHT_PANEL_CHANGES_DIFF_VIEW_MODE_KEY,
@@ -41,7 +48,11 @@ import {
RIGHT_PANEL_FILES_SPLIT_WIDTH_KEY,
RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_NONPHONE_KEY,
RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_PHONE_KEY,
RIGHT_PANEL_GIT_CHANGES_STAGED_OPEN_NONPHONE_KEY,
RIGHT_PANEL_GIT_CHANGES_STAGED_OPEN_PHONE_KEY,
RIGHT_PANEL_GIT_CHANGES_SPLIT_WIDTH_KEY,
RIGHT_PANEL_GIT_CHANGES_UNSTAGED_OPEN_NONPHONE_KEY,
RIGHT_PANEL_GIT_CHANGES_UNSTAGED_OPEN_PHONE_KEY,
RIGHT_PANEL_TAB_STORAGE_KEY,
readStoredBool,
readStoredEnum,
@@ -82,6 +93,7 @@ interface RightPanelProps {
onCloseRightDrawer: () => void
onPinRightDrawer: () => void
onUnpinRightDrawer: () => void
promptInputApi: Accessor<PromptInputApi | null>
setContentEl: (el: HTMLElement | null) => void
}
@@ -133,6 +145,8 @@ const RightPanel: Component<RightPanelProps> = (props) => {
const [changesListTouched, setChangesListTouched] = createSignal(false)
const [gitChangesListOpen, setGitChangesListOpen] = createSignal(true)
const [gitChangesListTouched, setGitChangesListTouched] = createSignal(false)
const [gitStagedOpen, setGitStagedOpen] = createSignal(true)
const [gitUnstagedOpen, setGitUnstagedOpen] = createSignal(true)
const listLayoutKey = createMemo(() => (props.isPhoneLayout() ? "phone" : "nonphone"))
@@ -149,11 +163,28 @@ const RightPanel: Component<RightPanelProps> = (props) => {
return layout === "phone" ? RIGHT_PANEL_FILES_LIST_OPEN_PHONE_KEY : RIGHT_PANEL_FILES_LIST_OPEN_NONPHONE_KEY
}
const gitSectionStorageKey = (section: "staged" | "unstaged") => {
const layout = listLayoutKey()
if (section === "staged") {
return layout === "phone"
? RIGHT_PANEL_GIT_CHANGES_STAGED_OPEN_PHONE_KEY
: RIGHT_PANEL_GIT_CHANGES_STAGED_OPEN_NONPHONE_KEY
}
return layout === "phone"
? RIGHT_PANEL_GIT_CHANGES_UNSTAGED_OPEN_PHONE_KEY
: RIGHT_PANEL_GIT_CHANGES_UNSTAGED_OPEN_NONPHONE_KEY
}
const persistListOpen = (tab: "changes" | "git-changes" | "files", value: boolean) => {
if (typeof window === "undefined") return
window.localStorage.setItem(listOpenStorageKey(tab), value ? "true" : "false")
}
const persistGitSectionOpen = (section: "staged" | "unstaged", value: boolean) => {
if (typeof window === "undefined") return
window.localStorage.setItem(gitSectionStorageKey(section), value ? "true" : "false")
}
createEffect(() => {
// Refresh persisted visibility when layout changes (phone vs non-phone).
const layout = listLayoutKey()
@@ -185,6 +216,12 @@ const RightPanel: Component<RightPanelProps> = (props) => {
setGitChangesListOpen(true)
setGitChangesListTouched(false)
}
const stagedPersisted = readStoredBool(gitSectionStorageKey("staged"))
setGitStagedOpen(stagedPersisted ?? true)
const unstagedPersisted = readStoredBool(gitSectionStorageKey("unstaged"))
setGitUnstagedOpen(unstagedPersisted ?? true)
})
createEffect(() => {
@@ -339,34 +376,56 @@ const RightPanel: Component<RightPanelProps> = (props) => {
return getDefaultWorktreeSlug(props.instanceId)
})
const gitChangesWorktreeSlug = createMemo(() => {
if (getGitRepoStatus(props.instanceId) === false) return null
const slug = worktreeSlugForViewer().trim()
return slug ? slug : null
})
const gitChangesWorktree = createMemo(() => {
const slug = gitChangesWorktreeSlug()
if (!slug) return null
return getWorktrees(props.instanceId).find((worktree) => worktree.slug === slug) ?? null
})
const gitChangesBranchLabel = createMemo(() => {
const branch = gitChangesWorktree()?.branch?.trim()
return branch || null
})
const browserClient = createMemo(() => getOrCreateWorktreeClient(props.instanceId, worktreeSlugForViewer()))
const [gitStatusEntries, setGitStatusEntries] = createSignal<GitFileStatus[] | null>(null)
const [gitStatusLoading, setGitStatusLoading] = createSignal(false)
const [gitStatusError, setGitStatusError] = createSignal<string | null>(null)
const [gitSelectedPath, setGitSelectedPath] = createSignal<string | null>(null)
const [gitSelectedLoading, setGitSelectedLoading] = createSignal(false)
const [gitSelectedError, setGitSelectedError] = createSignal<string | null>(null)
const [gitSelectedBefore, setGitSelectedBefore] = createSignal<string | null>(null)
const [gitSelectedAfter, setGitSelectedAfter] = createSignal<string | null>(null)
const gitMostChangedPath = createMemo<string | null>(() => {
const entries = gitStatusEntries()
if (!Array.isArray(entries) || entries.length === 0) return null
const candidates = entries.filter((item) => item && item.status !== "deleted")
if (candidates.length === 0) return null
const best = candidates.reduce((currentBest, item) => {
const bestScore = (currentBest?.added ?? 0) + (currentBest?.removed ?? 0)
const score = (item?.added ?? 0) + (item?.removed ?? 0)
if (score > bestScore) return item
if (score < bestScore) return currentBest
return String(item.path || "").localeCompare(String(currentBest?.path || "")) < 0 ? item : currentBest
}, candidates[0])
return typeof best?.path === "string" ? best.path : null
const {
gitStatusEntries,
gitStatusLoading,
gitStatusError,
gitSelectedItemId,
gitBulkSelectedItemIds,
gitSelectedLoading,
gitSelectedError,
gitSelectedBefore,
gitSelectedAfter,
gitCommitMessage,
gitCommitSubmitting,
gitMostChangedItemId,
setGitCommitMessage,
handleGitRowClick,
refreshGitStatus,
insertGitChangeContext,
submitGitCommit,
stageGitFile,
unstageGitFile,
} = useGitChanges({
t: props.t,
instanceId: props.instanceId,
rightPanelTab,
worktreeSlug: worktreeSlugForViewer,
isPhoneLayout: props.isPhoneLayout,
promptInputApi: props.promptInputApi,
closeGitList: () => setGitChangesListOpen(false),
})
createEffect(() => {
// Reset tab state when worktree context changes.
worktreeSlugForViewer()
setBrowserPath(".")
setBrowserEntries(null)
@@ -375,111 +434,8 @@ const RightPanel: Component<RightPanelProps> = (props) => {
setBrowserSelectedContent(null)
setBrowserSelectedError(null)
setBrowserSelectedLoading(false)
setGitStatusEntries(null)
setGitStatusError(null)
setGitStatusLoading(false)
setGitSelectedPath(null)
setGitSelectedLoading(false)
setGitSelectedError(null)
setGitSelectedBefore(null)
setGitSelectedAfter(null)
})
const loadGitStatus = async (force = false) => {
if (!force && gitStatusEntries() !== null) return
setGitStatusLoading(true)
setGitStatusError(null)
try {
const list = await requestData<GitFileStatus[]>(browserClient().file.status(), "file.status")
setGitStatusEntries(Array.isArray(list) ? list : [])
} catch (error) {
setGitStatusError(error instanceof Error ? error.message : "Failed to load git status")
setGitStatusEntries([])
} finally {
setGitStatusLoading(false)
}
}
async function openGitFile(path: string) {
setGitSelectedPath(path)
setGitSelectedLoading(true)
setGitSelectedError(null)
setGitSelectedBefore(null)
setGitSelectedAfter(null)
const list = gitStatusEntries() || []
const entry = list.find((item) => item.path === path) || null
if (entry?.status === "deleted") {
setGitSelectedError("Deleted file diff is not available yet")
setGitSelectedLoading(false)
return
}
// Phone: treat file selection as a commit action and close the overlay.
if (props.isPhoneLayout()) {
setGitChangesListOpen(false)
}
try {
const content = await requestData<FileContent>(browserClient().file.read({ path }), "file.read")
const type = (content as any)?.type
const encoding = (content as any)?.encoding
if (type && type !== "text") {
throw new Error("Binary file cannot be displayed")
}
if (encoding === "base64") {
throw new Error("Binary file cannot be displayed")
}
const afterText = typeof (content as any)?.content === "string" ? ((content as any).content as string) : null
if (afterText === null) {
throw new Error("Unsupported file type")
}
setGitSelectedAfter(afterText)
if (entry?.status === "added") {
setGitSelectedBefore("")
return
}
const diffText =
typeof (content as any)?.diff === "string" && String((content as any).diff).trim().length > 0
? String((content as any).diff)
: (content as any)?.patch
? buildUnifiedDiffFromSdkPatch((content as any).patch)
: ""
const beforeText = tryReverseApplyUnifiedDiff(afterText, diffText)
if (beforeText === null) {
throw new Error("Unable to calculate diff for this file")
}
setGitSelectedBefore(beforeText)
} catch (error) {
setGitSelectedError(error instanceof Error ? error.message : "Failed to load file changes")
} finally {
setGitSelectedLoading(false)
}
}
createEffect(() => {
if (rightPanelTab() !== "git-changes") return
const entries = gitStatusEntries()
if (entries === null) return
if (gitSelectedPath()) return
const next = gitMostChangedPath()
if (!next) return
void openGitFile(next)
})
const refreshGitStatus = async () => {
await loadGitStatus(true)
const selected = gitSelectedPath()
if (selected) {
void openGitFile(selected)
}
}
const bestDiffFile = createMemo<string | null>(() => {
const diffs = props.activeSessionDiffs()
if (!Array.isArray(diffs) || diffs.length === 0) return null
@@ -680,21 +636,6 @@ const RightPanel: Component<RightPanelProps> = (props) => {
setBrowserSelectedDirty(false)
})
createEffect(() => {
if (rightPanelTab() !== "git-changes") return
if (gitStatusLoading()) return
if (gitStatusEntries() !== null) return
void loadGitStatus()
})
createEffect(() => {
if (rightPanelTab() === "git-changes") return
setGitSelectedBefore(null)
setGitSelectedAfter(null)
setGitSelectedLoading(false)
setGitSelectedError(null)
})
const handleSelectChangesFile = (file: string, closeList: boolean) => {
setSelectedFile(file)
if (closeList) {
@@ -911,12 +852,13 @@ const RightPanel: Component<RightPanelProps> = (props) => {
entries={gitStatusEntries}
statusLoading={gitStatusLoading}
statusError={gitStatusError}
selectedPath={gitSelectedPath}
selectedItemId={gitSelectedItemId}
selectedBulkItemIds={gitBulkSelectedItemIds}
selectedLoading={gitSelectedLoading}
selectedError={gitSelectedError}
selectedBefore={gitSelectedBefore}
selectedAfter={gitSelectedAfter}
mostChangedPath={gitMostChangedPath}
mostChangedItemId={gitMostChangedItemId}
scopeKey={gitScopeKey}
diffViewMode={diffViewMode}
diffContextMode={diffContextMode}
@@ -924,8 +866,28 @@ const RightPanel: Component<RightPanelProps> = (props) => {
onViewModeChange={setDiffViewMode}
onContextModeChange={setDiffContextMode}
onWordWrapModeChange={setDiffWordWrapMode}
onOpenFile={(path: string) => void openGitFile(path)}
onRowClick={handleGitRowClick}
onRefresh={() => void refreshGitStatus()}
onInsertContext={insertGitChangeContext}
onStageFile={stageGitFile}
onUnstageFile={unstageGitFile}
commitMessage={gitCommitMessage}
commitSubmitting={gitCommitSubmitting}
onCommitMessageInput={setGitCommitMessage}
onSubmitCommit={() => void submitGitCommit()}
branchLabel={gitChangesBranchLabel}
stagedOpen={gitStagedOpen}
unstagedOpen={gitUnstagedOpen}
onToggleStagedOpen={() => {
const next = !gitStagedOpen()
setGitStagedOpen(next)
persistGitSectionOpen("staged", next)
}}
onToggleUnstagedOpen={() => {
const next = !gitUnstagedOpen()
setGitUnstagedOpen(next)
persistGitSectionOpen("unstaged", next)
}}
listOpen={gitChangesListOpen}
onToggleList={toggleGitList}
splitWidth={gitChangesSplitWidth}

148
packages/ui/src/components/instance/shell/right-panel/git-changes-model.ts Normal file
View File

@@ -0,0 +1,148 @@
import type { File as SdkGitFileStatus } from "@opencode-ai/sdk/v2/client"
import type { WorktreeGitStatusEntry } from "../../../../../../server/src/api-types"
import type { GitChangeEntry, GitChangeListItem, GitChangeSection, GitChangeStatus } from "./types"
function normalizeGitChangePath(path: unknown): string {
if (typeof path !== "string") return ""
const normalized = path.replace(/\\+/g, "/").replace(/^\.\//, "").trim()
return normalized
}
export function normalizeGitChangeStatus(status: unknown): GitChangeStatus {
return typeof status === "string" && status.trim().length > 0 ? status : "modified"
}
export function adaptSdkGitStatusEntry(entry: SdkGitFileStatus): GitChangeEntry {
return {
path: normalizeGitChangePath(entry?.path),
originalPath: null,
additions: typeof entry?.added === "number" ? entry.added : 0,
deletions: typeof entry?.removed === "number" ? entry.removed : 0,
status: normalizeGitChangeStatus(entry?.status),
}
}
export function adaptSdkGitStatusEntries(
entries: SdkGitFileStatus[] | null | undefined,
details?: WorktreeGitStatusEntry[] | null,
): GitChangeEntry[] {
const detailsByPath = new Map(
(details ?? [])
.map((entry) => {
const path = normalizeGitChangePath(entry.path)
return path ? [{ ...entry, path }, path] : null
})
.filter((entry): entry is [WorktreeGitStatusEntry, string] => Boolean(entry))
.map(([entry, path]) => [path, entry] as const),
)
const adaptedByPath = new Map<string, GitChangeEntry>()
for (const entry of entries ?? []) {
const adapted = adaptSdkGitStatusEntry(entry)
if (!adapted.path) continue
const detail = detailsByPath.get(adapted.path)
adaptedByPath.set(adapted.path, {
...adapted,
originalPath: detail?.originalPath ? normalizeGitChangePath(detail.originalPath) : adapted.originalPath ?? null,
stagedStatus: detail?.stagedStatus ?? null,
unstagedStatus: detail?.unstagedStatus ?? null,
stagedAdditions: detail?.stagedAdditions ?? 0,
stagedDeletions: detail?.stagedDeletions ?? 0,
unstagedAdditions: detail?.unstagedAdditions ?? 0,
unstagedDeletions: detail?.unstagedDeletions ?? 0,
})
}
for (const detail of details ?? []) {
const normalizedPath = normalizeGitChangePath(detail.path)
if (!normalizedPath || adaptedByPath.has(normalizedPath)) continue
adaptedByPath.set(normalizedPath, {
path: normalizedPath,
originalPath: detail.originalPath ? normalizeGitChangePath(detail.originalPath) : null,
additions: 0,
deletions: 0,
status: detail.unstagedStatus ?? detail.stagedStatus ?? "modified",
stagedStatus: detail.stagedStatus,
unstagedStatus: detail.unstagedStatus,
stagedAdditions: detail.stagedAdditions,
stagedDeletions: detail.stagedDeletions,
unstagedAdditions: detail.unstagedAdditions,
unstagedDeletions: detail.unstagedDeletions,
})
}
return Array.from(adaptedByPath.values()).filter((entry) => entry.path.length > 0)
}
function buildGitChangeListItemId(section: GitChangeSection, path: string): string {
return `${section}:${path}`
}
function splitGitChangePath(path: string) {
const normalized = normalizeGitChangePath(path)
const lastSlash = normalized.lastIndexOf("/")
if (lastSlash === -1) {
return { displayName: normalized, parentPath: "" }
}
return {
displayName: normalized.slice(lastSlash + 1),
parentPath: normalized.slice(0, lastSlash),
}
}
export function buildGitChangeListItems(entries: GitChangeEntry[] | null | undefined): GitChangeListItem[] {
if (!Array.isArray(entries)) return []
const items: GitChangeListItem[] = []
for (const entry of entries) {
const pathParts = splitGitChangePath(entry.path)
if (entry.stagedStatus) {
items.push({
id: buildGitChangeListItemId("staged", entry.path),
path: entry.path,
originalPath: entry.originalPath ?? null,
section: "staged",
status: entry.stagedStatus,
additions: entry.stagedAdditions ?? 0,
deletions: entry.stagedDeletions ?? 0,
entry,
displayName: pathParts.displayName,
parentPath: pathParts.parentPath,
})
}
if (entry.unstagedStatus) {
items.push({
id: buildGitChangeListItemId("unstaged", entry.path),
path: entry.path,
originalPath: entry.originalPath ?? null,
section: "unstaged",
status: entry.unstagedStatus,
additions: entry.unstagedAdditions ?? entry.additions,
deletions: entry.unstagedDeletions ?? entry.deletions,
entry,
displayName: pathParts.displayName,
parentPath: pathParts.parentPath,
})
}
if (!entry.stagedStatus && !entry.unstagedStatus) {
items.push({
id: buildGitChangeListItemId("unstaged", entry.path),
path: entry.path,
originalPath: entry.originalPath ?? null,
section: "unstaged",
status: entry.status,
additions: entry.additions,
deletions: entry.deletions,
entry,
displayName: pathParts.displayName,
parentPath: pathParts.parentPath,
})
}
}
return items.sort((a, b) => {
if (a.section !== b.section) return a.section.localeCompare(b.section)
return a.path.localeCompare(b.path)
})
}

276
packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx
View File

@@ -1,11 +1,20 @@
import { For, Show, Suspense, createMemo, lazy, type Accessor, type Component, type JSX } from "solid-js"
import type { File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
import {
For,
Show,
Suspense,
createMemo,
lazy,
type Accessor,
type Component,
type JSX,
} from "solid-js"
import { RefreshCw } from "lucide-solid"
import { ChevronDown, ChevronRight, GitBranch, RefreshCw } from "lucide-solid"
import DiffToolbar from "../components/DiffToolbar"
import SplitFilePanel from "../components/SplitFilePanel"
import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"
import type { DiffContextMode, DiffViewMode, DiffWordWrapMode, GitChangeEntry, GitChangeListItem } from "../types"
import { buildGitChangeListItems } from "../git-changes-model"
const LazyMonacoDiffViewer = lazy(() =>
import("../../../../file-viewer/monaco-diff-viewer").then((module) => ({ default: module.MonacoDiffViewer })),
@@ -16,16 +25,17 @@ interface GitChangesTabProps {
activeSessionId: Accessor<string | null>
entries: Accessor<GitFileStatus[] | null>
entries: Accessor<GitChangeEntry[] | null>
statusLoading: Accessor<boolean>
statusError: Accessor<string | null>
selectedPath: Accessor<string | null>
selectedItemId: Accessor<string | null>
selectedBulkItemIds: Accessor<Set<string>>
selectedLoading: Accessor<boolean>
selectedError: Accessor<string | null>
selectedBefore: Accessor<string | null>
selectedAfter: Accessor<string | null>
mostChangedPath: Accessor<string | null>
mostChangedItemId: Accessor<string | null>
scopeKey: Accessor<string>
@@ -36,8 +46,21 @@ interface GitChangesTabProps {
onContextModeChange: (mode: DiffContextMode) => void
onWordWrapModeChange: (mode: DiffWordWrapMode) => void
onOpenFile: (path: string) => void
onRowClick: (item: GitChangeListItem, event: MouseEvent) => void
onRefresh: () => void
onInsertContext: (item: GitChangeListItem, selection: { startLine: number; endLine: number }) => void
onStageFile: (item: GitChangeListItem) => void
onUnstageFile: (item: GitChangeListItem) => void
commitMessage: Accessor<string>
commitSubmitting: Accessor<boolean>
onCommitMessageInput: (value: string) => void
onSubmitCommit: () => void
branchLabel: Accessor<string | null>
stagedOpen: Accessor<boolean>
unstagedOpen: Accessor<boolean>
onToggleStagedOpen: () => void
onToggleUnstagedOpen: () => void
listOpen: Accessor<boolean>
onToggleList: () => void
@@ -52,48 +75,54 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
const hasSession = createMemo(() => Boolean(sessionId() && sessionId() !== "info"))
const entries = createMemo(() => (hasSession() ? props.entries() : null))
const sorted = createMemo<GitFileStatus[]>(() => {
const sorted = createMemo<GitChangeEntry[]>(() => {
const list = entries()
if (!Array.isArray(list)) return []
return [...list].sort((a, b) => String(a.path || "").localeCompare(String(b.path || "")))
})
const listItems = createMemo<GitChangeListItem[]>(() => buildGitChangeListItems(sorted()))
const totals = createMemo(() => {
return sorted().reduce(
return listItems().reduce(
(acc, item) => {
acc.additions += typeof item.added === "number" ? item.added : 0
acc.deletions += typeof item.removed === "number" ? item.removed : 0
acc.additions += typeof item.additions === "number" ? item.additions : 0
acc.deletions += typeof item.deletions === "number" ? item.deletions : 0
return acc
},
{ additions: 0, deletions: 0 },
)
})
const stagedItems = createMemo(() => listItems().filter((item) => item.section === "staged"))
const unstagedItems = createMemo(() => listItems().filter((item) => item.section === "unstaged"))
const canCommit = createMemo(() => stagedItems().length > 0 && props.commitMessage().trim().length > 0 && !props.commitSubmitting())
const nonDeleted = createMemo(() => sorted().filter((item) => item && item.status !== "deleted"))
const selectedEntry = createMemo<GitFileStatus | null>(() => {
const list = sorted()
const selectedPath = props.selectedPath()
const fallbackPath = props.mostChangedPath()
const selectedEntry = createMemo<GitChangeEntry | null>(() => {
const list = listItems()
const selectedId = props.selectedItemId()
const fallbackId = props.mostChangedItemId()
const found =
list.find((item) => item.path === selectedPath) ||
(fallbackPath ? list.find((item) => item.path === fallbackPath) : undefined)
return found ?? null
list.find((item) => item.id === selectedId) ||
(fallbackId ? list.find((item) => item.id === fallbackId) : undefined)
return found?.entry ?? null
})
const emptyViewerMessage = createMemo(() => {
if (!hasSession()) return props.t("instanceShell.gitChanges.noSessionSelected")
const currentEntries = entries()
if (currentEntries === null) return props.t("instanceShell.gitChanges.loading")
if (nonDeleted().length === 0) return props.t("instanceShell.gitChanges.empty")
if (listItems().length === 0) return props.t("instanceShell.gitChanges.empty")
return props.t("instanceShell.filesShell.viewerEmpty")
})
const binaryViewerActive = createMemo(() => props.selectedError() === props.t("instanceShell.gitChanges.binaryViewer"))
const renderContent = (): JSX.Element => {
const totalsValue = totals()
const selected = selectedEntry()
const sortedList = sorted()
const nonDeletedList = nonDeleted()
const allItems = listItems()
const stagedList = stagedItems()
const unstagedList = unstagedItems()
const renderViewer = () => (
<div class="file-viewer-panel flex-1">
@@ -109,7 +138,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
selected &&
props.selectedBefore() !== null &&
props.selectedAfter() !== null &&
selected.status !== "deleted"
true
? {
path: selected.path,
before: props.selectedBefore() as string,
@@ -139,6 +168,14 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
viewMode={props.diffViewMode()}
contextMode={props.diffContextMode()}
wordWrap={props.diffWordWrapMode()}
insertContextLabel={props.t("instanceShell.gitChanges.actions.insertContext")}
onRequestInsertContext={binaryViewerActive() ? undefined : (selection) => {
const selectedId = props.selectedItemId()
if (!selectedId) return
const item = listItems().find((entry) => entry.id === selectedId)
if (!item) return
props.onInsertContext(item, selection)
}}
/>
</Suspense>
)}
@@ -163,66 +200,149 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
const renderEmptyList = () => <div class="p-3 text-xs text-secondary">{emptyViewerMessage()}</div>
const renderListPanel = () => (
<Show when={nonDeletedList.length > 0} fallback={renderEmptyList()}>
<For each={sortedList}>
{(item) => (
<div
class={`file-list-item ${props.selectedPath() === item.path ? "file-list-item-active" : ""}`}
onClick={() => {
props.onOpenFile(item.path)
}}
>
<div class="file-list-item-content">
<div class="file-list-item-path" title={item.path}>
<span class="file-path-text">{item.path}</span>
</div>
<div class="file-list-item-stats">
<Show when={item.status === "deleted"}>
<span class="text-[10px] text-secondary">{props.t("instanceShell.gitChanges.deleted")}</span>
</Show>
<Show when={item.status !== "deleted"}>
<>
<span class="file-list-item-additions">+{item.added}</span>
<span class="file-list-item-deletions">-{item.removed}</span>
</>
</Show>
</div>
const renderListItem = (item: GitChangeListItem) => {
const isBulkSelected = createMemo(() => props.selectedBulkItemIds().has(item.id))
const actionLabel =
item.section === "staged"
? props.t("instanceShell.gitChanges.actions.unstage")
: props.t("instanceShell.gitChanges.actions.stage")
const triggerAction = () => {
if (item.section === "staged") props.onUnstageFile(item)
else props.onStageFile(item)
}
return (
<div
class={`file-list-item git-change-list-item ${props.selectedItemId() === item.id ? "file-list-item-active" : ""} ${isBulkSelected() ? "git-change-list-item-bulk-selected" : ""}`}
onMouseDown={(event) => {
if (event.shiftKey || event.ctrlKey || event.metaKey) {
event.preventDefault()
}
}}
onClick={(event) => props.onRowClick(item, event)}
title={item.path}
>
<div class="file-list-item-content" title={item.path}>
<div class="file-list-item-path" title={item.path}>
<span class="file-path-text">{item.path}</span>
</div>
<div class="git-change-list-item-right">
<div class="file-list-item-stats">
<span class="file-list-item-additions">+{item.additions}</span>
<span class="file-list-item-deletions">-{item.deletions}</span>
</div>
</div>
)}
</For>
</Show>
</div>
<div class="git-change-list-item-actions-zone">
<div class="git-change-list-item-actions">
<button
type="button"
class="git-change-row-action"
title={actionLabel}
aria-label={actionLabel}
onClick={(event) => {
event.stopPropagation()
triggerAction()
}}
>
<span
class={`git-change-row-action-glyph ${item.section === "staged" ? "git-change-row-action-glyph-minus" : "git-change-row-action-glyph-plus"}`}
aria-hidden="true"
>
<span class="git-change-row-action-bar git-change-row-action-bar-horizontal" />
<Show when={item.section !== "staged"}>
<span class="git-change-row-action-bar git-change-row-action-bar-vertical" />
</Show>
</span>
</button>
</div>
</div>
</div>
)
}
const renderSection = (
title: string,
items: GitChangeListItem[],
isOpen: boolean,
onToggle: () => void,
) => (
<div class="git-change-section">
<button type="button" class="git-change-section-header" onClick={onToggle}>
<span class="git-change-section-header-main">
<span class="git-change-section-chevron">
{isOpen ? <ChevronDown class="h-3.5 w-3.5" /> : <ChevronRight class="h-3.5 w-3.5" />}
</span>
<span class="git-change-section-title">{title}</span>
</span>
<span class="git-change-section-count">{items.length}</span>
</button>
<Show when={isOpen}>
<div class="git-change-section-items">
<For each={items}>{(item) => renderListItem(item)}</For>
</div>
</Show>
</div>
)
const renderListOverlay = () => (
<Show when={nonDeletedList.length > 0} fallback={renderEmptyList()}>
<For each={sortedList}>
{(item) => (
<div
class={`file-list-item ${props.selectedPath() === item.path ? "file-list-item-active" : ""}`}
onClick={() => props.onOpenFile(item.path)}
title={item.path}
>
<div class="file-list-item-content">
<div class="file-list-item-path" title={item.path}>
<span class="file-path-text">{item.path}</span>
</div>
<div class="file-list-item-stats">
<Show when={item.status === "deleted"}>
<span class="text-[10px] text-secondary">{props.t("instanceShell.gitChanges.deleted")}</span>
</Show>
<Show when={item.status !== "deleted"}>
<>
<span class="file-list-item-additions">+{item.added}</span>
<span class="file-list-item-deletions">-{item.removed}</span>
</>
const renderGroupedList = () => (
<Show when={allItems.length > 0} fallback={renderEmptyList()}>
<div class="git-change-sections">
<div class="git-change-section">
<button type="button" class="git-change-section-header" onClick={props.onToggleStagedOpen}>
<span class="git-change-section-header-main">
<span class="git-change-section-chevron">
{props.stagedOpen() ? <ChevronDown class="h-3.5 w-3.5" /> : <ChevronRight class="h-3.5 w-3.5" />}
</span>
<span class="git-change-section-title-row">
<span class="git-change-section-title">{props.t("instanceShell.gitChanges.sections.staged")}</span>
<Show when={props.branchLabel()}>
{(label) => (
<span class="status-indicator session-status-list worktree-indicator git-change-section-badge" title={`Branch: ${label()}`}>
<GitBranch class="w-3.5 h-3.5" aria-hidden="true" />
<span class="worktree-indicator-label">{label()}</span>
</span>
)}
</Show>
</span>
</span>
<span class="git-change-section-count">{stagedList.length}</span>
</button>
<Show when={props.stagedOpen()}>
<div class="git-change-section-items">
<div class="git-change-commit-box">
<div class="git-change-commit-input-wrap">
<textarea
class="git-change-commit-input"
value={props.commitMessage()}
rows={1}
placeholder={props.t("instanceShell.gitChanges.commit.placeholder")}
onInput={(event) => props.onCommitMessageInput(event.currentTarget.value)}
/>
<button
type="button"
class="git-change-commit-button git-change-commit-button-overlay"
disabled={!canCommit()}
onClick={() => props.onSubmitCommit()}
>
{props.commitSubmitting()
? props.t("instanceShell.gitChanges.commit.submitting")
: props.t("instanceShell.gitChanges.commit.submit")}
</button>
</div>
</div>
<For each={stagedList}>{(item) => renderListItem(item)}</For>
</div>
</div>
</Show>
</div>
{renderSection(
props.t("instanceShell.gitChanges.sections.unstaged"),
unstagedList,
props.unstagedOpen(),
props.onToggleUnstagedOpen,
)}
</For>
</div>
</Show>
)
@@ -266,7 +386,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
/>
</>
}
list={{ panel: renderListPanel, overlay: renderListOverlay }}
list={{ panel: renderGroupedList, overlay: renderGroupedList }}
viewer={renderViewer()}
listOpen={props.listOpen()}
onToggleList={props.onToggleList}

37
packages/ui/src/components/instance/shell/right-panel/types.ts
View File

@@ -5,3 +5,40 @@ export type DiffViewMode = "split" | "unified"
export type DiffContextMode = "expanded" | "collapsed"
export type DiffWordWrapMode = "on" | "off"
export type GitChangeStatus = "added" | "modified" | "deleted" | "renamed" | "copied" | "untracked" | string
export interface GitChangeEntry {
path: string
originalPath?: string | null
additions: number
deletions: number
status: GitChangeStatus
stagedStatus?: GitChangeStatus | null
unstagedStatus?: GitChangeStatus | null
stagedAdditions?: number
stagedDeletions?: number
unstagedAdditions?: number
unstagedDeletions?: number
}
export type GitChangeSection = "staged" | "unstaged"
export interface GitChangeListItem {
id: string
path: string
originalPath?: string | null
section: GitChangeSection
status: GitChangeStatus
additions: number
deletions: number
entry: GitChangeEntry
displayName: string
parentPath: string
}
export interface GitSelectionDescriptor {
itemId: string | null
path: string | null
section: GitChangeSection | null
}

470
packages/ui/src/components/instance/shell/right-panel/useGitChanges.ts Normal file
View File

@@ -0,0 +1,470 @@
import { createEffect, createMemo, createSignal, onCleanup, type Accessor } from "solid-js"
import type { File as GitFileStatus } from "@opencode-ai/sdk/v2/client"
import type { PromptInputApi } from "../../../prompt-input/types"
import type { GitChangeEntry, GitChangeListItem, GitSelectionDescriptor, RightPanelTab } from "./types"
import { getOrCreateWorktreeClient } from "../../../../stores/worktrees"
import { requestData } from "../../../../lib/opencode-api"
import { serverApi } from "../../../../lib/api-client"
import { serverEvents } from "../../../../lib/server-events"
import { showToastNotification } from "../../../../lib/notifications"
import { adaptSdkGitStatusEntries, buildGitChangeListItems } from "./git-changes-model"
type UseGitChangesOptions = {
t: (key: string, vars?: Record<string, any>) => string
instanceId: string
rightPanelTab: Accessor<RightPanelTab>
worktreeSlug: Accessor<string>
isPhoneLayout: Accessor<boolean>
promptInputApi: Accessor<PromptInputApi | null>
closeGitList: () => void
}
export function useGitChanges(options: UseGitChangesOptions) {
const [gitStatusEntries, setGitStatusEntries] = createSignal<GitChangeEntry[] | null>(null)
const [gitStatusLoading, setGitStatusLoading] = createSignal(false)
const [gitStatusError, setGitStatusError] = createSignal<string | null>(null)
const [gitSelectedItemId, setGitSelectedItemId] = createSignal<string | null>(null)
const [gitBulkSelectedItemIds, setGitBulkSelectedItemIds] = createSignal<Set<string>>(new Set())
const [gitBulkSelectionAnchorId, setGitBulkSelectionAnchorId] = createSignal<string | null>(null)
const [gitSelectedLoading, setGitSelectedLoading] = createSignal(false)
const [gitSelectedError, setGitSelectedError] = createSignal<string | null>(null)
const [gitSelectedBefore, setGitSelectedBefore] = createSignal<string | null>(null)
const [gitSelectedAfter, setGitSelectedAfter] = createSignal<string | null>(null)
const [gitCommitMessage, setGitCommitMessage] = createSignal("")
const [gitCommitSubmitting, setGitCommitSubmitting] = createSignal(false)
let gitStatusRequestVersion = 0
let gitDiffRequestVersion = 0
let passiveGitRefreshInFlight = false
let pendingGitPassiveRefreshOptions: { forceReloadSelectedDiff?: boolean } | null = null
let previousGitChangesActivationKey: string | null = null
const gitListItems = createMemo(() => buildGitChangeListItems(gitStatusEntries()))
const clearGitBulkSelection = () => {
setGitBulkSelectedItemIds((current) => (current.size === 0 ? current : new Set<string>()))
setGitBulkSelectionAnchorId(null)
}
const toggleGitBulkSelection = (itemId: string) => {
setGitBulkSelectedItemIds((current) => {
const next = new Set(current)
if (next.has(itemId)) next.delete(itemId)
else next.add(itemId)
return next
})
}
const addGitBulkRange = (anchorId: string, itemId: string) => {
const items = gitListItems()
const anchorIndex = items.findIndex((entry) => entry.id === anchorId)
const itemIndex = items.findIndex((entry) => entry.id === itemId)
if (anchorIndex < 0 || itemIndex < 0) {
setGitBulkSelectedItemIds((current) => {
const next = new Set(current)
next.add(itemId)
return next
})
return
}
const start = Math.min(anchorIndex, itemIndex)
const end = Math.max(anchorIndex, itemIndex)
const rangeIds = items.slice(start, end + 1).map((entry) => entry.id)
setGitBulkSelectedItemIds((current) => {
const next = new Set(current)
for (const rangeId of rangeIds) {
next.add(rangeId)
}
return next
})
}
const describeGitSelection = (itemId: string | null): GitSelectionDescriptor => {
if (!itemId) {
return { itemId: null, path: null, section: null }
}
const match = gitListItems().find((item) => item.id === itemId) ?? null
return {
itemId,
path: match?.path ?? null,
section: match?.section ?? null,
}
}
const gitMostChangedItemId = createMemo<string | null>(() => {
const items = gitListItems()
if (items.length === 0) return null
const candidates = items.filter((item) => item.status !== "deleted")
if (candidates.length === 0) return null
const best = candidates.reduce((currentBest, item) => {
const bestScore = (currentBest?.additions ?? 0) + (currentBest?.deletions ?? 0)
const score = (item.additions ?? 0) + (item.deletions ?? 0)
if (score > bestScore) return item
if (score < bestScore) return currentBest
return String(item.id || "").localeCompare(String(currentBest?.id || "")) < 0 ? item : currentBest
}, candidates[0])
return typeof best?.id === "string" ? best.id : null
})
const resolveValidGitSelection = (selection: GitSelectionDescriptor): string | null => {
const items = gitListItems()
if (items.length === 0) return null
if (selection.itemId && items.some((item) => item.id === selection.itemId)) return selection.itemId
if (selection.path && selection.section) {
const oppositeSection = selection.section === "staged" ? "unstaged" : "staged"
const moved = items.find((item) => item.path === selection.path && item.section === oppositeSection)
if (moved) return moved.id
const samePath = items.find((item) => item.path === selection.path)
if (samePath) return samePath.id
}
return gitMostChangedItemId()
}
const describeGitSelectionFingerprint = (itemId: string | null) => {
if (!itemId) return null
const item = gitListItems().find((entry) => entry.id === itemId) ?? null
if (!item) return null
return `${item.path}::${item.originalPath ?? ""}::${item.section}::${item.status}::${item.additions}::${item.deletions}`
}
const clearSelectedGitDiff = () => {
setGitSelectedError(null)
setGitSelectedBefore(null)
setGitSelectedAfter(null)
}
const clearSelectedGitDiffAndSelection = () => {
setGitSelectedItemId(null)
clearGitBulkSelection()
setGitSelectedLoading(false)
clearSelectedGitDiff()
}
const pruneGitBulkSelection = () => {
const validIds = new Set(gitListItems().map((item) => item.id))
setGitBulkSelectedItemIds((current) => {
if (current.size === 0) return current
const next = new Set<string>()
for (const itemId of current) {
if (validIds.has(itemId)) next.add(itemId)
}
return next.size === current.size ? current : next
})
const anchorId = gitBulkSelectionAnchorId()
if (anchorId && !validIds.has(anchorId)) {
setGitBulkSelectionAnchorId(null)
}
}
createEffect(() => {
gitListItems()
pruneGitBulkSelection()
})
const loadGitStatus = async (force = false) => {
if (!force && gitStatusEntries() !== null) return
const slug = options.worktreeSlug()
const client = getOrCreateWorktreeClient(options.instanceId, slug)
const requestVersion = ++gitStatusRequestVersion
setGitStatusLoading(true)
setGitStatusError(null)
try {
const sdkStatusPromise = requestData<GitFileStatus[]>(client.file.status(), "file.status")
const detailList = await serverApi.fetchWorktreeGitStatus(options.instanceId, slug)
if (requestVersion !== gitStatusRequestVersion) return
if (slug !== options.worktreeSlug()) return
const sdkResult = await Promise.race([
sdkStatusPromise.then((value) => ({ kind: "fulfilled" as const, value })),
new Promise<{ kind: "timeout" }>((resolve) => setTimeout(() => resolve({ kind: "timeout" }), 1500)),
]).catch(() => null)
const sdkList = sdkResult && sdkResult.kind === "fulfilled" ? sdkResult.value : null
setGitStatusEntries(adaptSdkGitStatusEntries(sdkList, detailList))
} catch (error) {
if (requestVersion !== gitStatusRequestVersion) return
if (slug !== options.worktreeSlug()) return
setGitStatusError(error instanceof Error ? error.message : "Failed to load git status")
setGitStatusEntries([])
} finally {
if (requestVersion !== gitStatusRequestVersion) return
if (slug !== options.worktreeSlug()) return
setGitStatusLoading(false)
}
}
async function openGitFile(itemId: string) {
const requestVersion = ++gitDiffRequestVersion
setGitSelectedItemId(itemId)
setGitSelectedLoading(true)
clearSelectedGitDiff()
const item = gitListItems().find((entry) => entry.id === itemId) || null
if (!item) {
if (requestVersion !== gitDiffRequestVersion) return
clearSelectedGitDiffAndSelection()
return
}
if (options.isPhoneLayout()) {
options.closeGitList()
}
try {
const diff = await serverApi.fetchWorktreeGitDiff(options.instanceId, options.worktreeSlug(), {
path: item.path,
originalPath: item.originalPath ?? null,
scope: item.section,
})
if (requestVersion !== gitDiffRequestVersion || gitSelectedItemId() !== itemId) return
if (diff.isBinary) {
setGitSelectedError(options.t("instanceShell.gitChanges.binaryViewer"))
return
}
setGitSelectedBefore(diff.before)
setGitSelectedAfter(diff.after)
} catch (error) {
if (requestVersion !== gitDiffRequestVersion || gitSelectedItemId() !== itemId) return
setGitSelectedError(error instanceof Error ? error.message : "Failed to load file changes")
} finally {
if (requestVersion !== gitDiffRequestVersion || gitSelectedItemId() !== itemId) return
setGitSelectedLoading(false)
}
}
const passiveRefreshGitStatus = async (optionsArg?: { forceReloadSelectedDiff?: boolean }) => {
if (options.rightPanelTab() !== "git-changes") return
if (passiveGitRefreshInFlight) {
pendingGitPassiveRefreshOptions = {
forceReloadSelectedDiff:
pendingGitPassiveRefreshOptions?.forceReloadSelectedDiff || optionsArg?.forceReloadSelectedDiff || false,
}
return
}
if (gitCommitSubmitting()) return
passiveGitRefreshInFlight = true
const refreshSelectionId = gitSelectedItemId()
const previousSelection = describeGitSelection(gitSelectedItemId())
const previousFingerprint = describeGitSelectionFingerprint(previousSelection.itemId)
const hadSelectedDiff =
previousSelection.itemId !== null &&
(gitSelectedBefore() !== null || gitSelectedAfter() !== null || gitSelectedError() !== null)
try {
await loadGitStatus(true)
if (gitSelectedItemId() !== refreshSelectionId) return
const nextSelection = resolveValidGitSelection(previousSelection)
setGitSelectedItemId(nextSelection)
if (!nextSelection) {
clearSelectedGitDiff()
return
}
const nextFingerprint = describeGitSelectionFingerprint(nextSelection)
const shouldReloadSelectedDiff =
optionsArg?.forceReloadSelectedDiff ||
!hadSelectedDiff ||
previousFingerprint !== nextFingerprint ||
previousSelection.itemId === nextSelection
if (shouldReloadSelectedDiff) {
await openGitFile(nextSelection)
}
} finally {
passiveGitRefreshInFlight = false
if (pendingGitPassiveRefreshOptions) {
const nextOptions = pendingGitPassiveRefreshOptions
pendingGitPassiveRefreshOptions = null
void passiveRefreshGitStatus(nextOptions)
}
}
}
const mutateGitFile = async (item: GitChangeListItem, action: "stage" | "unstage") => {
const currentSelection = describeGitSelection(gitSelectedItemId())
const fallbackSelection = currentSelection.path === item.path ? currentSelection : describeGitSelection(item.id)
const selectedIds = gitBulkSelectedItemIds()
const selectedItems = gitListItems().filter((candidate) => selectedIds.has(candidate.id))
const bulkTargets = selectedItems.filter((candidate) => candidate.section === item.section)
const targetItems = bulkTargets.some((candidate) => candidate.id === item.id) ? bulkTargets : [item]
const targetPaths = Array.from(new Set(targetItems.map((candidate) => candidate.path)))
try {
if (action === "stage") {
await serverApi.stageWorktreeGitPaths(options.instanceId, options.worktreeSlug(), { paths: targetPaths })
} else {
await serverApi.unstageWorktreeGitPaths(options.instanceId, options.worktreeSlug(), { paths: targetPaths })
}
await loadGitStatus(true)
clearGitBulkSelection()
const nextSelection = resolveValidGitSelection(fallbackSelection)
setGitSelectedItemId(nextSelection)
if (nextSelection) {
await openGitFile(nextSelection)
} else {
clearSelectedGitDiff()
}
} catch (error) {
showToastNotification({
message: error instanceof Error ? error.message : `Failed to ${action} file`,
variant: "error",
})
}
}
const handleGitRowClick = (item: GitChangeListItem, event: MouseEvent) => {
if (event.shiftKey) {
event.preventDefault()
const anchorId = gitBulkSelectionAnchorId() ?? item.id
addGitBulkRange(anchorId, item.id)
return
}
if (event.ctrlKey || event.metaKey) {
event.preventDefault()
toggleGitBulkSelection(item.id)
setGitBulkSelectionAnchorId(item.id)
return
}
clearGitBulkSelection()
setGitBulkSelectionAnchorId(item.id)
void openGitFile(item.id)
}
const submitGitCommit = async () => {
const message = gitCommitMessage().trim()
if (!message || gitCommitSubmitting()) return
setGitCommitSubmitting(true)
try {
await serverApi.commitWorktreeGitChanges(options.instanceId, options.worktreeSlug(), { message })
setGitCommitMessage("")
await loadGitStatus(true)
const nextSelection = resolveValidGitSelection(describeGitSelection(gitSelectedItemId()))
setGitSelectedItemId(nextSelection)
if (nextSelection) {
await openGitFile(nextSelection)
} else {
clearSelectedGitDiff()
}
showToastNotification({
message: options.t("instanceShell.gitChanges.commit.success"),
variant: "success",
})
} catch (error) {
showToastNotification({
message: error instanceof Error ? error.message : options.t("instanceShell.gitChanges.commit.error"),
variant: "error",
})
} finally {
setGitCommitSubmitting(false)
}
}
const refreshGitStatus = async () => {
await loadGitStatus(true)
const selected = resolveValidGitSelection(describeGitSelection(gitSelectedItemId()))
setGitSelectedItemId(selected)
if (selected) {
void openGitFile(selected)
} else {
clearSelectedGitDiff()
}
}
const insertGitChangeContext = (item: GitChangeListItem, selection: { startLine: number; endLine: number } | null) => {
const startLine = selection?.startLine ?? 1
const endLine = selection?.endLine ?? startLine
options.promptInputApi()?.insertComment(`Git Diff: File: ${item.path} : ${startLine}-${endLine}`)
}
createEffect(() => {
options.worktreeSlug()
gitStatusRequestVersion += 1
gitDiffRequestVersion += 1
passiveGitRefreshInFlight = false
pendingGitPassiveRefreshOptions = null
setGitStatusEntries(null)
setGitStatusError(null)
setGitStatusLoading(false)
setGitSelectedItemId(null)
clearGitBulkSelection()
setGitSelectedLoading(false)
clearSelectedGitDiff()
setGitCommitMessage("")
setGitCommitSubmitting(false)
})
createEffect(() => {
if (options.rightPanelTab() !== "git-changes") return
const items = gitListItems()
if (gitStatusEntries() === null) return
if (items.length === 0) return
if (gitSelectedItemId()) return
const next = gitMostChangedItemId()
if (!next) return
void openGitFile(next)
})
createEffect(() => {
const activationKey = options.rightPanelTab() === "git-changes" ? `${options.instanceId}:${options.worktreeSlug()}` : null
if (!activationKey) {
previousGitChangesActivationKey = null
return
}
if (previousGitChangesActivationKey === activationKey) return
previousGitChangesActivationKey = activationKey
void passiveRefreshGitStatus()
})
createEffect(() => {
if (options.rightPanelTab() !== "git-changes") return
const unsubscribe = serverEvents.on("instance.event", (event) => {
if (event.type !== "instance.event") return
if (event.instanceId !== options.instanceId) return
const eventType = (event.event as { type?: unknown } | undefined)?.type
if (eventType !== "session.updated" && eventType !== "session.diff") return
void passiveRefreshGitStatus({ forceReloadSelectedDiff: true })
})
onCleanup(() => {
unsubscribe()
})
})
createEffect(() => {
if (options.rightPanelTab() === "git-changes") return
setGitSelectedBefore(null)
setGitSelectedAfter(null)
setGitSelectedLoading(false)
setGitSelectedError(null)
})
return {
gitStatusEntries,
gitStatusLoading,
gitStatusError,
gitSelectedItemId,
gitBulkSelectedItemIds,
gitSelectedLoading,
gitSelectedError,
gitSelectedBefore,
gitSelectedAfter,
gitCommitMessage,
gitCommitSubmitting,
gitMostChangedItemId,
setGitCommitMessage,
handleGitRowClick,
refreshGitStatus,
insertGitChangeContext,
submitGitCommit,
stageGitFile: (item: GitChangeListItem) => void mutateGitFile(item, "stage"),
unstageGitFile: (item: GitChangeListItem) => void mutateGitFile(item, "unstage"),
}
}

4
packages/ui/src/components/instance/shell/storage.ts
View File

@@ -21,6 +21,10 @@ export const RIGHT_PANEL_FILES_LIST_OPEN_NONPHONE_KEY = "opencode-session-right-
export const RIGHT_PANEL_FILES_LIST_OPEN_PHONE_KEY = "opencode-session-right-panel-files-list-open-phone-v1"
export const RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_NONPHONE_KEY = "opencode-session-right-panel-git-changes-list-open-nonphone-v1"
export const RIGHT_PANEL_GIT_CHANGES_LIST_OPEN_PHONE_KEY = "opencode-session-right-panel-git-changes-list-open-phone-v1"
export const RIGHT_PANEL_GIT_CHANGES_STAGED_OPEN_NONPHONE_KEY = "opencode-session-right-panel-git-changes-staged-open-nonphone-v1"
export const RIGHT_PANEL_GIT_CHANGES_STAGED_OPEN_PHONE_KEY = "opencode-session-right-panel-git-changes-staged-open-phone-v1"
export const RIGHT_PANEL_GIT_CHANGES_UNSTAGED_OPEN_NONPHONE_KEY = "opencode-session-right-panel-git-changes-unstaged-open-nonphone-v1"
export const RIGHT_PANEL_GIT_CHANGES_UNSTAGED_OPEN_PHONE_KEY = "opencode-session-right-panel-git-changes-unstaged-open-phone-v1"
export const RIGHT_PANEL_CHANGES_DIFF_VIEW_MODE_KEY = "opencode-session-right-panel-changes-diff-view-mode-v1"
export const RIGHT_PANEL_CHANGES_DIFF_CONTEXT_MODE_KEY = "opencode-session-right-panel-changes-diff-context-mode-v1"
export const RIGHT_PANEL_CHANGES_DIFF_WORD_WRAP_KEY = "opencode-session-right-panel-changes-diff-word-wrap-v1"