From 386574715470b8ff10e8d0ffae9231e001810e99 Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Thu, 18 Dec 2025 02:38:58 -0500
Subject: [PATCH] fix(ui): add install button to copilot page sidebar

- show Install copilot-api button when not installed

- display version in status when installed
---
 ui/src/pages/copilot.tsx | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/ui/src/pages/copilot.tsx b/ui/src/pages/copilot.tsx
index fd9eef3c..6d4518f2 100644
--- a/ui/src/pages/copilot.tsx
+++ b/ui/src/pages/copilot.tsx
@@ -19,6 +19,8 @@ import {
   Key,
   Server,
   Cpu,
+  Download,
+  Loader2,
 } from 'lucide-react';
 import { useCopilot } from '@/hooks/use-copilot';
 import { CopilotConfigForm } from '@/components/copilot/copilot-config-form';
@@ -108,6 +110,8 @@ export function CopilotPage() {
     isStartingDaemon,
     stopDaemon,
     isStoppingDaemon,
+    install,
+    isInstalling,
   } = useCopilot();
 
   return (
@@ -160,8 +164,34 @@ export function CopilotPage() {
                   icon={Server}
                   label="copilot-api"
                   status={status?.installed ?? false}
-                  statusText={status?.installed ? 'Installed' : 'Missing'}
+                  statusText={
+                    status?.installed
+                      ? status.version
+                        ? `v${status.version}`
+                        : 'Installed'
+                      : 'Missing'
+                  }
                 />
+                {!status?.installed && (
+                  <Button
+                    size="sm"
+                    className="w-full mt-2"
+                    onClick={() => install(undefined)}
+                    disabled={isInstalling}
+                  >
+                    {isInstalling ? (
+                      <>
+                        <Loader2 className="w-3.5 h-3.5 mr-1.5 animate-spin" />
+                        Installing...
+                      </>
+                    ) : (
+                      <>
+                        <Download className="w-3.5 h-3.5 mr-1.5" />
+                        Install copilot-api
+                      </>
+                    )}
+                  </Button>
+                )}
               </StatusSection>
 
               {/* Authentication */}