snapshot of https://github.com/mountain-loop/yaak.git (main, 2026-09-23; blobs > 131072B omitted)

apps/yaak-client/components/git/BranchSelectionDialog.tsx

@@ -0,0 +1,43 @@
+import { HStack, VStack } from "@yaakapp-internal/ui";
+import { useState } from "react";
+import { Button } from "../core/Button";
+import { Select } from "../core/Select";
+
+interface Props {
+  branches: string[];
+  onCancel: () => void;
+  onSelect: (branch: string) => void;
+  selectText: string;
+}
+
+export function BranchSelectionDialog({ branches, onCancel, onSelect, selectText }: Props) {
+  const [branch, setBranch] = useState<string>("__NONE__");
+  return (
+    <VStack
+      className="mb-4"
+      as="form"
+      space={4}
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSelect(branch);
+      }}
+    >
+      <Select
+        name="branch"
+        hideLabel
+        label="Branch"
+        value={branch}
+        options={branches.map((b) => ({ label: b, value: b }))}
+        onChange={setBranch}
+      />
+      <HStack space={2} justifyContent="end">
+        <Button onClick={onCancel} variant="border" color="secondary">
+          Cancel
+        </Button>
+        <Button type="submit" color="primary">
+          {selectText}
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}

apps/yaak-client/components/git/FileHistoryDialog.tsx

@@ -0,0 +1,131 @@
+import { useGitFileDiffForCommit, useGitLog, useGitMutations } from "@yaakapp-internal/git";
+import type { GitCommit } from "@yaakapp-internal/git";
+import { SplitLayout } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { formatDistanceToNowStrict } from "date-fns";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { sync } from "../../init/sync";
+import { showConfirm } from "../../lib/confirm";
+import { EmptyStateText } from "../EmptyStateText";
+import { Button } from "../core/Button";
+import { DiffViewer } from "../core/Editor/DiffViewer";
+import { useGitCallbacks } from "./callbacks";
+
+export function FileHistoryDialog({ dir, relaPath }: { dir: string; relaPath: string }) {
+  const callbacks = useGitCallbacks(dir);
+  const { restoreFileFromCommit } = useGitMutations(dir, callbacks);
+  const log = useGitLog(dir, undefined, relaPath);
+  const commits = log.data ?? [];
+  const [selectedOid, setSelectedOid] = useState<string | null>(null);
+  const selectedCommit = useMemo(
+    () => commits.find((commit) => commit.oid === selectedOid) ?? null,
+    [commits, selectedOid],
+  );
+  const diff = useGitFileDiffForCommit(dir, relaPath, selectedCommit?.oid);
+
+  useEffect(() => {
+    if (commits.length === 0) {
+      setSelectedOid(null);
+    } else if (selectedOid == null || !commits.some((commit) => commit.oid === selectedOid)) {
+      setSelectedOid(commits[0]?.oid ?? null);
+    }
+  }, [commits, selectedOid]);
+
+  const handleRestoreCommit = useCallback(
+    async (commit: GitCommit) => {
+      const confirmed = await showConfirm({
+        id: "git-restore-file-history-entry",
+        title: "Restore File",
+        description: "This will restore the file to the selected commit.",
+        confirmText: "Restore",
+        color: "warning",
+      });
+      if (!confirmed) return;
+
+      await restoreFileFromCommit.mutateAsync({ commitOid: commit.oid, relaPath });
+      await sync({ force: true });
+    },
+    [relaPath, restoreFileFromCommit],
+  );
+
+  if (commits.length === 0 && !log.isLoading) {
+    return <EmptyStateText>No history for this file</EmptyStateText>;
+  }
+
+  return (
+    <div className="h-full px-2 pb-4">
+      <SplitLayout
+        storageKey="git-file-history-horizontal"
+        layout="horizontal"
+        defaultRatio={0.6}
+        firstSlot={({ style }) => (
+          <div style={style} className="h-full overflow-y-auto px-4 pb-2 transform-cpu">
+            <div className="flex flex-col pt-1.5">
+              {commits.map((commit) => (
+                <CommitListItem
+                  key={commit.oid}
+                  commit={commit}
+                  selected={commit.oid === selectedCommit?.oid}
+                  onSelect={() => setSelectedOid(commit.oid)}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+        secondSlot={({ style }) => (
+          <div style={style} className="h-full min-w-0 border-l border-l-border-subtle px-4">
+            {selectedCommit == null ? (
+              <EmptyStateText>Select a commit to view diff</EmptyStateText>
+            ) : (
+              <div className="h-full flex flex-col">
+                <div className="mb-2 min-w-0 text-text-subtle grid items-center gap-2 grid-cols-[minmax(0,1fr)_auto]">
+                  <div className="min-w-0 truncate">{selectedCommit.message || "No message"}</div>
+                  <Button
+                    className="ml-auto"
+                    color="warning"
+                    size="2xs"
+                    variant="border"
+                    onClick={() => handleRestoreCommit(selectedCommit)}
+                  >
+                    Restore File
+                  </Button>
+                </div>
+                <DiffViewer
+                  original={diff.data?.original ?? ""}
+                  modified={diff.data?.modified ?? ""}
+                  className="flex-1 min-h-0"
+                />
+              </div>
+            )}
+          </div>
+        )}
+      />
+    </div>
+  );
+}
+
+function CommitListItem({
+  commit,
+  selected,
+  onSelect,
+}: {
+  commit: GitCommit;
+  selected: boolean;
+  onSelect: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={classNames(
+        "w-full min-w-0 text-left rounded-sm px-2 py-1.5",
+        selected && "bg-surface-active",
+      )}
+      onClick={onSelect}
+    >
+      <div className="truncate flex-1">{commit.message || "No message"}</div>
+      <div className="text-text-subtle text-sm truncate">
+        {commit.author.name || "Unknown"} - {formatDistanceToNowStrict(commit.when)} ago - <span className="shrink-0 text-2xs text-text-subtle font-mono">{commit.oid.slice(0, 7)}</span>
+      </div>
+    </button>
+  );
+}

apps/yaak-client/components/git/GitCommitDialog.tsx

@@ -0,0 +1,481 @@
+import type { GitStatusEntry } from "@yaakapp-internal/git";
+import { useGit } from "@yaakapp-internal/git";
+import type {
+  Environment,
+  Folder,
+  GrpcRequest,
+  HttpRequest,
+  WebsocketRequest,
+  Workspace,
+} from "@yaakapp-internal/models";
+import { Banner, HStack, Icon, InlineCode, SplitLayout } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useCallback, useMemo, useState } from "react";
+import { modelToYaml } from "../../lib/diffYaml";
+import { trackFeatureUsage } from "../../lib/featureFeedback";
+import { resolvedModelName } from "../../lib/resolvedModelName";
+import { showConfirm } from "../../lib/confirm";
+import { showErrorToast } from "../../lib/toast";
+import { sync } from "../../init/sync";
+import { CommercialUseBanner } from "../CommercialUseBanner";
+import { Button } from "../core/Button";
+import type { CheckboxProps } from "../core/Checkbox";
+import { Checkbox } from "../core/Checkbox";
+import type { CheckboxTreeNode } from "../core/CheckboxTree";
+import { CheckboxTree } from "../core/CheckboxTree";
+import { DiffViewer } from "../core/Editor/DiffViewer";
+import { Input } from "../core/Input";
+import { Separator } from "../core/Separator";
+import { EmptyStateText } from "../EmptyStateText";
+import { useGitCallbacks } from "./callbacks";
+import { handlePushResult } from "./git-util";
+
+interface Props {
+  syncDir: string;
+  onDone: () => void;
+  workspace: Workspace;
+}
+
+interface CommitTreeNode {
+  model: HttpRequest | GrpcRequest | WebsocketRequest | Folder | Environment | Workspace;
+  status: GitStatusEntry;
+  children: CommitTreeNode[];
+  ancestors: CommitTreeNode[];
+}
+
+export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
+  const callbacks = useGitCallbacks(syncDir);
+  const [{ status }, { commit, commitAndPush, add, unstage, restore }] = useGit(syncDir, callbacks);
+  const [isPushing, setIsPushing] = useState(false);
+  const [commitError, setCommitError] = useState<string | null>(null);
+  const [message, setMessage] = useState<string>("");
+  const [selectedEntry, setSelectedEntry] = useState<GitStatusEntry | null>(null);
+
+  const handleCreateCommit = async () => {
+    setCommitError(null);
+    try {
+      await commit.mutateAsync({ message });
+      trackFeatureUsage("git-sync");
+      onDone();
+    } catch (err) {
+      setCommitError(String(err));
+    }
+  };
+
+  const handleCreateCommitAndPush = async () => {
+    setIsPushing(true);
+    try {
+      const r = await commitAndPush.mutateAsync({ message });
+      handlePushResult(r);
+      trackFeatureUsage("git-sync");
+      onDone();
+    } catch (err) {
+      showErrorToast({
+        id: "git-commit-and-push-error",
+        title: "Error committing and pushing",
+        message: String(err),
+      });
+    } finally {
+      setIsPushing(false);
+    }
+  };
+
+  const { internalEntries, externalEntries, allEntries } = useMemo(() => {
+    const allEntries = [];
+    const yaakEntries = [];
+    const externalEntries = [];
+
+    for (const entry of status.data?.entries ?? []) {
+      allEntries.push(entry);
+      if (entry.next == null && entry.prev == null) {
+        externalEntries.push(entry);
+      } else {
+        yaakEntries.push(entry);
+      }
+    }
+    return { internalEntries: yaakEntries, externalEntries, allEntries };
+  }, [status.data?.entries]);
+
+  const hasAddedAnything = allEntries.find((e) => e.staged) != null;
+  const hasAnythingToAdd = allEntries.find((e) => e.status !== "current") != null;
+
+  const tree: CommitTreeNode | null = useMemo(() => {
+    const next = (
+      model: CommitTreeNode["model"],
+      ancestors: CommitTreeNode[],
+    ): CommitTreeNode | null => {
+      const statusEntry = internalEntries?.find((s) => s.relaPath.includes(model.id));
+      if (statusEntry == null) {
+        return null;
+      }
+
+      const node: CommitTreeNode = {
+        model,
+        status: statusEntry,
+        children: [],
+        ancestors,
+      };
+
+      for (const entry of internalEntries) {
+        const childModel = entry.next ?? entry.prev;
+
+        // Should never happen because we're iterating internalEntries
+        if (childModel == null) continue;
+
+        // TODO: Figure out why not all of these show up
+        if ("folderId" in childModel && childModel.folderId != null) {
+          if (childModel.folderId === model.id) {
+            const c = next(childModel, [...ancestors, node]);
+            if (c != null) node.children.push(c);
+          }
+        } else if ("workspaceId" in childModel && childModel.workspaceId === model.id) {
+          const c = next(childModel, [...ancestors, node]);
+          if (c != null) node.children.push(c);
+        } else {
+          // Do nothing
+        }
+      }
+
+      return node;
+    };
+
+    return next(workspace, []);
+  }, [workspace, internalEntries]);
+
+  const treeNode: CheckboxTreeNode<CommitTreeNode> | null = useMemo(() => {
+    const toTreeNode = (n: CommitTreeNode): CheckboxTreeNode<CommitTreeNode> => ({
+      key: n.status.relaPath + n.status.status + n.status.staged,
+      data: n,
+      children: n.children.map(toTreeNode),
+    });
+    return tree == null ? null : toTreeNode(tree);
+  }, [tree]);
+
+  const checkNode = useCallback(
+    (treeNode: CommitTreeNode) => {
+      const checked = nodeCheckedStatus(treeNode);
+      const newChecked = checked === "indeterminate" ? true : !checked;
+      setCheckedAndChildren(treeNode, newChecked, unstage.mutate, add.mutate);
+      // TODO: Also ensure parents are added properly
+    },
+    [add.mutate, unstage.mutate],
+  );
+
+  const checkEntry = useCallback(
+    (entry: GitStatusEntry) => {
+      if (entry.staged) unstage.mutate({ relaPaths: [entry.relaPath] });
+      else add.mutate({ relaPaths: [entry.relaPath] });
+    },
+    [add.mutate, unstage.mutate],
+  );
+
+  const handleSelectChild = useCallback(
+    (entry: GitStatusEntry) => {
+      if (entry === selectedEntry) {
+        setSelectedEntry(null);
+      } else {
+        setSelectedEntry(entry);
+      }
+    },
+    [selectedEntry],
+  );
+
+  const handleDiscardChanges = useCallback(
+    async (entry: GitStatusEntry) => {
+      const confirmed = await showConfirm({
+        id: "git-restore-commit-entry",
+        title: "Discard Changes",
+        description: "Do you really want to discard uncommitted changes for the selected item?",
+        confirmText: "Discard",
+        color: "danger",
+      });
+      if (!confirmed) return;
+
+      await restore.mutateAsync({ relaPaths: [entry.relaPath] });
+      await sync({ force: true });
+      setSelectedEntry(null);
+    },
+    [restore],
+  );
+
+  if (tree == null || treeNode == null) {
+    return null;
+  }
+
+  if (!hasAnythingToAdd) {
+    return (
+      <div className="h-full px-6 pb-4">
+        <EmptyStateText>No changes since last commit</EmptyStateText>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full px-2 pb-4">
+      <SplitLayout
+        storageKey="commit-horizontal"
+        layout="horizontal"
+        defaultRatio={0.6}
+        firstSlot={({ style }) => (
+          <div style={style} className="h-full px-4 flex flex-col gap-3">
+            <CommercialUseBanner source="git-commit" title="Using Git for work?" />
+            <SplitLayout
+              className="min-h-0 flex-1"
+              storageKey="commit-vertical"
+              layout="vertical"
+              defaultRatio={0.35}
+              firstSlot={({ style: innerStyle }) => (
+                <div
+                  style={innerStyle}
+                  className="h-full overflow-y-auto pb-3 pr-0.5 transform-cpu"
+                >
+                  <CheckboxTree
+                    node={treeNode}
+                    checked={(n) => nodeCheckedStatus(n.data)}
+                    onCheck={(n) => checkNode(n.data)}
+                    checkboxTitle={(n) =>
+                      nodeCheckedStatus(n.data) ? "Unstage change" : "Stage change"
+                    }
+                    isRelevant={(n) => n.data.status.status !== "current"}
+                    canSelectRow={(n) => n.data.status.status !== "current"}
+                    onSelectRow={(n) => handleSelectChild(n.data.status)}
+                    isRowSelected={(n) => selectedEntry?.relaPath === n.data.status.relaPath}
+                    renderRow={(n) => <CommitTreeRow node={n.data} />}
+                  />
+                  {externalEntries.find((e) => e.status !== "current") && (
+                    <>
+                      <Separator className="mt-3 mb-1">Other files</Separator>
+                      {externalEntries.map((entry) => (
+                        <ExternalTreeNode
+                          key={entry.relaPath + entry.status}
+                          entry={entry}
+                          relaDir={status.data?.relaDir ?? ""}
+                          onCheck={checkEntry}
+                        />
+                      ))}
+                    </>
+                  )}
+                </div>
+              )}
+              secondSlot={({ style: innerStyle }) => (
+                <div style={innerStyle} className="grid grid-rows-[minmax(0,1fr)_auto] gap-3 pb-2">
+                  <Input
+                    className="text-base! font-sans rounded-md"
+                    placeholder="Commit message..."
+                    onChange={setMessage}
+                    stateKey={null}
+                    label="Commit message"
+                    fullHeight
+                    multiLine
+                    hideLabel
+                  />
+                  {commitError && <Banner color="danger">{commitError}</Banner>}
+                  <HStack alignItems="center" space={2}>
+                    <InlineCode>{status.data?.headRefShorthand}</InlineCode>
+                    <HStack space={2} className="ml-auto">
+                      <Button
+                        color="secondary"
+                        size="sm"
+                        onClick={handleCreateCommit}
+                        disabled={!hasAddedAnything || message.trim().length === 0}
+                        isLoading={isPushing}
+                      >
+                        Commit
+                      </Button>
+                      <Button
+                        color="primary"
+                        size="sm"
+                        disabled={!hasAddedAnything || message.trim().length === 0}
+                        onClick={handleCreateCommitAndPush}
+                        isLoading={isPushing}
+                      >
+                        Commit and Push
+                      </Button>
+                    </HStack>
+                  </HStack>
+                </div>
+              )}
+            />
+          </div>
+        )}
+        secondSlot={({ style }) => (
+          <div style={style} className="h-full px-4 border-l border-l-border-subtle">
+            {selectedEntry ? (
+              <DiffPanel entry={selectedEntry} onDiscardChanges={handleDiscardChanges} />
+            ) : (
+              <EmptyStateText>Select a change to view diff</EmptyStateText>
+            )}
+          </div>
+        )}
+      />
+    </div>
+  );
+}
+
+function CommitTreeRow({ node }: { node: CommitTreeNode }) {
+  return (
+    <>
+      {node.model.model !== "http_request" &&
+      node.model.model !== "grpc_request" &&
+      node.model.model !== "websocket_request" ? (
+        <Icon
+          color="secondary"
+          icon={
+            node.model.model === "folder"
+              ? "folder"
+              : node.model.model === "environment"
+                ? "variable"
+                : "house"
+          }
+        />
+      ) : (
+        <span aria-hidden className="w-4" />
+      )}
+      <div className="truncate flex-1">{resolvedModelName(node.model)}</div>
+      {node.status.status !== "current" && (
+        <InlineCode
+          className={classNames(
+            "py-0 bg-transparent w-24 text-center shrink-0",
+            node.status.status === "modified" && "text-info",
+            node.status.status === "untracked" && "text-success",
+            node.status.status === "removed" && "text-danger",
+          )}
+        >
+          {node.status.status}
+        </InlineCode>
+      )}
+    </>
+  );
+}
+
+function ExternalTreeNode({
+  entry,
+  relaDir,
+  onCheck,
+}: {
+  entry: GitStatusEntry;
+  relaDir: string;
+  onCheck: (entry: GitStatusEntry) => void;
+}) {
+  if (entry.status === "current") {
+    return null;
+  }
+
+  // Show paths relative to the sync directory when inside it
+  const displayPath = entry.relaPath.startsWith(`${relaDir}/`)
+    ? entry.relaPath.slice(relaDir.length + 1)
+    : entry.relaPath;
+
+  return (
+    <Checkbox
+      fullWidth
+      className="h-xs w-full hover:bg-surface-highlight rounded-sm px-1 group"
+      checked={entry.staged}
+      onChange={() => onCheck(entry)}
+      title={
+        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] gap-1 w-full items-center">
+          <Icon color="secondary" icon="file_code" />
+          <div className="truncate">{displayPath}</div>
+          <InlineCode
+            className={classNames(
+              "py-0 ml-auto bg-transparent w-24 text-center",
+              entry.status === "modified" && "text-info",
+              entry.status === "untracked" && "text-success",
+              entry.status === "removed" && "text-danger",
+            )}
+          >
+            {entry.status}
+          </InlineCode>
+        </div>
+      }
+    />
+  );
+}
+
+function nodeCheckedStatus(root: CommitTreeNode): CheckboxProps["checked"] {
+  let numVisited = 0;
+  let numChecked = 0;
+  let numCurrent = 0;
+
+  const visitChildren = (n: CommitTreeNode) => {
+    numVisited += 1;
+    if (n.status.status === "current") {
+      numCurrent += 1;
+    } else if (n.status.staged) {
+      numChecked += 1;
+    }
+    for (const child of n.children) {
+      visitChildren(child);
+    }
+  };
+
+  visitChildren(root);
+
+  if (numVisited === numChecked + numCurrent) {
+    return true;
+  }
+  if (numChecked === 0) {
+    return false;
+  }
+  return "indeterminate";
+}
+
+function setCheckedAndChildren(
+  node: CommitTreeNode,
+  checked: boolean,
+  unstage: (args: { relaPaths: string[] }) => void,
+  add: (args: { relaPaths: string[] }) => void,
+) {
+  const toAdd: string[] = [];
+  const toUnstage: string[] = [];
+
+  const next = (node: CommitTreeNode) => {
+    for (const child of node.children) {
+      next(child);
+    }
+
+    if (node.status.status === "current") {
+      // Nothing required
+    } else if (checked && !node.status.staged) {
+      toAdd.push(node.status.relaPath);
+    } else if (!checked && node.status.staged) {
+      toUnstage.push(node.status.relaPath);
+    }
+  };
+
+  next(node);
+
+  if (toAdd.length > 0) add({ relaPaths: toAdd });
+  if (toUnstage.length > 0) unstage({ relaPaths: toUnstage });
+}
+
+function DiffPanel({
+  entry,
+  onDiscardChanges,
+}: {
+  entry: GitStatusEntry;
+  onDiscardChanges: (entry: GitStatusEntry) => void | Promise<void>;
+}) {
+  const prevYaml = modelToYaml(entry.prev);
+  const nextYaml = modelToYaml(entry.next);
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="text-text-subtle mb-2 px-1 grid items-center gap-2 grid-cols-[minmax(0,1fr)_auto]">
+        <div className="min-w-0 truncate">
+          {resolvedModelName(entry.next ?? entry.prev)} ({entry.status})
+        </div>
+        <Button
+          className="ml-auto"
+          color="warning"
+          size="2xs"
+          variant="border"
+          onClick={() => onDiscardChanges(entry)}
+        >
+          Discard Changes
+        </Button>
+      </div>
+      <DiffViewer original={prevYaml ?? ""} modified={nextYaml ?? ""} className="flex-1 min-h-0" />
+    </div>
+  );
+}

apps/yaak-client/components/git/GitDropdown.tsx

@@ -0,0 +1,681 @@
+import { useGitBranchInfo, useGitMutations } from "@yaakapp-internal/git";
+import type { WorkspaceMeta } from "@yaakapp-internal/models";
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
+import { openWorkspaceSettings } from "../../commands/openWorkspaceSettings";
+import { activeWorkspaceAtom, activeWorkspaceMetaAtom } from "../../hooks/useActiveWorkspace";
+import { useKeyValue } from "../../hooks/useKeyValue";
+import { useRandomKey } from "../../hooks/useRandomKey";
+import { sync } from "../../init/sync";
+import { showConfirm, showConfirmDelete } from "../../lib/confirm";
+import { fireAndForget } from "../../lib/fireAndForget";
+import { showDialog } from "../../lib/dialog";
+import { gitWorktreeStatusAtom } from "../../lib/gitWorktreeStatus";
+import { showPrompt } from "../../lib/prompt";
+import { showErrorToast, showToast } from "../../lib/toast";
+import type { DropdownItem } from "../core/Dropdown";
+import { Dropdown } from "../core/Dropdown";
+import { Banner, Icon, InlineCode } from "@yaakapp-internal/ui";
+import { useGitCallbacks } from "./callbacks";
+import { GitCommitDialog } from "./GitCommitDialog";
+import { GitRemotesDialog } from "./GitRemotesDialog";
+import { handlePullResult, handlePushResult } from "./git-util";
+import { HistoryDialog } from "./HistoryDialog";
+
+const EMPTY_BRANCHES: string[] = [];
+
+export function GitDropdown() {
+  const workspaceMeta = useAtomValue(activeWorkspaceMetaAtom);
+  if (workspaceMeta == null) return null;
+
+  if (workspaceMeta.settingSyncDir == null) {
+    return <SetupSyncDropdown workspaceMeta={workspaceMeta} />;
+  }
+
+  return <SyncDropdownWithSyncDir syncDir={workspaceMeta.settingSyncDir} />;
+}
+
+function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
+  const workspace = useAtomValue(activeWorkspaceAtom);
+  const worktreeStatus = useAtomValue(gitWorktreeStatusAtom);
+  const [refreshKey, regenerateKey] = useRandomKey();
+  const branchInfo = useGitBranchInfo(syncDir, refreshKey);
+  const callbacks = useGitCallbacks(syncDir);
+  const {
+    createBranch,
+    deleteBranch,
+    deleteRemoteBranch,
+    renameBranch,
+    mergeBranch,
+    push,
+    pull,
+    checkout,
+    resetChanges,
+    init,
+  } = useGitMutations(syncDir, callbacks);
+
+  const localBranches = branchInfo.data?.localBranches ?? EMPTY_BRANCHES;
+  const remoteBranches = branchInfo.data?.remoteBranches ?? EMPTY_BRANCHES;
+  const remoteOnlyBranches = useMemo(
+    () => remoteBranches.filter((b) => !localBranches.includes(b.replace(/^origin\//, ""))),
+    [localBranches, remoteBranches],
+  );
+  const currentBranch = branchInfo.data?.headRefShorthand;
+  const hasChanges = worktreeStatus?.entries.some((e) => e.status !== "current") ?? false;
+  const ahead = branchInfo.data?.ahead ?? 0;
+  const behind = branchInfo.data?.behind ?? 0;
+  const initRepo = useCallback(() => {
+    init.mutate();
+  }, [init]);
+
+  const items: DropdownItem[] = useMemo(() => {
+    if (workspace == null || branchInfo.data == null) return [];
+
+    const tryCheckout = (branch: string, force: boolean) => {
+      checkout.mutate(
+        { branch, force },
+        {
+          disableToastError: true,
+          async onError(err) {
+            if (!force) {
+              // Checkout failed so ask user if they want to force it
+              const forceCheckout = await showConfirm({
+                id: "git-force-checkout",
+                title: "Conflicts Detected",
+                description:
+                  "Your branch has conflicts. Either make a commit or force checkout to discard changes.",
+                confirmText: "Force Checkout",
+                color: "warning",
+              });
+              if (forceCheckout) {
+                tryCheckout(branch, true);
+              }
+            } else {
+              // Checkout failed
+              showErrorToast({
+                id: "git-checkout-error",
+                title: "Error checking out branch",
+                message: String(err),
+              });
+            }
+          },
+          async onSuccess(branchName) {
+            showToast({
+              id: "git-checkout-success",
+              message: (
+                <>
+                  Switched branch <InlineCode>{branchName}</InlineCode>
+                </>
+              ),
+              color: "success",
+            });
+            await sync({ force: true });
+          },
+        },
+      );
+    };
+
+    return [
+      {
+        label: "View History...",
+        leftSlot: <Icon icon="history" />,
+        onSelect: async () => {
+          showDialog({
+            id: "git-history",
+            size: "md",
+            title: "Commit History",
+            noPadding: true,
+            render: () => <HistoryDialog dir={syncDir} />,
+          });
+        },
+      },
+      {
+        label: "Manage Remotes...",
+        leftSlot: <Icon icon="hard_drive_download" />,
+        onSelect: () => GitRemotesDialog.show(syncDir),
+      },
+      { type: "separator" },
+      {
+        label: "New Branch...",
+        leftSlot: <Icon icon="git_branch_plus" />,
+        async onSelect() {
+          const name = await showPrompt({
+            id: "git-branch-name",
+            title: "Create Branch",
+            label: "Branch Name",
+          });
+          if (!name) return;
+
+          await createBranch.mutateAsync(
+            { branch: name },
+            {
+              disableToastError: true,
+              onError: (err) => {
+                showErrorToast({
+                  id: "git-branch-error",
+                  title: "Error creating branch",
+                  message: String(err),
+                });
+              },
+            },
+          );
+          tryCheckout(name, false);
+        },
+      },
+      { type: "separator" },
+      {
+        label: "Push",
+        leftSlot: <Icon icon="arrow_up_from_line" />,
+        waitForOnSelect: true,
+        async onSelect() {
+          await push.mutateAsync(undefined, {
+            disableToastError: true,
+            onSuccess: handlePushResult,
+            onError(err) {
+              showErrorToast({
+                id: "git-push-error",
+                title: "Error pushing changes",
+                message: String(err),
+              });
+            },
+          });
+        },
+      },
+      {
+        label: "Pull",
+        leftSlot: <Icon icon="arrow_down_to_line" />,
+        waitForOnSelect: true,
+        async onSelect() {
+          await pull.mutateAsync(undefined, {
+            disableToastError: true,
+            onSuccess: handlePullResult,
+            onError(err) {
+              showErrorToast({
+                id: "git-pull-error",
+                title: "Error pulling changes",
+                message: String(err),
+              });
+            },
+          });
+        },
+      },
+      {
+        label: "Commit...",
+
+        leftSlot: <Icon icon="git_commit_vertical" />,
+        onSelect() {
+          showDialog({
+            id: "commit",
+            title: "Commit Changes",
+            size: "full",
+            noPadding: true,
+            render: ({ hide }) => (
+              <GitCommitDialog syncDir={syncDir} onDone={hide} workspace={workspace} />
+            ),
+          });
+        },
+      },
+      {
+        label: "Reset Changes",
+        hidden: !hasChanges,
+        leftSlot: <Icon icon="rotate_ccw" />,
+        color: "danger",
+        async onSelect() {
+          const confirmed = await showConfirm({
+            id: "git-reset-changes",
+            title: "Reset Changes",
+            description: "This will discard all uncommitted changes. This cannot be undone.",
+            confirmText: "Reset",
+            color: "danger",
+          });
+          if (!confirmed) return;
+
+          await resetChanges.mutateAsync(undefined, {
+            disableToastError: true,
+            onSuccess() {
+              showToast({
+                id: "git-reset-success",
+                message: "Changes have been reset",
+                color: "success",
+              });
+              fireAndForget(sync({ force: true }));
+            },
+            onError(err) {
+              showErrorToast({
+                id: "git-reset-error",
+                title: "Error resetting changes",
+                message: String(err),
+              });
+            },
+          });
+        },
+      },
+      { type: "separator", label: "Branches", hidden: localBranches.length < 1 },
+      ...localBranches.map((branch) => {
+        const isCurrent = currentBranch === branch;
+        return {
+          label: branch,
+          leftSlot: <Icon icon={isCurrent ? "check" : "empty"} />,
+          submenuOpenOnClick: true,
+          submenu: [
+            {
+              label: "Checkout",
+              hidden: isCurrent,
+              onSelect: () => tryCheckout(branch, false),
+            },
+            {
+              label: (
+                <>
+                  Merge into <InlineCode>{currentBranch}</InlineCode>
+                </>
+              ),
+              hidden: isCurrent,
+              async onSelect() {
+                await mergeBranch.mutateAsync(
+                  { branch },
+                  {
+                    disableToastError: true,
+                    onSuccess() {
+                      showToast({
+                        id: "git-merged-branch",
+                        message: (
+                          <>
+                            Merged <InlineCode>{branch}</InlineCode> into{" "}
+                            <InlineCode>{currentBranch}</InlineCode>
+                          </>
+                        ),
+                      });
+                      fireAndForget(sync({ force: true }));
+                    },
+                    onError(err) {
+                      showErrorToast({
+                        id: "git-merged-branch-error",
+                        title: "Error merging branch",
+                        message: String(err),
+                      });
+                    },
+                  },
+                );
+              },
+            },
+            {
+              label: "New Branch...",
+              async onSelect() {
+                const name = await showPrompt({
+                  id: "git-new-branch-from",
+                  title: "New Branch",
+                  description: (
+                    <>
+                      Create a new branch from <InlineCode>{branch}</InlineCode>
+                    </>
+                  ),
+                  label: "Branch Name",
+                });
+                if (!name) return;
+
+                await createBranch.mutateAsync(
+                  { branch: name, base: branch },
+                  {
+                    disableToastError: true,
+                    onError: (err) => {
+                      showErrorToast({
+                        id: "git-branch-error",
+                        title: "Error creating branch",
+                        message: String(err),
+                      });
+                    },
+                  },
+                );
+                tryCheckout(name, false);
+              },
+            },
+            {
+              label: "Rename...",
+              async onSelect() {
+                const newName = await showPrompt({
+                  id: "git-rename-branch",
+                  title: "Rename Branch",
+                  label: "New Branch Name",
+                  defaultValue: branch,
+                });
+                if (!newName || newName === branch) return;
+
+                await renameBranch.mutateAsync(
+                  { oldName: branch, newName },
+                  {
+                    disableToastError: true,
+                    onSuccess() {
+                      showToast({
+                        id: "git-rename-branch-success",
+                        message: (
+                          <>
+                            Renamed <InlineCode>{branch}</InlineCode> to{" "}
+                            <InlineCode>{newName}</InlineCode>
+                          </>
+                        ),
+                        color: "success",
+                      });
+                    },
+                    onError(err) {
+                      showErrorToast({
+                        id: "git-rename-branch-error",
+                        title: "Error renaming branch",
+                        message: String(err),
+                      });
+                    },
+                  },
+                );
+              },
+            },
+            { type: "separator", hidden: isCurrent },
+            {
+              label: "Delete",
+              color: "danger",
+              hidden: isCurrent,
+              onSelect: async () => {
+                const confirmed = await showConfirmDelete({
+                  id: "git-delete-branch",
+                  title: "Delete Branch",
+                  description: (
+                    <>
+                      Permanently delete <InlineCode>{branch}</InlineCode>?
+                    </>
+                  ),
+                });
+                if (!confirmed) {
+                  return;
+                }
+
+                const result = await deleteBranch.mutateAsync(
+                  { branch },
+                  {
+                    disableToastError: true,
+                    onError(err) {
+                      showErrorToast({
+                        id: "git-delete-branch-error",
+                        title: "Error deleting branch",
+                        message: String(err),
+                      });
+                    },
+                  },
+                );
+
+                if (result.type === "not_fully_merged") {
+                  const confirmed = await showConfirm({
+                    id: "force-branch-delete",
+                    title: "Branch not fully merged",
+                    description: (
+                      <>
+                        <p>
+                          Branch <InlineCode>{branch}</InlineCode> is not fully merged.
+                        </p>
+                        <p>Do you want to delete it anyway?</p>
+                      </>
+                    ),
+                  });
+                  if (confirmed) {
+                    await deleteBranch.mutateAsync(
+                      { branch, force: true },
+                      {
+                        disableToastError: true,
+                        onError(err) {
+                          showErrorToast({
+                            id: "git-force-delete-branch-error",
+                            title: "Error force deleting branch",
+                            message: String(err),
+                          });
+                        },
+                      },
+                    );
+                  }
+                }
+              },
+            },
+          ],
+        } satisfies DropdownItem;
+      }),
+      ...remoteOnlyBranches.map((branch) => {
+        const isCurrent = currentBranch === branch;
+        return {
+          label: branch,
+          leftSlot: <Icon icon={isCurrent ? "check" : "empty"} />,
+          submenuOpenOnClick: true,
+          submenu: [
+            {
+              label: "Checkout",
+              hidden: isCurrent,
+              onSelect: () => tryCheckout(branch, false),
+            },
+            {
+              label: "Delete",
+              color: "danger",
+              async onSelect() {
+                const confirmed = await showConfirmDelete({
+                  id: "git-delete-remote-branch",
+                  title: "Delete Remote Branch",
+                  description: (
+                    <>
+                      Permanently delete <InlineCode>{branch}</InlineCode> from the remote?
+                    </>
+                  ),
+                });
+                if (!confirmed) return;
+
+                await deleteRemoteBranch.mutateAsync(
+                  { branch },
+                  {
+                    disableToastError: true,
+                    onSuccess() {
+                      showToast({
+                        id: "git-delete-remote-branch-success",
+                        message: (
+                          <>
+                            Deleted remote branch <InlineCode>{branch}</InlineCode>
+                          </>
+                        ),
+                        color: "success",
+                      });
+                    },
+                    onError(err) {
+                      showErrorToast({
+                        id: "git-delete-remote-branch-error",
+                        title: "Error deleting remote branch",
+                        message: String(err),
+                      });
+                    },
+                  },
+                );
+              },
+            },
+          ],
+        } satisfies DropdownItem;
+      }),
+    ];
+  }, [
+    branchInfo.data,
+    checkout,
+    createBranch,
+    currentBranch,
+    deleteBranch,
+    deleteRemoteBranch,
+    hasChanges,
+    localBranches,
+    mergeBranch,
+    pull,
+    push,
+    remoteOnlyBranches,
+    renameBranch,
+    resetChanges,
+    syncDir,
+    workspace,
+  ]);
+
+  if (workspace == null) {
+    return null;
+  }
+
+  const noRepo = branchInfo.error?.includes("not found");
+  if (noRepo) {
+    return <SetupGitDropdown workspaceId={workspace.id} initRepo={initRepo} />;
+  }
+
+  // Still loading
+  if (branchInfo.data == null) {
+    return null;
+  }
+
+  return (
+    <Dropdown fullWidth items={items} onOpen={regenerateKey}>
+      <GitMenuButton>
+        <InlineCode className="flex items-center gap-1">
+          <Icon icon="git_branch" size="xs" className="opacity-50" />
+          {currentBranch}
+        </InlineCode>
+        <div className="flex items-center gap-1.5">
+          {ahead > 0 && (
+            <span className="text-xs flex items-center gap-0.5">
+              <span className="text-primary">↗</span>
+              {ahead}
+            </span>
+          )}
+          {behind > 0 && (
+            <span className="text-xs flex items-center gap-0.5">
+              <span className="text-info">↙</span>
+              {behind}
+            </span>
+          )}
+        </div>
+      </GitMenuButton>
+    </Dropdown>
+  );
+}
+
+const GitMenuButton = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
+  function GitMenuButton({ className, ...props }: HTMLAttributes<HTMLButtonElement>, ref) {
+    return (
+      <button
+        ref={ref}
+        className={classNames(
+          className,
+          "px-3 h-md border-t border-border flex items-center justify-between text-text-subtle outline-hidden focus-visible:bg-surface-highlight",
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+function SetupSyncDropdown({ workspaceMeta }: { workspaceMeta: WorkspaceMeta }) {
+  const { value: hidden, set: setHidden } = useKeyValue<Record<string, boolean>>({
+    key: "setup_sync",
+    fallback: {},
+  });
+
+  if (hidden == null || hidden[workspaceMeta.workspaceId]) {
+    return null;
+  }
+
+  const banner = (
+    <Banner color="info">
+      When enabled, workspace data syncs to the chosen folder as text files, ideal for backup and
+      Git collaboration.
+    </Banner>
+  );
+
+  return (
+    <Dropdown
+      fullWidth
+      items={[
+        {
+          type: "content",
+          label: banner,
+        },
+        {
+          color: "success",
+          label: "Open Workspace Settings",
+          leftSlot: <Icon icon="settings" />,
+          onSelect: () => openWorkspaceSettings("settings"),
+        },
+        { type: "separator" },
+        {
+          label: "Hide This Message",
+          leftSlot: <Icon icon="eye_closed" />,
+          async onSelect() {
+            const confirmed = await showConfirm({
+              id: "hide-sync-menu-prompt",
+              title: "Hide Setup Message",
+              description: "You can configure filesystem sync or Git it in the workspace settings",
+            });
+            if (confirmed) {
+              await setHidden((prev) => ({ ...prev, [workspaceMeta.workspaceId]: true }));
+            }
+          },
+        },
+      ]}
+    >
+      <GitMenuButton>
+        <div className="text-sm text-text-subtle grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
+          <Icon icon="wrench" />
+          <div className="truncate">Setup FS Sync or Git</div>
+        </div>
+      </GitMenuButton>
+    </Dropdown>
+  );
+}
+
+function SetupGitDropdown({
+  workspaceId,
+  initRepo,
+}: {
+  workspaceId: string;
+  initRepo: () => void;
+}) {
+  const { value: hidden, set: setHidden } = useKeyValue<Record<string, boolean>>({
+    key: "setup_git_repo",
+    fallback: {},
+  });
+
+  if (hidden == null || hidden[workspaceId]) {
+    return null;
+  }
+
+  const banner = <Banner color="info">Initialize local repo to start versioning with Git</Banner>;
+
+  return (
+    <Dropdown
+      fullWidth
+      items={[
+        { type: "content", label: banner },
+        {
+          label: "Initialize Git Repo",
+          leftSlot: <Icon icon="magic_wand" />,
+          onSelect: initRepo,
+        },
+        { type: "separator" },
+        {
+          label: "Hide This Message",
+          leftSlot: <Icon icon="eye_closed" />,
+          async onSelect() {
+            const confirmed = await showConfirm({
+              id: "hide-git-init-prompt",
+              title: "Hide Git Setup",
+              description: "You can initialize a git repo outside of Yaak to bring this back",
+            });
+            if (confirmed) {
+              await setHidden((prev) => ({ ...prev, [workspaceId]: true }));
+            }
+          },
+        },
+      ]}
+    >
+      <GitMenuButton>
+        <div className="text-sm text-text-subtle grid grid-cols-[auto_minmax(0,1fr)] items-center gap-2">
+          <Icon icon="folder_git" />
+          <div className="truncate">Setup Git</div>
+        </div>
+      </GitMenuButton>
+    </Dropdown>
+  );
+}

apps/yaak-client/components/git/GitRemotesDialog.tsx

@@ -0,0 +1,73 @@
+import { useGit } from "@yaakapp-internal/git";
+import { showDialog } from "../../lib/dialog";
+import { Button } from "../core/Button";
+import { IconButton } from "../core/IconButton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from "@yaakapp-internal/ui";
+import { useGitCallbacks } from "./callbacks";
+import { addGitRemote } from "./showAddRemoteDialog";
+
+interface Props {
+  dir: string;
+  onDone: () => void;
+}
+
+export function GitRemotesDialog({ dir }: Props) {
+  const callbacks = useGitCallbacks(dir);
+  const [{ remotes }, { rmRemote }] = useGit(dir, callbacks);
+
+  return (
+    <Table scrollable>
+      <TableHead>
+        <TableRow>
+          <TableHeaderCell>Name</TableHeaderCell>
+          <TableHeaderCell>URL</TableHeaderCell>
+          <TableHeaderCell>
+            <Button
+              className="text-text-subtle ml-auto"
+              size="2xs"
+              color="primary"
+              title="Add remote"
+              variant="border"
+              onClick={() => addGitRemote(dir)}
+            >
+              Add Remote
+            </Button>
+          </TableHeaderCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {remotes.data?.map((r) => (
+          <TableRow key={r.name + r.url}>
+            <TableCell>{r.name}</TableCell>
+            <TableCell>{r.url}</TableCell>
+            <TableCell>
+              <IconButton
+                size="sm"
+                className="text-text-subtle ml-auto"
+                icon="trash"
+                title="Remove remote"
+                onClick={() => rmRemote.mutate({ name: r.name })}
+              />
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
+
+GitRemotesDialog.show = (dir: string) => {
+  showDialog({
+    id: "git-remotes",
+    title: "Manage Remotes",
+    size: "md",
+    render: ({ hide }) => <GitRemotesDialog onDone={hide} dir={dir} />,
+  });
+};

apps/yaak-client/components/git/HistoryDialog.tsx

@@ -0,0 +1,44 @@
+import { useGitLog } from "@yaakapp-internal/git";
+import { formatDistanceToNowStrict } from "date-fns";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  TruncatedWideTableCell,
+} from "@yaakapp-internal/ui";
+
+export function HistoryDialog({ dir }: { dir: string }) {
+  const log = useGitLog(dir);
+
+  return (
+    <div className="pl-5 pr-1 pb-1">
+      <Table scrollable className="px-1">
+        <TableHead>
+          <TableRow>
+            <TableHeaderCell>Message</TableHeaderCell>
+            <TableHeaderCell>Author</TableHeaderCell>
+            <TableHeaderCell>When</TableHeaderCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {(log.data ?? []).map((l) => (
+            <TableRow key={l.oid}>
+              <TruncatedWideTableCell>
+                {l.message || <em className="text-text-subtle">No message</em>}
+              </TruncatedWideTableCell>
+              <TableCell>
+                <span title={`Email: ${l.author.email}`}>{l.author.name || "Unknown"}</span>
+              </TableCell>
+              <TableCell className="text-text-subtle">
+                <span title={l.when}>{formatDistanceToNowStrict(l.when)} ago</span>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

apps/yaak-client/components/git/callbacks.tsx

@@ -0,0 +1,31 @@
+import type { GitCallbacks } from "@yaakapp-internal/git";
+import { useMemo } from "react";
+import { sync } from "../../init/sync";
+import { promptCredentials } from "./credentials";
+import { promptDivergedStrategy } from "./diverged";
+import { addGitRemote } from "./showAddRemoteDialog";
+import { promptUncommittedChangesStrategy } from "./uncommitted";
+
+export function gitCallbacks(dir: string): GitCallbacks {
+  return {
+    addRemote: async () => {
+      return addGitRemote(dir, "origin");
+    },
+    promptCredentials: async ({ url, error }) => {
+      const creds = await promptCredentials({ url, error });
+      if (creds == null) throw new Error("Cancelled credentials prompt");
+      return creds;
+    },
+    promptDiverged: async ({ remote, branch }) => {
+      return promptDivergedStrategy({ remote, branch });
+    },
+    promptUncommittedChanges: async () => {
+      return promptUncommittedChangesStrategy();
+    },
+    forceSync: () => sync({ force: true }),
+  };
+}
+
+export function useGitCallbacks(dir: string): GitCallbacks {
+  return useMemo(() => gitCallbacks(dir), [dir]);
+}

apps/yaak-client/components/git/credentials.tsx

@@ -0,0 +1,49 @@
+import { showPromptForm } from "../../lib/prompt-form";
+import { Banner, InlineCode } from "@yaakapp-internal/ui";
+
+export interface GitCredentials {
+  username: string;
+  password: string;
+}
+
+export async function promptCredentials({
+  url: remoteUrl,
+  error,
+}: {
+  url: string;
+  error: string | null;
+}): Promise<GitCredentials | null> {
+  const isGitHub = /github\.com/i.test(remoteUrl);
+  const userLabel = isGitHub ? "GitHub Username" : "Username";
+  const passLabel = isGitHub ? "GitHub Personal Access Token" : "Password / Token";
+  const userDescription = isGitHub ? "Use your GitHub username (not your email)." : undefined;
+  const passDescription = isGitHub
+    ? "GitHub requires a Personal Access Token (PAT) for write operations over HTTPS. Passwords are not supported."
+    : "Enter your password or access token for this Git server.";
+  const r = await showPromptForm({
+    id: "git-credentials",
+    title: "Credentials Required",
+    description: error ? (
+      <Banner color="danger">{error}</Banner>
+    ) : (
+      <>
+        Enter credentials for <InlineCode>{remoteUrl}</InlineCode>
+      </>
+    ),
+    inputs: [
+      { type: "text", name: "username", label: userLabel, description: userDescription },
+      {
+        type: "text",
+        name: "password",
+        label: passLabel,
+        description: passDescription,
+        password: true,
+      },
+    ],
+  });
+  if (r == null) return null;
+
+  const username = String(r.username || "");
+  const password = String(r.password || "");
+  return { username, password };
+}

apps/yaak-client/components/git/diverged.tsx

@@ -0,0 +1,100 @@
+import type { DivergedStrategy } from "@yaakapp-internal/git";
+import { HStack, InlineCode } from "@yaakapp-internal/ui";
+import { useState } from "react";
+import { showDialog } from "../../lib/dialog";
+import { Button } from "../core/Button";
+import { RadioCards } from "../core/RadioCards";
+
+type Resolution = "force_reset" | "merge";
+
+const resolutionLabel: Record<Resolution, string> = {
+  force_reset: "Force Pull",
+  merge: "Merge",
+};
+
+interface DivergedDialogProps {
+  remote: string;
+  branch: string;
+  onResult: (strategy: DivergedStrategy) => void;
+  onHide: () => void;
+}
+
+function DivergedDialog({ remote, branch, onResult, onHide }: DivergedDialogProps) {
+  const [selected, setSelected] = useState<Resolution | null>(null);
+
+  const handleSubmit = () => {
+    if (selected == null) return;
+    onResult(selected);
+    onHide();
+  };
+
+  const handleCancel = () => {
+    onResult("cancel");
+    onHide();
+  };
+
+  return (
+    <div className="flex flex-col gap-4 mb-4">
+      <p className="text-text-subtle">
+        Your local branch has diverged from{" "}
+        <InlineCode>
+          {remote}/{branch}
+        </InlineCode>
+        . How would you like to resolve this?
+      </p>
+      <RadioCards
+        name="diverged-strategy"
+        value={selected}
+        onChange={setSelected}
+        options={[
+          {
+            value: "merge",
+            label: "Merge Commit",
+            description: "Combining local and remote changes into a single merge commit",
+          },
+          {
+            value: "force_reset",
+            label: "Force Pull",
+            description: "Discard local commits and reset to match the remote branch",
+          },
+        ]}
+      />
+      <HStack space={2} justifyContent="start" className="flex-row-reverse">
+        <Button
+          color={selected === "force_reset" ? "danger" : "primary"}
+          disabled={selected == null}
+          onClick={handleSubmit}
+        >
+          {selected != null ? resolutionLabel[selected] : "Select an option"}
+        </Button>
+        <Button variant="border" onClick={handleCancel}>
+          Cancel
+        </Button>
+      </HStack>
+    </div>
+  );
+}
+
+export async function promptDivergedStrategy({
+  remote,
+  branch,
+}: {
+  remote: string;
+  branch: string;
+}): Promise<DivergedStrategy> {
+  return new Promise((resolve) => {
+    showDialog({
+      id: "git-diverged",
+      title: "Branches Diverged",
+      size: "sm",
+      disableClose: true,
+      render: ({ hide }) =>
+        DivergedDialog({
+          remote,
+          branch,
+          onHide: hide,
+          onResult: resolve,
+        }),
+    });
+  });
+}

apps/yaak-client/components/git/git-util.ts

@@ -0,0 +1,36 @@
+import type { PullResult, PushResult } from "@yaakapp-internal/git";
+import { showToast } from "../../lib/toast";
+
+export function handlePushResult(r: PushResult) {
+  switch (r.type) {
+    case "needs_credentials":
+      showToast({ id: "push-error", message: "Credentials not found", color: "danger" });
+      break;
+    case "success":
+      showToast({ id: "push-success", message: r.message, color: "success" });
+      break;
+    case "up_to_date":
+      showToast({ id: "push-nothing", message: "Already up-to-date", color: "info" });
+      break;
+  }
+}
+
+export function handlePullResult(r: PullResult) {
+  switch (r.type) {
+    case "needs_credentials":
+      showToast({ id: "pull-error", message: "Credentials not found", color: "danger" });
+      break;
+    case "success":
+      showToast({ id: "pull-success", message: r.message, color: "success" });
+      break;
+    case "up_to_date":
+      showToast({ id: "pull-nothing", message: "Already up-to-date", color: "info" });
+      break;
+    case "diverged":
+      // Handled by mutation callback before reaching here
+      break;
+    case "uncommitted_changes":
+      // Handled by mutation callback before reaching here
+      break;
+  }
+}

apps/yaak-client/components/git/showAddRemoteDialog.tsx

@@ -0,0 +1,20 @@
+import type { GitRemote } from "@yaakapp-internal/git";
+import { gitMutations } from "@yaakapp-internal/git";
+import { showPromptForm } from "../../lib/prompt-form";
+import { gitCallbacks } from "./callbacks";
+
+export async function addGitRemote(dir: string, defaultName?: string): Promise<GitRemote> {
+  const r = await showPromptForm({
+    id: "add-remote",
+    title: "Add Remote",
+    inputs: [
+      { type: "text", label: "Name", name: "name", defaultValue: defaultName },
+      { type: "text", label: "URL", name: "url", placeholder: "git@github.com:org/repo.git" },
+    ],
+  });
+  if (r == null) throw new Error("Cancelled remote prompt");
+
+  const name = String(r.name ?? "");
+  const url = String(r.url ?? "");
+  return gitMutations(dir, gitCallbacks(dir)).addRemote.mutateAsync({ name, url });
+}

apps/yaak-client/components/git/uncommitted.tsx

@@ -0,0 +1,13 @@
+import type { UncommittedChangesStrategy } from "@yaakapp-internal/git";
+import { showConfirm } from "../../lib/confirm";
+
+export async function promptUncommittedChangesStrategy(): Promise<UncommittedChangesStrategy> {
+  const confirmed = await showConfirm({
+    id: "git-uncommitted-changes",
+    title: "Uncommitted Changes",
+    description: "You have uncommitted changes. Commit or reset your changes before pulling.",
+    confirmText: "Reset and Pull",
+    color: "danger",
+  });
+  return confirmed ? "reset" : "cancel";
+}