codebay 0.12.1 → 0.14.0

package/.mochi/svelte-compile/{chunk-qc0f73f3.js → chunk-apdte4nh.js}

@@ -70,16 +70,15 @@ var bear_default = art4;
 // src/avatars/bee.ts
 var art5 = {
   name: "bee",
-  robot: true,
   pixels: [
-    ".#....#.",
-    "##.##.##",
-    "#.####.#",
-    ".######.",
-    ".######.",
     "........",
-    ".######.",
-    "..####.."
+    "...++##.",
+    "..++###.",
+    "...+#...",
+    ".#####..",
+    "#.+#+###",
+    "##+#+##.",
+    ".#####.."
   ]
 };
 var bee_default = art5;

package/.mochi/svelte-compile/{chunk-zd49axkf.js → chunk-w0hca7va.js}

@@ -11,6 +11,7 @@ var CLAUDE_PERMISSION_MODES = [
   "plan"
 ];
 var CLAUDE_EFFORT_LEVELS = ["low", "medium", "high", "xhigh", "max"];
+var CLAUDE_OUTPUT_STYLES = ["default", "none", "Concise"];
 function ideUrl(instance) {
   const base = `/p/${instance.id}/`;
   return instance.remote_workspace_folder ? `${base}?folder=${encodeURIComponent(instance.remote_workspace_folder)}` : base;
@@ -62,4 +63,4 @@ function applyTheme(theme) {
     document.documentElement.dataset.theme = theme;
 }
 
-export { CLAUDE_PERMISSION_MODES, CLAUDE_EFFORT_LEVELS, ideUrl, apiFetch, apiPost, apiDelete, getTheme, setTheme, applyTheme };
+export { CLAUDE_PERMISSION_MODES, CLAUDE_EFFORT_LEVELS, CLAUDE_OUTPUT_STYLES, ideUrl, apiFetch, apiPost, apiDelete, getTheme, setTheme, applyTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "codebay",
-	"version": "0.12.1",
+	"version": "0.14.0",
 	"description": "Web UI for spinning up isolated devcontainer instances from any local folder, each with a browser-based VS Code (code-server) — built for parallel Claude Code workflows.",
 	"type": "module",
 	"license": "MIT",

package/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+	<rect x="0" y="0" width="24" height="24" fill="#14150f" />
+	<g fill="none" stroke="#d7d8d2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+		<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z" />
+		<path d="M12 22V12" />
+		<polyline points="3.29 7 12 12 20.71 7" />
+		<path d="m7.5 4.27 9 5.15" />
+	</g>
+</svg>

package/src/avatars/bee.ts

@@ -2,16 +2,15 @@ import type { AvatarArt } from './types.ts';
 
 const art: AvatarArt = {
 	name: 'bee',
-	robot: true,
 	pixels: [
-		'.#....#.',
-		'##.##.##',
-		'#.####.#',
-		'.######.',
-		'.######.',
 		'........',
-		'.######.',
-		'..####..'
+		'...++##.',
+		'..++###.',
+		'...+#...',
+		'.#####..',
+		'#.+#+###',
+		'##+#+##.',
+		'.#####..'
 	]
 };
 

package/src/components/SettingsView.svelte

@@ -10,6 +10,7 @@
 	import ThemePicker from './ThemePicker.svelte';
 	import Layers from '@lucide/svelte/icons/layers';
 	import FolderMinus from '@lucide/svelte/icons/folder-minus';
+	import FolderCog from '@lucide/svelte/icons/folder-cog';
 	import Trash2 from '@lucide/svelte/icons/trash-2';
 	import Hammer from '@lucide/svelte/icons/hammer';
 	import KeyRound from '@lucide/svelte/icons/key-round';
@@ -42,14 +43,17 @@
 	import {
 		CLAUDE_PERMISSION_MODES,
 		CLAUDE_EFFORT_LEVELS,
+		CLAUDE_OUTPUT_STYLES,
 		type ClaudePermissionMode,
 		type ClaudeEffortLevel,
+		type ClaudeOutputStyle,
 		type InstanceMode
 	} from '../types.ts';
 	import Terminal from '@lucide/svelte/icons/terminal';
 	import LayoutTemplate from '@lucide/svelte/icons/layout-template';
 	import ShieldCheck from '@lucide/svelte/icons/shield-check';
 	import Gauge from '@lucide/svelte/icons/gauge';
+	import MessageSquare from '@lucide/svelte/icons/message-square';
 	import { installPopupBackTrap } from '../lib/popup-nav.ts';
 
 	/** Every settings form action fails with the same `{ error }` shape. */
@@ -60,11 +64,13 @@
 		defaultMode,
 		claudePermissionMode,
 		claudeEffortLevel,
+		claudeOutputStyle,
 		defaultImage,
 		builtinImage,
 		disableBuildCache,
 		copyIgnorePatterns,
 		builtinCopyIgnore,
+		claudeConfigDir,
 		gitIdentityEnabled,
 		gitIdentityName,
 		gitIdentityEmail,
@@ -100,11 +106,13 @@
 		defaultMode: InstanceMode;
 		claudePermissionMode: ClaudePermissionMode;
 		claudeEffortLevel: ClaudeEffortLevel;
+		claudeOutputStyle: ClaudeOutputStyle;
 		defaultImage: string;
 		builtinImage: string;
 		disableBuildCache: boolean;
 		copyIgnorePatterns: string;
 		builtinCopyIgnore: string;
+		claudeConfigDir: string;
 		gitIdentityEnabled: boolean;
 		gitIdentityName: string;
 		gitIdentityEmail: string;
@@ -292,6 +300,33 @@
 		effortFormEl?.requestSubmit();
 	}
 
+	// svelte-ignore state_referenced_locally
+	let outputStyleChoice = $state<ClaudeOutputStyle>(claudeOutputStyle);
+	let savingOutputStyle = $state(false);
+	let outputStyleError = $state<string | null>(null);
+	let outputStyleFormEl: HTMLFormElement | undefined;
+
+	const outputStyleOpts = saveOpts<{ style: ClaudeOutputStyle }>({
+		setSaving: (v) => (savingOutputStyle = v),
+		setError: (v) => (outputStyleError = v),
+		setMsg: () => {},
+		onSuccess: (data) => {
+			if (data?.style) outputStyleChoice = data.style;
+		}
+	});
+
+	const OUTPUT_STYLE_LABELS: Record<ClaudeOutputStyle, string> = {
+		default: 'Default',
+		none: 'None',
+		Concise: 'Concise'
+	};
+
+	function chooseOutputStyle(next: ClaudeOutputStyle) {
+		if (next === outputStyleChoice) return;
+		flushSync(() => (outputStyleChoice = next));
+		outputStyleFormEl?.requestSubmit();
+	}
+
 	// svelte-ignore state_referenced_locally
 	let image = $state(defaultImage);
 	let savingImage = $state(false);
@@ -340,6 +375,29 @@
 		copyIgnoreFormEl?.requestSubmit();
 	}
 
+	// Blank means "use ~/.claude" — the host dir the Claude config injections read from.
+	// svelte-ignore state_referenced_locally
+	let claudeDir = $state(claudeConfigDir);
+	let savingClaudeDir = $state(false);
+	let claudeDirError = $state<string | null>(null);
+	let claudeDirSaved = $state(false);
+	let claudeDirFormEl: HTMLFormElement | undefined;
+
+	const claudeDirOpts = saveOpts<{ dir: string }>({
+		setSaving: (v) => (savingClaudeDir = v),
+		setError: (v) => (claudeDirError = v),
+		setMsg: (v) => (claudeDirSaved = !!v),
+		onSuccess: (data) => {
+			claudeDir = data?.dir ?? claudeDir;
+			claudeDirSaved = true;
+		}
+	});
+
+	function resetClaudeDir() {
+		flushSync(() => (claudeDir = ''));
+		claudeDirFormEl?.requestSubmit();
+	}
+
 	// svelte-ignore state_referenced_locally
 	let gitIdentity = $state(gitIdentityEnabled);
 	let savingGitToggle = $state(false);
@@ -973,6 +1031,48 @@
 			{/if}
 		</section>
 
+		<section class="card">
+			<form
+				class="row"
+				method="POST"
+				action="?/claudeOutputStyle"
+				bind:this={outputStyleFormEl}
+				{@attach enhance(outputStyleOpts)}
+			>
+				<div class="label">
+					<MessageSquare size={20} />
+					<div class="text">
+						<div class="name">Claude output style</div>
+						<div class="desc">
+							The output style Claude Code starts new sessions in, written to
+							<code>~/.claude/settings.json</code>. <strong>Default</strong> inherits your host
+							<code>~/.claude/settings.json</code> (including any custom styles);
+							<strong>None</strong>
+							forces it off. Applies on create and rebuild, not to already-running instances.
+						</div>
+					</div>
+				</div>
+				<input type="hidden" name="style" value={outputStyleChoice} />
+				<div class="mode-toggle" role="group" aria-label="Claude output style">
+					{#each CLAUDE_OUTPUT_STYLES as option (option)}
+						<button
+							type="button"
+							class="mode-btn"
+							class:active={outputStyleChoice === option}
+							aria-pressed={outputStyleChoice === option}
+							disabled={savingOutputStyle}
+							onclick={() => chooseOutputStyle(option)}
+						>
+							{OUTPUT_STYLE_LABELS[option]}
+						</button>
+					{/each}
+				</div>
+			</form>
+			{#if outputStyleError}
+				<div class="sub"><div class="msg error">{outputStyleError}</div></div>
+			{/if}
+		</section>
+
 		<section class="card">
 			<form
 				class="row image-row"
@@ -1082,6 +1182,54 @@
 			</form>
 		</section>
 
+		<section class="card">
+			<form
+				class="row image-row"
+				method="POST"
+				action="?/claudeConfigDir"
+				bind:this={claudeDirFormEl}
+				{@attach enhance(claudeDirOpts)}
+			>
+				<div class="label">
+					<FolderCog size={20} />
+					<div class="text">
+						<div class="name">Claude config directory</div>
+						<div class="desc">
+							Host directory the Claude Code injections read from — credentials, statusLine, output
+							styles, and global skills / <code>CLAUDE.md</code>. Leave blank to use
+							<code>~/.claude</code>. Takes effect for instances created from now on.
+						</div>
+					</div>
+				</div>
+				<div class="image-controls">
+					<input
+						type="text"
+						name="dir"
+						class="image-input"
+						bind:value={claudeDir}
+						spellcheck="false"
+						autocapitalize="off"
+						autocorrect="off"
+						placeholder="~/.claude"
+					/>
+					<Button type="submit" disabled={savingClaudeDir}>Save</Button>
+					<Button
+						type="button"
+						icon={RotateCcw}
+						disabled={savingClaudeDir}
+						onclick={resetClaudeDir}
+						title="Reset to default (~/.claude)"
+						aria-label="Reset to default Claude config directory"
+					/>
+				</div>
+				{#if claudeDirError}
+					<div class="msg error">{claudeDirError}</div>
+				{:else if claudeDirSaved}
+					<div class="msg ok">Saved.</div>
+				{/if}
+			</form>
+		</section>
+
 		<section class="card">
 			<form
 				class="row"

package/src/container-injections/claude-code-credentials.ts

@@ -1,7 +1,6 @@
 import { existsSync } from 'node:fs';
 import { readFile } from 'node:fs/promises';
-import { homedir } from 'node:os';
-import { join } from 'node:path';
+import { hostClaudeFile } from '../lib/host-claude.server.ts';
 import { CLAUDE_CODE_TOKEN, CLAUDE_KEYCHAIN_SERVICE } from '../lib/config.server.ts';
 import { getOption } from '../lib/db.server.ts';
 import { checkPresence } from '../lib/exec.server.ts';
@@ -84,7 +83,7 @@ async function locateClaudeCredentials(): Promise<{ creds: string; source: strin
 		}
 	}
 
-	const file = join(homedir(), '.claude', '.credentials.json');
+	const file = hostClaudeFile('.credentials.json');
 	if (existsSync(file)) {
 		const raw = (await readFile(file, 'utf8')).trim();
 		if (isValid(raw)) return { creds: raw, source: '~/.claude/.credentials.json' };

package/src/container-injections/claude-code-install.ts

@@ -8,20 +8,25 @@ import type { Injection } from '../lib/injections.server.ts';
  * Node, else the standalone installer, which needs no Node at all.
  *
  * `$1` is the remote user (the injection passes it; the build-time feature falls back to the
- * devcontainer CLI's `$_REMOTE_USER`) — the standalone installer puts the binary under that
- * user's `$HOME`, so running it as root would strand it in `/root`.
+ * devcontainer CLI's `$_REMOTE_USER`). Claude Code 2.x's native binary — installed by npm's
+ * postinstall as much as by the standalone installer — lands under that user's `$HOME`, so both
+ * branches run as that user via `run_as`; running as root would strand the binary in `/root`.
+ * Success is judged by `claude --version` (as the user), not `command -v claude`, so a stranded
+ * binary the wrapper still resolves falls through to the standalone installer instead of passing.
  */
 export const INSTALL_SCRIPT =
 	'if command -v claude >/dev/null 2>&1; then exit 0; fi\n' +
-	'if command -v npm >/dev/null 2>&1 && npm install -g @anthropic-ai/claude-code@latest >/dev/null 2>&1; then\n' +
-	'  p="$(npm prefix -g 2>/dev/null)"\n' +
+	'u="${1:-${_REMOTE_USER:-root}}"\n' +
+	// Fall back to a home the remote user owns, never root's, so `su -m` can't strand the binary in /root.
+	'h="$(getent passwd "$u" 2>/dev/null | cut -d: -f6)"; [ -n "$h" ] || { [ "$u" = root ] && h=/root || h="/home/$u"; }\n' +
+	'run_as() { if [ "$(id -un)" = "$u" ]; then HOME="$h" sh -c "$1"; else HOME="$h" su -m "$u" -c "$1"; fi; }\n' +
+	"if command -v npm >/dev/null 2>&1 && run_as 'npm install -g @anthropic-ai/claude-code@latest >/dev/null 2>&1'; then\n" +
+	'  p="$(run_as \'npm prefix -g 2>/dev/null\')"\n' +
 	// npm's global bin is off PATH whenever the image sets its own NPM_CONFIG_PREFIX, so a bare
 	// `command -v` would miss an install that just succeeded — and so would the terminal launcher.
 	'  [ -n "$p" ] && [ -x "$p/bin/claude" ] && ln -sf "$p/bin/claude" /usr/local/bin/claude 2>/dev/null\n' +
-	'  if command -v claude >/dev/null 2>&1 || [ -x "$p/bin/claude" ]; then exit 0; fi\n' +
+	"  if run_as 'claude --version >/dev/null 2>&1'; then exit 0; fi\n" +
 	'fi\n' +
-	'u="${1:-${_REMOTE_USER:-root}}"\n' +
-	'h="$(getent passwd "$u" 2>/dev/null | cut -d: -f6)"; [ -n "$h" ] || h="$HOME"\n' +
 	'f="$(mktemp)"\n' +
 	'if command -v curl >/dev/null 2>&1; then curl -fsSL https://claude.ai/install.sh -o "$f"\n' +
 	'elif command -v wget >/dev/null 2>&1; then wget -qO "$f" https://claude.ai/install.sh\n' +

package/src/container-injections/claude-code-skills.ts

@@ -0,0 +1,125 @@
+import { existsSync } from 'node:fs';
+import { readdir, readFile, stat } from 'node:fs/promises';
+import { posix } from 'node:path';
+import { checkPresence } from '../lib/exec.server.ts';
+import { writeContainerFileBytes } from '../lib/container-files.server.ts';
+import { claudeConfigFile } from '../lib/claude-settings.server.ts';
+import { hostClaudeFile } from '../lib/host-claude.server.ts';
+import type { Injection } from '../lib/injections.server.ts';
+
+/**
+ * The env-var stdin carrier caps a single write near 128 KB (Linux `MAX_ARG_STRLEN`); base64
+ * inflates ~4/3, so a raw file over this is skipped rather than failing the whole injection.
+ */
+const MAX_FILE_BYTES = 90_000;
+
+interface HostFile {
+	/** Path relative to the host Claude dir, e.g. `CLAUDE.md` or `skills/foo/SKILL.md`. */
+	rel: string;
+	bytes: Buffer;
+	/** True when any execute bit is set on the host, so container scripts stay runnable. */
+	exec: boolean;
+	oversized: boolean;
+}
+
+/** Recursively lists every file under a host dir, as `skills/<subpath>` entries. */
+async function walkSkills(dir: string, rel: string, out: HostFile[]): Promise<void> {
+	let entries;
+	try {
+		entries = await readdir(dir, { withFileTypes: true });
+	} catch {
+		return;
+	}
+	for (const entry of entries) {
+		const abs = posix.join(dir, entry.name);
+		const childRel = posix.join(rel, entry.name);
+		if (entry.isDirectory()) {
+			await walkSkills(abs, childRel, out);
+		} else if (entry.isFile()) {
+			const info = await stat(abs);
+			out.push({
+				rel: childRel,
+				bytes: info.size > MAX_FILE_BYTES ? Buffer.alloc(0) : await readFile(abs),
+				exec: (info.mode & 0o111) !== 0,
+				oversized: info.size > MAX_FILE_BYTES
+			});
+		}
+	}
+}
+
+/** Cheap presence probe for the setup-UI chip — never reads file contents. */
+export async function hasHostSkillFiles(): Promise<boolean> {
+	if (existsSync(hostClaudeFile('CLAUDE.md'))) return true;
+	try {
+		return (await readdir(hostClaudeFile('skills'))).length > 0;
+	} catch {
+		return false;
+	}
+}
+
+/** The host global CLAUDE.md plus every file under the host skills dir. */
+export async function collectHostSkillFiles(): Promise<HostFile[]> {
+	const files: HostFile[] = [];
+	const claudeMd = hostClaudeFile('CLAUDE.md');
+	if (existsSync(claudeMd)) {
+		const info = await stat(claudeMd);
+		if (info.isFile()) {
+			files.push({
+				rel: 'CLAUDE.md',
+				bytes: info.size > MAX_FILE_BYTES ? Buffer.alloc(0) : await readFile(claudeMd),
+				exec: false,
+				oversized: info.size > MAX_FILE_BYTES
+			});
+		}
+	}
+	await walkSkills(hostClaudeFile('skills'), 'skills', files);
+	return files;
+}
+
+export const claudeCodeSkills: Injection = {
+	id: 'claude-code-skills',
+	label: 'skills & CLAUDE.md',
+
+	auth: {
+		hint: 'add skills or a CLAUDE.md to your host ~/.claude',
+		async status() {
+			const available = await hasHostSkillFiles();
+			return { available, source: available ? '~/.claude' : null };
+		}
+	},
+
+	async apply(target, log) {
+		const files = await collectHostSkillFiles();
+		if (!files.length) {
+			log('⚠ No global skills or CLAUDE.md found on host; skipped\n');
+			return;
+		}
+		log(`Injecting ${files.length} global skill/CLAUDE.md file(s)…\n`);
+		let failed = 0;
+		for (const file of files) {
+			if (file.oversized) {
+				log(`⚠ Skipped ${file.rel} (larger than ${MAX_FILE_BYTES} bytes)\n`);
+				continue;
+			}
+			const dest = claudeConfigFile(file.rel, file.exec ? '755' : '644');
+			const wrote = await writeContainerFileBytes(target, dest, file.bytes);
+			if (!wrote.ok) {
+				failed++;
+				log(`⚠ Failed to write ${file.rel}: ${wrote.error}\n`);
+			}
+		}
+		log(
+			failed
+				? `⚠ ${failed} skill file(s) failed to inject\n`
+				: '✓ Global skills & CLAUDE.md injected\n'
+		);
+	},
+
+	async check(target) {
+		return checkPresence(
+			target,
+			'h=$(eval echo ~$(id -un)); d="${CLAUDE_CONFIG_DIR:-$h/.claude}"; ' +
+				'if [ -s "$d/CLAUDE.md" ] || [ -n "$(ls -A "$d/skills" 2>/dev/null)" ]; then echo 1; else echo 0; fi'
+		);
+	}
+};

package/src/container-injections/claude-code-update.ts

@@ -8,29 +8,63 @@ import type { Injection } from '../lib/injections.server.ts';
  * was current when the layer was first baked. This re-checks at boot and only reinstalls when
  * behind — no-op if Claude Code isn't installed (project-owned images own their tooling) or
  * npm/registry is unreachable, and it echoes `updated <old> -> <new>` so `apply()` can log it.
+ *
+ * `$1` is the container's remote user. Claude Code 2.x ships a native binary that npm's
+ * postinstall drops into the *invoking* user's HOME, so the reinstall (and the `claude --version`
+ * probes) run as that user via `run_as` — a root reinstall would strand the binary in `/root`,
+ * exactly as the standalone installer in `claude-code-install.ts` would. Success is judged by a
+ * post-install `claude --version` (as the remote user), not npm's exit code, so a stranded or
+ * half-downloaded binary surfaces as a failure instead of a false `updated`.
  */
+const RUN_AS_PRELUDE =
+	'u="${1:-root}"; ' +
+	// Fall back to a home the remote user actually owns, never root's — otherwise `su -m` below
+	// would strand the native binary in /root, the exact failure this exists to prevent.
+	'h="$(getent passwd "$u" 2>/dev/null | cut -d: -f6)"; [ -n "$h" ] || { [ "$u" = root ] && h=/root || h="/home/$u"; }; ' +
+	'run_as() { if [ "$(id -un)" = "$u" ]; then HOME="$h" sh -c "$1"; else HOME="$h" su -m "$u" -c "$1"; fi; }; ' +
+	"ver() { run_as 'claude --version 2>/dev/null' | grep -oE '[0-9]+\\.[0-9]+\\.[0-9]+' | head -n1; }; ";
+
+const NPM_INSTALL_CMD = 'npm install -g @anthropic-ai/claude-code@latest >/dev/null 2>&1';
+
+/**
+ * Prefer the remote user — correct HOME and ownership on the common image whose global prefix is
+ * chowned to that user. Fall back to a root install with HOME pointed at the user's home when the
+ * user can't write a root-owned global prefix (`su` would EACCES there). Success is decided by the
+ * post-install `ver()`, so neither branch's exit status matters.
+ */
+const REINSTALL =
+	`if run_as '${NPM_INSTALL_CMD}'; then :; ` +
+	`elif [ "$(id -un)" != "$u" ]; then HOME="$h" ${NPM_INSTALL_CMD} || true; fi; `;
+
 export const UPDATE_SCRIPT =
 	'command -v claude >/dev/null 2>&1 || exit 0; ' +
 	'command -v npm >/dev/null 2>&1 || exit 0; ' +
-	"installed=$(claude --version 2>/dev/null | grep -oE '[0-9]+\\.[0-9]+\\.[0-9]+' | head -n1); " +
+	RUN_AS_PRELUDE +
+	'installed="$(ver)"; ' +
 	'latest=$(npm view @anthropic-ai/claude-code version 2>/dev/null); ' +
 	'if [ -z "$latest" ]; then exit 0; fi; ' +
 	'if [ "$installed" = "$latest" ]; then echo "current $latest"; exit 0; fi; ' +
-	'npm install -g @anthropic-ai/claude-code@latest >/dev/null 2>&1 || exit 1; ' +
-	'echo "updated $installed -> $latest"';
+	REINSTALL +
+	'now="$(ver)"; ' +
+	'if [ "$now" = "$latest" ]; then echo "updated ${installed:-none} -> $now"; exit 0; fi; ' +
+	'exit 1';
 
 /**
  * Same check with the latest version supplied by the host as `$0` (exec args, never interpolated
- * into the script), skipping the in-container `npm view` registry round-trip.
+ * into the script), skipping the in-container `npm view` registry round-trip. `$1` is the remote
+ * user — see `UPDATE_SCRIPT` above for why the reinstall must run as that user.
  */
 export const PINNED_UPDATE_SCRIPT =
 	'latest="$0"; ' +
 	'command -v claude >/dev/null 2>&1 || exit 0; ' +
 	'command -v npm >/dev/null 2>&1 || exit 0; ' +
-	"installed=$(claude --version 2>/dev/null | grep -oE '[0-9]+\\.[0-9]+\\.[0-9]+' | head -n1); " +
+	RUN_AS_PRELUDE +
+	'installed="$(ver)"; ' +
 	'if [ "$installed" = "$latest" ]; then echo "current $latest"; exit 0; fi; ' +
-	'npm install -g @anthropic-ai/claude-code@latest >/dev/null 2>&1 || exit 1; ' +
-	'echo "updated $installed -> $latest"';
+	REINSTALL +
+	'now="$(ver)"; ' +
+	'if [ "$now" = "$latest" ]; then echo "updated ${installed:-none} -> $now"; exit 0; fi; ' +
+	'exit 1';
 
 /** Anything looser could smuggle shell metacharacters out of a corrupted DB row into a container. */
 export const VERSION_RE = /^\d+\.\d+\.\d+$/;
@@ -84,12 +118,13 @@ export const claudeCodeUpdate: Injection = {
 	async apply(target, log) {
 		log('Checking Claude Code is up to date…\n');
 		const latest = await resolveLatestVersion();
-		// Omitting remoteUser runs as root, which the global npm reinstall needs.
+		// Runs as root (remoteUser omitted) so the script can `su -m` into the remote user for the
+		// reinstall, keeping Claude Code 2.x's native binary in that user's HOME (see UPDATE_SCRIPT).
 		const res = await execInContainer(
 			{ containerId: target.containerId },
 			latest
-				? { script: PINNED_UPDATE_SCRIPT, args: [latest], capture: true }
-				: { script: UPDATE_SCRIPT, capture: true }
+				? { script: PINNED_UPDATE_SCRIPT, args: [latest, target.remoteUser ?? ''], capture: true }
+				: { script: UPDATE_SCRIPT, args: ['claude-update', target.remoteUser ?? ''], capture: true }
 		);
 		if (!res.ok) {
 			log(`⚠ Claude Code update check failed: ${res.error} — keeping the installed version\n`);

package/src/container-injections/claude-output-style.ts

@@ -0,0 +1,83 @@
+import { readdir, readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { getOption } from '../lib/db.server.ts';
+import { writeContainerFile } from '../lib/container-files.server.ts';
+import {
+	claudeConfigFile,
+	mergeClaudeSettings,
+	readClaudeSettings
+} from '../lib/claude-settings.server.ts';
+import { hostClaudeFile, readHostClaudeSettings } from '../lib/host-claude.server.ts';
+import { normalizeOutputStyle } from '../types.ts';
+import type { ClaudeOutputStyle } from '../types.ts';
+import type { ContainerTarget, Injection } from '../lib/injections.server.ts';
+
+/** Also read by the settings-page `serverProps` to seed the UI. */
+export function getClaudeOutputStyle(): ClaudeOutputStyle {
+	return normalizeOutputStyle(getOption('claude_output_style'));
+}
+
+/** The `outputStyle` actually applied: the setting itself, the host's value when inheriting, or null. */
+export async function resolveEffectiveOutputStyle(): Promise<string | null> {
+	const setting = getClaudeOutputStyle();
+	if (setting === 'none') return null;
+	if (setting !== 'default') return setting;
+	const style = (await readHostClaudeSettings())?.outputStyle;
+	return typeof style === 'string' && style.trim() ? style.trim() : null;
+}
+
+/** The host's custom output-style definitions, so a non-built-in name resolves inside the container. */
+export async function readHostOutputStyleFiles(): Promise<{ name: string; content: string }[]> {
+	const dir = hostClaudeFile('output-styles');
+	let names: string[];
+	try {
+		names = (await readdir(dir)).filter((n) => n.endsWith('.md'));
+	} catch {
+		return [];
+	}
+	const files = await Promise.all(
+		names.map(async (name) => {
+			try {
+				return { name, content: await readFile(join(dir, name), 'utf8') };
+			} catch {
+				return null;
+			}
+		})
+	);
+	return files.filter((f): f is { name: string; content: string } => f !== null);
+}
+
+/** Writes Claude Code's `outputStyle` default into the container, mirroring host custom-style files. */
+export const claudeOutputStyle: Injection = {
+	id: 'claude-output-style',
+	label: 'output style',
+
+	async apply(target: ContainerTarget, log) {
+		const style = await resolveEffectiveOutputStyle();
+		if (!style) {
+			log('No Claude output style to apply; skipped\n');
+			return;
+		}
+		for (const file of await readHostOutputStyleFiles()) {
+			await writeContainerFile(
+				target,
+				claudeConfigFile(`output-styles/${file.name}`, '644'),
+				file.content
+			);
+		}
+		log(`Setting Claude output style (${style})…\n`);
+		const result = await mergeClaudeSettings(target, { outputStyle: style });
+		log(
+			result.ok
+				? '✓ Claude output style configured in container\n'
+				: `⚠ Claude output style injection failed: ${result.error}\n`
+		);
+	},
+
+	async check(target) {
+		const expected = await resolveEffectiveOutputStyle();
+		const settings = await readClaudeSettings(target);
+		const actual = settings?.outputStyle;
+		return expected === null ? actual == null : actual === expected;
+	}
+};