CyberCoveLLC/Triple-C
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 128 Wiki Activity

Add custom env vars and Claude instructions for projects
All checks were successful
Build App / build-windows (push) Successful in 3m24s
Details
Build App / build-linux (push) Successful in 5m36s
Details
Build Container / build-container (push) Successful in 56s
Details

Browse Source 
Support per-project environment variables injected into containers,
plus global and per-project Claude Code instructions written to
~/.claude/CLAUDE.md inside the container on start. Reserved env var
prefixes are blocked, and changes trigger automatic container recreation.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Josh Knapp
2026-02-27 18:39:20 -08:00
parent 96f8acc40d
commit 82c487184a
8 changed files with 200 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
app/src/components/projects/ProjectCard.tsx
View File

@@ -287,6 +287,72 @@ export default function ProjectCard({ project }: Props) {
</button>
</div>
{/* Environment Variables */}
<div>
<label className="block text-xs text-[var(--text-secondary)] mb-0.5">Environment Variables</label>
{(project.custom_env_vars ?? []).map((ev, i) => (
<div key={i} className="flex gap-1 mb-1">
<input
value={ev.key}
onChange={async (e) => {
const vars = [...(project.custom_env_vars ?? [])];
vars[i] = { ...vars[i], key: e.target.value };
try { await update({ ...project, custom_env_vars: vars }); } catch {}
}}
placeholder="KEY"
disabled={!isStopped}
className="w-1/3 px-2 py-1 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50 font-mono"
/>
<input
value={ev.value}
onChange={async (e) => {
const vars = [...(project.custom_env_vars ?? [])];
vars[i] = { ...vars[i], value: e.target.value };
try { await update({ ...project, custom_env_vars: vars }); } catch {}
}}
placeholder="value"
disabled={!isStopped}
className="flex-1 px-2 py-1 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50 font-mono"
/>
<button
onClick={async () => {
const vars = (project.custom_env_vars ?? []).filter((_, j) => j !== i);
try { await update({ ...project, custom_env_vars: vars }); } catch {}
}}
disabled={!isStopped}
className="px-1.5 py-1 text-xs text-[var(--error)] hover:bg-[var(--bg-primary)] rounded disabled:opacity-50 transition-colors"
>
x
</button>
</div>
))}
<button
onClick={async () => {
const vars = [...(project.custom_env_vars ?? []), { key: "", value: "" }];
try { await update({ ...project, custom_env_vars: vars }); } catch {}
}}
disabled={!isStopped}
className="text-xs text-[var(--accent)] hover:text-[var(--accent-hover)] disabled:opacity-50 transition-colors"
>
+ Add variable
</button>
</div>
{/* Claude Instructions */}
<div>
<label className="block text-xs text-[var(--text-secondary)] mb-0.5">Claude Instructions</label>
<textarea
value={project.claude_instructions ?? ""}
onChange={async (e) => {
try { await update({ ...project, claude_instructions: e.target.value || null }); } catch {}
}}
placeholder="Per-project instructions for Claude Code (written to ~/.claude/CLAUDE.md in container)"
disabled={!isStopped}
rows={3}
className="w-full px-2 py-1 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent)] disabled:opacity-50 resize-y font-mono"
/>
</div>
{/* Bedrock config */}
{project.auth_mode === "bedrock" && (() => {
const bc = project.bedrock_config ?? defaultBedrockConfig;

19
app/src/components/settings/SettingsPanel.tsx
View File

@@ -1,8 +1,11 @@
import ApiKeyInput from "./ApiKeyInput";
import DockerSettings from "./DockerSettings";
import AwsSettings from "./AwsSettings";
import { useSettings } from "../../hooks/useSettings";
export default function SettingsPanel() {
const { appSettings, saveSettings } = useSettings();
return (
<div className="p-4 space-y-6">
<h2 className="text-xs font-semibold uppercase text-[var(--text-secondary)]">
@@ -11,6 +14,22 @@ export default function SettingsPanel() {
<ApiKeyInput />
<DockerSettings />
<AwsSettings />
<div>
<label className="block text-sm font-medium mb-2">Claude Instructions</label>
<p className="text-xs text-[var(--text-secondary)] mb-1.5">
Global instructions applied to all projects (written to ~/.claude/CLAUDE.md in containers)
</p>
<textarea
value={appSettings?.global_claude_instructions ?? ""}
onChange={async (e) => {
if (!appSettings) return;
await saveSettings({ ...appSettings, global_claude_instructions: e.target.value || null });
}}
placeholder="Instructions for Claude Code in all project containers..."
rows={4}
className="w-full px-2 py-1.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded focus:outline-none focus:border-[var(--accent)] resize-y font-mono"
/>
</div>
</div>
);
}

8
app/src/lib/types.ts
View File

@@ -1,3 +1,8 @@
export interface EnvVar {
key: string;
value: string;
}
export interface Project {
id: string;
name: string;
@@ -11,6 +16,8 @@ export interface Project {
git_token: string | null;
git_user_name: string | null;
git_user_email: string | null;
custom_env_vars: EnvVar[];
claude_instructions: string | null;
created_at: string;
updated_at: string;
}
@@ -75,4 +82,5 @@ export interface AppSettings {
image_source: ImageSource;
custom_image_name: string | null;
global_aws: GlobalAwsSettings;
global_claude_instructions: string | null;
}