"use client"; import { GitBranchIcon, ReloadIcon } from "@/ui/icons";import { Input, Button } from "@/ui";import type { GitAction, GitRef, GitState } from "@/features/agent/contracts";import { gitDiffHeaderTitle } from "@/features/agent/ui/git-diff-panel-model"; export function GitPanelHeader({  cwd,  loading,  payload,  onReload,}: {  cwd: string | null;  loading: boolean;  payload: Partial<GitState> | null;  onReload: () => Promise<void>;}) {  return (    <div className="flex h-9 shrink-0 items-center gap-2 border-b border-(--border)/80 bg-(--color-header) px-3 text-xs">      <GitBranchIcon className="h-3.5 w-3.5 text-(--dim)" />      <span className="min-w-0 flex-1 truncate text-(--fg)" title={cwd ?? ""}>        {gitDiffHeaderTitle(payload, cwd)}      </span>      <button        type="button"        onClick={() => void onReload()}        disabled={loading || !cwd}        className="rounded-md p-1 text-(--dim) hover:bg-(--hover) hover:text-(--fg) disabled:opacity-40"        title="Refresh git state"      >        <ReloadIcon className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />      </button>    </div>  );} export function GitWorkflowBar({  payload,  loading,  draftBranch,  commitMessage,  onDraftBranch,  onCommitMessage,  onRun,}: {  payload: (Partial<GitState> & { error?: string }) | null;  loading: boolean;  draftBranch: string;  commitMessage: string;  onDraftBranch: (value: string) => void;  onCommitMessage: (value: string) => void;  onRun: (action: GitAction) => Promise<void>;}) {  if (!payload?.isRepo) return null;  const dirty = (payload.status?.length ?? 0) > 0;  return (    <div className="grid gap-2 border-b border-(--border)/80 bg-(--color-panel) p-2 text-[length:var(--fs-sm)] text-(--dim)">      <div className="flex flex-wrap items-center gap-2">        <RefSelect          refs={payload.refs ?? []}          branch={payload.branch}          loading={loading}          onRun={onRun}        />        <Input          value={draftBranch}          onChange={(event) => onDraftBranch(event.target.value)}          placeholder="new branch"          className="h-7 min-w-0 flex-1 rounded-md border border-(--border)/80 bg-(--color-input) px-2 text-(--fg) outline-none focus:border-(--border-hover)"        />        <Button          variant="secondary"          size="sm"          disabled={loading || !draftBranch.trim()}          onClick={() => void onRun({ action: "createBranch", branch: draftBranch.trim() })}        >          Branch        </Button>        <Button          variant="secondary"          size="sm"          disabled={loading || !payload.branch}          onClick={() => void onRun({ action: "push" })}        >          Push        </Button>        {payload.prUrl ? (          <a            className="h-7 rounded-md border border-(--border)/80 px-2 leading-7 text-(--fg) hover:bg-(--hover)"            href={payload.prUrl}            target="_blank"          >            PR          </a>        ) : null}      </div>      <div className="flex flex-wrap items-center gap-2">        <Input          value={commitMessage}          onChange={(event) => onCommitMessage(event.target.value)}          placeholder={dirty ? "commit message" : "working tree clean"}          disabled={!dirty}          className="h-7 min-w-0 flex-1 rounded-md border border-(--border)/80 bg-(--color-input) px-2 text-(--fg) outline-none disabled:opacity-45 focus:border-(--border-hover)"        />        <Button          variant="secondary"          size="sm"          disabled={loading || !dirty || !commitMessage.trim()}          onClick={() => void onRun({ action: "commit", message: commitMessage.trim(), paths: [] })}          title="Stage all current changes and commit"        >          Commit all        </Button>        <span className="font-mono">          <span className="text-emerald-400">+{payload.additions ?? 0}</span>{" "}          <span className="text-red-400">-{payload.deletions ?? 0}</span>{" "}          {payload.status?.length ?? 0} files        </span>      </div>    </div>  );} function RefSelect({  refs,  branch,  loading,  onRun,}: {  refs: GitRef[];  branch?: string | null;  loading: boolean;  onRun: (action: GitAction) => Promise<void>;}) {  return (    <select      value={branch ?? ""}      disabled={loading || refs.length === 0}      onChange={(event) =>        event.currentTarget.value &&        void onRun({ action: "checkout", ref: event.currentTarget.value })      }      className="h-7 min-w-[9rem] rounded-md border border-(--border)/80 bg-(--color-input) px-2 text-(--fg)"      title="Switch branch"    >      <option value="">{branch ?? "detached"}</option>      {refs.map((ref) => (        <option key={ref.name} value={ref.name}>          {ref.remote ? "remote/" : ""}          {ref.name}        </option>      ))}    </select>  );}