Add devcontainer support for Codespaces, local, and Claude Code

Adds .devcontainer/devcontainer.json (docker-compose based, reusing the
existing dev target/services) with:
- git, github-cli, and common-utils features for a usable shell/terminal
- the official Claude Code devcontainer feature, with CLAUDE_CONFIG_DIR
  pointed at a persisted volume so login survives rebuilds
- docker-outside-of-docker so `docker compose logs` works from the
  integrated terminal (requires moby:false, since moby packages aren't
  published for Debian trixie)
- forwarded ports for the app, Sentry Spotlight, and Storybook

Removes the old root-level devcontainer.json, which pointed at a
nonexistent workspace path and predates the .devcontainer/ convention.

Requires the Dockerfile syntax bump to 1.4: devcontainer feature injection
uses BuildKit named build contexts, which aren't supported under 1.2.

Also bakes Playwright's browsers into the dev image (otherwise lost every
time the devcontainer is recreated) so `npm run test:e2e` and the Storybook
vitest addon work out of the box, pins the compose port mappings to
0.0.0.0 (Docker's default dual-stack publish was confusing VS Code's port
forwarding into offering a non-working [::1] address), and allow-lists
localhost/127.0.0.1 as Next.js dev origins for the same forwarded-port
reason.

Fixes an unrelated Storybook glob that never matched any files (all
stories are .tsx; the plain .[jt]s pattern only matches .js/.ts) and was
printing a spurious "no story files found" warning on every start.

Author: abkfenris

.devcontainer/devcontainer-lock.json

@@ -0,0 +1,29 @@
+{
+  "features": {
+    "ghcr.io/anthropics/devcontainer-features/claude-code:1.0": {
+      "version": "1.0.5",
+      "resolved": "ghcr.io/anthropics/devcontainer-features/claude-code@sha256:cfc2e7d3e9fd3b9b01f8d5cb158508a884c8c0ede2e23ed10f32dea5d4ffe69a",
+      "integrity": "sha256:cfc2e7d3e9fd3b9b01f8d5cb158508a884c8c0ede2e23ed10f32dea5d4ffe69a"
+    },
+    "ghcr.io/devcontainers/features/common-utils:2": {
+      "version": "2.5.9",
+      "resolved": "ghcr.io/devcontainers/features/common-utils@sha256:cb0c4d3c276f157eed17935747e364178d75fee17f55c4e129966f64633deb3a",
+      "integrity": "sha256:cb0c4d3c276f157eed17935747e364178d75fee17f55c4e129966f64633deb3a"
+    },
+    "ghcr.io/devcontainers/features/docker-outside-of-docker:1": {
+      "version": "1.10.0",
+      "resolved": "ghcr.io/devcontainers/features/docker-outside-of-docker@sha256:c2c2cf829505ead8e4892c88c31b6594ae94a2bbb209e16e1fac456c1a3a624e",
+      "integrity": "sha256:c2c2cf829505ead8e4892c88c31b6594ae94a2bbb209e16e1fac456c1a3a624e"
+    },
+    "ghcr.io/devcontainers/features/git:1": {
+      "version": "1.3.8",
+      "resolved": "ghcr.io/devcontainers/features/git@sha256:fd75977de13a9979000e0e78baf949adb0ca71d2398995fa22e0a36d7e7e7fe2",
+      "integrity": "sha256:fd75977de13a9979000e0e78baf949adb0ca71d2398995fa22e0a36d7e7e7fe2"
+    },
+    "ghcr.io/devcontainers/features/github-cli:1": {
+      "version": "1.1.0",
+      "resolved": "ghcr.io/devcontainers/features/github-cli@sha256:d22f50b70ed75339b4eed1ba9ecde3a1791f90e88d37936517e3bace0bbad671",
+      "integrity": "sha256:d22f50b70ed75339b4eed1ba9ecde3a1791f90e88d37936517e3bace0bbad671"
+    }
+  }
+}

.devcontainer/devcontainer.json

@@ -0,0 +1,53 @@
+{
+  "name": "Mariner's Dashboard",
+  "dockerComposeFile": ["../docker-compose.yaml", "../docker-compose.dev.yaml"],
+  "service": "client",
+  "runServices": ["client", "spotlight"],
+  "workspaceFolder": "/app",
+  "overrideCommand": false,
+  "shutdownAction": "stopCompose",
+  "features": {
+    "ghcr.io/devcontainers/features/git:1": {},
+    "ghcr.io/devcontainers/features/github-cli:1": {},
+    "ghcr.io/devcontainers/features/common-utils:2": {
+      "installOhMyZsh": true,
+      "configureZshAsDefaultShell": true
+    },
+    "ghcr.io/anthropics/devcontainer-features/claude-code:1.0": {},
+    "ghcr.io/devcontainers/features/docker-outside-of-docker:1": {
+      "moby": false
+    }
+  },
+  "forwardPorts": [3000, 8969, 6006],
+  "portsAttributes": {
+    "3000": {
+      "label": "Next.js app",
+      "onAutoForward": "openBrowser"
+    },
+    "8969": {
+      "label": "Sentry Spotlight",
+      "onAutoForward": "silent"
+    },
+    "6006": {
+      "label": "Storybook",
+      "onAutoForward": "silent"
+    }
+  },
+  "mounts": [
+    "source=neracoos-buoy-app-claude-config,target=/root/.claude,type=volume",
+    "source=neracoos-buoy-app-gh-config,target=/root/.config/gh,type=volume"
+  ],
+  "containerEnv": {
+    "CLAUDE_CONFIG_DIR": "/root/.claude"
+  },
+  "postCreateCommand": "git config --global --add safe.directory /app",
+  "customizations": {
+    "vscode": {
+      "settings": {
+        "git.enabled": true,
+        "scm.diffDecorations": "all"
+      },
+      "extensions": ["vitest.explorer", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "editorconfig.editorconfig"]
+    }
+  }
+}

.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from "@storybook/nextjs-vite"
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.[jt]s", "../src/**/*.stories.[jt]sx", "../app/**/*.stories.[jt]sx"],
+  stories: ["../src/**/*.stories.[jt]sx", "../app/**/*.stories.[jt]sx"],
 
   addons: ["@storybook/addon-a11y", "@storybook/addon-links", "@storybook/addon-docs", "@storybook/addon-vitest"],
 

Dockerfile

@@ -1,4 +1,4 @@
-#syntax=docker/dockerfile:1.2
+#syntax=docker/dockerfile:1.4
 FROM node:26.5.0-slim@sha256:715e55e4b84e4bb0ff48e49b398a848f08e55daed8eb6a0ea1839ae53bc57583 AS base
 
 # Install dependencies only when needed
@@ -17,6 +17,11 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
+# Playwright (e2e tests) and the Storybook vitest addon both need real browsers,
+# which aren't part of node_modules. Install them here so they're baked into the
+# dev image rather than lost every time the devcontainer is recreated.
+RUN npx playwright install --with-deps chromium firefox
+
 # Rebuild the source code only when needed
 FROM base AS builder
 

devcontainer.json

@@ -8,6 +8,8 @@ services:
       target: dev
     command: npm run dev
     stdin_open: true
+    ports:
+      - "0.0.0.0:6006:6006"
     volumes:
       - .:/app:cached
       - /app/node_modules/
@@ -24,4 +26,4 @@ services:
   spotlight:
     image: ghcr.io/getsentry/spotlight:latest
     ports:
-      - "8969:8969"
+      - "0.0.0.0:8969:8969"

docker-compose.dev.yaml

@@ -7,7 +7,7 @@ services:
     # command: "npm run dev"
     stdin_open: true
     ports:
-      - "3000:3000"
+      - "0.0.0.0:3000:3000"
     environment:
       NEXT_PUBLIC_ERDDAP_SERVICE: https://buoybarn.neracoos.org
       # NEXT_PUBLIC_ERDDAP_SERVICE: http://localhost:8080

docker-compose.yaml

@@ -11,6 +11,9 @@ const nextConfig = {
     silenceDeprecations: ["color-functions", "global-builtin", "import", "if-function"],
   },
   serverExternalPackages: ["web-worker"],
+  // Devcontainer/Docker forward ports through 127.0.0.1 and localhost rather than
+  // the container's own hostname, which Next.js's dev server otherwise blocks as cross-origin.
+  allowedDevOrigins: ["localhost", "127.0.0.1"],
   experimental: {
     craCompat: false,
   },