From f9b89dee12acdec5bf2b53e04eb60708bfee8340 Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Thu, 18 Dec 2025 05:26:58 -0500
Subject: [PATCH] fix(ui): improve copilot sidebar logical order and remove
 redundancy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
- Reordered sidebar to follow logical flow:
  1. Setup: copilot-api binary → Integration enabled
  2. Auth: GitHub connection (only after binary installed)
  3. Daemon: status/port (only after authenticated)
- Removed redundant Config section (Model/Account already in right panel)
- Progressive disclosure: sections appear as prerequisites are met
---
 ui/src/pages/copilot.tsx | 105 +++++++++++++++++----------------------
 1 file changed, 45 insertions(+), 60 deletions(-)

diff --git a/ui/src/pages/copilot.tsx b/ui/src/pages/copilot.tsx
index d18007be..97c6d3f1 100644
--- a/ui/src/pages/copilot.tsx
+++ b/ui/src/pages/copilot.tsx
@@ -5,7 +5,6 @@
  */
 
 import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
@@ -159,14 +158,8 @@ export function CopilotPage() {
                 </ul>
               </div>
 
-              {/* Integration Status */}
-              <StatusSection title="Integration">
-                <StatusItem
-                  icon={Power}
-                  label="Enabled"
-                  status={status?.enabled ?? false}
-                  statusText={status?.enabled ? 'Enabled' : 'Disabled'}
-                />
+              {/* Setup - Binary first, then enabled status */}
+              <StatusSection title="Setup">
                 <StatusItem
                   icon={Server}
                   label="copilot-api"
@@ -199,40 +192,50 @@ export function CopilotPage() {
                     )}
                   </Button>
                 )}
-              </StatusSection>
-
-              {/* Authentication */}
-              <StatusSection title="Auth">
-                <StatusItem
-                  icon={Key}
-                  label="GitHub"
-                  status={status?.authenticated ?? false}
-                  statusText={status?.authenticated ? 'Connected' : 'Not Connected'}
-                />
-                {!status?.authenticated && status?.installed && (
-                  <Button
-                    size="sm"
-                    className="w-full mt-2"
-                    onClick={() => startAuth()}
-                    disabled={isAuthenticating}
-                  >
-                    {isAuthenticating ? 'Authenticating...' : 'Authenticate'}
-                  </Button>
+                {status?.installed && (
+                  <StatusItem
+                    icon={Power}
+                    label="Integration"
+                    status={status?.enabled ?? false}
+                    statusText={status?.enabled ? 'Enabled' : 'Disabled'}
+                  />
                 )}
               </StatusSection>
 
-              {/* Daemon */}
-              <StatusSection title="Daemon">
-                <StatusItem
-                  icon={Cpu}
-                  label="Status"
-                  status={status?.daemon_running ?? false}
-                  statusText={status?.daemon_running ? 'Running' : 'Stopped'}
-                />
-                <div className="px-3 py-1 text-xs text-muted-foreground">
-                  Port: {status?.port ?? 4141}
-                </div>
-                {status?.authenticated && (
+              {/* Authentication - only show after binary installed */}
+              {status?.installed && (
+                <StatusSection title="Auth">
+                  <StatusItem
+                    icon={Key}
+                    label="GitHub"
+                    status={status?.authenticated ?? false}
+                    statusText={status?.authenticated ? 'Connected' : 'Not Connected'}
+                  />
+                  {!status?.authenticated && (
+                    <Button
+                      size="sm"
+                      className="w-full mt-2"
+                      onClick={() => startAuth()}
+                      disabled={isAuthenticating}
+                    >
+                      {isAuthenticating ? 'Authenticating...' : 'Authenticate'}
+                    </Button>
+                  )}
+                </StatusSection>
+              )}
+
+              {/* Daemon - only show after authenticated */}
+              {status?.authenticated && (
+                <StatusSection title="Daemon">
+                  <StatusItem
+                    icon={Cpu}
+                    label="Status"
+                    status={status?.daemon_running ?? false}
+                    statusText={status?.daemon_running ? 'Running' : 'Stopped'}
+                  />
+                  <div className="px-3 py-1 text-xs text-muted-foreground">
+                    Port: {status?.port ?? 4141}
+                  </div>
                   <div className="px-1">
                     {status?.daemon_running ? (
                       <Button
@@ -258,26 +261,8 @@ export function CopilotPage() {
                       </Button>
                     )}
                   </div>
-                )}
-              </StatusSection>
-
-              {/* Quick Status */}
-              <StatusSection title="Config">
-                <div className="px-3 py-2 rounded-lg bg-muted/50 space-y-1.5">
-                  <div className="flex items-center justify-between text-xs">
-                    <span className="text-muted-foreground">Model</span>
-                    <span className="font-mono truncate max-w-[160px] text-[10px]">
-                      {status?.model ?? 'N/A'}
-                    </span>
-                  </div>
-                  <div className="flex items-center justify-between text-xs">
-                    <span className="text-muted-foreground">Account</span>
-                    <Badge variant="secondary" className="text-[10px] h-4">
-                      {status?.account_type ?? 'individual'}
-                    </Badge>
-                  </div>
-                </div>
-              </StatusSection>
+                </StatusSection>
+              )}
             </div>
           )}
         </ScrollArea>