feat: add git integration with file browsing and diff viewing

Add comprehensive git support across the stack:
- CLI: register git RPC handlers (status, diff numstat, diff file)
- Server: create git routes with proper session path resolution
- Web: add file browser, diff viewer, and git status visualization
- Add FileIcon component and git parser utilities
- Add TanStack Router routes for /files and /file pages
- Add git-themed CSS variables for light and dark modes
This commit is contained in:
weishu
2025-12-20 23:00:26 +08:00
parent 17eeba10d6
commit 8ebd4f6ab9
18 changed files with 1667 additions and 3 deletions
+32
View File
@@ -16,9 +16,30 @@ function getSessionTitle(session: Session): string {
return session.id.slice(0, 8)
}
function FilesIcon(props: { className?: string }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={props.className}
>
<path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
<path d="M14 2v6h6" />
</svg>
)
}
export function SessionHeader(props: {
session: Session
onBack: () => void
onViewFiles?: () => void
}) {
const title = useMemo(() => getSessionTitle(props.session), [props.session])
@@ -60,6 +81,17 @@ export function SessionHeader(props: {
{props.session.metadata?.path ?? props.session.id}
</div>
</div>
{props.onViewFiles ? (
<button
type="button"
onClick={props.onViewFiles}
className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-secondary-bg)] hover:text-[var(--app-fg)]"
title="Files"
>
<FilesIcon />
</button>
) : null}
</div>
</div>
)