fix(docker): improve logs and console UX when container is stopped

- Change "Exited" status label to "Stopped" for better clarity
- Show "Container is not running" message in console tab when stopped
- Dim historical logs when container is stopped with info message
- Remove redundant status badge from container detail header
- Console tab indicator only shows green when running with active session

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: pujitm

web/src/components/Docker/ContainerOverviewCard.vue

@@ -40,7 +40,8 @@ const stateColor = computed(() => {
 const stateLabel = computed(() => {
   const state = props.container?.state;
   if (!state) return 'Unknown';
-  return state.charAt(0).toUpperCase() + state.slice(1);
+  if (state === 'EXITED') return 'Stopped';
+  return state.charAt(0).toUpperCase() + state.slice(1).toLowerCase();
 });
 
 const imageVersion = computed(() => formatImage(props.container));

web/src/components/Docker/DockerConsoleViewer.vue

@@ -6,10 +6,12 @@ import { useDockerConsoleSessions } from '@/composables/useDockerConsoleSessions
 interface Props {
   containerName: string;
   shell?: string;
+  isRunning?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   shell: 'sh',
+  isRunning: true,
 });
 
 const { getSession, createSession, showSession, hideSession, destroySession, markPoppedOut } =
@@ -26,7 +28,9 @@ const socketPath = computed(() => {
   return `/logterminal/${encodedName}/`;
 });
 
-const showPlaceholder = computed(() => !isConnecting.value && !hasError.value && !isPoppedOut.value);
+const showPlaceholder = computed(
+  () => props.isRunning && !isConnecting.value && !hasError.value && !isPoppedOut.value
+);
 
 function updatePosition() {
   if (placeholderRef.value && showPlaceholder.value) {
@@ -36,6 +40,13 @@ function updatePosition() {
 }
 
 async function initTerminal() {
+  if (!props.isRunning) {
+    isConnecting.value = false;
+    hasError.value = false;
+    isPoppedOut.value = false;
+    return;
+  }
+
   const existingSession = getSession(props.containerName);
 
   if (existingSession && !existingSession.isPoppedOut) {
@@ -93,6 +104,17 @@ watch(
   }
 );
 
+watch(
+  () => props.isRunning,
+  (running) => {
+    if (running) {
+      initTerminal();
+    } else {
+      hideSession(props.containerName);
+    }
+  }
+);
+
 watch(showPlaceholder, (show) => {
   if (show) {
     requestAnimationFrame(updatePosition);
@@ -152,7 +174,14 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <div v-if="isConnecting" class="flex flex-1 items-center justify-center rounded-lg bg-black">
+    <div v-if="!isRunning" class="flex flex-1 items-center justify-center rounded-lg bg-black">
+      <div class="text-center">
+        <UIcon name="i-lucide-terminal" class="h-8 w-8 text-neutral-500" />
+        <p class="mt-2 text-sm text-neutral-400">Container is not running</p>
+      </div>
+    </div>
+
+    <div v-else-if="isConnecting" class="flex flex-1 items-center justify-center rounded-lg bg-black">
       <div class="text-center">
         <UIcon name="i-lucide-loader-2" class="h-8 w-8 animate-spin text-green-400" />
         <p class="mt-2 text-sm text-green-400">Connecting to container...</p>

web/src/components/Docker/DockerContainerManagement.vue

@@ -381,16 +381,23 @@ const hasActiveConsoleSession = computed(() => {
   return name ? hasActiveSession(name) : false;
 });
 
+const isContainerRunning = computed(() => activeContainer.value?.state === 'RUNNING');
+
+const consoleBadge = computed(() => {
+  if (isContainerRunning.value && hasActiveConsoleSession.value) {
+    return { color: 'success' as const, variant: 'solid' as const, class: 'w-2 h-2 p-0 min-w-0' };
+  }
+  return undefined;
+});
+
 const legacyPaneTabs = computed(() => [
   { label: 'Overview', value: 'overview' as const },
   { label: 'Settings', value: 'settings' as const },
   { label: 'Logs', value: 'logs' as const },
   {
     label: 'Console',
     value: 'console' as const,
-    badge: hasActiveConsoleSession.value
-      ? { color: 'success' as const, variant: 'solid' as const, class: 'w-2 h-2 p-0 min-w-0' }
-      : undefined,
+    badge: consoleBadge.value,
   },
 ]);
 
@@ -550,12 +557,6 @@ const [transitionContainerRef] = useAutoAnimate({
                     {{ stripLeadingSlash(activeContainer?.names?.[0]) || 'Container' }}
                   </div>
                 </div>
-                <UBadge
-                  v-if="activeContainer?.state"
-                  :label="activeContainer.state"
-                  color="primary"
-                  variant="subtle"
-                />
               </div>
               <UTabs
                 v-model="legacyPaneTab"
@@ -606,6 +607,7 @@ const [transitionContainerRef] = useAutoAnimate({
               :container-name="stripLeadingSlash(activeContainer.names?.[0])"
               :auto-scroll="logAutoScroll"
               :client-filter="logFilterText"
+              :is-running="isContainerRunning"
               class="h-full flex-1"
             />
           </div>
@@ -617,6 +619,7 @@ const [transitionContainerRef] = useAutoAnimate({
               v-if="activeContainer"
               :container-name="activeContainerName"
               :shell="activeContainer.shell ?? 'sh'"
+              :is-running="isContainerRunning"
               class="h-full"
             />
           </div>
@@ -636,12 +639,6 @@ const [transitionContainerRef] = useAutoAnimate({
                 />
                 <div class="font-medium">Overview</div>
               </div>
-              <UBadge
-                v-if="activeContainer?.state"
-                :label="activeContainer.state"
-                color="primary"
-                variant="subtle"
-              />
             </div>
           </template>
           <div class="relative">
@@ -684,6 +681,7 @@ const [transitionContainerRef] = useAutoAnimate({
               v-if="activeContainer"
               :container-name="stripLeadingSlash(activeContainer.names?.[0])"
               :auto-scroll="true"
+              :is-running="isContainerRunning"
               class="h-full"
             />
           </div>

web/src/components/Docker/SingleDockerLogViewer.vue

@@ -16,9 +16,11 @@ const props = withDefaults(
     containerName: string;
     autoScroll: boolean;
     clientFilter?: string;
+    isRunning?: boolean;
   }>(),
   {
     clientFilter: '',
+    isRunning: true,
   }
 );
 
@@ -201,6 +203,8 @@ defineExpose({ refreshLogContent });
     :auto-scroll="autoScroll"
     :show-refresh="true"
     :show-download="false"
+    :dimmed="!isRunning"
+    :additional-info="!isRunning ? 'Container stopped - showing historical logs' : ''"
     @refresh="refreshLogContent"
   />
 </template>

web/src/components/Logs/BaseLogViewer.vue

@@ -27,6 +27,7 @@ interface Props {
   loadingMoreContent?: boolean;
   isAtTop?: boolean;
   canLoadMore?: boolean;
+  dimmed?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -42,6 +43,7 @@ const props = withDefaults(defineProps<Props>(), {
   loadingMoreContent: false,
   isAtTop: false,
   canLoadMore: false,
+  dimmed: false,
 });
 
 const emit = defineEmits<{
@@ -168,7 +170,11 @@ defineExpose({ forceScrollToBottom, scrollViewportRef });
 
       <pre
         class="hljs m-0 p-4 font-mono text-xs leading-6 whitespace-pre"
-        :class="{ 'theme-dark': isDarkMode, 'theme-light': !isDarkMode }"
+        :class="{
+          'theme-dark': isDarkMode,
+          'theme-light': !isDarkMode,
+          'opacity-50': dimmed,
+        }"
         v-html="highlightedContent"
       />
     </div>

web/src/composables/useDockerRowActions.ts

@@ -215,7 +215,9 @@ export function useDockerRowActions(options: DockerRowActionsOptions) {
     ]);
 
     const containerName = getContainerNameFromRow(row);
-    const hasConsoleSession = containerName ? hasActiveConsoleSession(containerName) : false;
+    const isRunning = row.meta?.state === ContainerState.RUNNING;
+    const hasConsoleSession =
+      containerName && isRunning ? hasActiveConsoleSession(containerName) : false;
 
     items.push([
       {
@@ -229,6 +231,7 @@ export function useDockerRowActions(options: DockerRowActionsOptions) {
         icon: 'i-lucide-terminal',
         as: 'button',
         color: hasConsoleSession ? 'success' : undefined,
+        disabled: !isRunning,
         onSelect: () => onOpenConsole(row),
       },
       {

web/src/composables/useDockerTableColumns.ts

@@ -54,7 +54,7 @@ export function useDockerTableColumns(options: DockerTableColumnsOptions) {
     options;
 
   const UButton = resolveComponent('UButton');
-  const UBadge = resolveComponent('UBadge');
+  const UBadge = resolveComponent('UBadge') as Component;
   const UDropdownMenu = resolveComponent('UDropdownMenu');
   const USkeleton = resolveComponent('USkeleton') as Component;
   const UIcon = resolveComponent('UIcon');
@@ -106,16 +106,22 @@ export function useDockerTableColumns(options: DockerTableColumnsOptions) {
           if (row.original.type === 'folder') return '';
           const state = row.original.state ?? '';
           const isBusy = busyRowIds.value.has(row.original.id);
-          const colorMap: Record<string, 'success' | 'warning' | 'neutral'> = {
+          const colorMap: Record<string, 'success' | 'warning' | 'error' | 'neutral'> = {
             [ContainerState.RUNNING]: 'success',
             [ContainerState.PAUSED]: 'warning',
-            [ContainerState.EXITED]: 'neutral',
+            [ContainerState.EXITED]: 'error',
+          };
+          const labelMap: Record<string, string> = {
+            [ContainerState.RUNNING]: 'Running',
+            [ContainerState.PAUSED]: 'Paused',
+            [ContainerState.EXITED]: 'Stopped',
           };
           const color = colorMap[state] || 'neutral';
+          const label = labelMap[state] || state;
           if (isBusy) {
             return h(USkeleton, { class: 'h-5 w-20' });
           }
-          return h(UBadge, { color }, () => state);
+          return h(UBadge, { color, label, variant: 'subtle' });
         },
       },
       {