Stabilize the extension runtime and UI

.github/workflows/ci.yaml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
       - name: Build extension
         run: make extension
         env:

Dockerfile

@@ -1,12 +1,17 @@
-FROM alpine AS tailscale
-RUN apk add --no-cache curl
+FROM debian:bookworm-slim AS tailscale
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends \
+    ca-certificates \
+    curl \
+    tar \
+    && rm -rf /var/lib/apt/lists/*
 ARG TARGETARCH
-ARG TSVERSION=1.78.1
+ARG TSVERSION=1.96.4
 RUN curl -fSsLo /tmp/tailscale.tgz https://pkgs.tailscale.com/stable/tailscale_${TSVERSION}_${TARGETARCH}.tgz \
     && mkdir /out \
     && tar -C /out -xzf /tmp/tailscale.tgz --strip-components=1
 
-FROM node:18.14-alpine AS ui-builder
+FROM node:22-bookworm-slim AS ui-builder
 WORKDIR /app/ui
 # cache packages in layer
 COPY ui/package.json /app/ui/package.json
@@ -18,7 +23,7 @@ RUN --mount=type=cache,target=/usr/local/share/.cache/yarn-${TARGETARCH} yarn
 COPY ui /app/ui
 RUN --mount=type=cache,target=/usr/local/share/.cache/yarn-${TARGETARCH} yarn build
 
-FROM debian:bullseye-slim
+FROM debian:bookworm-slim
 LABEL org.opencontainers.image.title="Tailscale" \
     org.opencontainers.image.description="Tailscale lets you securely connect to your Docker containers without exposing them to the public internet." \
     org.opencontainers.image.authors="Tailscale Inc." \
@@ -37,7 +42,11 @@ RUN apt-get update \
     iproute2 \
     procps \
     inotify-tools \
-    && rm -rf /var/lib/apt/lists/*
+    && rm -rf /var/lib/apt/lists/* \
+    && useradd -m tailscale \
+    && mkdir -p /var/lib/tailscale /var/run/tailscale /home/tailscale/.local/share/tailscale \
+    && chown -R tailscale:tailscale /var/lib/tailscale /var/run/tailscale /home/tailscale
+USER tailscale
 COPY --from=tailscale /out/tailscale /app/tailscale
 COPY --from=tailscale /out/tailscaled /app/tailscaled
 COPY --from=ui-builder /app/ui/dist ui
@@ -52,5 +61,6 @@ COPY host/hostname.sh linux/hostname.sh
 COPY host/host-tailscale darwin/host-tailscale
 COPY host/host-tailscale.cmd windows/host-tailscale.cmd
 COPY host/host-tailscale.sh linux/host-tailscale.sh
-ENV TS_HOST_ENV dde
-CMD /app/tailscaled --state=/var/lib/tailscale/tailscaled.state --tun=userspace-networking
+ENV TS_HOST_ENV=dde
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 CMD /app/tailscale version || exit 1
+CMD ["/app/tailscaled", "--state=/var/lib/tailscale/tailscaled.state", "--tun=userspace-networking"]

ui/package.json

@@ -24,10 +24,18 @@
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "prettier": "^2.5.1",
-    "react-scripts": "^5.0.0",
+    "react-scripts": "^5.0.1",
     "tailwindcss": "^3.1.6",
     "typescript": "^4.5.4"
   },
+  "resolutions": {
+    "@babel/traverse": "7.29.0",
+    "ejs": "3.1.10",
+    "form-data": "3.0.4",
+    "loader-utils": "2.0.4",
+    "minimist": "1.2.8",
+    "webpack": "5.106.1"
+  },
   "eslintConfig": {
     "extends": [
       "react-app"

ui/src/tailscale.ts

@@ -91,6 +91,12 @@ export type State = {
 
 const ddClient = createDockerDesktopClient()
 
+type RawContainer = Omit<Container, "Names" | "Ports" | "Labels"> & {
+  Names?: string[] | null
+  Ports?: Port[] | null
+  Labels?: Container["Labels"] | null
+}
+
 /**
  * useTailscale is a single hook that manages the state of Tailscale and
  * provides various methods to interact with it. All Tailscale state should
@@ -176,10 +182,15 @@ const useTailscale = create<State>((set, get) => ({
     set({ hostname })
   },
   fetchContainers: async () => {
-    const allContainers: Container[] =
-      (await ddClient.docker.listContainers()) as Container[]
+    const allContainers = (await ddClient.docker.listContainers()) as RawContainer[]
     set((prev) => {
       const containers = allContainers
+        .map((c) => ({
+          ...c,
+          Names: Array.isArray(c.Names) ? c.Names : [],
+          Ports: Array.isArray(c.Ports) ? c.Ports : [],
+          Labels: c.Labels || {},
+        }))
         // only show non-extension containers
         .filter((c) => c.Labels["com.docker.desktop.plugin"] === undefined)
       if (shallow(prev.containers, containers)) {

ui/src/views/container-view.tsx

@@ -246,6 +246,10 @@ function ContainerRow(props: {
 
   const hasPublicPorts = container.Ports.some((p) => p.PublicPort)
   const online = container.State === "running" && hasPublicPorts
+  const containerName =
+    container.Names.length > 0
+      ? container.Names.map((n) => n.slice(1).trim()).join(",")
+      : container.Id.slice(0, 12)
 
   const handleCopyClick = useCallback(() => {
     copyToClipboard(tailscaleURL)
@@ -278,7 +282,7 @@ function ContainerRow(props: {
             size="24"
           />
           <span className="truncate">
-            {container.Names.map((n) => n.slice(1).trim()).join(",")}
+            {containerName}
           </span>
         </div>
       </td>