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/
@@ -16,12 +18,16 @@ services:
 
     environment:
       NEXT_PUBLIC_ERDDAP_SERVICE: https://buoybarn.neracoos.org
+      # The server runs inside the compose network, so it reaches Spotlight via
+      # the "spotlight" service hostname directly.
       SENTRY_SPOTLIGHT: http://spotlight:8969/stream
-      NEXT_PUBLIC_SENTRY_SPOTLIGHT: http://spotlight:8969/stream
-      NEXT_PUBLIC_SENTRY_DSN: http://spotlight@spotlight:8969/0
-      SENTRY_DSN: http://spotlight@spotlight:8969/0
+      # The browser can't resolve "spotlight" (it isn't on the compose network,
+      # and in Codespaces it may not even be on the same machine), so the client
+      # only gets an enable flag here; instrumentation-client.ts works out the
+      # right sidecar URL from the page's own origin at runtime.
+      NEXT_PUBLIC_SENTRY_SPOTLIGHT: "1"
 
   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,
   },

next.config.js

@@ -11,6 +11,21 @@ import * as Sentry from "@sentry/nextjs"
 // tslint:disable-next-line:no-var-requires
 const packageJson = require("../package.json")
 
+/**
+ * The browser can't resolve the "spotlight" Docker service hostname, and in
+ * forwarded-port dev environments (e.g. GitHub Codespaces) it may not even be
+ * on the same machine. Forwarded-port hosts expose each port under a
+ * "<name>-<port>.<domain>" hostname, so derive Spotlight's URL from whatever
+ * origin the page is actually being viewed from. Returns undefined when the
+ * current hostname doesn't match that pattern (e.g. local Docker Desktop),
+ * letting the SDK fall back to its "http://localhost:8969/stream" default.
+ */
+function spotlightSidecarUrl() {
+  const match = window.location.hostname.match(/^(.*)-\d+(\..+)$/)
+  if (!match) return undefined
+  return `${window.location.protocol}//${match[1]}-8969${match[2]}/stream`
+}
+
 Sentry.init({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN ?? "__dsn__",
 
@@ -35,6 +50,9 @@ Sentry.init({
       maskAllText: true,
       blockAllMedia: true,
     }),
+    ...(process.env.NEXT_PUBLIC_SENTRY_SPOTLIGHT
+      ? [Sentry.spotlightBrowserIntegration({ sidecarUrl: spotlightSidecarUrl() })]
+      : []),
   ],
 })
 

src/instrumentation-client.ts

@@ -1,25 +1,15 @@
 import * as Sentry from "@sentry/nextjs"
 
-/**
- * Load our package.json so that we can access the version
- * and allow Sentry to track errors in relation to the version used
- */
-// tslint:disable-next-line:no-var-requires
-const packageJson = require("../package.json")
-
-export function register() {
-  if (process.env.NEXT_RUNTIME === "nodejs" || process.env.NEXT_RUNTIME === "edge") {
-    Sentry.init({
-      dsn: process.env.NEXT_PUBLIC_SENTRY_DSN ?? "__dsn__",
-
-      release: `v${packageJson.version}`,
-
-      // Adjust this value in production, or use tracesSampler for greater control
-      tracesSampleRate: process.env.NODE_ENV === "development" ? 1 : 0.05,
-
-      // Setting this option to true will print useful information to the console while you're setting up Sentry.
-      debug: false,
-    })
+// The server and edge runtimes get bundled separately; importing each config
+// only from its matching branch keeps runtime-specific SDK code (like
+// spotlightIntegration, which the edge build doesn't export) out of the
+// wrong bundle. See sentry.server.config.ts / sentry.edge.config.ts.
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./sentry.server.config")
+  }
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("./sentry.edge.config")
   }
 }