11import React from "react" ;
22import { cn } from "@/common/lib/utils" ;
33import type { RuntimeConfig } from "@/common/types/runtime" ;
4- import { isSSHRuntime } from "@/common/types/runtime" ;
4+ import { isSSHRuntime , isWorktreeRuntime , isLocalProjectRuntime } from "@/common/types/runtime" ;
55import { extractSshHostname } from "@/browser/utils/ui/runtimeBadge" ;
66import { TooltipWrapper , Tooltip } from "./Tooltip" ;
77
@@ -10,47 +10,122 @@ interface RuntimeBadgeProps {
1010 className ?: string ;
1111}
1212
13+ /** Server rack icon for SSH runtime */
14+ function SSHIcon ( ) {
15+ return (
16+ < svg
17+ width = "12"
18+ height = "12"
19+ viewBox = "0 0 16 16"
20+ fill = "none"
21+ stroke = "currentColor"
22+ strokeWidth = "1.5"
23+ strokeLinecap = "round"
24+ strokeLinejoin = "round"
25+ aria-label = "SSH Runtime"
26+ >
27+ < rect x = "2" y = "2" width = "12" height = "4" rx = "1" />
28+ < rect x = "2" y = "10" width = "12" height = "4" rx = "1" />
29+ < line x1 = "5" y1 = "4" x2 = "5" y2 = "4" />
30+ < line x1 = "5" y1 = "12" x2 = "5" y2 = "12" />
31+ </ svg >
32+ ) ;
33+ }
34+
35+ /** Git branch icon for worktree runtime */
36+ function WorktreeIcon ( ) {
37+ return (
38+ < svg
39+ width = "12"
40+ height = "12"
41+ viewBox = "0 0 16 16"
42+ fill = "none"
43+ stroke = "currentColor"
44+ strokeWidth = "1.5"
45+ strokeLinecap = "round"
46+ strokeLinejoin = "round"
47+ aria-label = "Worktree Runtime"
48+ >
49+ { /* Git branch icon */ }
50+ < circle cx = "5" cy = "4" r = "2" />
51+ < circle cx = "11" cy = "4" r = "2" />
52+ < circle cx = "5" cy = "12" r = "2" />
53+ < line x1 = "5" y1 = "6" x2 = "5" y2 = "10" />
54+ < path d = "M5 8 C 5 4 11 8 11 6" />
55+ </ svg >
56+ ) ;
57+ }
58+
59+ /** Folder icon for local project-dir runtime (reserved for future use) */
60+ function _LocalIcon ( ) {
61+ return (
62+ < svg
63+ width = "12"
64+ height = "12"
65+ viewBox = "0 0 16 16"
66+ fill = "none"
67+ stroke = "currentColor"
68+ strokeWidth = "1.5"
69+ strokeLinecap = "round"
70+ strokeLinejoin = "round"
71+ aria-label = "Local Runtime"
72+ >
73+ { /* Folder icon */ }
74+ < path d = "M2 4 L2 13 L14 13 L14 5 L8 5 L7 3 L2 3 L2 4" />
75+ </ svg >
76+ ) ;
77+ }
78+
1379/**
14- * Badge to display SSH runtime information.
15- * Shows icon-only badge for SSH runtimes with hostname in tooltip.
80+ * Badge to display runtime type information.
81+ * Shows icon-only badge with tooltip describing the runtime type.
82+ * - SSH: server icon with hostname
83+ * - Worktree: git branch icon (isolated worktree)
84+ * - Local: folder icon (project directory, no badge shown by default)
1685 */
1786export function RuntimeBadge ( { runtimeConfig, className } : RuntimeBadgeProps ) {
18- const hostname = extractSshHostname ( runtimeConfig ) ;
19-
20- if ( ! hostname ) {
21- return null ;
87+ // SSH runtime: show server icon with hostname
88+ if ( isSSHRuntime ( runtimeConfig ) ) {
89+ const hostname = extractSshHostname ( runtimeConfig ) ;
90+ return (
91+ < TooltipWrapper inline >
92+ < span
93+ className = { cn (
94+ "inline-flex items-center rounded px-1 py-0.5" ,
95+ "bg-accent/10 text-accent border border-accent/30" ,
96+ className
97+ ) }
98+ >
99+ < SSHIcon />
100+ </ span >
101+ < Tooltip align = "right" > SSH: { hostname ?? runtimeConfig . host } </ Tooltip >
102+ </ TooltipWrapper >
103+ ) ;
22104 }
23105
24- return (
25- < TooltipWrapper inline >
26- < span
27- className = { cn (
28- "inline-flex items-center rounded px-1 py-0.5" ,
29- "bg-accent/10 text-accent border border-accent/30" ,
30- className
31- ) }
32- >
33- < svg
34- width = "12"
35- height = "12"
36- viewBox = "0 0 16 16"
37- fill = "none"
38- stroke = "currentColor"
39- strokeWidth = "1.5"
40- strokeLinecap = "round"
41- strokeLinejoin = "round"
42- aria-label = "SSH Runtime"
106+ // Worktree runtime: show git branch icon
107+ if ( isWorktreeRuntime ( runtimeConfig ) ) {
108+ return (
109+ < TooltipWrapper inline >
110+ < span
111+ className = { cn (
112+ "inline-flex items-center rounded px-1 py-0.5" ,
113+ "bg-muted/50 text-muted-foreground border border-muted" ,
114+ className
115+ ) }
43116 >
44- { /* Server rack icon */ }
45- < rect x = "2" y = "2" width = "12" height = "4" rx = "1" />
46- < rect x = "2" y = "10" width = "12" height = "4" rx = "1" />
47- < line x1 = "5" y1 = "4" x2 = "5" y2 = "4" />
48- < line x1 = "5" y1 = "12" x2 = "5" y2 = "12" />
49- </ svg >
50- </ span >
51- < Tooltip align = "right" >
52- SSH: { isSSHRuntime ( runtimeConfig ) ? runtimeConfig . host : hostname }
53- </ Tooltip >
54- </ TooltipWrapper >
55- ) ;
117+ < WorktreeIcon />
118+ </ span >
119+ < Tooltip align = "right" > Worktree: isolated git worktree</ Tooltip >
120+ </ TooltipWrapper >
121+ ) ;
122+ }
123+
124+ // Local project-dir runtime: don't show badge (it's the simplest/default)
125+ // Could optionally show LocalIcon if we want visibility
126+ if ( isLocalProjectRuntime ( runtimeConfig ) ) {
127+ return null ; // No badge for simple local runtimes
128+ }
129+
130+ return null ;
56131}
0 commit comments