codebay 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "codebay",
-	"version": "0.13.0",
+	"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/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';
@@ -69,6 +70,7 @@
 		disableBuildCache,
 		copyIgnorePatterns,
 		builtinCopyIgnore,
+		claudeConfigDir,
 		gitIdentityEnabled,
 		gitIdentityName,
 		gitIdentityEmail,
@@ -110,6 +112,7 @@
 		disableBuildCache: boolean;
 		copyIgnorePatterns: string;
 		builtinCopyIgnore: string;
+		claudeConfigDir: string;
 		gitIdentityEnabled: boolean;
 		gitIdentityName: string;
 		gitIdentityEmail: string;
@@ -372,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);
@@ -1156,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-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-output-style.ts

@@ -1,5 +1,4 @@
 import { readdir, readFile } from 'node:fs/promises';
-import { homedir } from 'node:os';
 import { join } from 'node:path';
 import { getOption } from '../lib/db.server.ts';
 import { writeContainerFile } from '../lib/container-files.server.ts';
@@ -8,7 +7,7 @@ import {
 	mergeClaudeSettings,
 	readClaudeSettings
 } from '../lib/claude-settings.server.ts';
-import { readHostClaudeSettings } from './claude-statusline.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';
@@ -29,7 +28,7 @@ export async function resolveEffectiveOutputStyle(): Promise<string | 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 = join(homedir(), '.claude', 'output-styles');
+	const dir = hostClaudeFile('output-styles');
 	let names: string[];
 	try {
 		names = (await readdir(dir)).filter((n) => n.endsWith('.md'));

package/src/container-injections/claude-statusline.ts

@@ -1,15 +1,17 @@
-import { existsSync, statSync } from 'node:fs';
+import { statSync } from 'node:fs';
 import { readFile } from 'node:fs/promises';
-import { homedir } from 'node:os';
-import { join } from 'node:path';
 import { writeContainerFile } from '../lib/container-files.server.ts';
 import {
 	claudeConfigFile,
 	mergeClaudeSettings,
 	readClaudeSettings
 } from '../lib/claude-settings.server.ts';
+import { expandTilde, readHostClaudeSettings } from '../lib/host-claude.server.ts';
 import type { ContainerTarget, Injection } from '../lib/injections.server.ts';
 
+// Re-exported so the modules and tests that historically imported these from here keep working.
+export { expandTilde, readHostClaudeSettings };
+
 /** Left unexpanded — Claude Code invokes this long after the injection has finished. */
 const CONTAINER_SCRIPT_PATH = '${CLAUDE_CONFIG_DIR:-$HOME/.claude}/statusline.sh';
 
@@ -19,19 +21,6 @@ interface StatusLineConfig {
 	script?: string;
 }
 
-export async function readHostClaudeSettings(): Promise<Record<string, unknown> | null> {
-	const file = join(homedir(), '.claude', 'settings.json');
-	if (!existsSync(file)) return null;
-	try {
-		return JSON.parse(await readFile(file, 'utf8')) as Record<string, unknown>;
-	} catch {
-		return null;
-	}
-}
-
-export const expandTilde = (p: string): string =>
-	p.startsWith('~/') ? join(homedir(), p.slice(2)) : p;
-
 /** Only a real file counts — else jq's `//` operator and a bare `/` resolve to the root dir. */
 const isExistingFile = (p: string): boolean => {
 	try {

package/src/lib/container-files.server.ts

@@ -54,6 +54,15 @@ export function writeFileScript(file: ContainerFile): string {
 	);
 }
 
+/** Like `writeFileScript`, but the stdin payload is base64 so binary bytes survive the env-var carrier. */
+export function writeBase64FileScript(file: ContainerFile): string {
+	const mode = file.mode ?? '644';
+	return (
+		`set -e; ${HOME_PRELUDE}f="${filePath(file)}"; mkdir -p "$(dirname "$f")"; ` +
+		`printf '%s' "$CODEBAY_STDIN" | base64 -d > "$f"; chmod ${mode} "$f"`
+	);
+}
+
 /** Single-quotes a value for a sourced shell file so whatever it contains stays literal. */
 export const shellSingleQuote = (value: string): string => `'${value.replaceAll("'", "'\\''")}'`;
 
@@ -98,6 +107,19 @@ export async function writeContainerFile(
 	return res.ok ? { ok: true } : { ok: false, error: res.error };
 }
 
+/** Writes raw `bytes` to a container file, ferrying them as base64 so binary content stays intact. */
+export async function writeContainerFileBytes(
+	target: ExecTarget,
+	file: ContainerFile,
+	bytes: Buffer
+): Promise<{ ok: boolean; error?: string }> {
+	const res = await execInContainer(target, {
+		script: writeBase64FileScript(file),
+		stdin: bytes.toString('base64')
+	});
+	return res.ok ? { ok: true } : { ok: false, error: res.error };
+}
+
 /** Appends each line to every file it's missing from — the shared idempotent rc/conf write. */
 export async function appendLinesIfAbsent(
 	target: ExecTarget,

package/src/lib/host-claude.server.ts

@@ -0,0 +1,31 @@
+import { existsSync } from 'node:fs';
+import { readFile } from 'node:fs/promises';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+import { getOption } from './db.server.ts';
+
+/** Expands a leading `~` to the host home; other paths pass through untouched. */
+export const expandTilde = (p: string): string =>
+	p === '~' ? homedir() : p.startsWith('~/') ? join(homedir(), p.slice(2)) : p;
+
+/**
+ * Host directory the Claude config injections read from: the `claude_config_dir` setting when set,
+ * else `~/.claude`. One resolver so credentials, statusline, output styles, and skills never diverge.
+ */
+export function hostClaudeDir(): string {
+	const custom = getOption('claude_config_dir')?.trim();
+	return custom ? expandTilde(custom) : join(homedir(), '.claude');
+}
+
+/** A path under the configured host Claude dir, e.g. `hostClaudeFile('CLAUDE.md')`. */
+export const hostClaudeFile = (...parts: string[]): string => join(hostClaudeDir(), ...parts);
+
+export async function readHostClaudeSettings(): Promise<Record<string, unknown> | null> {
+	const file = hostClaudeFile('settings.json');
+	if (!existsSync(file)) return null;
+	try {
+		return JSON.parse(await readFile(file, 'utf8')) as Record<string, unknown>;
+	} catch {
+		return null;
+	}
+}

package/src/lib/injections.server.ts

@@ -7,6 +7,7 @@ import { ttyd } from '../container-injections/ttyd.ts';
 import { gitIdentity } from '../container-injections/git-identity.ts';
 import { claudeCodeCredentials } from '../container-injections/claude-code-credentials.ts';
 import { claudeCodeCustom } from '../container-injections/claude-code-custom.ts';
+import { claudeCodeSkills } from '../container-injections/claude-code-skills.ts';
 import { claudeCodeIdeExtension } from '../container-injections/claude-code-ide-extension.ts';
 import { codeServerDark } from '../container-injections/code-server-dark.ts';
 import { claudeCodeInstall } from '../container-injections/claude-code-install.ts';
@@ -67,6 +68,7 @@ function buildStages(claudeInjection: Injection): Injection[][] {
 			tmux,
 			claudeCodeInstall,
 			claudeInjection,
+			claudeCodeSkills,
 			claudeCodeIdeExtension,
 			claudeEffortLevel
 		],

package/src/pages/Settings.svelte

@@ -21,6 +21,7 @@
 		disableBuildCache,
 		copyIgnorePatterns,
 		builtinCopyIgnore,
+		claudeConfigDir,
 		gitIdentityEnabled,
 		gitIdentityName,
 		gitIdentityEmail,
@@ -62,6 +63,7 @@
 		disableBuildCache: boolean;
 		copyIgnorePatterns: string;
 		builtinCopyIgnore: string;
+		claudeConfigDir: string;
 		gitIdentityEnabled: boolean;
 		gitIdentityName: string;
 		gitIdentityEmail: string;
@@ -106,6 +108,7 @@
 	{disableBuildCache}
 	{copyIgnorePatterns}
 	{builtinCopyIgnore}
+	{claudeConfigDir}
 	{gitIdentityEnabled}
 	{gitIdentityName}
 	{gitIdentityEmail}

package/src/routes.ts

@@ -214,6 +214,8 @@ export const routes: Record<string, MochiRouteValue> = {
 				// An explicit empty string (as opposed to unset) means "copy everything".
 				copyIgnorePatterns: getOption('copy_ignore_patterns') ?? DEFAULT_COPY_IGNORE,
 				builtinCopyIgnore: DEFAULT_COPY_IGNORE,
+				// Blank means "use ~/.claude"; the host dir credentials/skills/statusLine read from.
+				claudeConfigDir: getOption('claude_config_dir') ?? '',
 				// Not secrets, so the actual values (not just a "set" flag) go to the client.
 				// Blank means "no override" — fall back to the host's git config.
 				gitIdentityEnabled: gitIdentityEnabled(),
@@ -334,6 +336,13 @@ export const routes: Record<string, MochiRouteValue> = {
 				return success({ patterns });
 			},
 
+			// The host directory Claude config injections read from; blank falls back to ~/.claude.
+			claudeConfigDir: ({ formData }) => {
+				const dir = str(formData, 'dir').trim();
+				setOption('claude_config_dir', dir);
+				return success({ dir });
+			},
+
 			gitIdentityToggle: ({ formData }) => {
 				const enabled = onChecked(formData, 'enabled');
 				setOption('git_identity_enabled', enabled ? '1' : '0');

package/src/shell.html

@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<title>Codebay</title>
 		<style>
 			/* Each themed variable is defined once as light-dark(light, dark). With no