feat: add container update action with image pull and recreate 🚀 (#4588)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: amir20

.claude/agent-memory/bug-hunter/MEMORY.md

@@ -28,3 +28,10 @@
 - Subscription fields use atomic types: TriggerCount (atomic.Int64), LastTriggeredAt (atomic.Pointer)
 - MetricCooldowns uses xsync.Map for per-container cooldown tracking
 - sendSem (semaphore.Weighted=5) limits concurrent notification sends
+
+### Container Update (feat/container-update)
+
+- **progressCh close contract**: Docker and Agent implementations close progressCh via defer; K8s does NOT, causing handler hang
+- **NetworkSettings nil risk**: `docker.InspectResponse.NetworkSettings` is a pointer; `ContainerCreate` doesn't nil-check before accessing `.Networks`
+- **Destructive recreate**: stop->remove->create->start has no rollback if create fails after remove
+- **SSE parsing in frontend**: Uses manual ReadableStream reader, not EventSource; no AbortController cleanup on unmount

assets/components.d.ts

@@ -27,6 +27,7 @@ declare module 'vue' {
     'Carbon:star': typeof import('~icons/carbon/star')['default']
     'Carbon:starFilled': typeof import('~icons/carbon/star-filled')['default']
     'Carbon:stopFilledAlt': typeof import('~icons/carbon/stop-filled-alt')['default']
+    'Carbon:upgrade': typeof import('~icons/carbon/upgrade')['default']
     'Carbon:warning': typeof import('~icons/carbon/warning')['default']
     Carousel: typeof import('./components/common/Carousel.vue')['default']
     CarouselItem: typeof import('./components/common/CarouselItem.vue')['default']

assets/components/ContainerViewer/ContainerActionsToolbar.vue

@@ -154,6 +154,17 @@
             {{ $t("toolbar.restart") }}
           </button>
         </li>
+        <li>
+          <button @click="update()" :disabled="actionStates.update">
+            <carbon:upgrade
+              :class="{
+                'animate-spin': actionStates.update,
+                'text-secondary': actionStates.update,
+              }"
+            />
+            {{ container.isSwarm ? $t("toolbar.update-service") : $t("toolbar.update") }}
+          </button>
+        </li>
       </template>
 
       <template v-if="enableShell && !historical">
@@ -190,7 +201,7 @@ const showDrawer = useDrawer();
 
 const { container, historical = false } = defineProps<{ container: Container; historical?: boolean }>();
 const clear = defineEmit();
-const { actionStates, start, stop, restart } = useContainerActions(toRef(() => container));
+const { actionStates, start, stop, restart, update } = useContainerActions(toRef(() => container));
 
 const router = useRouter();
 const { copy, copied, isSupported } = useClipboard();

assets/composable/containerActions.ts

@@ -2,25 +2,27 @@ import { Container } from "@/models/Container";
 
 type ContainerActions = "start" | "stop" | "restart";
 export const useContainerActions = (container: Ref<Container>) => {
-  const { showToast } = useToast();
+  const { showToast, removeToast } = useToast();
+  const { t } = useI18n();
 
   const actionStates = reactive({
     stop: false,
     restart: false,
     start: false,
+    update: false,
   });
 
   async function actionHandler(action: ContainerActions) {
     const actionUrl = `/api/hosts/${container.value.host}/containers/${container.value.id}/actions/${action}`;
 
     const errors = {
-      404: "container not found",
-      500: "unable to complete action",
-      400: "invalid action",
+      404: t("error.container-not-found"),
+      500: t("error.unable-to-complete-action"),
+      400: t("error.invalid-action"),
     } as Record<number, string>;
 
-    const defaultError = "something went wrong";
-    const toastTitle = "Action Failed";
+    const defaultError = t("error.something-went-wrong");
+    const toastTitle = t("error.action-failed");
 
     actionStates[action] = true;
 
@@ -37,10 +39,103 @@ export const useContainerActions = (container: Ref<Container>) => {
     actionStates[action] = false;
   }
 
+  async function update() {
+    const updateUrl = `/api/hosts/${container.value.host}/containers/${container.value.id}/actions/update`;
+    const toastId = "container-update";
+    let reader: ReadableStreamDefaultReader<Uint8Array> | undefined;
+
+    actionStates.update = true;
+
+    showToast(
+      {
+        id: toastId,
+        title: t("toolbar.update"),
+        message: t("toolbar.update-pulling"),
+        type: "info",
+      },
+      { once: true },
+    );
+
+    try {
+      const response = await fetch(withBase(updateUrl), { method: "POST" });
+      if (!response.ok) {
+        removeToast(toastId);
+        showToast({ type: "error", message: t("error.unable-to-update"), title: t("error.update-failed") });
+        return;
+      }
+
+      reader = response.body?.getReader();
+      if (!reader) return;
+
+      const decoder = new TextDecoder();
+      let buffer = "";
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n\n");
+        buffer = lines.pop() ?? "";
+
+        for (const chunk of lines) {
+          const dataLine = chunk.split("\n").find((l) => l.startsWith("data: "));
+          if (!dataLine) continue;
+
+          const data = JSON.parse(dataLine.slice(6));
+
+          switch (data.status) {
+            case "pulling":
+              break;
+            case "recreating":
+              removeToast(toastId);
+              showToast(
+                {
+                  id: toastId,
+                  title: t("toolbar.update"),
+                  message: t("toolbar.update-recreating"),
+                  type: "info",
+                },
+                { once: true },
+              );
+              break;
+            case "done":
+            case "up-to-date":
+              removeToast(toastId);
+              showToast(
+                {
+                  title: t("toolbar.update"),
+                  message: t(`toolbar.update-${data.status}`),
+                  type: "info",
+                },
+                { expire: 3000 },
+              );
+              break;
+            case "error":
+              removeToast(toastId);
+              showToast({
+                type: "error",
+                message: data.error || t("error.unknown-error"),
+                title: t("error.update-failed"),
+              });
+              break;
+          }
+        }
+      }
+    } catch (error) {
+      removeToast(toastId);
+      showToast({ type: "error", message: t("error.something-went-wrong"), title: t("error.update-failed") });
+    } finally {
+      reader?.cancel();
+      actionStates.update = false;
+    }
+  }
+
   return {
     actionStates,
     start: () => actionHandler("start"),
     stop: () => actionHandler("stop"),
     restart: () => actionHandler("restart"),
+    update,
   };
 };

internal/agent/client.go

@@ -367,6 +367,33 @@ func (c *Client) ContainerAction(ctx context.Context, containerId string, action
 	return err
 }
 
+func (c *Client) UpdateContainer(ctx context.Context, containerID string, progressCh chan<- container.UpdateProgress) error {
+	defer close(progressCh)
+
+	stream, err := c.client.UpdateContainer(ctx, &pb.UpdateContainerRequest{ContainerId: containerID})
+	if err != nil {
+		return err
+	}
+
+	for {
+		progress, err := stream.Recv()
+		if err == io.EOF {
+			return nil
+		}
+		if err != nil {
+			return err
+		}
+
+		progressCh <- container.UpdateProgress{
+			Status:  progress.Status,
+			Layer:   progress.Layer,
+			Current: progress.Current,
+			Total:   progress.Total,
+			Error:   progress.Error,
+		}
+	}
+}
+
 func (c *Client) ContainerAttach(ctx context.Context, containerId string) (*container.ExecSession, error) {
 	stream, err := c.client.ContainerAttach(ctx)
 	if err != nil {

internal/agent/client_test.go

@@ -100,6 +100,11 @@ func (m *MockedClientService) Exec(ctx context.Context, c container.Container, c
 	return args.Error(0)
 }
 
+func (m *MockedClientService) UpdateContainer(ctx context.Context, c container.Container, progressCh chan<- container.UpdateProgress) error {
+	args := m.Called(ctx, c, progressCh)
+	return args.Error(0)
+}
+
 var wantedContainer = container.Container{}
 
 func init() {