From cb685c871625b804cbe77e9163d1c8fac17888b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Wed, 25 Mar 2026 17:03:30 +0100
Subject: [PATCH 1/9] feat(service-terminal): enhance terminal functionality
 with new addons and UI improvements

---
 .../service-terminal.spec.tsx.snap            |  30 ++-
 .../__snapshots__/input-search.spec.tsx.snap  |   8 +-
 .../input-search/input-search.tsx             |  12 +-
 .../lib/service-terminal/service-terminal.tsx | 254 ++++++++++++++++--
 4 files changed, 268 insertions(+), 36 deletions(-)

diff --git a/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
index bb809e2cb3a..6fab9d99357 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
@@ -7,22 +7,38 @@ exports[`ServiceTerminal should match snapshot 1`] = `
       class="flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden rounded-none border-0 bg-background"
     >
       <div
-        class="flex h-11 justify-between border-b border-neutral px-4 py-2"
+        class="flex h-16 justify-between border-b border-neutral p-4"
       >
         <div
-          class="flex gap-2"
+          class="flex gap-2 [&_input]:w-[400px]"
         />
+        <a
+          class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1.5"
+          href="https://www.qovery.com/docs/cli/overview"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <i
+            aria-hidden="true"
+            class="fa-regular fa-book "
+          />
+          CLI docs
+        </a>
       </div>
       <div
-        class="relative h-full min-h-[248px] flex-1 border-neutral bg-background px-4 py-2"
+        class="flex h-full flex-1 flex-col bg-background p-3"
       >
         <div
-          class="flex h-40 items-start justify-center p-5"
+          class="relative min-h-0 flex-1"
         >
           <div
-            class="aspect-square border-2  animate-spin rounded-full border-solid border-neutral border-r-neutral-strong w-4 "
-            data-testid="spinner"
-          />
+            class="flex h-40 items-start justify-center p-5"
+          >
+            <div
+              class="aspect-square border-2  animate-spin rounded-full border-solid border-neutral border-r-neutral-strong w-4 "
+              data-testid="spinner"
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
index 75a63b5476e..2a437a3a358 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`InputSearch should match snapshot 1`] = `
       >
         <i
           aria-hidden="true"
-          class="fa-regular fa-magnifying-glass absolute left-2.5 top-1.5 text-xs text-neutral-subtle"
+          class="fa-regular fa-magnifying-glass absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-neutral-subtle"
         />
         <input
           aria-activedescendant=""
@@ -31,7 +31,7 @@ exports[`InputSearch should match snapshot 1`] = `
           aria-expanded="false"
           aria-labelledby="downshift-:r6:-label"
           autocomplete="off"
-          class="h-7 w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color]"
+          class="w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color] h-7"
           id="downshift-:r6:-input"
           placeholder="placeholder"
           role="combobox"
@@ -84,7 +84,7 @@ exports[`InputSearch should match with snapshot 1`] = `
       >
         <i
           aria-hidden="true"
-          class="fa-regular fa-magnifying-glass absolute left-2.5 top-1.5 text-xs text-neutral-subtle"
+          class="fa-regular fa-magnifying-glass absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-neutral-subtle"
         />
         <input
           aria-activedescendant=""
@@ -93,7 +93,7 @@ exports[`InputSearch should match with snapshot 1`] = `
           aria-expanded="false"
           aria-labelledby="downshift-:rd:-label"
           autocomplete="off"
-          class="h-7 w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color]"
+          class="w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color] h-7"
           id="downshift-:rd:-input"
           placeholder="placeholder"
           role="combobox"
diff --git a/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx b/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
index d7ead83218f..ecda68092b9 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
@@ -7,13 +7,15 @@ export interface InputSearchProps {
   data: string[]
   onChange: (value?: string) => void
   placeholder: string
+  size?: 'sm' | 'md'
   value?: string
   trimLabel?: boolean
 }
 
-export function InputSearch({ data, value, onChange, placeholder, trimLabel }: InputSearchProps) {
+export function InputSearch({ data, value, onChange, placeholder, trimLabel, size = 'sm' }: InputSearchProps) {
   const [items, setItems] = useState(data)
   const inputRef = useRef<HTMLInputElement>(null)
+  const buttonSize = size === 'md' ? 'md' : 'sm'
 
   // https://github.com/radix-ui/primitives/issues/1342
   // We are waiting for radix combobox primitives
@@ -34,6 +36,7 @@ export function InputSearch({ data, value, onChange, placeholder, trimLabel }: I
       <Button
         color="neutral"
         variant="surface"
+        size={buttonSize}
         className={!selectedItem ? 'hidden' : ''}
         onClick={() => {
           reset()
@@ -48,10 +51,13 @@ export function InputSearch({ data, value, onChange, placeholder, trimLabel }: I
         </span>
       </Button>
       <div className={selectedItem ? 'hidden' : ''}>
-        <Icon iconName="magnifying-glass" className="absolute left-2.5 top-1.5 text-xs text-neutral-subtle" />
+        <Icon iconName="magnifying-glass" className="absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-neutral-subtle" />
         <input
           placeholder={placeholder}
-          className="h-7 w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color]"
+          className={clsx(
+            'w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color]',
+            size === 'md' ? 'h-8' : 'h-7'
+          )}
           {...getInputProps({ ref: inputRef })}
         />
       </div>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
index a98f40aea31..335c6858e0c 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
@@ -1,11 +1,11 @@
 import { type QueryClient } from '@tanstack/react-query'
 import { AttachAddon } from '@xterm/addon-attach'
 import { FitAddon } from '@xterm/addon-fit'
-import { type ITerminalAddon } from '@xterm/xterm'
+import { type IDisposable, type ITerminalAddon, type Terminal } from '@xterm/xterm'
 import Color from 'color'
-import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { XTerm } from 'react-xtermjs'
-import { LoaderSpinner, toast } from '@qovery/shared/ui'
+import { ExternalLink, Icon, LoaderSpinner, toast } from '@qovery/shared/ui'
 import { useTerminalReadiness } from '@qovery/shared/util-hooks'
 import { QOVERY_WS } from '@qovery/shared/util-node-env'
 import { useReactQueryWsSubscription } from '@qovery/state/util-queries'
@@ -14,6 +14,141 @@ import { InputSearch } from './input-search/input-search'
 
 const MemoizedXTerm = memo(XTerm)
 
+class TerminalRefAddon implements ITerminalAddon {
+  constructor(
+    private readonly onTerminalReady?: (terminal: Terminal) => void,
+    private readonly onTerminalDispose?: () => void
+  ) {}
+
+  activate(terminal: Terminal): void {
+    this.onTerminalReady?.(terminal)
+  }
+
+  dispose(): void {
+    this.onTerminalDispose?.()
+  }
+}
+
+interface TerminalShellActionLink {
+  action: () => void
+  label: string
+}
+
+class TerminalShellActionsAddon implements ITerminalAddon {
+  private linkProviderDisposable?: IDisposable
+  private static readonly ANSI_BOLD = '\u001b[1m'
+  private static readonly ANSI_RESET = '\u001b[0m'
+
+  constructor(
+    private readonly links: TerminalShellActionLink[],
+    private readonly shouldWriteBanner: boolean
+  ) {}
+
+  activate(terminal: Terminal): void {
+    if (this.shouldWriteBanner) {
+      const horizontalPadding = 1
+      const actionLabels = this.links.map(({ label }) => label)
+      const headingLine = 'Quick actions to get started:'
+      const maxContentWidth = Math.max(1, terminal.cols - 4 - horizontalPadding * 2)
+      const actionLines: string[] = []
+      let currentActionLine = ''
+
+      actionLabels.forEach((label) => {
+        const nextLine = currentActionLine ? `${currentActionLine} ${label}` : label
+
+        if (nextLine.length <= maxContentWidth) {
+          currentActionLine = nextLine
+          return
+        }
+
+        if (currentActionLine) {
+          actionLines.push(currentActionLine)
+        }
+        currentActionLine = label
+      })
+
+      if (currentActionLine) {
+        actionLines.push(currentActionLine)
+      }
+
+      const bannerLines = ['Qovery cloud shell', '', headingLine, ...actionLines]
+      const maxBannerLineLength = Math.max(...bannerLines.map((line) => line.length))
+      const bannerContentWidth = Math.min(Math.max(20, maxBannerLineLength), maxContentWidth)
+      const bannerInnerWidth = bannerContentWidth + horizontalPadding * 2
+      const lineContentWidth = bannerInnerWidth + 2
+      const formatBannerLine = (line: string, bold?: boolean) => {
+        const visibleLine = line.length > bannerContentWidth ? line.slice(0, bannerContentWidth) : line
+        const trailingPadding = ' '.repeat(bannerContentWidth - visibleLine.length)
+        const styledText = bold
+          ? `${TerminalShellActionsAddon.ANSI_BOLD}${visibleLine}${TerminalShellActionsAddon.ANSI_RESET}${trailingPadding}`
+          : `${visibleLine}${trailingPadding}`
+
+        return `│ ${' '.repeat(horizontalPadding)}${styledText}${' '.repeat(horizontalPadding)} │`
+      }
+
+      terminal.writeln(`┌${'─'.repeat(lineContentWidth)}┐`)
+      terminal.writeln(formatBannerLine(''))
+      bannerLines.forEach((line, index) => terminal.writeln(formatBannerLine(line, index === 0)))
+      terminal.writeln(formatBannerLine(''))
+      terminal.writeln(`└${'─'.repeat(lineContentWidth)}┘`)
+      terminal.writeln('')
+    }
+
+    this.linkProviderDisposable = terminal.registerLinkProvider({
+      provideLinks: (bufferLineNumber, callback) => {
+        const line = terminal.buffer.active.getLine(bufferLineNumber - 1)
+
+        if (!line) {
+          callback(undefined)
+          return
+        }
+
+        const lineText = line.translateToString(false)
+        const lineLinks = this.links.flatMap(({ label, action }) => {
+          const linkRanges = []
+          let fromIndex = 0
+
+          while (fromIndex < lineText.length) {
+            const labelIndex = lineText.indexOf(label, fromIndex)
+            if (labelIndex === -1) {
+              break
+            }
+
+            linkRanges.push({
+              activate: () => action(),
+              decorations: {
+                pointerCursor: true,
+                underline: false,
+              },
+              range: {
+                end: {
+                  x: labelIndex + label.length + 1,
+                  y: bufferLineNumber,
+                },
+                start: {
+                  x: labelIndex + 1,
+                  y: bufferLineNumber,
+                },
+              },
+              text: label,
+            })
+            fromIndex = labelIndex + label.length
+          }
+
+          return linkRanges
+        })
+
+        callback(lineLinks.length > 0 ? lineLinks : undefined)
+      },
+    })
+  }
+
+  dispose(): void {
+    this.linkProviderDisposable?.dispose()
+    this.linkProviderDisposable = undefined
+  }
+}
+
 export interface ServiceTerminalProps {
   organizationId: string
   clusterId: string
@@ -30,6 +165,8 @@ export function ServiceTerminal({
   serviceId,
 }: ServiceTerminalProps) {
   const { data: runningStatuses } = useRunningStatus({ environmentId, serviceId })
+  const terminalRef = useRef<Terminal | null>(null)
+  const hasWrittenShellBannerRef = useRef(false)
 
   const [addons, setAddons] = useState<Array<ITerminalAddon>>([])
   const isTerminalLoading = addons.length < 2
@@ -63,16 +200,73 @@ export function ServiceTerminal({
   const [selectedPod, setSelectedPod] = useState<string | undefined>()
   const [selectedContainer, setSelectedContainer] = useState<string | undefined>()
 
+  const selectedOrDefaultPodName = selectedPod ?? runningStatuses?.pods[0]?.name
+  const selectedOrDefaultContainerName =
+    selectedContainer ?? runningStatuses?.pods.find((pod) => pod.name === selectedOrDefaultPodName)?.containers[0]?.name
+  const connectShellCommand = [
+    `qovery shell https://console.qovery.com/organization/${organizationId}/project/${projectId}/environment/${environmentId}/application/${serviceId}`,
+    selectedOrDefaultPodName ? `--pod-name=${selectedOrDefaultPodName}` : undefined,
+    selectedOrDefaultContainerName ? `--container=${selectedOrDefaultContainerName}` : undefined,
+  ]
+    .filter((commandPart): commandPart is string => Boolean(commandPart))
+    .join(' ')
+  const portForwardCommand = [
+    'qovery port-forward \\',
+    `  --organization "${organizationId}" \\`,
+    `  --project "${projectId}" \\`,
+    `  --environment "${environmentId}" \\`,
+    `  --service "${serviceId}" \\`,
+    '  --port [local-port]:[target-port]',
+  ].join('\n')
+  const prefillCommand = useCallback((command: string) => {
+    if (!terminalRef.current) {
+      return
+    }
+    terminalRef.current.focus()
+    terminalRef.current.paste(`\u0015${command}`)
+  }, [])
+  const terminalShellLinks = useMemo(
+    () => [
+      {
+        label: '[connect locally]',
+        action: () => prefillCommand(connectShellCommand),
+      },
+      {
+        label: '[forward port]',
+        action: () => prefillCommand(portForwardCommand),
+      },
+      {
+        label: '[show env variables]',
+        action: () => prefillCommand('printenv'),
+      },
+    ],
+    [connectShellCommand, portForwardCommand, prefillCommand]
+  )
+
   const onOpenHandler = useCallback(
     (_: QueryClient, event: Event) => {
       const websocket = event.target as WebSocket
       const fitAddon = new FitAddon()
+      const shouldWriteShellBanner = !hasWrittenShellBannerRef.current
 
       // As WS are open twice in dev mode / strict mode it doesn't happens in production
       attachWebSocket(websocket)
-      setAddons([fitAddon, new AttachAddon(websocket)])
+      hasWrittenShellBannerRef.current = true
+      setAddons([
+        fitAddon,
+        new AttachAddon(websocket),
+        new TerminalRefAddon(
+          (terminal) => {
+            terminalRef.current = terminal
+          },
+          () => {
+            terminalRef.current = null
+          }
+        ),
+        new TerminalShellActionsAddon(terminalShellLinks, shouldWriteShellBanner),
+      ])
     },
-    [attachWebSocket, setAddons]
+    [attachWebSocket, setAddons, terminalShellLinks]
   )
 
   const onCloseHandler = useCallback(
@@ -110,6 +304,7 @@ export function ServiceTerminal({
   })
 
   useEffect(() => {
+    hasWrittenShellBannerRef.current = false
     resetTerminalReadiness()
   }, [resetTerminalReadiness, selectedContainer, selectedPod])
 
@@ -121,14 +316,15 @@ export function ServiceTerminal({
 
   return (
     <div className="flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden rounded-none border-0 bg-background">
-      <div className="flex h-11 justify-between border-b border-neutral px-4 py-2">
-        <div className="flex gap-2">
+      <div className="flex h-16 justify-between border-b border-neutral p-4">
+        <div className="flex gap-2 [&_input]:w-[400px]">
           {runningStatuses && runningStatuses.pods.length > 0 && (
             <InputSearch
               value={selectedPod}
               onChange={setSelectedPod}
               data={runningStatuses.pods.map((pod) => pod.name)}
               placeholder="Search by pod"
+              size="md"
               trimLabel
             />
           )}
@@ -142,25 +338,39 @@ export function ServiceTerminal({
                   ?.containers.map((container) => container?.name) || []
               }
               placeholder="Search by container"
+              size="md"
             />
           )}
         </div>
+        <ExternalLink
+          as="button"
+          href="https://www.qovery.com/docs/cli/overview"
+          variant="surface"
+          color="neutral"
+          size="md"
+          className="gap-1.5"
+        >
+          <Icon iconName="book" />
+          CLI docs
+        </ExternalLink>
       </div>
-      <div className="relative h-full min-h-[248px] flex-1 border-neutral bg-background px-4 py-2">
-        {isTerminalLoading ? (
-          <div className="flex h-40 items-start justify-center p-5">
-            <LoaderSpinner />
-          </div>
-        ) : (
-          <>
-            <MemoizedXTerm className="h-full" addons={addons} options={terminalOptions} />
-            {showDelayedLoader && (
-              <div className="absolute inset-0 flex items-start justify-center border-neutral bg-background pt-7">
-                <LoaderSpinner />
-              </div>
-            )}
-          </>
-        )}
+      <div className="flex h-full flex-1 flex-col bg-background p-3">
+        <div className="relative min-h-0 flex-1">
+          {isTerminalLoading ? (
+            <div className="flex h-40 items-start justify-center p-5">
+              <LoaderSpinner />
+            </div>
+          ) : (
+            <>
+              <MemoizedXTerm className="h-full" addons={addons} options={terminalOptions} />
+              {showDelayedLoader && (
+                <div className="absolute inset-0 flex items-start justify-center border-neutral bg-background pt-7">
+                  <LoaderSpinner />
+                </div>
+              )}
+            </>
+          )}
+        </div>
       </div>
     </div>
   )

From c28e52df5baca8bfbe1ebdcf2645e0bd04700c63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Wed, 25 Mar 2026 17:11:41 +0100
Subject: [PATCH 2/9] style(input-search): format Icon component for improved
 readability

---
 .../src/lib/service-terminal/input-search/input-search.tsx   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx b/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
index ecda68092b9..e71093054a8 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
@@ -51,7 +51,10 @@ export function InputSearch({ data, value, onChange, placeholder, trimLabel, siz
         </span>
       </Button>
       <div className={selectedItem ? 'hidden' : ''}>
-        <Icon iconName="magnifying-glass" className="absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-neutral-subtle" />
+        <Icon
+          iconName="magnifying-glass"
+          className="absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-neutral-subtle"
+        />
         <input
           placeholder={placeholder}
           className={clsx(

From ee808d7ee3b3b548186b74c122d0861abc00a445 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Thu, 26 Mar 2026 10:54:04 +0100
Subject: [PATCH 3/9] feat(service-terminal): implement enhanced banner
 rendering and command action handling in terminal UI

---
 .../lib/service-terminal/service-terminal.tsx | 350 +++++++++++++-----
 1 file changed, 264 insertions(+), 86 deletions(-)

diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
index 335c6858e0c..025c949f53e 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
@@ -29,69 +29,229 @@ class TerminalRefAddon implements ITerminalAddon {
   }
 }
 
-interface TerminalShellActionLink {
-  action: () => void
-  label: string
+interface TerminalBannerColors {
+  accent1: string
+  positive: string
+  subtle: string
+  warning: string
+}
+
+interface TerminalBannerSegment {
+  bold?: boolean
+  color?: string
+  text: string
 }
 
 class TerminalShellActionsAddon implements ITerminalAddon {
+  private static readonly COPY_COMMAND_LABEL = '[copy command]'
+  private static readonly FIRST_COMMAND_TITLE = '1. Use $ qovery shell'
+  private static readonly SECOND_COMMAND_TITLE = '2. Use $ qovery port-forward'
+  private static readonly LOOKBACK_LINE_COUNT = 6
+
   private linkProviderDisposable?: IDisposable
+  private resizeDisposable?: IDisposable
+  private bannerRenderTimeoutId?: ReturnType<typeof setTimeout>
+  private hasRenderedBanner = false
   private static readonly ANSI_BOLD = '\u001b[1m'
   private static readonly ANSI_RESET = '\u001b[0m'
 
   constructor(
-    private readonly links: TerminalShellActionLink[],
+    private readonly fitAddon: FitAddon,
+    private readonly colors: TerminalBannerColors,
+    private readonly onCopyPortForwardCommand: () => void,
+    private readonly onCopyShellCommand: () => void,
     private readonly shouldWriteBanner: boolean
   ) {}
 
-  activate(terminal: Terminal): void {
-    if (this.shouldWriteBanner) {
-      const horizontalPadding = 1
-      const actionLabels = this.links.map(({ label }) => label)
-      const headingLine = 'Quick actions to get started:'
-      const maxContentWidth = Math.max(1, terminal.cols - 4 - horizontalPadding * 2)
-      const actionLines: string[] = []
-      let currentActionLine = ''
-
-      actionLabels.forEach((label) => {
-        const nextLine = currentActionLine ? `${currentActionLine} ${label}` : label
-
-        if (nextLine.length <= maxContentWidth) {
-          currentActionLine = nextLine
-          return
-        }
+  private toAnsiColor(color: string): string {
+    const [r, g, b] = Color(color)
+      .rgb()
+      .array()
+      .map((value) => Math.round(value))
 
-        if (currentActionLine) {
-          actionLines.push(currentActionLine)
-        }
-        currentActionLine = label
+    return `\u001b[38;2;${r};${g};${b}m`
+  }
+
+  private formatSegment(segment: TerminalBannerSegment): string {
+    const stylePrefix = `${segment.bold ? TerminalShellActionsAddon.ANSI_BOLD : ''}${segment.color ? this.toAnsiColor(segment.color) : ''}`
+    if (!stylePrefix) {
+      return segment.text
+    }
+
+    return `${stylePrefix}${segment.text}${TerminalShellActionsAddon.ANSI_RESET}`
+  }
+
+  private clampSegments(segments: TerminalBannerSegment[], maxWidth: number): {
+    clippedSegments: TerminalBannerSegment[]
+    trailingPadding: string
+  } {
+    const clippedSegments: TerminalBannerSegment[] = []
+    let remainingWidth = maxWidth
+
+    segments.forEach((segment) => {
+      if (remainingWidth <= 0) {
+        return
+      }
+
+      const clippedText = segment.text.slice(0, remainingWidth)
+      if (!clippedText) {
+        return
+      }
+
+      clippedSegments.push({
+        ...segment,
+        text: clippedText,
       })
+      remainingWidth -= clippedText.length
+    })
+
+    return {
+      clippedSegments,
+      trailingPadding: ' '.repeat(Math.max(0, remainingWidth)),
+    }
+  }
+
+  private wrapSegments(segments: TerminalBannerSegment[], maxWidth: number): TerminalBannerSegment[][] {
+    if (!segments.some((segment) => segment.text.length > 0)) {
+      return [[{ text: '' }]]
+    }
+
+    const wrappedLines: TerminalBannerSegment[][] = []
+    let currentLine: TerminalBannerSegment[] = []
+    let remainingWidth = maxWidth
+
+    segments.forEach((segment) => {
+      let remainingText = segment.text
+
+      while (remainingText.length > 0) {
+        if (remainingWidth <= 0) {
+          wrappedLines.push(currentLine)
+          currentLine = []
+          remainingWidth = maxWidth
+        }
 
-      if (currentActionLine) {
-        actionLines.push(currentActionLine)
+        const chunkLength = Math.min(remainingWidth, remainingText.length)
+        const chunk = remainingText.slice(0, chunkLength)
+
+        currentLine.push({
+          ...segment,
+          text: chunk,
+        })
+
+        remainingText = remainingText.slice(chunkLength)
+        remainingWidth -= chunkLength
       }
+    })
+
+    if (currentLine.length > 0) {
+      wrappedLines.push(currentLine)
+    }
+
+    return wrappedLines.length > 0 ? wrappedLines : [[{ text: '' }]]
+  }
+
+  private resolveCopyCommandAction(terminal: Terminal, bufferLineNumber: number): (() => void) | undefined {
+    const contextLines = Array.from({ length: TerminalShellActionsAddon.LOOKBACK_LINE_COUNT }, (_, index) =>
+      terminal.buffer.active.getLine(bufferLineNumber - 2 - index)?.translateToString(false)
+    )
+      .filter((line): line is string => Boolean(line))
+      .join(' ')
 
-      const bannerLines = ['Qovery cloud shell', '', headingLine, ...actionLines]
-      const maxBannerLineLength = Math.max(...bannerLines.map((line) => line.length))
-      const bannerContentWidth = Math.min(Math.max(20, maxBannerLineLength), maxContentWidth)
-      const bannerInnerWidth = bannerContentWidth + horizontalPadding * 2
-      const lineContentWidth = bannerInnerWidth + 2
-      const formatBannerLine = (line: string, bold?: boolean) => {
-        const visibleLine = line.length > bannerContentWidth ? line.slice(0, bannerContentWidth) : line
-        const trailingPadding = ' '.repeat(bannerContentWidth - visibleLine.length)
-        const styledText = bold
-          ? `${TerminalShellActionsAddon.ANSI_BOLD}${visibleLine}${TerminalShellActionsAddon.ANSI_RESET}${trailingPadding}`
-          : `${visibleLine}${trailingPadding}`
-
-        return `│ ${' '.repeat(horizontalPadding)}${styledText}${' '.repeat(horizontalPadding)} │`
+    if (contextLines.includes(TerminalShellActionsAddon.SECOND_COMMAND_TITLE)) {
+      return this.onCopyPortForwardCommand
+    }
+
+    if (contextLines.includes(TerminalShellActionsAddon.FIRST_COMMAND_TITLE)) {
+      return this.onCopyShellCommand
+    }
+
+    return undefined
+  }
+
+  private writeBanner(terminal: Terminal): void {
+    const horizontalPadding = 1
+    const maxContentWidth = Math.max(1, terminal.cols - 4 - horizontalPadding * 2)
+    const bannerContentWidth = maxContentWidth
+    const bannerInnerWidth = bannerContentWidth + horizontalPadding * 2
+    const lineContentWidth = bannerInnerWidth + 2
+    const formatBannerLine = (segments: TerminalBannerSegment[]) => {
+      const { clippedSegments, trailingPadding } = this.clampSegments(segments, bannerContentWidth)
+      const styledText = clippedSegments.map((segment) => this.formatSegment(segment)).join('') + trailingPadding
+
+      return `│ ${' '.repeat(horizontalPadding)}${styledText}${' '.repeat(horizontalPadding)} │`
+    }
+
+    const firstCommandLine: TerminalBannerSegment[] = [
+      { bold: true, color: this.colors.warning, text: `${TerminalShellActionsAddon.FIRST_COMMAND_TITLE} ` },
+      { color: this.colors.accent1, text: '<service-url> ' },
+      { color: this.colors.positive, text: '--pod ' },
+      { color: this.colors.accent1, text: '<pod-name> ' },
+      { color: this.colors.positive, text: '--container ' },
+      { color: this.colors.accent1, text: '<container-id>' },
+    ]
+
+    const secondCommandLine: TerminalBannerSegment[] = [
+      { bold: true, color: this.colors.warning, text: `${TerminalShellActionsAddon.SECOND_COMMAND_TITLE} ` },
+      { color: this.colors.positive, text: '--organization ' },
+      { color: this.colors.accent1, text: '<org-id> ' },
+      { color: this.colors.positive, text: '--project ' },
+      { color: this.colors.accent1, text: '<project-id> ' },
+      { color: this.colors.positive, text: '--environment ' },
+      { color: this.colors.accent1, text: '<env-id> ' },
+      { color: this.colors.positive, text: '--service ' },
+      { color: this.colors.accent1, text: '<service-id> ' },
+      { color: this.colors.positive, text: '--port ' },
+      { color: this.colors.accent1, text: '<local-port:target-port>' },
+    ]
+
+    const bannerLines: TerminalBannerSegment[][] = [
+      [{ bold: true, text: 'Connect from your local terminal via the Qovery CLI' }],
+      [{ text: '' }],
+      firstCommandLine,
+      [{ color: this.colors.subtle, text: 'Open an interactive shell inside a running container' }],
+      [{ text: TerminalShellActionsAddon.COPY_COMMAND_LABEL }],
+      [{ text: '' }],
+      secondCommandLine,
+      [{ color: this.colors.subtle, text: 'Forward a pod port to localhost' }],
+      [{ text: TerminalShellActionsAddon.COPY_COMMAND_LABEL }],
+    ]
+
+    terminal.writeln(`┌${'─'.repeat(lineContentWidth)}┐`)
+    terminal.writeln(formatBannerLine([{ text: '' }]))
+    bannerLines.forEach((line) => {
+      this.wrapSegments(line, bannerContentWidth).forEach((wrappedLine) => {
+        terminal.writeln(formatBannerLine(wrappedLine))
+      })
+    })
+    terminal.writeln(formatBannerLine([{ text: '' }]))
+    terminal.writeln(`└${'─'.repeat(lineContentWidth)}┘`)
+    terminal.writeln('')
+  }
+
+  activate(terminal: Terminal): void {
+    if (this.shouldWriteBanner) {
+      const renderWhenFitIsStable = () => {
+        if (this.bannerRenderTimeoutId) {
+          clearTimeout(this.bannerRenderTimeoutId)
+        }
+
+        this.bannerRenderTimeoutId = setTimeout(() => {
+          if (this.hasRenderedBanner) {
+            return
+          }
+
+          this.fitAddon.fit()
+          this.writeBanner(terminal)
+          this.hasRenderedBanner = true
+          this.resizeDisposable?.dispose()
+          this.resizeDisposable = undefined
+        }, 120)
       }
 
-      terminal.writeln(`┌${'─'.repeat(lineContentWidth)}┐`)
-      terminal.writeln(formatBannerLine(''))
-      bannerLines.forEach((line, index) => terminal.writeln(formatBannerLine(line, index === 0)))
-      terminal.writeln(formatBannerLine(''))
-      terminal.writeln(`└${'─'.repeat(lineContentWidth)}┘`)
-      terminal.writeln('')
+      this.resizeDisposable = terminal.onResize(() => {
+        renderWhenFitIsStable()
+      })
+      renderWhenFitIsStable()
     }
 
     this.linkProviderDisposable = terminal.registerLinkProvider({
@@ -104,16 +264,17 @@ class TerminalShellActionsAddon implements ITerminalAddon {
         }
 
         const lineText = line.translateToString(false)
-        const lineLinks = this.links.flatMap(({ label, action }) => {
-          const linkRanges = []
-          let fromIndex = 0
+        const linkRanges = []
+        let fromIndex = 0
 
-          while (fromIndex < lineText.length) {
-            const labelIndex = lineText.indexOf(label, fromIndex)
-            if (labelIndex === -1) {
-              break
-            }
+        while (fromIndex < lineText.length) {
+          const labelIndex = lineText.indexOf(TerminalShellActionsAddon.COPY_COMMAND_LABEL, fromIndex)
+          if (labelIndex === -1) {
+            break
+          }
 
+          const action = this.resolveCopyCommandAction(terminal, bufferLineNumber)
+          if (action) {
             linkRanges.push({
               activate: () => action(),
               decorations: {
@@ -122,7 +283,7 @@ class TerminalShellActionsAddon implements ITerminalAddon {
               },
               range: {
                 end: {
-                  x: labelIndex + label.length + 1,
+                  x: labelIndex + TerminalShellActionsAddon.COPY_COMMAND_LABEL.length + 1,
                   y: bufferLineNumber,
                 },
                 start: {
@@ -130,22 +291,28 @@ class TerminalShellActionsAddon implements ITerminalAddon {
                   y: bufferLineNumber,
                 },
               },
-              text: label,
+              text: TerminalShellActionsAddon.COPY_COMMAND_LABEL,
             })
-            fromIndex = labelIndex + label.length
           }
 
-          return linkRanges
-        })
+          fromIndex = labelIndex + TerminalShellActionsAddon.COPY_COMMAND_LABEL.length
+        }
 
-        callback(lineLinks.length > 0 ? lineLinks : undefined)
+        callback(linkRanges.length > 0 ? linkRanges : undefined)
       },
     })
   }
 
   dispose(): void {
+    if (this.bannerRenderTimeoutId) {
+      clearTimeout(this.bannerRenderTimeoutId)
+      this.bannerRenderTimeoutId = undefined
+    }
+
     this.linkProviderDisposable?.dispose()
+    this.resizeDisposable?.dispose()
     this.linkProviderDisposable = undefined
+    this.resizeDisposable = undefined
   }
 }
 
@@ -183,6 +350,19 @@ export function ServiceTerminal({
   const foreground = getCssVariableHex('--neutral-12')
   const selectionBackground = getCssVariableHex('--brand-3')
   const selectionForeground = getCssVariableHex('--neutral-12')
+  const warningTextColor = getCssVariableHex('--warning-11')
+  const accent1TextColor = getCssVariableHex('--accent-11')
+  const positiveTextColor = getCssVariableHex('--positive-11')
+  const subtleTextColor = getCssVariableHex('--neutral-11')
+  const terminalBannerColors = useMemo(
+    () => ({
+      accent1: accent1TextColor,
+      positive: positiveTextColor,
+      subtle: subtleTextColor,
+      warning: warningTextColor,
+    }),
+    [accent1TextColor, positiveTextColor, subtleTextColor, warningTextColor]
+  )
   const terminalOptions = useMemo(
     () => ({
       theme: {
@@ -210,37 +390,29 @@ export function ServiceTerminal({
   ]
     .filter((commandPart): commandPart is string => Boolean(commandPart))
     .join(' ')
-  const portForwardCommand = [
-    'qovery port-forward \\',
-    `  --organization "${organizationId}" \\`,
-    `  --project "${projectId}" \\`,
-    `  --environment "${environmentId}" \\`,
-    `  --service "${serviceId}" \\`,
-    '  --port [local-port]:[target-port]',
-  ].join('\n')
-  const prefillCommand = useCallback((command: string) => {
+  const portForwardCommand = `qovery port-forward --organization ${organizationId} --project ${projectId} --environment ${environmentId} --service ${serviceId} --port <local-port:target-port>`
+  const prefillCommand = useCallback((command: string, shouldPasteInTerminal = true) => {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      void navigator.clipboard.writeText(command).catch(() => undefined)
+    }
+
+    if (!shouldPasteInTerminal) {
+      return
+    }
+
     if (!terminalRef.current) {
       return
     }
     terminalRef.current.focus()
     terminalRef.current.paste(`\u0015${command}`)
   }, [])
-  const terminalShellLinks = useMemo(
-    () => [
-      {
-        label: '[connect locally]',
-        action: () => prefillCommand(connectShellCommand),
-      },
-      {
-        label: '[forward port]',
-        action: () => prefillCommand(portForwardCommand),
-      },
-      {
-        label: '[show env variables]',
-        action: () => prefillCommand('printenv'),
-      },
-    ],
-    [connectShellCommand, portForwardCommand, prefillCommand]
+  const onCopyShellCommand = useCallback(
+    () => prefillCommand(connectShellCommand, false),
+    [connectShellCommand, prefillCommand]
+  )
+  const onCopyPortForwardCommand = useCallback(
+    () => prefillCommand(portForwardCommand, false),
+    [portForwardCommand, prefillCommand]
   )
 
   const onOpenHandler = useCallback(
@@ -263,10 +435,16 @@ export function ServiceTerminal({
             terminalRef.current = null
           }
         ),
-        new TerminalShellActionsAddon(terminalShellLinks, shouldWriteShellBanner),
+        new TerminalShellActionsAddon(
+          fitAddon,
+          terminalBannerColors,
+          onCopyPortForwardCommand,
+          onCopyShellCommand,
+          shouldWriteShellBanner
+        ),
       ])
     },
-    [attachWebSocket, setAddons, terminalShellLinks]
+    [attachWebSocket, onCopyPortForwardCommand, onCopyShellCommand, setAddons, terminalBannerColors]
   )
 
   const onCloseHandler = useCallback(

From d8207b6f8d36af4947bb65052da962b5e34bf795 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Thu, 26 Mar 2026 11:28:05 +0100
Subject: [PATCH 4/9] feat(service-terminal): add terminal launch empty state +
 simplify CLI banner

---
 .../service-terminal.spec.tsx                 |  58 ++-
 .../lib/service-terminal/service-terminal.tsx | 385 ++----------------
 .../terminal-shell-banner-addon.ts            | 305 ++++++++++++++
 3 files changed, 407 insertions(+), 341 deletions(-)
 create mode 100644 libs/domains/services/feature/src/lib/service-terminal/terminal-shell-banner-addon.ts

diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx
index 2f27ff69ead..4a9dfa18be4 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx
@@ -1,3 +1,7 @@
+import { type QueryClient } from '@tanstack/react-query'
+import { act, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useReactQueryWsSubscription } from '@qovery/state/util-queries'
 import { renderWithProviders } from '@qovery/shared/util-tests'
 import { ServiceTerminal, type ServiceTerminalProps } from './service-terminal'
 
@@ -13,7 +17,7 @@ jest.mock('@qovery/state/util-queries', () => ({
 }))
 
 jest.mock('../..', () => ({
-  useRunningStatus: () => ({ data: { pods: [] }, isLoading: false }),
+  useRunningStatus: () => ({ data: { pods: [], state: 'STOPPED' }, isLoading: false }),
 }))
 
 const props: ServiceTerminalProps = {
@@ -23,9 +27,61 @@ const props: ServiceTerminalProps = {
   environmentId: '0',
   serviceId: '0',
 }
+
+const useReactQueryWsSubscriptionMock = jest.mocked(useReactQueryWsSubscription)
+
+const getLatestWsSubscriptionConfig = (): Parameters<typeof useReactQueryWsSubscription>[0] => {
+  const latestCall = useReactQueryWsSubscriptionMock.mock.calls.at(-1)
+
+  if (!latestCall) {
+    throw new Error('Expected useReactQueryWsSubscription to be called at least once.')
+  }
+
+  return latestCall[0]
+}
+
 describe('ServiceTerminal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
   it('should match snapshot', () => {
     const { baseElement } = renderWithProviders(<ServiceTerminal {...props} />)
     expect(baseElement).toMatchSnapshot()
   })
+
+  it('should show a retry empty state and disable subscription on terminal launch error', () => {
+    renderWithProviders(<ServiceTerminal {...props} />)
+
+    act(() => {
+      getLatestWsSubscriptionConfig().onClose?.(
+        {} as QueryClient,
+        new CloseEvent('close', { code: 1000, reason: 'No pod exists for this application.' })
+      )
+    })
+
+    expect(screen.getByText('Unable to launch CLI')).toBeInTheDocument()
+    expect(screen.getByText("We could not launch the CLI for this service because it's stopped.")).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Relaunch' })).toBeInTheDocument()
+    expect(useReactQueryWsSubscriptionMock).toHaveBeenLastCalledWith(expect.objectContaining({ enabled: false }))
+  })
+
+  it('should restart terminal launch flow when retrying from empty state', async () => {
+    const user = userEvent.setup()
+    renderWithProviders(<ServiceTerminal {...props} />)
+
+    act(() => {
+      getLatestWsSubscriptionConfig().onClose?.(
+        {} as QueryClient,
+        new CloseEvent('close', { code: 1000, reason: 'No pod exists for this application.' })
+      )
+    })
+
+    await user.click(screen.getByRole('button', { name: 'Relaunch' }))
+
+    await waitFor(() => {
+      expect(screen.queryByText('Unable to launch CLI')).not.toBeInTheDocument()
+      expect(useReactQueryWsSubscriptionMock).toHaveBeenLastCalledWith(expect.objectContaining({ enabled: true }))
+    })
+  })
 })
diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
index 025c949f53e..2b478693a7b 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
@@ -1,321 +1,21 @@
 import { type QueryClient } from '@tanstack/react-query'
 import { AttachAddon } from '@xterm/addon-attach'
 import { FitAddon } from '@xterm/addon-fit'
-import { type IDisposable, type ITerminalAddon, type Terminal } from '@xterm/xterm'
+import { type ITerminalAddon } from '@xterm/xterm'
 import Color from 'color'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { match } from 'ts-pattern'
 import { XTerm } from 'react-xtermjs'
-import { ExternalLink, Icon, LoaderSpinner, toast } from '@qovery/shared/ui'
+import { Button, EmptyState, ExternalLink, Icon, LoaderSpinner, toast } from '@qovery/shared/ui'
 import { useTerminalReadiness } from '@qovery/shared/util-hooks'
 import { QOVERY_WS } from '@qovery/shared/util-node-env'
 import { useReactQueryWsSubscription } from '@qovery/state/util-queries'
 import { useRunningStatus } from '../..'
 import { InputSearch } from './input-search/input-search'
+import { TerminalShellActionsAddon } from './terminal-shell-banner-addon'
 
 const MemoizedXTerm = memo(XTerm)
 
-class TerminalRefAddon implements ITerminalAddon {
-  constructor(
-    private readonly onTerminalReady?: (terminal: Terminal) => void,
-    private readonly onTerminalDispose?: () => void
-  ) {}
-
-  activate(terminal: Terminal): void {
-    this.onTerminalReady?.(terminal)
-  }
-
-  dispose(): void {
-    this.onTerminalDispose?.()
-  }
-}
-
-interface TerminalBannerColors {
-  accent1: string
-  positive: string
-  subtle: string
-  warning: string
-}
-
-interface TerminalBannerSegment {
-  bold?: boolean
-  color?: string
-  text: string
-}
-
-class TerminalShellActionsAddon implements ITerminalAddon {
-  private static readonly COPY_COMMAND_LABEL = '[copy command]'
-  private static readonly FIRST_COMMAND_TITLE = '1. Use $ qovery shell'
-  private static readonly SECOND_COMMAND_TITLE = '2. Use $ qovery port-forward'
-  private static readonly LOOKBACK_LINE_COUNT = 6
-
-  private linkProviderDisposable?: IDisposable
-  private resizeDisposable?: IDisposable
-  private bannerRenderTimeoutId?: ReturnType<typeof setTimeout>
-  private hasRenderedBanner = false
-  private static readonly ANSI_BOLD = '\u001b[1m'
-  private static readonly ANSI_RESET = '\u001b[0m'
-
-  constructor(
-    private readonly fitAddon: FitAddon,
-    private readonly colors: TerminalBannerColors,
-    private readonly onCopyPortForwardCommand: () => void,
-    private readonly onCopyShellCommand: () => void,
-    private readonly shouldWriteBanner: boolean
-  ) {}
-
-  private toAnsiColor(color: string): string {
-    const [r, g, b] = Color(color)
-      .rgb()
-      .array()
-      .map((value) => Math.round(value))
-
-    return `\u001b[38;2;${r};${g};${b}m`
-  }
-
-  private formatSegment(segment: TerminalBannerSegment): string {
-    const stylePrefix = `${segment.bold ? TerminalShellActionsAddon.ANSI_BOLD : ''}${segment.color ? this.toAnsiColor(segment.color) : ''}`
-    if (!stylePrefix) {
-      return segment.text
-    }
-
-    return `${stylePrefix}${segment.text}${TerminalShellActionsAddon.ANSI_RESET}`
-  }
-
-  private clampSegments(segments: TerminalBannerSegment[], maxWidth: number): {
-    clippedSegments: TerminalBannerSegment[]
-    trailingPadding: string
-  } {
-    const clippedSegments: TerminalBannerSegment[] = []
-    let remainingWidth = maxWidth
-
-    segments.forEach((segment) => {
-      if (remainingWidth <= 0) {
-        return
-      }
-
-      const clippedText = segment.text.slice(0, remainingWidth)
-      if (!clippedText) {
-        return
-      }
-
-      clippedSegments.push({
-        ...segment,
-        text: clippedText,
-      })
-      remainingWidth -= clippedText.length
-    })
-
-    return {
-      clippedSegments,
-      trailingPadding: ' '.repeat(Math.max(0, remainingWidth)),
-    }
-  }
-
-  private wrapSegments(segments: TerminalBannerSegment[], maxWidth: number): TerminalBannerSegment[][] {
-    if (!segments.some((segment) => segment.text.length > 0)) {
-      return [[{ text: '' }]]
-    }
-
-    const wrappedLines: TerminalBannerSegment[][] = []
-    let currentLine: TerminalBannerSegment[] = []
-    let remainingWidth = maxWidth
-
-    segments.forEach((segment) => {
-      let remainingText = segment.text
-
-      while (remainingText.length > 0) {
-        if (remainingWidth <= 0) {
-          wrappedLines.push(currentLine)
-          currentLine = []
-          remainingWidth = maxWidth
-        }
-
-        const chunkLength = Math.min(remainingWidth, remainingText.length)
-        const chunk = remainingText.slice(0, chunkLength)
-
-        currentLine.push({
-          ...segment,
-          text: chunk,
-        })
-
-        remainingText = remainingText.slice(chunkLength)
-        remainingWidth -= chunkLength
-      }
-    })
-
-    if (currentLine.length > 0) {
-      wrappedLines.push(currentLine)
-    }
-
-    return wrappedLines.length > 0 ? wrappedLines : [[{ text: '' }]]
-  }
-
-  private resolveCopyCommandAction(terminal: Terminal, bufferLineNumber: number): (() => void) | undefined {
-    const contextLines = Array.from({ length: TerminalShellActionsAddon.LOOKBACK_LINE_COUNT }, (_, index) =>
-      terminal.buffer.active.getLine(bufferLineNumber - 2 - index)?.translateToString(false)
-    )
-      .filter((line): line is string => Boolean(line))
-      .join(' ')
-
-    if (contextLines.includes(TerminalShellActionsAddon.SECOND_COMMAND_TITLE)) {
-      return this.onCopyPortForwardCommand
-    }
-
-    if (contextLines.includes(TerminalShellActionsAddon.FIRST_COMMAND_TITLE)) {
-      return this.onCopyShellCommand
-    }
-
-    return undefined
-  }
-
-  private writeBanner(terminal: Terminal): void {
-    const horizontalPadding = 1
-    const maxContentWidth = Math.max(1, terminal.cols - 4 - horizontalPadding * 2)
-    const bannerContentWidth = maxContentWidth
-    const bannerInnerWidth = bannerContentWidth + horizontalPadding * 2
-    const lineContentWidth = bannerInnerWidth + 2
-    const formatBannerLine = (segments: TerminalBannerSegment[]) => {
-      const { clippedSegments, trailingPadding } = this.clampSegments(segments, bannerContentWidth)
-      const styledText = clippedSegments.map((segment) => this.formatSegment(segment)).join('') + trailingPadding
-
-      return `│ ${' '.repeat(horizontalPadding)}${styledText}${' '.repeat(horizontalPadding)} │`
-    }
-
-    const firstCommandLine: TerminalBannerSegment[] = [
-      { bold: true, color: this.colors.warning, text: `${TerminalShellActionsAddon.FIRST_COMMAND_TITLE} ` },
-      { color: this.colors.accent1, text: '<service-url> ' },
-      { color: this.colors.positive, text: '--pod ' },
-      { color: this.colors.accent1, text: '<pod-name> ' },
-      { color: this.colors.positive, text: '--container ' },
-      { color: this.colors.accent1, text: '<container-id>' },
-    ]
-
-    const secondCommandLine: TerminalBannerSegment[] = [
-      { bold: true, color: this.colors.warning, text: `${TerminalShellActionsAddon.SECOND_COMMAND_TITLE} ` },
-      { color: this.colors.positive, text: '--organization ' },
-      { color: this.colors.accent1, text: '<org-id> ' },
-      { color: this.colors.positive, text: '--project ' },
-      { color: this.colors.accent1, text: '<project-id> ' },
-      { color: this.colors.positive, text: '--environment ' },
-      { color: this.colors.accent1, text: '<env-id> ' },
-      { color: this.colors.positive, text: '--service ' },
-      { color: this.colors.accent1, text: '<service-id> ' },
-      { color: this.colors.positive, text: '--port ' },
-      { color: this.colors.accent1, text: '<local-port:target-port>' },
-    ]
-
-    const bannerLines: TerminalBannerSegment[][] = [
-      [{ bold: true, text: 'Connect from your local terminal via the Qovery CLI' }],
-      [{ text: '' }],
-      firstCommandLine,
-      [{ color: this.colors.subtle, text: 'Open an interactive shell inside a running container' }],
-      [{ text: TerminalShellActionsAddon.COPY_COMMAND_LABEL }],
-      [{ text: '' }],
-      secondCommandLine,
-      [{ color: this.colors.subtle, text: 'Forward a pod port to localhost' }],
-      [{ text: TerminalShellActionsAddon.COPY_COMMAND_LABEL }],
-    ]
-
-    terminal.writeln(`┌${'─'.repeat(lineContentWidth)}┐`)
-    terminal.writeln(formatBannerLine([{ text: '' }]))
-    bannerLines.forEach((line) => {
-      this.wrapSegments(line, bannerContentWidth).forEach((wrappedLine) => {
-        terminal.writeln(formatBannerLine(wrappedLine))
-      })
-    })
-    terminal.writeln(formatBannerLine([{ text: '' }]))
-    terminal.writeln(`└${'─'.repeat(lineContentWidth)}┘`)
-    terminal.writeln('')
-  }
-
-  activate(terminal: Terminal): void {
-    if (this.shouldWriteBanner) {
-      const renderWhenFitIsStable = () => {
-        if (this.bannerRenderTimeoutId) {
-          clearTimeout(this.bannerRenderTimeoutId)
-        }
-
-        this.bannerRenderTimeoutId = setTimeout(() => {
-          if (this.hasRenderedBanner) {
-            return
-          }
-
-          this.fitAddon.fit()
-          this.writeBanner(terminal)
-          this.hasRenderedBanner = true
-          this.resizeDisposable?.dispose()
-          this.resizeDisposable = undefined
-        }, 120)
-      }
-
-      this.resizeDisposable = terminal.onResize(() => {
-        renderWhenFitIsStable()
-      })
-      renderWhenFitIsStable()
-    }
-
-    this.linkProviderDisposable = terminal.registerLinkProvider({
-      provideLinks: (bufferLineNumber, callback) => {
-        const line = terminal.buffer.active.getLine(bufferLineNumber - 1)
-
-        if (!line) {
-          callback(undefined)
-          return
-        }
-
-        const lineText = line.translateToString(false)
-        const linkRanges = []
-        let fromIndex = 0
-
-        while (fromIndex < lineText.length) {
-          const labelIndex = lineText.indexOf(TerminalShellActionsAddon.COPY_COMMAND_LABEL, fromIndex)
-          if (labelIndex === -1) {
-            break
-          }
-
-          const action = this.resolveCopyCommandAction(terminal, bufferLineNumber)
-          if (action) {
-            linkRanges.push({
-              activate: () => action(),
-              decorations: {
-                pointerCursor: true,
-                underline: false,
-              },
-              range: {
-                end: {
-                  x: labelIndex + TerminalShellActionsAddon.COPY_COMMAND_LABEL.length + 1,
-                  y: bufferLineNumber,
-                },
-                start: {
-                  x: labelIndex + 1,
-                  y: bufferLineNumber,
-                },
-              },
-              text: TerminalShellActionsAddon.COPY_COMMAND_LABEL,
-            })
-          }
-
-          fromIndex = labelIndex + TerminalShellActionsAddon.COPY_COMMAND_LABEL.length
-        }
-
-        callback(linkRanges.length > 0 ? linkRanges : undefined)
-      },
-    })
-  }
-
-  dispose(): void {
-    if (this.bannerRenderTimeoutId) {
-      clearTimeout(this.bannerRenderTimeoutId)
-      this.bannerRenderTimeoutId = undefined
-    }
-
-    this.linkProviderDisposable?.dispose()
-    this.resizeDisposable?.dispose()
-    this.linkProviderDisposable = undefined
-    this.resizeDisposable = undefined
-  }
-}
-
 export interface ServiceTerminalProps {
   organizationId: string
   clusterId: string
@@ -332,11 +32,12 @@ export function ServiceTerminal({
   serviceId,
 }: ServiceTerminalProps) {
   const { data: runningStatuses } = useRunningStatus({ environmentId, serviceId })
-  const terminalRef = useRef<Terminal | null>(null)
   const hasWrittenShellBannerRef = useRef(false)
 
   const [addons, setAddons] = useState<Array<ITerminalAddon>>([])
+  const [terminalLaunchError, setTerminalLaunchError] = useState<string | null>(null)
   const isTerminalLoading = addons.length < 2
+  const isTerminalSubscriptionEnabled = terminalLaunchError === null
   const { attachWebSocket, detachWebSocket, isTerminalReady, resetTerminalReadiness } = useTerminalReadiness()
   const showDelayedLoader = !isTerminalReady
   const fitAddon = addons[0] as FitAddon | undefined
@@ -385,34 +86,16 @@ export function ServiceTerminal({
     selectedContainer ?? runningStatuses?.pods.find((pod) => pod.name === selectedOrDefaultPodName)?.containers[0]?.name
   const connectShellCommand = [
     `qovery shell https://console.qovery.com/organization/${organizationId}/project/${projectId}/environment/${environmentId}/application/${serviceId}`,
-    selectedOrDefaultPodName ? `--pod-name=${selectedOrDefaultPodName}` : undefined,
+    selectedOrDefaultPodName ? `--pod=${selectedOrDefaultPodName}` : undefined,
     selectedOrDefaultContainerName ? `--container=${selectedOrDefaultContainerName}` : undefined,
   ]
     .filter((commandPart): commandPart is string => Boolean(commandPart))
     .join(' ')
   const portForwardCommand = `qovery port-forward --organization ${organizationId} --project ${projectId} --environment ${environmentId} --service ${serviceId} --port <local-port:target-port>`
-  const prefillCommand = useCallback((command: string, shouldPasteInTerminal = true) => {
-    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
-      void navigator.clipboard.writeText(command).catch(() => undefined)
-    }
-
-    if (!shouldPasteInTerminal) {
-      return
-    }
-
-    if (!terminalRef.current) {
-      return
-    }
-    terminalRef.current.focus()
-    terminalRef.current.paste(`\u0015${command}`)
-  }, [])
-  const onCopyShellCommand = useCallback(
-    () => prefillCommand(connectShellCommand, false),
-    [connectShellCommand, prefillCommand]
-  )
-  const onCopyPortForwardCommand = useCallback(
-    () => prefillCommand(portForwardCommand, false),
-    [portForwardCommand, prefillCommand]
+  const getShellCommand = useCallback(() => connectShellCommand, [connectShellCommand])
+  const getPortForwardCommand = useCallback(
+    () => portForwardCommand,
+    [portForwardCommand]
   )
 
   const onOpenHandler = useCallback(
@@ -423,41 +106,52 @@ export function ServiceTerminal({
 
       // As WS are open twice in dev mode / strict mode it doesn't happens in production
       attachWebSocket(websocket)
+      setTerminalLaunchError(null)
       hasWrittenShellBannerRef.current = true
       setAddons([
         fitAddon,
         new AttachAddon(websocket),
-        new TerminalRefAddon(
-          (terminal) => {
-            terminalRef.current = terminal
-          },
-          () => {
-            terminalRef.current = null
-          }
-        ),
         new TerminalShellActionsAddon(
           fitAddon,
           terminalBannerColors,
-          onCopyPortForwardCommand,
-          onCopyShellCommand,
+          getPortForwardCommand,
+          getShellCommand,
           shouldWriteShellBanner
         ),
       ])
     },
-    [attachWebSocket, onCopyPortForwardCommand, onCopyShellCommand, setAddons, terminalBannerColors]
+    [attachWebSocket, getPortForwardCommand, getShellCommand, setAddons, terminalBannerColors]
   )
 
   const onCloseHandler = useCallback(
     (_: QueryClient, event: CloseEvent) => {
       detachWebSocket()
+      setAddons([])
 
       if (event.code !== 1006 && event.reason) {
+        setTerminalLaunchError(event.reason)
         toast('ERROR', 'Not available', event.reason)
       }
     },
     [detachWebSocket]
   )
 
+  const onRetryCliLaunch = useCallback(() => {
+    detachWebSocket()
+    hasWrittenShellBannerRef.current = false
+    setAddons([])
+    setTerminalLaunchError(null)
+    resetTerminalReadiness()
+  }, [detachWebSocket, resetTerminalReadiness])
+  const terminalUnavailableDescription = useMemo(
+    () =>
+      match(runningStatuses?.state)
+        .with('STOPPED', () => "We could not launch the CLI for this service because it's stopped.")
+        .with('ERROR', () => "We could not launch the CLI for this service because it's in error.")
+        .otherwise(() => "We could not launch the CLI for this service because it's not running."),
+    [runningStatuses?.state]
+  )
+
   // Necesssary to calculate the number of rows and columns (tty) for the terminal
   // https://github.com/xtermjs/xterm.js/issues/1412#issuecomment-724421101
   // 16 is the font height
@@ -479,6 +173,7 @@ export function ServiceTerminal({
     },
     onOpen: onOpenHandler,
     onClose: onCloseHandler,
+    enabled: isTerminalSubscriptionEnabled,
   })
 
   useEffect(() => {
@@ -534,7 +229,17 @@ export function ServiceTerminal({
       </div>
       <div className="flex h-full flex-1 flex-col bg-background p-3">
         <div className="relative min-h-0 flex-1">
-          {isTerminalLoading ? (
+          {terminalLaunchError ? (
+            <EmptyState
+              icon="terminal"
+              title="Unable to launch CLI"
+              description={terminalUnavailableDescription}
+            >
+              <Button size="md" color="neutral" onClick={onRetryCliLaunch}>
+                Relaunch
+              </Button>
+            </EmptyState>
+          ) : isTerminalLoading ? (
             <div className="flex h-40 items-start justify-center p-5">
               <LoaderSpinner />
             </div>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/terminal-shell-banner-addon.ts b/libs/domains/services/feature/src/lib/service-terminal/terminal-shell-banner-addon.ts
new file mode 100644
index 00000000000..50472bf4b7a
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/service-terminal/terminal-shell-banner-addon.ts
@@ -0,0 +1,305 @@
+import { FitAddon } from '@xterm/addon-fit'
+import { type IDisposable, type ITerminalAddon, type Terminal } from '@xterm/xterm'
+import Color from 'color'
+
+export interface TerminalBannerColors {
+  accent1: string
+  positive: string
+  subtle: string
+  warning: string
+}
+
+interface TerminalBannerSegment {
+  bold?: boolean
+  color?: string
+  text: string
+}
+
+export class TerminalShellActionsAddon implements ITerminalAddon {
+  private static readonly COPY_COMMAND_LABEL = '[copy command]'
+  private static readonly FIRST_COMMAND_TITLE = '1. Use $ qovery shell'
+  private static readonly SECOND_COMMAND_TITLE = '2. Use $ qovery port-forward'
+  private static readonly LOOKBACK_LINE_COUNT = 6
+
+  private linkProviderDisposable?: IDisposable
+  private resizeDisposable?: IDisposable
+  private bannerRenderTimeoutId?: ReturnType<typeof setTimeout>
+  private hasRenderedBanner = false
+  private static readonly ANSI_BOLD = '\u001b[1m'
+  private static readonly ANSI_RESET = '\u001b[0m'
+
+  constructor(
+    private readonly fitAddon: FitAddon,
+    private readonly colors: TerminalBannerColors,
+    private readonly getPortForwardCommand: () => string,
+    private readonly getShellCommand: () => string,
+    private readonly shouldWriteBanner: boolean
+  ) {}
+
+  private toAnsiColor(color: string): string {
+    const [r, g, b] = Color(color)
+      .rgb()
+      .array()
+      .map((value) => Math.round(value))
+
+    return `\u001b[38;2;${r};${g};${b}m`
+  }
+
+  private formatSegment(segment: TerminalBannerSegment): string {
+    const stylePrefix = `${segment.bold ? TerminalShellActionsAddon.ANSI_BOLD : ''}${segment.color ? this.toAnsiColor(segment.color) : ''}`
+    if (!stylePrefix) {
+      return segment.text
+    }
+
+    return `${stylePrefix}${segment.text}${TerminalShellActionsAddon.ANSI_RESET}`
+  }
+
+  private clampSegments(segments: TerminalBannerSegment[], maxWidth: number): {
+    clippedSegments: TerminalBannerSegment[]
+    trailingPadding: string
+  } {
+    const clippedSegments: TerminalBannerSegment[] = []
+    let remainingWidth = maxWidth
+
+    segments.forEach((segment) => {
+      if (remainingWidth <= 0) {
+        return
+      }
+
+      const clippedText = segment.text.slice(0, remainingWidth)
+      if (!clippedText) {
+        return
+      }
+
+      clippedSegments.push({
+        ...segment,
+        text: clippedText,
+      })
+      remainingWidth -= clippedText.length
+    })
+
+    return {
+      clippedSegments,
+      trailingPadding: ' '.repeat(Math.max(0, remainingWidth)),
+    }
+  }
+
+  private wrapSegments(segments: TerminalBannerSegment[], maxWidth: number): TerminalBannerSegment[][] {
+    if (!segments.some((segment) => segment.text.length > 0)) {
+      return [[{ text: '' }]]
+    }
+
+    const wrappedLines: TerminalBannerSegment[][] = []
+    let currentLine: TerminalBannerSegment[] = []
+    let remainingWidth = maxWidth
+
+    segments.forEach((segment) => {
+      let remainingText = segment.text
+
+      while (remainingText.length > 0) {
+        if (remainingWidth <= 0) {
+          wrappedLines.push(currentLine)
+          currentLine = []
+          remainingWidth = maxWidth
+        }
+
+        const chunkLength = Math.min(remainingWidth, remainingText.length)
+        const chunk = remainingText.slice(0, chunkLength)
+
+        currentLine.push({
+          ...segment,
+          text: chunk,
+        })
+
+        remainingText = remainingText.slice(chunkLength)
+        remainingWidth -= chunkLength
+      }
+    })
+
+    if (currentLine.length > 0) {
+      wrappedLines.push(currentLine)
+    }
+
+    return wrappedLines.length > 0 ? wrappedLines : [[{ text: '' }]]
+  }
+
+  private copyCommandToClipboard(command: string): void {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      void navigator.clipboard.writeText(command).catch(() => undefined)
+    }
+  }
+
+  private resolveCopyCommandAction(terminal: Terminal, bufferLineNumber: number): (() => void) | undefined {
+    const contextLines = Array.from({ length: TerminalShellActionsAddon.LOOKBACK_LINE_COUNT }, (_, index) =>
+      terminal.buffer.active.getLine(bufferLineNumber - 2 - index)?.translateToString(false)
+    )
+      .filter((line): line is string => Boolean(line))
+      .join(' ')
+
+    if (contextLines.includes(TerminalShellActionsAddon.SECOND_COMMAND_TITLE)) {
+      return () => this.copyCommandToClipboard(this.getPortForwardCommand())
+    }
+
+    if (contextLines.includes(TerminalShellActionsAddon.FIRST_COMMAND_TITLE)) {
+      return () => this.copyCommandToClipboard(this.getShellCommand())
+    }
+
+    return undefined
+  }
+
+  private writeBanner(terminal: Terminal): void {
+    const horizontalPadding = 1
+    const maxContentWidth = Math.max(1, terminal.cols - 4 - horizontalPadding * 2)
+    const bannerTitle: TerminalBannerSegment = {
+      bold: true,
+      text: 'Connect from your local terminal via the Qovery CLI',
+    }
+
+    const firstCommandLine: TerminalBannerSegment[] = [
+      { bold: true, color: this.colors.warning, text: TerminalShellActionsAddon.FIRST_COMMAND_TITLE },
+    ]
+
+    const secondCommandLine: TerminalBannerSegment[] = [
+      { bold: true, color: this.colors.warning, text: TerminalShellActionsAddon.SECOND_COMMAND_TITLE },
+    ]
+
+    const bannerLines: TerminalBannerSegment[][] = [
+      firstCommandLine,
+      [{ color: this.colors.subtle, text: 'Open an interactive shell inside a running container' }],
+      [{ text: TerminalShellActionsAddon.COPY_COMMAND_LABEL }],
+      [{ text: '' }],
+      secondCommandLine,
+      [{ color: this.colors.subtle, text: 'Forward a pod port to localhost' }],
+      [{ text: TerminalShellActionsAddon.COPY_COMMAND_LABEL }],
+    ]
+
+    const maxBannerLineLength = Math.max(
+      bannerTitle.text.length,
+      ...bannerLines.map((segments) => segments.reduce((length, segment) => length + segment.text.length, 0))
+    )
+    const additionalContentWidth = 8
+    const bannerContentWidth = Math.min(Math.max(20, maxBannerLineLength + additionalContentWidth), maxContentWidth)
+    const bannerInnerWidth = bannerContentWidth + horizontalPadding * 2
+    const lineContentWidth = bannerInnerWidth + 2
+    const formatBannerLine = (segments: TerminalBannerSegment[]) => {
+      const { clippedSegments, trailingPadding } = this.clampSegments(segments, bannerContentWidth)
+      const styledText = clippedSegments.map((segment) => this.formatSegment(segment)).join('') + trailingPadding
+
+      return `│ ${' '.repeat(horizontalPadding)}${styledText}${' '.repeat(horizontalPadding)} │`
+    }
+
+    const leftTitleLineWidth = 1
+    const minimumRightTitleLineWidth = 1
+    const maxVisibleTitleLength = Math.max(
+      0,
+      lineContentWidth - leftTitleLineWidth - minimumRightTitleLineWidth - 2
+    )
+    const visibleTitle = bannerTitle.text.slice(0, maxVisibleTitleLength)
+    const rightTitleLineWidth = Math.max(
+      minimumRightTitleLineWidth,
+      lineContentWidth - leftTitleLineWidth - visibleTitle.length - 2
+    )
+    const styledTitle = this.formatSegment({
+      ...bannerTitle,
+      text: visibleTitle,
+    })
+
+    terminal.writeln(`┌${'─'.repeat(leftTitleLineWidth)} ${styledTitle} ${'─'.repeat(rightTitleLineWidth)}┐`)
+    terminal.writeln(formatBannerLine([{ text: '' }]))
+    bannerLines.forEach((line) => {
+      this.wrapSegments(line, bannerContentWidth).forEach((wrappedLine) => {
+        terminal.writeln(formatBannerLine(wrappedLine))
+      })
+    })
+    terminal.writeln(formatBannerLine([{ text: '' }]))
+    terminal.writeln(`└${'─'.repeat(lineContentWidth)}┘`)
+    terminal.writeln('')
+  }
+
+  activate(terminal: Terminal): void {
+    if (this.shouldWriteBanner) {
+      const renderWhenFitIsStable = () => {
+        if (this.bannerRenderTimeoutId) {
+          clearTimeout(this.bannerRenderTimeoutId)
+        }
+
+        this.bannerRenderTimeoutId = setTimeout(() => {
+          if (this.hasRenderedBanner) {
+            return
+          }
+
+          this.fitAddon.fit()
+          this.writeBanner(terminal)
+          this.hasRenderedBanner = true
+          this.resizeDisposable?.dispose()
+          this.resizeDisposable = undefined
+        }, 120)
+      }
+
+      this.resizeDisposable = terminal.onResize(() => {
+        renderWhenFitIsStable()
+      })
+      renderWhenFitIsStable()
+    }
+
+    this.linkProviderDisposable = terminal.registerLinkProvider({
+      provideLinks: (bufferLineNumber, callback) => {
+        const line = terminal.buffer.active.getLine(bufferLineNumber - 1)
+
+        if (!line) {
+          callback(undefined)
+          return
+        }
+
+        const lineText = line.translateToString(false)
+        const linkRanges = []
+        let fromIndex = 0
+
+        while (fromIndex < lineText.length) {
+          const labelIndex = lineText.indexOf(TerminalShellActionsAddon.COPY_COMMAND_LABEL, fromIndex)
+          if (labelIndex === -1) {
+            break
+          }
+
+          const action = this.resolveCopyCommandAction(terminal, bufferLineNumber)
+          if (action) {
+            linkRanges.push({
+              activate: () => action(),
+              decorations: {
+                pointerCursor: true,
+                underline: false,
+              },
+              range: {
+                end: {
+                  x: labelIndex + TerminalShellActionsAddon.COPY_COMMAND_LABEL.length + 1,
+                  y: bufferLineNumber,
+                },
+                start: {
+                  x: labelIndex + 1,
+                  y: bufferLineNumber,
+                },
+              },
+              text: TerminalShellActionsAddon.COPY_COMMAND_LABEL,
+            })
+          }
+
+          fromIndex = labelIndex + TerminalShellActionsAddon.COPY_COMMAND_LABEL.length
+        }
+
+        callback(linkRanges.length > 0 ? linkRanges : undefined)
+      },
+    })
+  }
+
+  dispose(): void {
+    if (this.bannerRenderTimeoutId) {
+      clearTimeout(this.bannerRenderTimeoutId)
+      this.bannerRenderTimeoutId = undefined
+    }
+
+    this.linkProviderDisposable?.dispose()
+    this.resizeDisposable?.dispose()
+    this.linkProviderDisposable = undefined
+    this.resizeDisposable = undefined
+  }
+}

From 94987346a4cd7452fc4b7b5f05289b07fc9e1279 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Thu, 26 Mar 2026 11:39:47 +0100
Subject: [PATCH 5/9] refactor(service-terminal): format check

---
 .../lib/service-terminal/service-terminal.spec.tsx  |  2 +-
 .../src/lib/service-terminal/service-terminal.tsx   | 13 +++----------
 .../service-terminal/terminal-shell-banner-addon.ts | 10 +++++-----
 3 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx
index 4a9dfa18be4..0cfdebd28bd 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx
@@ -1,8 +1,8 @@
 import { type QueryClient } from '@tanstack/react-query'
 import { act, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { useReactQueryWsSubscription } from '@qovery/state/util-queries'
 import { renderWithProviders } from '@qovery/shared/util-tests'
+import { useReactQueryWsSubscription } from '@qovery/state/util-queries'
 import { ServiceTerminal, type ServiceTerminalProps } from './service-terminal'
 
 jest.mock('color', () => ({
diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
index 2b478693a7b..fe2fc7affa6 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
@@ -4,8 +4,8 @@ import { FitAddon } from '@xterm/addon-fit'
 import { type ITerminalAddon } from '@xterm/xterm'
 import Color from 'color'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { match } from 'ts-pattern'
 import { XTerm } from 'react-xtermjs'
+import { match } from 'ts-pattern'
 import { Button, EmptyState, ExternalLink, Icon, LoaderSpinner, toast } from '@qovery/shared/ui'
 import { useTerminalReadiness } from '@qovery/shared/util-hooks'
 import { QOVERY_WS } from '@qovery/shared/util-node-env'
@@ -93,10 +93,7 @@ export function ServiceTerminal({
     .join(' ')
   const portForwardCommand = `qovery port-forward --organization ${organizationId} --project ${projectId} --environment ${environmentId} --service ${serviceId} --port <local-port:target-port>`
   const getShellCommand = useCallback(() => connectShellCommand, [connectShellCommand])
-  const getPortForwardCommand = useCallback(
-    () => portForwardCommand,
-    [portForwardCommand]
-  )
+  const getPortForwardCommand = useCallback(() => portForwardCommand, [portForwardCommand])
 
   const onOpenHandler = useCallback(
     (_: QueryClient, event: Event) => {
@@ -230,11 +227,7 @@ export function ServiceTerminal({
       <div className="flex h-full flex-1 flex-col bg-background p-3">
         <div className="relative min-h-0 flex-1">
           {terminalLaunchError ? (
-            <EmptyState
-              icon="terminal"
-              title="Unable to launch CLI"
-              description={terminalUnavailableDescription}
-            >
+            <EmptyState icon="terminal" title="Unable to launch CLI" description={terminalUnavailableDescription}>
               <Button size="md" color="neutral" onClick={onRetryCliLaunch}>
                 Relaunch
               </Button>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/terminal-shell-banner-addon.ts b/libs/domains/services/feature/src/lib/service-terminal/terminal-shell-banner-addon.ts
index 50472bf4b7a..a2b60882adf 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/terminal-shell-banner-addon.ts
+++ b/libs/domains/services/feature/src/lib/service-terminal/terminal-shell-banner-addon.ts
@@ -54,7 +54,10 @@ export class TerminalShellActionsAddon implements ITerminalAddon {
     return `${stylePrefix}${segment.text}${TerminalShellActionsAddon.ANSI_RESET}`
   }
 
-  private clampSegments(segments: TerminalBannerSegment[], maxWidth: number): {
+  private clampSegments(
+    segments: TerminalBannerSegment[],
+    maxWidth: number
+  ): {
     clippedSegments: TerminalBannerSegment[]
     trailingPadding: string
   } {
@@ -190,10 +193,7 @@ export class TerminalShellActionsAddon implements ITerminalAddon {
 
     const leftTitleLineWidth = 1
     const minimumRightTitleLineWidth = 1
-    const maxVisibleTitleLength = Math.max(
-      0,
-      lineContentWidth - leftTitleLineWidth - minimumRightTitleLineWidth - 2
-    )
+    const maxVisibleTitleLength = Math.max(0, lineContentWidth - leftTitleLineWidth - minimumRightTitleLineWidth - 2)
     const visibleTitle = bannerTitle.text.slice(0, maxVisibleTitleLength)
     const rightTitleLineWidth = Math.max(
       minimumRightTitleLineWidth,

From c2ef4a4335e0b99c41900964564828d7cf5e67a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Fri, 27 Mar 2026 17:34:22 +0100
Subject: [PATCH 6/9] feat(service-terminal): enhance pod and container
 selection UI with improved placeholders and mock data in tests

---
 .../service-terminal.spec.tsx.snap            | 71 ++++++++++++++++++-
 .../__snapshots__/input-search.spec.tsx.snap  |  4 +-
 .../input-search/input-search.tsx             |  2 +-
 .../service-terminal.spec.tsx                 | 26 ++++++-
 .../lib/service-terminal/service-terminal.tsx | 54 ++++++++------
 5 files changed, 131 insertions(+), 26 deletions(-)

diff --git a/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
index 6fab9d99357..99a8a7bf94a 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
@@ -10,8 +10,75 @@ exports[`ServiceTerminal should match snapshot 1`] = `
         class="flex h-16 justify-between border-b border-neutral p-4"
       >
         <div
-          class="flex gap-2 [&_input]:w-[400px]"
-        />
+          class="flex gap-2 [&_input]:w-64"
+        >
+          <div
+            class="relative"
+          >
+            <div
+              class="relative z-10"
+            >
+              <button
+                class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
+              >
+                <span>
+                  <i
+                    aria-hidden="true"
+                    class="fa-regular fa-xmark ml-2 text-sm"
+                  />
+                </span>
+              </button>
+              <div
+                class="relative"
+              >
+                <i
+                  aria-hidden="true"
+                  class="fa-regular fa-magnifying-glass absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-neutral-subtle"
+                />
+                <input
+                  aria-activedescendant=""
+                  aria-autocomplete="list"
+                  aria-controls="downshift-:r6:-menu"
+                  aria-expanded="false"
+                  aria-labelledby="downshift-:r6:-label"
+                  autocomplete="off"
+                  class="w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color] h-8"
+                  id="downshift-:r6:-input"
+                  placeholder="Select a pod to connect to"
+                  role="combobox"
+                  value=""
+                />
+              </div>
+              <div
+                class="mt-1 max-h-40 w-full min-w-56 overflow-y-auto rounded-md border border-neutral bg-surface-neutral p-2 shadow-[0_0_32px_rgba(0,0,0,0.08)] hidden"
+              >
+                <ul
+                  aria-labelledby="downshift-:r6:-label"
+                  id="downshift-:r6:-menu"
+                  role="listbox"
+                >
+                  <p
+                    class="flex w-full flex-col py-2 text-center text-xs text-neutral-subtle"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="fa-regular fa-wave-pulse mb-1 block"
+                    />
+                    No results found
+                  </p>
+                </ul>
+              </div>
+            </div>
+            <div
+              class="pointer-events-none absolute right-2.5 top-1/2 z-20 -translate-y-1/2 text-xs text-neutral-subtle"
+            >
+              <i
+                aria-hidden="true"
+                class="fa-regular fa-angle-down "
+              />
+            </div>
+          </div>
+        </div>
         <a
           class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral gap-1.5"
           href="https://www.qovery.com/docs/cli/overview"
diff --git a/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
index 2a437a3a358..aec5a74b6cc 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
@@ -18,7 +18,7 @@ exports[`InputSearch should match snapshot 1`] = `
         </span>
       </button>
       <div
-        class=""
+        class="relative"
       >
         <i
           aria-hidden="true"
@@ -80,7 +80,7 @@ exports[`InputSearch should match with snapshot 1`] = `
         </span>
       </button>
       <div
-        class=""
+        class="relative"
       >
         <i
           aria-hidden="true"
diff --git a/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx b/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
index e71093054a8..c1ee3c35af3 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
@@ -50,7 +50,7 @@ export function InputSearch({ data, value, onChange, placeholder, trimLabel, siz
           <Icon iconName="xmark" className="ml-2 text-sm" />
         </span>
       </Button>
-      <div className={selectedItem ? 'hidden' : ''}>
+      <div className={clsx({ hidden: selectedItem }, 'relative')}>
         <Icon
           iconName="magnifying-glass"
           className="absolute left-2.5 top-1/2 -translate-y-1/2 text-xs text-neutral-subtle"
diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx
index 0cfdebd28bd..fa48c9986d0 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx
@@ -5,6 +5,8 @@ import { renderWithProviders } from '@qovery/shared/util-tests'
 import { useReactQueryWsSubscription } from '@qovery/state/util-queries'
 import { ServiceTerminal, type ServiceTerminalProps } from './service-terminal'
 
+const mockUseRunningStatus = jest.fn()
+
 jest.mock('color', () => ({
   __esModule: true,
   default: () => ({
@@ -17,7 +19,7 @@ jest.mock('@qovery/state/util-queries', () => ({
 }))
 
 jest.mock('../..', () => ({
-  useRunningStatus: () => ({ data: { pods: [], state: 'STOPPED' }, isLoading: false }),
+  useRunningStatus: (...args: unknown[]) => mockUseRunningStatus(...args),
 }))
 
 const props: ServiceTerminalProps = {
@@ -43,6 +45,16 @@ const getLatestWsSubscriptionConfig = (): Parameters<typeof useReactQueryWsSubsc
 describe('ServiceTerminal', () => {
   beforeEach(() => {
     jest.clearAllMocks()
+    mockUseRunningStatus.mockReturnValue({
+      data: {
+        pods: [
+          { name: 'pod-1', containers: [{ name: 'container-1' }] },
+          { name: 'pod-2', containers: [{ name: 'container-2' }] },
+        ],
+        state: 'STOPPED',
+      },
+      isLoading: false,
+    })
   })
 
   it('should match snapshot', () => {
@@ -84,4 +96,16 @@ describe('ServiceTerminal', () => {
       expect(useReactQueryWsSubscriptionMock).toHaveBeenLastCalledWith(expect.objectContaining({ enabled: true }))
     })
   })
+
+  it('should show pod and container placeholders', async () => {
+    const { userEvent } = renderWithProviders(<ServiceTerminal {...props} />)
+
+    expect(screen.getByPlaceholderText('Select a pod to connect to')).toBeInTheDocument()
+
+    await userEvent.click(screen.getByPlaceholderText('Select a pod to connect to'))
+    const [firstPodOption] = screen.getAllByRole('option')
+    await userEvent.click(firstPodOption)
+
+    expect(screen.getByPlaceholderText('Select a container to connect to')).toBeInTheDocument()
+  })
 })
diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
index fe2fc7affa6..a0e567ad620 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
@@ -187,29 +187,43 @@ export function ServiceTerminal({
   return (
     <div className="flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden rounded-none border-0 bg-background">
       <div className="flex h-16 justify-between border-b border-neutral p-4">
-        <div className="flex gap-2 [&_input]:w-[400px]">
+        <div className="flex gap-2 [&_input]:w-64">
           {runningStatuses && runningStatuses.pods.length > 0 && (
-            <InputSearch
-              value={selectedPod}
-              onChange={setSelectedPod}
-              data={runningStatuses.pods.map((pod) => pod.name)}
-              placeholder="Search by pod"
-              size="md"
-              trimLabel
-            />
+            <div className="relative">
+              <InputSearch
+                value={selectedPod}
+                onChange={setSelectedPod}
+                data={runningStatuses.pods.map((pod) => pod.name)}
+                placeholder="Select a pod to connect to"
+                size="md"
+                trimLabel
+              />
+              {!selectedPod && (
+                <div className="pointer-events-none absolute right-2.5 top-1/2 z-20 -translate-y-1/2 text-xs text-neutral-subtle">
+                  <Icon iconName="angle-down" />
+                </div>
+              )}
+            </div>
           )}
           {runningStatuses && selectedPod && (
-            <InputSearch
-              value={selectedContainer}
-              onChange={setSelectedContainer}
-              data={
-                runningStatuses.pods
-                  .find((pod) => selectedPod === pod?.name)
-                  ?.containers.map((container) => container?.name) || []
-              }
-              placeholder="Search by container"
-              size="md"
-            />
+            <div className="relative">
+              <InputSearch
+                value={selectedContainer}
+                onChange={setSelectedContainer}
+                data={
+                  runningStatuses.pods
+                    .find((pod) => selectedPod === pod?.name)
+                    ?.containers.map((container) => container?.name) || []
+                }
+                placeholder="Select a container to connect to"
+                size="md"
+              />
+              {!selectedContainer && (
+                <div className="pointer-events-none absolute right-2.5 top-1/2 z-20 -translate-y-1/2 text-xs text-neutral-subtle">
+                  <Icon iconName="angle-down" iconStyle="solid" />
+                </div>
+              )}
+            </div>
           )}
         </div>
         <ExternalLink

From 3869f59af0182e3f3b83394c8efe2ee0f38a8647 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Mon, 30 Mar 2026 16:09:27 +0200
Subject: [PATCH 7/9] feat(service-terminal): update unavailable message for
 non-running service states and add corresponding test case

---
 .../service-terminal.spec.tsx                 | 24 +++++++++++++++++++
 .../lib/service-terminal/service-terminal.tsx |  2 +-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx
index fa48c9986d0..cababbf505f 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.spec.tsx
@@ -78,6 +78,30 @@ describe('ServiceTerminal', () => {
     expect(useReactQueryWsSubscriptionMock).toHaveBeenLastCalledWith(expect.objectContaining({ enabled: false }))
   })
 
+  it('should show a generic unavailable message when service state is not stopped or in error', () => {
+    mockUseRunningStatus.mockReturnValue({
+      data: {
+        pods: [
+          { name: 'pod-1', containers: [{ name: 'container-1' }] },
+          { name: 'pod-2', containers: [{ name: 'container-2' }] },
+        ],
+        state: 'RUNNING',
+      },
+      isLoading: false,
+    })
+
+    renderWithProviders(<ServiceTerminal {...props} />)
+
+    act(() => {
+      getLatestWsSubscriptionConfig().onClose?.(
+        {} as QueryClient,
+        new CloseEvent('close', { code: 1000, reason: 'No pod exists for this application.' })
+      )
+    })
+
+    expect(screen.getByText('The CLI is currently unavailable for this service.')).toBeInTheDocument()
+  })
+
   it('should restart terminal launch flow when retrying from empty state', async () => {
     const user = userEvent.setup()
     renderWithProviders(<ServiceTerminal {...props} />)
diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
index a0e567ad620..23f05b525e8 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
@@ -145,7 +145,7 @@ export function ServiceTerminal({
       match(runningStatuses?.state)
         .with('STOPPED', () => "We could not launch the CLI for this service because it's stopped.")
         .with('ERROR', () => "We could not launch the CLI for this service because it's in error.")
-        .otherwise(() => "We could not launch the CLI for this service because it's not running."),
+        .otherwise(() => 'The CLI is currently unavailable for this service.'),
     [runningStatuses?.state]
   )
 

From 9f1f71ac4120e632c66b28c082962d70f386a23c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Tue, 31 Mar 2026 11:07:45 +0200
Subject: [PATCH 8/9] feat(service-terminal): refactor command building logic
 and improve UI elements for better usability

---
 .../service-terminal.spec.tsx.snap            | 15 +++----
 .../__snapshots__/input-search.spec.tsx.snap  | 18 ++++----
 .../input-search/input-search.tsx             | 17 +++-----
 .../lib/service-terminal/service-terminal.tsx | 41 +++++++++++--------
 .../terminal-shell-banner-addon.ts            | 12 +++++-
 5 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
index 99a8a7bf94a..a0cd01d3c26 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-terminal/__snapshots__/service-terminal.spec.tsx.snap
@@ -7,10 +7,10 @@ exports[`ServiceTerminal should match snapshot 1`] = `
       class="flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden rounded-none border-0 bg-background"
     >
       <div
-        class="flex h-16 justify-between border-b border-neutral p-4"
+        class="flex h-14 justify-between border-b border-neutral p-3"
       >
         <div
-          class="flex gap-2 [&_input]:w-64"
+          class="flex gap-2 [&_input]:w-72"
         >
           <div
             class="relative"
@@ -42,7 +42,7 @@ exports[`ServiceTerminal should match snapshot 1`] = `
                   aria-expanded="false"
                   aria-labelledby="downshift-:r6:-label"
                   autocomplete="off"
-                  class="w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color] h-8"
+                  class="h-8 w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-sm placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color]"
                   id="downshift-:r6:-input"
                   placeholder="Select a pod to connect to"
                   role="combobox"
@@ -54,15 +54,16 @@ exports[`ServiceTerminal should match snapshot 1`] = `
               >
                 <ul
                   aria-labelledby="downshift-:r6:-label"
+                  class="m-0 list-none p-0"
                   id="downshift-:r6:-menu"
                   role="listbox"
                 >
                   <p
-                    class="flex w-full flex-col py-2 text-center text-xs text-neutral-subtle"
+                    class="flex w-full flex-col items-center py-2 text-center text-xs text-neutral-subtle"
                   >
                     <i
                       aria-hidden="true"
-                      class="fa-regular fa-wave-pulse mb-1 block"
+                      class="fa-regular fa-wave-pulse mb-1"
                     />
                     No results found
                   </p>
@@ -93,13 +94,13 @@ exports[`ServiceTerminal should match snapshot 1`] = `
         </a>
       </div>
       <div
-        class="flex h-full flex-1 flex-col bg-background p-3"
+        class="flex h-full flex-1 flex-col bg-background px-3 pt-5"
       >
         <div
           class="relative min-h-0 flex-1"
         >
           <div
-            class="flex h-40 items-start justify-center p-5"
+            class="absolute inset-0 flex items-start justify-center border-neutral bg-background pt-3"
           >
             <div
               class="aspect-square border-2  animate-spin rounded-full border-solid border-neutral border-r-neutral-strong w-4 "
diff --git a/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap b/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
index aec5a74b6cc..a6d881883e0 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
+++ b/libs/domains/services/feature/src/lib/service-terminal/input-search/__snapshots__/input-search.spec.tsx.snap
@@ -7,7 +7,7 @@ exports[`InputSearch should match snapshot 1`] = `
       class="relative z-10"
     >
       <button
-        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
+        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
       >
         my-value
         <span>
@@ -31,7 +31,7 @@ exports[`InputSearch should match snapshot 1`] = `
           aria-expanded="false"
           aria-labelledby="downshift-:r6:-label"
           autocomplete="off"
-          class="w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color] h-7"
+          class="h-8 w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-sm placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color]"
           id="downshift-:r6:-input"
           placeholder="placeholder"
           role="combobox"
@@ -43,15 +43,16 @@ exports[`InputSearch should match snapshot 1`] = `
       >
         <ul
           aria-labelledby="downshift-:r6:-label"
+          class="m-0 list-none p-0"
           id="downshift-:r6:-menu"
           role="listbox"
         >
           <p
-            class="flex w-full flex-col py-2 text-center text-xs text-neutral-subtle"
+            class="flex w-full flex-col items-center py-2 text-center text-xs text-neutral-subtle"
           >
             <i
               aria-hidden="true"
-              class="fa-regular fa-wave-pulse mb-1 block"
+              class="fa-regular fa-wave-pulse mb-1"
             />
             No results found
           </p>
@@ -69,7 +70,7 @@ exports[`InputSearch should match with snapshot 1`] = `
       class="relative z-10"
     >
       <button
-        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-xs h-7 px-2 rounded bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
+        class="items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral hidden"
       >
         my-value
         <span>
@@ -93,7 +94,7 @@ exports[`InputSearch should match with snapshot 1`] = `
           aria-expanded="false"
           aria-labelledby="downshift-:rd:-label"
           autocomplete="off"
-          class="w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color] h-7"
+          class="h-8 w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-sm placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color]"
           id="downshift-:rd:-input"
           placeholder="placeholder"
           role="combobox"
@@ -105,15 +106,16 @@ exports[`InputSearch should match with snapshot 1`] = `
       >
         <ul
           aria-labelledby="downshift-:rd:-label"
+          class="m-0 list-none p-0"
           id="downshift-:rd:-menu"
           role="listbox"
         >
           <p
-            class="flex w-full flex-col py-2 text-center text-xs text-neutral-subtle"
+            class="flex w-full flex-col items-center py-2 text-center text-xs text-neutral-subtle"
           >
             <i
               aria-hidden="true"
-              class="fa-regular fa-wave-pulse mb-1 block"
+              class="fa-regular fa-wave-pulse mb-1"
             />
             No results found
           </p>
diff --git a/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx b/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
index c1ee3c35af3..466f52a96e6 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/input-search/input-search.tsx
@@ -7,15 +7,13 @@ export interface InputSearchProps {
   data: string[]
   onChange: (value?: string) => void
   placeholder: string
-  size?: 'sm' | 'md'
   value?: string
   trimLabel?: boolean
 }
 
-export function InputSearch({ data, value, onChange, placeholder, trimLabel, size = 'sm' }: InputSearchProps) {
+export function InputSearch({ data, value, onChange, placeholder, trimLabel }: InputSearchProps) {
   const [items, setItems] = useState(data)
   const inputRef = useRef<HTMLInputElement>(null)
-  const buttonSize = size === 'md' ? 'md' : 'sm'
 
   // https://github.com/radix-ui/primitives/issues/1342
   // We are waiting for radix combobox primitives
@@ -36,7 +34,7 @@ export function InputSearch({ data, value, onChange, placeholder, trimLabel, siz
       <Button
         color="neutral"
         variant="surface"
-        size={buttonSize}
+        size="md"
         className={!selectedItem ? 'hidden' : ''}
         onClick={() => {
           reset()
@@ -57,10 +55,7 @@ export function InputSearch({ data, value, onChange, placeholder, trimLabel, siz
         />
         <input
           placeholder={placeholder}
-          className={clsx(
-            'w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color]',
-            size === 'md' ? 'h-8' : 'h-7'
-          )}
+          className="h-8 w-56 rounded border border-neutral bg-surface-neutral pl-7 pr-2 text-xs text-neutral placeholder:text-sm placeholder:text-neutral-subtle focus:border-brand-8 focus:outline-none focus:transition-[border-color]"
           {...getInputProps({ ref: inputRef })}
         />
       </div>
@@ -72,7 +67,7 @@ export function InputSearch({ data, value, onChange, placeholder, trimLabel, siz
           }
         )}
       >
-        <ul {...getMenuProps()}>
+        <ul className="m-0 list-none p-0" {...getMenuProps()}>
           {isOpen && items.length > 0 ? (
             items.map((v, index) => (
               <li
@@ -90,8 +85,8 @@ export function InputSearch({ data, value, onChange, placeholder, trimLabel, siz
               </li>
             ))
           ) : (
-            <p className="flex w-full flex-col py-2 text-center text-xs text-neutral-subtle">
-              <Icon iconName="wave-pulse" className="mb-1 block" />
+            <p className="flex w-full flex-col items-center py-2 text-center text-xs text-neutral-subtle">
+              <Icon iconName="wave-pulse" className="mb-1" />
               No results found
             </p>
           )}
diff --git a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
index 23f05b525e8..6c7967fc5ec 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
+++ b/libs/domains/services/feature/src/lib/service-terminal/service-terminal.tsx
@@ -16,6 +16,9 @@ import { TerminalShellActionsAddon } from './terminal-shell-banner-addon'
 
 const MemoizedXTerm = memo(XTerm)
 
+const buildCommand = (...parts: Array<string | undefined>): string =>
+  parts.filter((part): part is string => Boolean(part)).join(' ')
+
 export interface ServiceTerminalProps {
   organizationId: string
   clusterId: string
@@ -40,6 +43,7 @@ export function ServiceTerminal({
   const isTerminalSubscriptionEnabled = terminalLaunchError === null
   const { attachWebSocket, detachWebSocket, isTerminalReady, resetTerminalReadiness } = useTerminalReadiness()
   const showDelayedLoader = !isTerminalReady
+  const showLoader = isTerminalLoading || showDelayedLoader
   const fitAddon = addons[0] as FitAddon | undefined
 
   const getCssVariableHex = (variableName: string): string => {
@@ -84,14 +88,21 @@ export function ServiceTerminal({
   const selectedOrDefaultPodName = selectedPod ?? runningStatuses?.pods[0]?.name
   const selectedOrDefaultContainerName =
     selectedContainer ?? runningStatuses?.pods.find((pod) => pod.name === selectedOrDefaultPodName)?.containers[0]?.name
-  const connectShellCommand = [
+  const connectShellCommand = buildCommand(
     `qovery shell https://console.qovery.com/organization/${organizationId}/project/${projectId}/environment/${environmentId}/application/${serviceId}`,
     selectedOrDefaultPodName ? `--pod=${selectedOrDefaultPodName}` : undefined,
-    selectedOrDefaultContainerName ? `--container=${selectedOrDefaultContainerName}` : undefined,
-  ]
-    .filter((commandPart): commandPart is string => Boolean(commandPart))
-    .join(' ')
-  const portForwardCommand = `qovery port-forward --organization ${organizationId} --project ${projectId} --environment ${environmentId} --service ${serviceId} --port <local-port:target-port>`
+    selectedOrDefaultContainerName ? `--container=${selectedOrDefaultContainerName}` : undefined
+  )
+  const portForwardCommand = buildCommand(
+    'qovery port-forward',
+    `--organization ${organizationId}`,
+    `--project ${projectId}`,
+    `--environment ${environmentId}`,
+    `--service ${serviceId}`,
+    '--port <local-port:target-port>'
+  )
+  // Keep it as a callback so the banner copy action resolves the latest command at click time, necesssary
+  // to allow users to use those commands in their private terminal without having to go through the documentation
   const getShellCommand = useCallback(() => connectShellCommand, [connectShellCommand])
   const getPortForwardCommand = useCallback(() => portForwardCommand, [portForwardCommand])
 
@@ -186,8 +197,8 @@ export function ServiceTerminal({
 
   return (
     <div className="flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden rounded-none border-0 bg-background">
-      <div className="flex h-16 justify-between border-b border-neutral p-4">
-        <div className="flex gap-2 [&_input]:w-64">
+      <div className="flex h-14 justify-between border-b border-neutral p-3">
+        <div className="flex gap-2 [&_input]:w-72">
           {runningStatuses && runningStatuses.pods.length > 0 && (
             <div className="relative">
               <InputSearch
@@ -195,7 +206,6 @@ export function ServiceTerminal({
                 onChange={setSelectedPod}
                 data={runningStatuses.pods.map((pod) => pod.name)}
                 placeholder="Select a pod to connect to"
-                size="md"
                 trimLabel
               />
               {!selectedPod && (
@@ -216,7 +226,6 @@ export function ServiceTerminal({
                     ?.containers.map((container) => container?.name) || []
                 }
                 placeholder="Select a container to connect to"
-                size="md"
               />
               {!selectedContainer && (
                 <div className="pointer-events-none absolute right-2.5 top-1/2 z-20 -translate-y-1/2 text-xs text-neutral-subtle">
@@ -238,7 +247,7 @@ export function ServiceTerminal({
           CLI docs
         </ExternalLink>
       </div>
-      <div className="flex h-full flex-1 flex-col bg-background p-3">
+      <div className="flex h-full flex-1 flex-col bg-background px-3 pt-5">
         <div className="relative min-h-0 flex-1">
           {terminalLaunchError ? (
             <EmptyState icon="terminal" title="Unable to launch CLI" description={terminalUnavailableDescription}>
@@ -246,15 +255,11 @@ export function ServiceTerminal({
                 Relaunch
               </Button>
             </EmptyState>
-          ) : isTerminalLoading ? (
-            <div className="flex h-40 items-start justify-center p-5">
-              <LoaderSpinner />
-            </div>
           ) : (
             <>
-              <MemoizedXTerm className="h-full" addons={addons} options={terminalOptions} />
-              {showDelayedLoader && (
-                <div className="absolute inset-0 flex items-start justify-center border-neutral bg-background pt-7">
+              {!isTerminalLoading && <MemoizedXTerm className="h-full" addons={addons} options={terminalOptions} />}
+              {showLoader && (
+                <div className="absolute inset-0 flex items-start justify-center border-neutral bg-background pt-3">
                   <LoaderSpinner />
                 </div>
               )}
diff --git a/libs/domains/services/feature/src/lib/service-terminal/terminal-shell-banner-addon.ts b/libs/domains/services/feature/src/lib/service-terminal/terminal-shell-banner-addon.ts
index a2b60882adf..62b07ff473f 100644
--- a/libs/domains/services/feature/src/lib/service-terminal/terminal-shell-banner-addon.ts
+++ b/libs/domains/services/feature/src/lib/service-terminal/terminal-shell-banner-addon.ts
@@ -15,10 +15,14 @@ interface TerminalBannerSegment {
   text: string
 }
 
+/**
+ * Renders the terminal onboarding banner and handles copying a command to the
+ * clipboard when a "[copy command]" link is clicked.
+ */
 export class TerminalShellActionsAddon implements ITerminalAddon {
   private static readonly COPY_COMMAND_LABEL = '[copy command]'
-  private static readonly FIRST_COMMAND_TITLE = '1. Use $ qovery shell'
-  private static readonly SECOND_COMMAND_TITLE = '2. Use $ qovery port-forward'
+  private static readonly FIRST_COMMAND_TITLE = '1. Use $ qovery shell in your local terminal'
+  private static readonly SECOND_COMMAND_TITLE = '2. Use $ qovery port-forward in your local terminal'
   private static readonly LOOKBACK_LINE_COUNT = 6
 
   private linkProviderDisposable?: IDisposable
@@ -45,6 +49,7 @@ export class TerminalShellActionsAddon implements ITerminalAddon {
     return `\u001b[38;2;${r};${g};${b}m`
   }
 
+  // Applies ANSI styles to a text segment before writing it inside the banner box.
   private formatSegment(segment: TerminalBannerSegment): string {
     const stylePrefix = `${segment.bold ? TerminalShellActionsAddon.ANSI_BOLD : ''}${segment.color ? this.toAnsiColor(segment.color) : ''}`
     if (!stylePrefix) {
@@ -54,6 +59,7 @@ export class TerminalShellActionsAddon implements ITerminalAddon {
     return `${stylePrefix}${segment.text}${TerminalShellActionsAddon.ANSI_RESET}`
   }
 
+  // Truncates segments to a single-line width and pads the remainder to keep box alignment.
   private clampSegments(
     segments: TerminalBannerSegment[],
     maxWidth: number
@@ -87,6 +93,7 @@ export class TerminalShellActionsAddon implements ITerminalAddon {
     }
   }
 
+  // Splits long segments across multiple lines so content fits within the banner box width.
   private wrapSegments(segments: TerminalBannerSegment[], maxWidth: number): TerminalBannerSegment[][] {
     if (!segments.some((segment) => segment.text.length > 0)) {
       return [[{ text: '' }]]
@@ -150,6 +157,7 @@ export class TerminalShellActionsAddon implements ITerminalAddon {
     return undefined
   }
 
+  // draws the banner on the terminal
   private writeBanner(terminal: Terminal): void {
     const horizontalPadding = 1
     const maxContentWidth = Math.max(1, terminal.cols - 4 - horizontalPadding * 2)

From 0b62412fcf30b0fbc27c134a086107e84989653d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Grandin?= <theo.grandin74@gmail.com>
Date: Tue, 31 Mar 2026 11:33:16 +0200
Subject: [PATCH 9/9] style(step-kubeconfig): update snapshot classes for
 improved styling consistency and focus visibility

---
 .../__snapshots__/step-kubeconfig.spec.tsx.snap               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/libs/pages/clusters/src/lib/ui/page-clusters-create/step-kubeconfig/__snapshots__/step-kubeconfig.spec.tsx.snap b/libs/pages/clusters/src/lib/ui/page-clusters-create/step-kubeconfig/__snapshots__/step-kubeconfig.spec.tsx.snap
index a05184bfb58..3517c7df655 100644
--- a/libs/pages/clusters/src/lib/ui/page-clusters-create/step-kubeconfig/__snapshots__/step-kubeconfig.spec.tsx.snap
+++ b/libs/pages/clusters/src/lib/ui/page-clusters-create/step-kubeconfig/__snapshots__/step-kubeconfig.spec.tsx.snap
@@ -24,7 +24,7 @@ exports[`StepKubeconfig should match snapshot 1`] = `
         class="mb-10"
       >
         <div
-          class="dropzone"
+          class="rounded outline-none focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-brand-11"
           role="presentation"
           tabindex="0"
         >
@@ -36,7 +36,7 @@ exports[`StepKubeconfig should match snapshot 1`] = `
             type="file"
           />
           <div
-            class="flex min-h-[140px] w-full cursor-pointer items-center justify-center rounded border border-neutral-component bg-surface-neutral-component text-xs text-neutral-subtle transition-all duration-150 ease-in-out hover:bg-surface-neutral-componentHover border-dashed"
+            class="flex min-h-[140px] w-full cursor-pointer items-center justify-center rounded border border-neutral-component bg-surface-neutral-component text-xs text-neutral-subtle transition-colors duration-150 ease-in-out hover:bg-surface-neutral-componentHover border-dashed"
           >
             <div
               class="flex h-full flex-col items-center justify-center text-center text-neutral-subtle"