codebay 0.9.1 → 0.10.0

package/src/components/SettingsView.svelte

@@ -15,8 +15,13 @@
 	import UserCog from '@lucide/svelte/icons/user-cog';
 	import Cpu from '@lucide/svelte/icons/cpu';
 	import Variable from '@lucide/svelte/icons/variable';
+	import KeySquare from '@lucide/svelte/icons/key-square';
 	import Plus from '@lucide/svelte/icons/plus';
 	import X from '@lucide/svelte/icons/x';
+	import SlidersHorizontal from '@lucide/svelte/icons/sliders-horizontal';
+	import ListOrdered from '@lucide/svelte/icons/list-ordered';
+	import Boxes from '@lucide/svelte/icons/boxes';
+	import Puzzle from '@lucide/svelte/icons/puzzle';
 	import { Toaster } from 'svelte-french-toast';
 	import { flushSync } from 'svelte';
 	import { enhance } from 'mochi-framework';
@@ -27,9 +32,17 @@
 	import CoinButton from './CoinButton.svelte';
 	import Avatar from './Avatar.svelte';
 	import { avatars, findAvatar, type AvatarArt } from '../avatars/index.ts';
-	import type { InstanceMode } from '../types.ts';
+	import {
+		CLAUDE_PERMISSION_MODES,
+		CLAUDE_EFFORT_LEVELS,
+		type ClaudePermissionMode,
+		type ClaudeEffortLevel,
+		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 { installPopupBackTrap } from '../lib/popup-nav.ts';
 
 	/** Every settings form action fails with the same `{ error }` shape. */
@@ -38,6 +51,8 @@
 	let {
 		pet,
 		defaultMode,
+		claudePermissionMode,
+		claudeEffortLevel,
 		defaultImage,
 		builtinImage,
 		disableBuildCache,
@@ -67,10 +82,17 @@
 		hostEnvVarsEnabled,
 		hostEnvVarNames,
 		hostEnvVarPresence,
+		customEnvVarsEnabled,
+		customEnvVarNames,
+		advancedSerialInjections,
+		advancedNoBuildkit,
+		advancedBlockingExtInstall,
 		version
 	}: {
 		pet?: AvatarArt;
 		defaultMode: InstanceMode;
+		claudePermissionMode: ClaudePermissionMode;
+		claudeEffortLevel: ClaudeEffortLevel;
 		defaultImage: string;
 		builtinImage: string;
 		disableBuildCache: boolean;
@@ -100,6 +122,11 @@
 		hostEnvVarsEnabled: boolean;
 		hostEnvVarNames: string[];
 		hostEnvVarPresence: Record<string, boolean>;
+		customEnvVarsEnabled: boolean;
+		customEnvVarNames: string[];
+		advancedSerialInjections: boolean;
+		advancedNoBuildkit: boolean;
+		advancedBlockingExtInstall: boolean;
 		version: string;
 	} = $props();
 
@@ -200,6 +227,63 @@
 		modeFormEl?.requestSubmit();
 	}
 
+	// svelte-ignore state_referenced_locally
+	let permissionChoice = $state<ClaudePermissionMode>(claudePermissionMode);
+	let savingPermission = $state(false);
+	let permissionError = $state<string | null>(null);
+	let permissionFormEl: HTMLFormElement | undefined;
+
+	const permissionModeOpts = saveOpts<{ mode: ClaudePermissionMode }>({
+		setSaving: (v) => (savingPermission = v),
+		setError: (v) => (permissionError = v),
+		setMsg: () => {},
+		onSuccess: (data) => {
+			if (data?.mode) permissionChoice = data.mode;
+		}
+	});
+
+	const PERMISSION_LABELS: Record<ClaudePermissionMode, string> = {
+		default: 'Default',
+		manual: 'Manual',
+		auto: 'Auto',
+		plan: 'Plan'
+	};
+
+	function choosePermissionMode(next: ClaudePermissionMode) {
+		if (next === permissionChoice) return;
+		flushSync(() => (permissionChoice = next));
+		permissionFormEl?.requestSubmit();
+	}
+
+	// svelte-ignore state_referenced_locally
+	let effortChoice = $state<ClaudeEffortLevel>(claudeEffortLevel);
+	let savingEffort = $state(false);
+	let effortError = $state<string | null>(null);
+	let effortFormEl: HTMLFormElement | undefined;
+
+	const effortLevelOpts = saveOpts<{ level: ClaudeEffortLevel }>({
+		setSaving: (v) => (savingEffort = v),
+		setError: (v) => (effortError = v),
+		setMsg: () => {},
+		onSuccess: (data) => {
+			if (data?.level) effortChoice = data.level;
+		}
+	});
+
+	const EFFORT_LABELS: Record<ClaudeEffortLevel, string> = {
+		low: 'Low',
+		medium: 'Medium',
+		high: 'High',
+		xhigh: 'X-High',
+		max: 'Max'
+	};
+
+	function chooseEffort(next: ClaudeEffortLevel) {
+		if (next === effortChoice) return;
+		flushSync(() => (effortChoice = next));
+		effortFormEl?.requestSubmit();
+	}
+
 	// svelte-ignore state_referenced_locally
 	let image = $state(defaultImage);
 	let savingImage = $state(false);
@@ -327,6 +411,49 @@
 		}
 	});
 
+	// DB-backed advanced escape hatches, so they initialize from the props.
+	// svelte-ignore state_referenced_locally
+	let serialInjections = $state(advancedSerialInjections);
+	let savingSerial = $state(false);
+	let serialError = $state<string | null>(null);
+	const serialOpts = toggleOpts({
+		set: (v) => (serialInjections = v),
+		setSaving: (v) => (savingSerial = v),
+		setError: (v) => (serialError = v)
+	});
+
+	// svelte-ignore state_referenced_locally
+	let noBuildkit = $state(advancedNoBuildkit);
+	let savingBuildkit = $state(false);
+	let buildkitError = $state<string | null>(null);
+	const buildkitOpts = toggleOpts({
+		set: (v) => (noBuildkit = v),
+		setSaving: (v) => (savingBuildkit = v),
+		setError: (v) => (buildkitError = v)
+	});
+
+	// svelte-ignore state_referenced_locally
+	let blockingExtInstall = $state(advancedBlockingExtInstall);
+	let savingBlocking = $state(false);
+	let blockingError = $state<string | null>(null);
+	const blockingOpts = toggleOpts({
+		set: (v) => (blockingExtInstall = v),
+		setSaving: (v) => (savingBlocking = v),
+		setError: (v) => (blockingError = v)
+	});
+
+	let clearingVer = $state(false);
+	let verMsg = $state<string | null>(null);
+	let verError = $state<string | null>(null);
+	const clearVersionOpts = saveOpts({
+		setSaving: (v) => (clearingVer = v),
+		setError: (v) => (verError = v),
+		setMsg: (v) => (verMsg = v),
+		onSuccess: () => {
+			verMsg = 'Cleared — the next instance boot re-checks the registry.';
+		}
+	});
+
 	// Token values never reach the client; only whether each is set, for the placeholder.
 	// svelte-ignore state_referenced_locally
 	let manualTokens = $state(manualTokensEnabled);
@@ -575,6 +702,75 @@
 		});
 	}
 
+	// svelte-ignore state_referenced_locally
+	let customEnvEnabled = $state(customEnvVarsEnabled);
+	let savingCustomEnvToggle = $state(false);
+	let customEnvToggleError = $state<string | null>(null);
+
+	const customEnvVarsToggleOpts = toggleOpts({
+		set: (v) => (customEnvEnabled = v),
+		setSaving: (v) => (savingCustomEnvToggle = v),
+		setError: (v) => (customEnvToggleError = v)
+	});
+
+	// Only names round-trip; the secret values live server-side and are shown here as a placeholder.
+	// svelte-ignore state_referenced_locally
+	let customEnvNames = $state([...customEnvVarNames]);
+	let newCustomEnvName = $state('');
+	let newCustomEnvValue = $state('');
+	let savingCustomEnv = $state(false);
+	let customEnvMsg = $state<string | null>(null);
+	let customEnvError = $state<string | null>(null);
+
+	/**
+	 * Add/update one var: name + secret value are submitted alone (the client never holds the other
+	 * secrets to resubmit), so re-adding an existing name upserts its value server-side.
+	 */
+	const addCustomEnvOpts: MochiEnhanceOptions<{ names: string[] }, ActionFailure> = {
+		onPending: (v) => (savingCustomEnv = v),
+		submit: ({ formData, cancel }) => {
+			customEnvError = null;
+			customEnvMsg = null;
+			const name = String(formData.get('name') ?? '').trim();
+			const value = String(formData.get('value') ?? '');
+			if (!name || !value) {
+				customEnvError = !name ? 'Name is required.' : 'Value is required.';
+				cancel();
+				return;
+			}
+			if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(name)) {
+				customEnvError = `Invalid variable name: ${name}`;
+				cancel();
+				return;
+			}
+			formData.set('name', name);
+			return ({ result }) => {
+				if (result.type === 'success') {
+					customEnvNames = result.data?.names ?? customEnvNames;
+					newCustomEnvName = '';
+					newCustomEnvValue = '';
+					customEnvMsg = 'Saved.';
+				} else if (result.type === 'failure') {
+					customEnvError = result.data?.error ?? 'Request failed';
+				} else if (result.type === 'error') {
+					customEnvError = 'Network error. Try again.';
+				}
+			};
+		}
+	};
+
+	/** Remove form (one per row): posts just this var's name. */
+	function removeCustomEnvOpts(name: string) {
+		return saveOpts<{ names: string[] }>({
+			setSaving: (v) => (savingCustomEnv = v),
+			setError: (v) => (customEnvError = v),
+			setMsg: (v) => (customEnvMsg = v),
+			onSuccess: (data) => {
+				customEnvNames = data?.names ?? customEnvNames.filter((n) => n !== name);
+			}
+		});
+	}
+
 	function toggleSound(on: boolean) {
 		sound = on;
 		setSoundEnabled(on);
@@ -683,6 +879,87 @@
 			{/if}
 		</section>
 
+		<section class="card">
+			<form
+				class="row"
+				method="POST"
+				action="?/claudePermissionMode"
+				bind:this={permissionFormEl}
+				{@attach enhance(permissionModeOpts)}
+			>
+				<div class="label">
+					<ShieldCheck size={20} />
+					<div class="text">
+						<div class="name">Claude permission mode</div>
+						<div class="desc">
+							The mode Claude Code starts in inside new instances. <strong>Default</strong> runs
+							<code>--dangerously-skip-permissions</code>, which never prompts; the other three pass
+							<code>--permission-mode</code> instead, because the skip flag overrides them. Applies on
+							create and rebuild, not to already-running instances.
+						</div>
+					</div>
+				</div>
+				<input type="hidden" name="mode" value={permissionChoice} />
+				<div class="mode-toggle" role="group" aria-label="Claude permission mode">
+					{#each CLAUDE_PERMISSION_MODES as option (option)}
+						<button
+							type="button"
+							class="mode-btn"
+							class:active={permissionChoice === option}
+							aria-pressed={permissionChoice === option}
+							disabled={savingPermission}
+							onclick={() => choosePermissionMode(option)}
+						>
+							{PERMISSION_LABELS[option]}
+						</button>
+					{/each}
+				</div>
+			</form>
+			{#if permissionError}
+				<div class="sub"><div class="msg error">{permissionError}</div></div>
+			{/if}
+		</section>
+
+		<section class="card">
+			<form
+				class="row"
+				method="POST"
+				action="?/claudeEffortLevel"
+				bind:this={effortFormEl}
+				{@attach enhance(effortLevelOpts)}
+			>
+				<div class="label">
+					<Gauge size={20} />
+					<div class="text">
+						<div class="name">Claude effort level</div>
+						<div class="desc">
+							The default reasoning effort Claude Code starts new sessions at inside instances,
+							written to <code>~/.claude/settings.json</code>. Applies on create and rebuild, not to
+							already-running instances.
+						</div>
+					</div>
+				</div>
+				<input type="hidden" name="level" value={effortChoice} />
+				<div class="mode-toggle" role="group" aria-label="Claude effort level">
+					{#each CLAUDE_EFFORT_LEVELS as option (option)}
+						<button
+							type="button"
+							class="mode-btn"
+							class:active={effortChoice === option}
+							aria-pressed={effortChoice === option}
+							disabled={savingEffort}
+							onclick={() => chooseEffort(option)}
+						>
+							{EFFORT_LABELS[option]}
+						</button>
+					{/each}
+				</div>
+			</form>
+			{#if effortError}
+				<div class="sub"><div class="msg error">{effortError}</div></div>
+			{/if}
+		</section>
+
 		<section class="card">
 			<form
 				class="row image-row"
@@ -1561,6 +1838,110 @@
 			{/if}
 		</section>
 
+		<section class="card">
+			<form
+				class="row"
+				method="POST"
+				action="?/customEnvVarsToggle"
+				{@attach enhance(customEnvVarsToggleOpts)}
+			>
+				<div class="label">
+					<KeySquare size={20} />
+					<div class="text">
+						<div class="name">Custom environment variables</div>
+						<div class="desc">
+							Inject your own <code>NAME=value</code> pairs into every new container as
+							<code>containerEnv</code>, available to all processes. Values are secret — stored
+							locally, masked in the build log, and never shown here after saving. Re-add a name to
+							update its value.
+						</div>
+					</div>
+				</div>
+				<label class="switch">
+					<input
+						type="checkbox"
+						name="enabled"
+						checked={customEnvEnabled}
+						disabled={savingCustomEnvToggle}
+						onchange={(e) => {
+							customEnvEnabled = e.currentTarget.checked;
+							e.currentTarget.form?.requestSubmit();
+						}}
+					/>
+					<span class="track"><span class="thumb"></span></span>
+				</label>
+			</form>
+			{#if customEnvToggleError}
+				<div class="sub"><div class="msg error">{customEnvToggleError}</div></div>
+			{/if}
+
+			{#if customEnvEnabled}
+				<div class="row divided var-row">
+					<div class="var-list">
+						{#each customEnvNames as name (name)}
+							<form
+								class="var-item"
+								method="POST"
+								action="?/removeCustomEnvVar"
+								{@attach enhance(removeCustomEnvOpts(name))}
+							>
+								<input type="hidden" name="name" value={name} />
+								<span class="var-name">{name}</span>
+								<span class="var-status present" title="Set — injected into every new container">
+									•••• saved
+								</span>
+								<button
+									type="submit"
+									class="var-remove"
+									disabled={savingCustomEnv}
+									aria-label={`Remove ${name}`}
+								>
+									<X size={13} />
+								</button>
+							</form>
+						{:else}
+							<div class="var-empty">No variables added yet.</div>
+						{/each}
+					</div>
+					<form
+						class="var-add"
+						method="POST"
+						action="?/setCustomEnvVar"
+						{@attach enhance(addCustomEnvOpts)}
+					>
+						<input
+							type="text"
+							name="name"
+							class="image-input"
+							bind:value={newCustomEnvName}
+							spellcheck="false"
+							autocapitalize="off"
+							autocorrect="off"
+							autocomplete="off"
+							placeholder="MY_SECRET"
+						/>
+						<input
+							type="password"
+							name="value"
+							class="image-input"
+							bind:value={newCustomEnvValue}
+							spellcheck="false"
+							autocapitalize="off"
+							autocorrect="off"
+							autocomplete="off"
+							placeholder="value"
+						/>
+						<Button type="submit" icon={Plus} disabled={savingCustomEnv}>Add</Button>
+					</form>
+					{#if customEnvError}
+						<div class="msg error">{customEnvError}</div>
+					{:else if customEnvMsg}
+						<div class="msg ok">{customEnvMsg}</div>
+					{/if}
+				</div>
+			{/if}
+		</section>
+
 		<section class="card">
 			<div class="row">
 				<div class="label">
@@ -1643,6 +2024,144 @@
 			{/if}
 		</section>
 
+		<section class="card">
+			<details class="advanced">
+				<summary>
+					<SlidersHorizontal size={20} />
+					<span class="name">Advanced</span>
+					<span class="hint">escape hatches — defaults are right for almost everyone</span>
+				</summary>
+
+				<form
+					class="row divided"
+					method="POST"
+					action="?/serialInjectionsToggle"
+					{@attach enhance(serialOpts)}
+				>
+					<div class="label">
+						<ListOrdered size={20} />
+						<div class="text">
+							<div class="name">Serial boot injections</div>
+							<div class="desc">
+								Run boot injections one at a time instead of in parallel stages. Slower boot; useful
+								when diagnosing injection interference.
+							</div>
+						</div>
+					</div>
+					<label class="switch">
+						<input
+							type="checkbox"
+							name="enabled"
+							checked={serialInjections}
+							disabled={savingSerial}
+							onchange={(e) => {
+								serialInjections = e.currentTarget.checked;
+								e.currentTarget.form?.requestSubmit();
+							}}
+						/>
+						<span class="track"><span class="thumb"></span></span>
+					</label>
+				</form>
+				{#if serialError}
+					<div class="sub"><div class="msg error">{serialError}</div></div>
+				{/if}
+
+				<form
+					class="row divided"
+					method="POST"
+					action="?/noBuildkitToggle"
+					{@attach enhance(buildkitOpts)}
+				>
+					<div class="label">
+						<Boxes size={20} />
+						<div class="text">
+							<div class="name">Don't force BuildKit</div>
+							<div class="desc">
+								Skip setting <code>DOCKER_BUILDKIT=1</code> for container builds and let the daemon's
+								default builder decide. For daemons where forcing BuildKit breaks builds.
+							</div>
+						</div>
+					</div>
+					<label class="switch">
+						<input
+							type="checkbox"
+							name="enabled"
+							checked={noBuildkit}
+							disabled={savingBuildkit}
+							onchange={(e) => {
+								noBuildkit = e.currentTarget.checked;
+								e.currentTarget.form?.requestSubmit();
+							}}
+						/>
+						<span class="track"><span class="thumb"></span></span>
+					</label>
+				</form>
+				{#if buildkitError}
+					<div class="sub"><div class="msg error">{buildkitError}</div></div>
+				{/if}
+
+				<form
+					class="row divided"
+					method="POST"
+					action="?/blockingExtInstallToggle"
+					{@attach enhance(blockingOpts)}
+				>
+					<div class="label">
+						<Puzzle size={20} />
+						<div class="text">
+							<div class="name">Blocking IDE extension install</div>
+							<div class="desc">
+								Install the Claude Code IDE extension before code-server starts, so the first window
+								always has it active. Slower first boot.
+							</div>
+						</div>
+					</div>
+					<label class="switch">
+						<input
+							type="checkbox"
+							name="enabled"
+							checked={blockingExtInstall}
+							disabled={savingBlocking}
+							onchange={(e) => {
+								blockingExtInstall = e.currentTarget.checked;
+								e.currentTarget.form?.requestSubmit();
+							}}
+						/>
+						<span class="track"><span class="thumb"></span></span>
+					</label>
+				</form>
+				{#if blockingError}
+					<div class="sub"><div class="msg error">{blockingError}</div></div>
+				{/if}
+
+				<form
+					class="row divided"
+					method="POST"
+					action="?/clearVersionCache"
+					{@attach enhance(clearVersionOpts)}
+				>
+					<div class="label">
+						<Trash2 size={20} />
+						<div class="text">
+							<div class="name">Clear claude-code version cache</div>
+							<div class="desc">
+								Forget the cached latest-version check; the next instance boot asks the npm registry
+								again.
+							</div>
+							{#if verError}
+								<div class="msg error">{verError}</div>
+							{:else if verMsg}
+								<div class="msg ok">{verMsg}</div>
+							{/if}
+						</div>
+					</div>
+					<Button type="submit" icon={Trash2} disabled={clearingVer}>
+						{clearingVer ? 'Clearing…' : 'Clear cache'}
+					</Button>
+				</form>
+			</details>
+		</section>
+
 		<section class="card danger-card">
 			<form class="row" method="POST" action="?/shutdown" {@attach enhance(shutdownOpts)}>
 				<div class="label">
@@ -1711,6 +2230,34 @@
 	.danger-card {
 		border-color: var(--danger);
 	}
+	details.advanced > summary {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 14px 16px;
+		cursor: pointer;
+		list-style: none;
+		font-family: var(--font-mono);
+	}
+	details.advanced > summary::-webkit-details-marker {
+		display: none;
+	}
+	details.advanced > summary .name {
+		font-size: 13px;
+	}
+	details.advanced > summary .hint {
+		color: var(--ink-soft);
+		font-size: 12px;
+	}
+	/* The chevron affordance a hidden native marker would otherwise provide. */
+	details.advanced > summary::after {
+		content: '▸';
+		margin-left: auto;
+		color: var(--ink-soft);
+	}
+	details.advanced[open] > summary::after {
+		content: '▾';
+	}
 	.disabled-card {
 		opacity: 0.55;
 		pointer-events: none;