From cf55aa491229c6af6ad7b045cc72fd2a58059d04 Mon Sep 17 00:00:00 2001
From: chyoo <chyoo@futuredrive.net>
Date: Thu, 9 Jul 2026 13:50:21 +0900
Subject: [PATCH] refine app management and source repository displays

---
 src/pages/applications/AppManagementPage.tsx  | 16 +++---
 .../applications/RepositoryManagementPage.tsx |  1 -
 .../applications/SourceManagementPage.tsx     | 49 +++++++++++--------
 src/pages/launcher/LauncherComponentsPage.tsx | 21 +++++++-
 src/types/runtime.ts                          |  1 +
 5 files changed, 58 insertions(+), 30 deletions(-)

diff --git a/src/pages/applications/AppManagementPage.tsx b/src/pages/applications/AppManagementPage.tsx
index 25674a7..8eee3d4 100644
--- a/src/pages/applications/AppManagementPage.tsx
+++ b/src/pages/applications/AppManagementPage.tsx
@@ -73,12 +73,12 @@ function getTone(status: string) {
   return 'neutral';
 }
 
-function formatStatus(status?: string | null) {
+function formatStatus(status?: string | null, launcherLinked?: boolean) {
+  if (status === 'DISABLED' || status === 'INACTIVE') return '비활성';
+  if (launcherLinked) return '활성';
   const statusMap: Record<string, string> = {
-    ACTIVE: '준비됨',
+    ACTIVE: '활성',
     READY: '준비됨',
-    INACTIVE: '비활성',
-    DISABLED: '비활성',
     ERROR: '오류'
   };
 
@@ -906,7 +906,9 @@ export function AppManagementPage() {
                       <td className="px-5 py-3">{app.name}</td>
                       <td className="px-5 py-3 text-muted-foreground">{app.namespace || '-'}</td>
                       <td className="px-5 py-3">{app.components?.length ?? 0}</td>
-                      <td className="px-5 py-3"><Badge tone={getTone(app.status)}>{formatStatus(app.status)}</Badge></td>
+                      <td className="px-5 py-3">
+                        <Badge tone={getTone(formatStatus(app.status, app.launcherLinked))}>{formatStatus(app.status, app.launcherLinked)}</Badge>
+                      </td>
                       <td className="px-5 py-3">
                         <div className="flex justify-end">
                           <Button
@@ -952,7 +954,7 @@ export function AppManagementPage() {
                   ['네임스페이스', selectedApp.namespace],
                   ['연결 소스', `${linkedComponents}개`],
                   ['구성요소', `${totalComponents}개`],
-                  ['상태', formatStatus(selectedApp.status)]
+                  ['상태', formatStatus(selectedApp.status, selectedApp.launcherLinked)]
                 ].map(([label, value]) => (
                   <div key={label} className="rounded-md border border-border bg-muted/20 p-4">
                     <p className="text-xs text-muted-foreground">{label}</p>
@@ -1008,7 +1010,6 @@ export function AppManagementPage() {
                             <span className="inline-flex items-center gap-2">
                               <span className={cn('size-2.5 shrink-0 rounded-full', running ? statusDotToneClass('green') : component.repository ? statusDotToneClass('blue') : statusDotToneClass('neutral'))} />
                               {component.name}
-                              {running ? <Badge tone="green">실행 중</Badge> : null}
                             </span>
                           </td>
                           <td className="px-5 py-3 text-muted-foreground">{imageSourceLabel}</td>
@@ -1091,7 +1092,6 @@ export function AppManagementPage() {
                             <span className="inline-flex items-center gap-2">
                               <span className={cn('block size-2.5 shrink-0 rounded-full', stopped ? statusDotToneClass('neutral') : runtimeStatusDotClass(resource.status))} />
                               <span className="text-sm text-foreground">{resource.name}</span>
-                              <Badge tone={runtimeStatusTone(resource, stopped)}>{runtimeStatusLabel(resource, stopped)}</Badge>
                             </span>
                           </td>
                           <td className="px-5 py-3 text-foreground">{resource.kind}</td>
diff --git a/src/pages/applications/RepositoryManagementPage.tsx b/src/pages/applications/RepositoryManagementPage.tsx
index fb14a16..d458dcf 100644
--- a/src/pages/applications/RepositoryManagementPage.tsx
+++ b/src/pages/applications/RepositoryManagementPage.tsx
@@ -389,7 +389,6 @@ export function RepositoryManagementPage() {
                   <input
                     value={repoName}
                     onChange={(event) => handleRepoNameChange(event.target.value)}
-                    placeholder="lms-fe"
                     className="h-full min-w-0 flex-1 bg-transparent px-3 text-sm outline-none placeholder:text-muted-foreground"
                   />
                 </div>
diff --git a/src/pages/applications/SourceManagementPage.tsx b/src/pages/applications/SourceManagementPage.tsx
index 7506d7b..df728b5 100644
--- a/src/pages/applications/SourceManagementPage.tsx
+++ b/src/pages/applications/SourceManagementPage.tsx
@@ -62,11 +62,19 @@ function splitRepository(repository?: string | null) {
   return owner && repo ? { owner, repo } : null;
 }
 
-function repositoryGitUrl(repository?: string | null) {
+function httpCloneUrl(repository?: string | null) {
   const normalized = normalizeRepository(repository);
   return normalized ? `${giteaBaseUrl.replace(/\/$/, '')}/${normalized}.git` : '-';
 }
 
+function sshCloneUrl(repository?: string | null) {
+  const normalized = normalizeRepository(repository);
+  if (!normalized) return '-';
+  const base = giteaBaseUrl.replace(/\/$/, '');
+  const host = base.replace(/^https?:\/\//, '').split('/')[0]?.split(':')[0] || 'localhost';
+  return `ssh://git@${host}:2222/${normalized}.git`;
+}
+
 function commitAuthor(commit: GiteaCommit) {
   return commit.author?.login
     || commit.author?.username
@@ -321,13 +329,13 @@ export function SourceManagementPage() {
   const selectedSource = filteredSources.find((source) => source.id === selectedSourceId) ?? filteredSources[0] ?? null;
   const repository = splitRepository(selectedSource?.repository);
   const branch = selectedBranch || 'develop';
-  const latestBranchSha = commits.length > 0 ? commits[0]?.sha ?? '' : '';
   const branchOptions = useMemo(
     () => [...new Set(['develop', 'release', 'main', selectedSource?.branch].filter((item): item is string => Boolean(item)))],
     [selectedSource?.branch]
   );
   const totalCommitPages = totalCommits === null ? null : Math.max(1, Math.ceil(totalCommits / commitPageSize));
-  const selectedRepositoryGitUrl = repositoryGitUrl(selectedSource?.repository);
+  const selectedHttpCloneUrl = httpCloneUrl(selectedSource?.repository);
+  const selectedSshCloneUrl = sshCloneUrl(selectedSource?.repository);
 
   const refreshSources = () => {
     setSourcesLoading(true);
@@ -426,11 +434,11 @@ export function SourceManagementPage() {
       .finally(() => setDiffLoading(false));
   };
 
-  const copyGitUrl = () => {
-    if (!selectedSource?.repository || selectedRepositoryGitUrl === '-') return;
-    navigator.clipboard?.writeText(selectedRepositoryGitUrl)
-      .then(() => toast({ type: 'success', message: 'Git URL을 복사했습니다.' }))
-      .catch(() => toast({ type: 'error', message: 'Git URL 복사에 실패했습니다.' }));
+  const copyCloneUrl = (value: string, label: string) => {
+    if (!selectedSource?.repository || value === '-') return;
+    navigator.clipboard?.writeText(value)
+      .then(() => toast({ type: 'success', message: `${label}을 복사했습니다.` }))
+      .catch(() => toast({ type: 'error', message: `${label} 복사에 실패했습니다.` }));
   };
 
   return (
@@ -472,7 +480,7 @@ export function SourceManagementPage() {
               </select>
             </label>
           </div>
-          <div className="grid gap-3 rounded-md border border-border bg-muted/20 p-3 text-sm md:grid-cols-2">
+          <div className="space-y-3 rounded-md border border-border bg-muted/20 p-3 text-sm">
             <div>
               <p className="text-xs text-muted-foreground">조회 브랜치</p>
               <select
@@ -485,27 +493,28 @@ export function SourceManagementPage() {
                 ))}
               </select>
             </div>
-            <div className="min-w-0 md:col-span-2">
+            <div className="min-w-0">
               <p className="text-xs text-muted-foreground">저장소</p>
               <div className="mt-2 rounded-md border border-border bg-background px-3 py-2">
                 <p className="truncate text-sm font-medium">{normalizeRepository(selectedSource?.repository) || '-'}</p>
               </div>
             </div>
-            <div className="min-w-0 md:col-span-2">
-              <p className="text-xs text-muted-foreground">Git URL</p>
+            <div className="min-w-0">
+              <p className="text-xs text-muted-foreground">HTTP Clone URL</p>
               <div className="mt-2 flex min-w-0 items-center gap-2 rounded-md border border-border bg-background px-3 py-2">
-                <p className="min-w-0 flex-1 truncate text-sm font-medium" title={selectedRepositoryGitUrl}>{selectedRepositoryGitUrl}</p>
-                <Button variant="ghost" className="size-8 shrink-0 px-0" title="Git URL 복사" aria-label="Git URL 복사" onClick={copyGitUrl} disabled={!selectedSource?.repository}>
+                <p className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground" title={selectedHttpCloneUrl}>{selectedHttpCloneUrl}</p>
+                <Button variant="ghost" className="size-8 shrink-0 px-0" title="HTTP Clone URL 복사" aria-label="HTTP Clone URL 복사" onClick={() => copyCloneUrl(selectedHttpCloneUrl, 'HTTP Clone URL')} disabled={!selectedSource?.repository}>
                   <Copy className="size-4" />
                 </Button>
               </div>
             </div>
-            <div className="min-w-0 md:col-span-2">
-              <p className="text-xs text-muted-foreground">SHA1</p>
-              <div className="mt-2 rounded-md border border-border bg-background px-3 py-2">
-                <p className="truncate font-mono text-sm font-medium" title={latestBranchSha || '-'}>
-                  {latestBranchSha || '-'}
-                </p>
+            <div className="min-w-0">
+              <p className="text-xs text-muted-foreground">SSH Clone URL</p>
+              <div className="mt-2 flex min-w-0 items-center gap-2 rounded-md border border-border bg-background px-3 py-2">
+                <p className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground" title={selectedSshCloneUrl}>{selectedSshCloneUrl}</p>
+                <Button variant="ghost" className="size-8 shrink-0 px-0" title="SSH Clone URL 복사" aria-label="SSH Clone URL 복사" onClick={() => copyCloneUrl(selectedSshCloneUrl, 'SSH Clone URL')} disabled={!selectedSource?.repository}>
+                  <Copy className="size-4" />
+                </Button>
               </div>
             </div>
           </div>
diff --git a/src/pages/launcher/LauncherComponentsPage.tsx b/src/pages/launcher/LauncherComponentsPage.tsx
index ef1abd0..78642fe 100644
--- a/src/pages/launcher/LauncherComponentsPage.tsx
+++ b/src/pages/launcher/LauncherComponentsPage.tsx
@@ -64,6 +64,23 @@ function statusTone(status?: string): 'green' | 'amber' | 'red' | 'neutral' {
   return 'neutral';
 }
 
+function buildStatusText(status?: string) {
+  if (status === 'SUCCEEDED') return '성공';
+  if (status === 'FAILED') return '실패';
+  if (status === 'RUNNING') return '진행 중';
+  if (status === 'PENDING') return '대기';
+  if (status === 'CANCELED') return '취소';
+  return status ?? '빌드 이력 없음';
+}
+
+function buildStatusTone(status?: string): 'green' | 'amber' | 'red' | 'blue' | 'neutral' {
+  if (status === 'SUCCEEDED') return 'green';
+  if (status === 'FAILED' || status === 'CANCELED') return 'red';
+  if (status === 'RUNNING') return 'blue';
+  if (status === 'PENDING') return 'amber';
+  return 'neutral';
+}
+
 function componentIcon(type: LauncherComponentDefinition['type']) {
   if (type === 'client') return FileArchive;
   if (type === 'database') return Database;
@@ -249,7 +266,9 @@ export function LauncherComponentsPage() {
         <Card className="p-5">
           <p className="text-sm text-muted-foreground">최근 클라이언트 빌드</p>
           <p className="mt-3 text-2xl font-semibold">{latestBuild?.version ?? '-'}</p>
-          <p className="mt-1 text-xs text-muted-foreground">{latestBuild?.status ?? '빌드 이력 없음'}</p>
+          <div className="mt-2">
+            <Badge tone={buildStatusTone(latestBuild?.status)}>{buildStatusText(latestBuild?.status)}</Badge>
+          </div>
         </Card>
         <Card className="p-5">
           <p className="text-sm text-muted-foreground">Namespace</p>
diff --git a/src/types/runtime.ts b/src/types/runtime.ts
index 24d8a34..849f903 100644
--- a/src/types/runtime.ts
+++ b/src/types/runtime.ts
@@ -40,6 +40,7 @@ export type ApiApp = {
   description?: string | null;
   namespace?: string | null;
   status: string;
+  launcherLinked?: boolean;
   components?: ApiAppComponent[];
 };