@assistkick/create 1.10.0 → 1.12.0

package/templates/assistkick-product-system/packages/frontend/src/components/UnifiedGitWidget.tsx

@@ -0,0 +1,722 @@
+/**
+ * UnifiedGitWidget — replaces BranchSwitcher with a full JetBrains-style git widget.
+ * Shows current branch + pull/push buttons with ahead/behind counts.
+ * Dropdown includes: branches, remotes, remote connection, and auth settings.
+ */
+
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import {
+  ChevronDown, GitBranch, Plus, Globe, ArrowDown, ArrowUp,
+  RefreshCw, Link, Key, Settings, Unlink, Trash2,
+} from 'lucide-react';
+import { apiClient } from '../api/client';
+import { useProjectStore, type Project } from '../stores/useProjectStore';
+
+type WidgetTab = 'branches' | 'remotes' | 'auth';
+
+interface UnifiedGitWidgetProps {
+  projectId: string;
+  onBranchSwitch: () => void;
+  onDirtyCheckout: (branch: string) => void;
+}
+
+export const UnifiedGitWidget = ({ projectId, onBranchSwitch, onDirtyCheckout }: UnifiedGitWidgetProps) => {
+  const [current, setCurrent] = useState('');
+  const [localBranches, setLocalBranches] = useState<string[]>([]);
+  const [remoteBranches, setRemoteBranches] = useState<string[]>([]);
+  const [open, setOpen] = useState(false);
+  const [tab, setTab] = useState<WidgetTab>('branches');
+  const [creating, setCreating] = useState(false);
+  const [newBranchName, setNewBranchName] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [ahead, setAhead] = useState(0);
+  const [behind, setBehind] = useState(0);
+  const [hasRemote, setHasRemote] = useState(false);
+  const [pulling, setPulling] = useState(false);
+  const [pushing, setPushing] = useState(false);
+  const [fetching, setFetching] = useState(false);
+
+  // Remote connection state
+  const [remoteUrl, setRemoteUrl] = useState('');
+  const [remotes, setRemotes] = useState<Array<{ name: string; url: string }>>([]);
+
+  // Auth state
+  const [gitStatus, setGitStatus] = useState<any>(null);
+  const [sshPublicKey, setSshPublicKey] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [sshCloneUrl, setSshCloneUrl] = useState('');
+
+  // Pull confirmation dialog
+  const [showPullConfirm, setShowPullConfirm] = useState(false);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const refetchProjects = useProjectStore((s) => s.refetchProjects);
+
+  const loadBranches = useCallback(async () => {
+    try {
+      const data = await apiClient.fetchGitBranches(projectId);
+      setCurrent(data.current);
+      setLocalBranches(data.local);
+      setRemoteBranches(data.remote);
+    } catch {
+      setCurrent('');
+    }
+  }, [projectId]);
+
+  const loadAheadBehind = useCallback(async () => {
+    try {
+      const data = await apiClient.getAheadBehind(projectId);
+      setAhead(data.ahead);
+      setBehind(data.behind);
+    } catch {
+      setAhead(0);
+      setBehind(0);
+    }
+  }, [projectId]);
+
+  const loadRemotes = useCallback(async () => {
+    try {
+      const data = await apiClient.listGitRemotes(projectId);
+      setRemotes(data.remotes || []);
+      setHasRemote((data.remotes || []).length > 0);
+    } catch {
+      setRemotes([]);
+      setHasRemote(false);
+    }
+  }, [projectId]);
+
+  const loadStatus = useCallback(async () => {
+    try {
+      const data = await apiClient.getGitStatus(projectId);
+      setGitStatus(data);
+      if (data.sshPublicKey) setSshPublicKey(data.sshPublicKey);
+    } catch {
+      // ignore
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    loadBranches();
+    loadRemotes();
+    loadAheadBehind();
+  }, [loadBranches, loadRemotes, loadAheadBehind]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setCreating(false);
+        setError(null);
+        setSuccess(null);
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  // Focus new branch input when entering create mode
+  useEffect(() => {
+    if (creating) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [creating]);
+
+  const handleToggle = useCallback(() => {
+    setOpen(prev => !prev);
+    setCreating(false);
+    setError(null);
+    setSuccess(null);
+  }, []);
+
+  const handleSelectBranch = useCallback(async (branch: string) => {
+    if (branch === current) {
+      setOpen(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      await apiClient.checkoutBranch(projectId, branch);
+      await loadBranches();
+      await loadAheadBehind();
+      setOpen(false);
+      onBranchSwitch();
+    } catch (err: any) {
+      if (err.dirty) {
+        setOpen(false);
+        onDirtyCheckout(branch);
+      } else {
+        setError(err.message);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, current, loadBranches, loadAheadBehind, onBranchSwitch, onDirtyCheckout]);
+
+  const handleCreateBranch = useCallback(async (e: React.FormEvent) => {
+    e.preventDefault();
+    const name = newBranchName.trim();
+    if (!name) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await apiClient.createGitBranch(projectId, name);
+      await loadBranches();
+      setNewBranchName('');
+      setCreating(false);
+      setOpen(false);
+      onBranchSwitch();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, newBranchName, loadBranches, onBranchSwitch]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      if (creating) {
+        setCreating(false);
+        setNewBranchName('');
+      } else {
+        setOpen(false);
+      }
+      setError(null);
+      setSuccess(null);
+    }
+  }, [creating]);
+
+  const handleDeleteBranch = useCallback(async (branch: string) => {
+    if (branch === current) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await apiClient.deleteGitBranch(projectId, branch);
+      await loadBranches();
+      setSuccess(`Deleted branch "${branch}"`);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, current, loadBranches]);
+
+  // Pull/Push/Fetch handlers
+  const handleFetch = useCallback(async () => {
+    setFetching(true);
+    setError(null);
+    try {
+      const data = await apiClient.gitFetch(projectId);
+      setAhead(data.ahead);
+      setBehind(data.behind);
+      await loadBranches();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setFetching(false);
+    }
+  }, [projectId, loadBranches]);
+
+  const handlePull = useCallback(async () => {
+    setError(null);
+    try {
+      // Check if local workspace has files beyond the initial empty commit
+      const { onlyInitialCommit } = await apiClient.getInitialCommitStatus(projectId);
+      if (!onlyInitialCommit) {
+        // Show confirmation dialog — pulling may overwrite local files
+        setShowPullConfirm(true);
+        return;
+      }
+      // Safe to pull directly (only initial commit exists)
+      setPulling(true);
+      const data = await apiClient.gitPull(projectId);
+      setAhead(data.ahead);
+      setBehind(data.behind);
+      await loadBranches();
+      onBranchSwitch();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setPulling(false);
+    }
+  }, [projectId, loadBranches, onBranchSwitch]);
+
+  const handlePullConfirmed = useCallback(async () => {
+    setShowPullConfirm(false);
+    setPulling(true);
+    setError(null);
+    try {
+      const data = await apiClient.gitPull(projectId, true);
+      setAhead(data.ahead);
+      setBehind(data.behind);
+      await loadBranches();
+      onBranchSwitch();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setPulling(false);
+    }
+  }, [projectId, loadBranches, onBranchSwitch]);
+
+  const handlePush = useCallback(async () => {
+    setPushing(true);
+    setError(null);
+    try {
+      const data = await apiClient.gitPush(projectId);
+      setAhead(data.ahead);
+      setBehind(data.behind);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setPushing(false);
+    }
+  }, [projectId]);
+
+  // Remote connection handler
+  const handleAddRemote = useCallback(async () => {
+    const url = remoteUrl.trim();
+    if (!url) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await apiClient.addGitRemote(projectId, url);
+      setRemoteUrl('');
+      await loadRemotes();
+      await refetchProjects();
+      setSuccess('Remote added successfully');
+
+      // Fetch after adding remote
+      const fetchData = await apiClient.gitFetch(projectId);
+      setAhead(fetchData.ahead);
+      setBehind(fetchData.behind);
+      await loadBranches();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, remoteUrl, loadRemotes, loadBranches, refetchProjects]);
+
+  // SSH key management
+  const handleGenerateSshKey = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    setCopied(false);
+    try {
+      const data = await apiClient.generateSshKey(projectId);
+      setSshPublicKey(data.publicKey);
+      setSuccess(sshPublicKey ? 'SSH keypair regenerated' : 'SSH keypair generated');
+      await refetchProjects();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, sshPublicKey, refetchProjects]);
+
+  const handleCopyPublicKey = useCallback(async () => {
+    if (!sshPublicKey) return;
+    try {
+      await navigator.clipboard.writeText(sshPublicKey);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      setError('Failed to copy to clipboard');
+    }
+  }, [sshPublicKey]);
+
+  const handleConnectSsh = useCallback(async () => {
+    const url = sshCloneUrl.trim();
+    if (!url) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await apiClient.connectSshRepo(projectId, url);
+      setSuccess('Repository connected via SSH');
+      setSshCloneUrl('');
+      await refetchProjects();
+      await loadRemotes();
+      await loadStatus();
+      await loadBranches();
+      await loadAheadBehind();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, sshCloneUrl, refetchProjects, loadRemotes, loadStatus, loadBranches, loadAheadBehind]);
+
+  const handleDisconnect = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await apiClient.disconnectGitRepo(projectId);
+      setSuccess('Repository disconnected');
+      setSshPublicKey(null);
+      setHasRemote(false);
+      setRemotes([]);
+      setAhead(0);
+      setBehind(0);
+      await refetchProjects();
+      await loadStatus();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, refetchProjects, loadStatus]);
+
+  // Don't render if no git workspace
+  if (!current) return null;
+
+  // Filter out remote branches that already have a local equivalent
+  const filteredRemote = remoteBranches.filter(rb => {
+    const localName = rb.replace(/^[^/]+\//, '');
+    return !localBranches.includes(localName);
+  });
+
+  const tabCls = (active: boolean) =>
+    `bg-none border-none cursor-pointer font-mono text-[10px] px-2 py-1.5 border-b-2 ${
+      active ? 'text-accent border-b-accent' : 'text-content-secondary border-b-transparent hover:text-content'
+    }`;
+
+  return (
+    <div className="relative px-2 py-1.5 border-b border-edge" ref={dropdownRef} onKeyDown={handleKeyDown}>
+      {/* Main bar: branch button + action buttons */}
+      <div className="flex items-center gap-1">
+        {/* Branch dropdown trigger */}
+        <button
+          className="flex items-center gap-1.5 flex-1 min-w-0 py-1 px-2 border border-edge rounded bg-surface text-content font-mono text-xs cursor-pointer hover:border-content-muted"
+          onClick={handleToggle}
+          disabled={loading}
+        >
+          <GitBranch size={13} className="shrink-0 text-accent" />
+          <span className="flex-1 text-left overflow-hidden text-ellipsis whitespace-nowrap">{current}</span>
+          <ChevronDown size={12} className={`shrink-0 transition-transform duration-150 ${open ? 'rotate-180' : ''}`} />
+        </button>
+
+        {/* Pull/Push/Fetch action buttons — only when remote is connected */}
+        {hasRemote && (
+          <div className="flex items-center gap-0.5">
+            <button
+              className="flex items-center gap-0.5 p-1 border-none bg-transparent text-content-secondary cursor-pointer rounded hover:bg-tab-hover hover:text-content disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={handleFetch}
+              disabled={fetching}
+              title="Fetch"
+            >
+              <RefreshCw size={12} className={fetching ? 'animate-spin' : ''} />
+            </button>
+            <button
+              className="flex items-center gap-0.5 p-1 border-none bg-transparent text-content-secondary cursor-pointer rounded hover:bg-tab-hover hover:text-content disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={handlePull}
+              disabled={pulling}
+              title={`Pull${behind > 0 ? ` (${behind} behind)` : ''}`}
+            >
+              <ArrowDown size={12} />
+              {behind > 0 && <span className="text-[10px] font-mono text-accent">{behind}</span>}
+            </button>
+            <button
+              className="flex items-center gap-0.5 p-1 border-none bg-transparent text-content-secondary cursor-pointer rounded hover:bg-tab-hover hover:text-content disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={handlePush}
+              disabled={pushing}
+              title={`Push${ahead > 0 ? ` (${ahead} ahead)` : ''}`}
+            >
+              <ArrowUp size={12} />
+              {ahead > 0 && <span className="text-[10px] font-mono text-accent">{ahead}</span>}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Dropdown panel */}
+      {open && (
+        <div className="absolute top-full left-2 right-2 z-100 max-h-[400px] overflow-y-auto bg-surface-alt border border-edge rounded shadow-lg">
+          {/* Tab bar */}
+          <div className="flex border-b border-edge px-1">
+            <button className={tabCls(tab === 'branches')} onClick={() => { setTab('branches'); setError(null); setSuccess(null); }}>
+              Branches
+            </button>
+            <button className={tabCls(tab === 'remotes')} onClick={() => { setTab('remotes'); setError(null); setSuccess(null); loadRemotes(); }}>
+              Remotes
+            </button>
+            <button className={tabCls(tab === 'auth')} onClick={() => { setTab('auth'); setError(null); setSuccess(null); loadStatus(); }}>
+              Auth
+            </button>
+          </div>
+
+          {error && (
+            <div className="px-2.5 py-1.5 text-[11px] text-error bg-[rgba(255,107,107,0.08)] border-b border-edge">{error}</div>
+          )}
+          {success && (
+            <div className="px-2.5 py-1.5 text-[11px] text-[#69db7c] bg-[rgba(105,219,124,0.08)] border-b border-edge">{success}</div>
+          )}
+
+          {/* Branches tab */}
+          {tab === 'branches' && (
+            <div className="py-1">
+              {/* Local branches */}
+              {localBranches.length > 0 && (
+                <div>
+                  <div className="px-2.5 pt-1.5 pb-0.5 text-[10px] uppercase tracking-wide text-content-muted">Local</div>
+                  {localBranches.map(branch => (
+                    <div key={branch} className="group flex items-center hover:bg-tab-hover">
+                      <button
+                        className={`flex items-center gap-1.5 flex-1 min-w-0 py-1 px-2.5 border-none bg-transparent text-content-secondary font-mono text-xs cursor-pointer text-left hover:text-content ${branch === current ? 'text-accent font-semibold' : ''}`}
+                        onClick={() => handleSelectBranch(branch)}
+                        disabled={loading}
+                      >
+                        <GitBranch size={12} className="shrink-0" />
+                        <span className="truncate">{branch}</span>
+                      </button>
+                      {branch !== current && (
+                        <button
+                          className="p-1 mr-1 border-none bg-transparent text-content-muted cursor-pointer rounded opacity-0 group-hover:opacity-100 transition-opacity hover:text-error"
+                          onClick={(e) => { e.stopPropagation(); handleDeleteBranch(branch); }}
+                          disabled={loading}
+                          title={`Delete branch "${branch}"`}
+                        >
+                          <Trash2 size={11} />
+                        </button>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Remote branches */}
+              {filteredRemote.length > 0 && (
+                <div>
+                  <div className="px-2.5 pt-1.5 pb-0.5 text-[10px] uppercase tracking-wide text-content-muted">Remote</div>
+                  {filteredRemote.map(branch => (
+                    <button
+                      key={branch}
+                      className="flex items-center gap-1.5 w-full py-1 px-2.5 border-none bg-transparent text-content-muted font-mono text-xs cursor-pointer text-left hover:bg-tab-hover hover:text-content"
+                      onClick={() => handleSelectBranch(branch)}
+                      disabled={loading}
+                    >
+                      <Globe size={12} className="shrink-0" />
+                      <span>{branch}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+
+              {/* Separator */}
+              <div className="h-px my-1 bg-edge" />
+
+              {/* Create new branch */}
+              {creating ? (
+                <form className="px-2 py-1" onSubmit={handleCreateBranch}>
+                  <input
+                    ref={inputRef}
+                    className="w-full py-1 px-1.5 border border-accent rounded-sm bg-surface text-content font-mono text-xs outline-none"
+                    value={newBranchName}
+                    onChange={e => setNewBranchName(e.target.value)}
+                    placeholder="Branch name..."
+                    disabled={loading}
+                  />
+                </form>
+              ) : (
+                <button
+                  className="flex items-center gap-1.5 w-full py-1 px-2.5 border-none bg-transparent text-accent font-mono text-xs cursor-pointer text-left hover:bg-tab-hover"
+                  onClick={() => setCreating(true)}
+                  disabled={loading}
+                >
+                  <Plus size={12} className="shrink-0" />
+                  <span>New branch...</span>
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Remotes tab */}
+          {tab === 'remotes' && (
+            <div className="px-2.5 py-2">
+              {remotes.length > 0 ? (
+                <div className="mb-2">
+                  {remotes.map(r => (
+                    <div key={r.name} className="flex items-center gap-1.5 py-1 border-b border-edge last:border-0">
+                      <Globe size={12} className="shrink-0 text-accent" />
+                      <span className="text-xs font-mono text-content font-semibold">{r.name}</span>
+                      <span className="text-[11px] font-mono text-content-secondary truncate flex-1">{r.url}</span>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-content-muted text-xs mb-2">No remotes configured.</p>
+              )}
+
+              <div className="border-t border-edge pt-2">
+                <label className="block text-content-secondary text-[10px] uppercase tracking-wider mb-1">
+                  {remotes.length > 0 ? 'Add another remote' : 'Add remote origin'}
+                </label>
+                <div className="flex gap-1">
+                  <input
+                    className="flex-1 py-1 px-1.5 border border-edge rounded-sm bg-surface text-content font-mono text-xs outline-none focus:border-accent"
+                    type="text"
+                    placeholder="https://github.com/org/repo.git"
+                    value={remoteUrl}
+                    onChange={e => setRemoteUrl(e.target.value)}
+                    onKeyDown={e => { if (e.key === 'Enter') handleAddRemote(); }}
+                    disabled={loading}
+                  />
+                  <button
+                    className="px-2 py-1 bg-accent text-white border-none rounded-sm text-[11px] cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90"
+                    onClick={handleAddRemote}
+                    disabled={loading || !remoteUrl.trim()}
+                  >
+                    <Link size={12} />
+                  </button>
+                </div>
+              </div>
+
+              {hasRemote && (
+                <button
+                  className="flex items-center gap-1 mt-2 px-0 py-1 bg-transparent border-none text-error text-[11px] cursor-pointer hover:underline"
+                  onClick={handleDisconnect}
+                  disabled={loading}
+                >
+                  <Unlink size={11} />
+                  Disconnect
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Auth tab */}
+          {tab === 'auth' && (
+            <div className="px-2.5 py-2">
+              {/* Current auth method */}
+              <div className="flex justify-between py-1 mb-2 border-b border-edge">
+                <span className="text-content-secondary text-[11px]">Auth Method:</span>
+                <span className="text-[11px] text-content">
+                  {gitStatus?.gitAuthMethod === 'ssh_key' ? 'SSH Key' : gitStatus?.gitAuthMethod === 'github_app' ? 'GitHub App' : 'None'}
+                </span>
+              </div>
+
+              {/* SSH Key section */}
+              <div className="mb-2">
+                <div className="flex items-center gap-1 mb-1">
+                  <Key size={11} className="text-content-secondary" />
+                  <span className="text-[10px] uppercase tracking-wider text-content-secondary font-medium">SSH Deploy Key</span>
+                </div>
+
+                {!sshPublicKey ? (
+                  <button
+                    className="px-2 py-1 bg-accent text-white border-none rounded-sm text-[11px] cursor-pointer disabled:opacity-50 hover:opacity-90"
+                    onClick={handleGenerateSshKey}
+                    disabled={loading}
+                  >
+                    {loading ? 'Generating...' : 'Generate SSH Key'}
+                  </button>
+                ) : (
+                  <>
+                    <div className="relative mb-1">
+                      <textarea
+                        className="w-full py-1 px-1.5 bg-surface border border-edge rounded-sm text-content font-mono text-[10px] outline-none resize-none h-12"
+                        readOnly
+                        value={sshPublicKey}
+                      />
+                      <button
+                        className="absolute top-1 right-1 px-1.5 py-0.5 bg-surface-raised border border-edge rounded text-[9px] text-content-secondary hover:text-content cursor-pointer"
+                        onClick={handleCopyPublicKey}
+                      >
+                        {copied ? 'Copied!' : 'Copy'}
+                      </button>
+                    </div>
+
+                    <div className="p-1.5 bg-[rgba(255,200,50,0.08)] border border-[rgba(255,200,50,0.2)] rounded-sm text-[10px] text-content-secondary leading-relaxed mb-1">
+                      Add as <strong className="text-content">deploy key</strong> in GitHub. Check <strong className="text-content">"Allow write access"</strong>.
+                    </div>
+
+                    {/* SSH clone URL input */}
+                    <div className="mt-1.5 pt-1.5 border-t border-edge">
+                      <label className="block text-content-secondary text-[10px] uppercase tracking-wider mb-0.5">SSH clone URL:</label>
+                      <div className="flex gap-1">
+                        <input
+                          className="flex-1 py-1 px-1.5 border border-edge rounded-sm bg-surface text-content font-mono text-xs outline-none focus:border-accent"
+                          type="text"
+                          placeholder="git@github.com:org/repo.git"
+                          value={sshCloneUrl}
+                          onChange={e => setSshCloneUrl(e.target.value)}
+                          onKeyDown={e => { if (e.key === 'Enter') handleConnectSsh(); }}
+                        />
+                        <button
+                          className="px-2 py-1 bg-accent text-white border-none rounded-sm text-[11px] cursor-pointer disabled:opacity-50 hover:opacity-90"
+                          onClick={handleConnectSsh}
+                          disabled={loading || !sshCloneUrl.trim()}
+                        >
+                          Connect
+                        </button>
+                      </div>
+                    </div>
+
+                    <button
+                      className="mt-1.5 px-2 py-1 bg-surface-raised border border-edge rounded-sm text-[10px] text-content-secondary cursor-pointer hover:text-content"
+                      onClick={handleGenerateSshKey}
+                      disabled={loading}
+                    >
+                      Regenerate Key
+                    </button>
+                  </>
+                )}
+              </div>
+
+              {/* GitHub App status */}
+              <div className="border-t border-edge pt-2">
+                <div className="flex items-center gap-1 mb-1">
+                  <Settings size={11} className="text-content-secondary" />
+                  <span className="text-[10px] uppercase tracking-wider text-content-secondary font-medium">GitHub App</span>
+                </div>
+                <div className="flex justify-between py-0.5">
+                  <span className="text-content-secondary text-[11px]">Status:</span>
+                  <span className={`text-[11px] ${gitStatus?.githubAppConfigured ? 'text-[#69db7c]' : 'text-content-muted'}`}>
+                    {gitStatus?.githubAppConfigured ? 'Configured' : 'Not configured'}
+                  </span>
+                </div>
+                {gitStatus?.githubRepoFullName && (
+                  <div className="flex justify-between py-0.5">
+                    <span className="text-content-secondary text-[11px]">Repo:</span>
+                    <span className="text-[11px] text-content">{gitStatus.githubRepoFullName}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Pull confirmation dialog */}
+      {showPullConfirm && (
+        <div className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/50">
+          <div className="bg-surface-alt border border-edge rounded-lg shadow-lg max-w-sm w-full mx-4 p-4">
+            <h3 className="text-sm font-semibold text-content mb-2">Pull from remote?</h3>
+            <p className="text-xs text-content-secondary mb-4 leading-relaxed">
+              This project has local files that may be overwritten by pulling from the remote.
+              Are you sure you want to continue?
+            </p>
+            <div className="flex justify-end gap-2">
+              <button
+                className="px-3 py-1.5 bg-transparent border border-edge rounded text-xs text-content-secondary cursor-pointer hover:bg-tab-hover hover:text-content"
+                onClick={() => setShowPullConfirm(false)}
+              >
+                Cancel
+              </button>
+              <button
+                className="px-3 py-1.5 bg-error border-none rounded text-xs text-white cursor-pointer hover:opacity-90"
+                onClick={handlePullConfirmed}
+              >
+                Pull &amp; Overwrite
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};