generated from nhcarrigan/template
naomi
a8f98406e1
### Explanation _No response_ ### Issue _No response_ ### Attestations - [ ] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/) - [ ] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/). - [ ] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/). ### Dependencies - [ ] I have pinned the dependencies to a specific patch version. ### Style - [ ] I have run the linter and resolved any errors. - [ ] My pull request uses an appropriate title, matching the conventional commit standards. - [ ] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request. ### Tests - [ ] My contribution adds new code, and I have added tests to cover it. - [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes. - [ ] All new and existing tests pass locally with my changes. - [ ] Code coverage remains at or above the configured threshold. ### Documentation _No response_ ### Versioning _No response_ Reviewed-on: #44 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
487 lines
17 KiB
Svelte
487 lines
17 KiB
Svelte
<script lang="ts">
|
|
import { configStore, type HikariConfig, type Theme } from "$lib/stores/config";
|
|
import { claudeStore } from "$lib/stores/claude";
|
|
|
|
let config: HikariConfig = $state({
|
|
model: null,
|
|
api_key: null,
|
|
custom_instructions: null,
|
|
mcp_servers_json: null,
|
|
auto_granted_tools: [],
|
|
theme: "dark",
|
|
greeting_enabled: true,
|
|
greeting_custom_prompt: null,
|
|
notifications_enabled: true,
|
|
notification_volume: 0.7,
|
|
});
|
|
|
|
let isOpen = $state(false);
|
|
let isSaving = $state(false);
|
|
let saveError: string | null = $state(null);
|
|
let newToolName = $state("");
|
|
let showApiKey = $state(false);
|
|
let grantedTools: string[] = $state([]);
|
|
|
|
configStore.config.subscribe((c) => {
|
|
config = { ...c };
|
|
});
|
|
|
|
configStore.isSidebarOpen.subscribe((open) => {
|
|
isOpen = open;
|
|
});
|
|
|
|
configStore.saveError.subscribe((error) => {
|
|
saveError = error;
|
|
});
|
|
|
|
claudeStore.grantedTools.subscribe((tools) => {
|
|
grantedTools = Array.from(tools);
|
|
});
|
|
|
|
const availableModels = [
|
|
{ value: "", label: "Default (from ~/.claude)" },
|
|
{ value: "claude-sonnet-4-20250514", label: "Claude Sonnet 4" },
|
|
{ value: "claude-opus-4-20250514", label: "Claude Opus 4" },
|
|
];
|
|
|
|
const commonTools = [
|
|
"Read",
|
|
"Write",
|
|
"Edit",
|
|
"Bash",
|
|
"Glob",
|
|
"Grep",
|
|
"WebFetch",
|
|
"WebSearch",
|
|
"Task",
|
|
];
|
|
|
|
async function handleSave() {
|
|
isSaving = true;
|
|
saveError = null;
|
|
try {
|
|
await configStore.saveConfig(config);
|
|
} catch {
|
|
// Error is handled by the store
|
|
} finally {
|
|
isSaving = false;
|
|
}
|
|
}
|
|
|
|
async function handleThemeChange(theme: Theme) {
|
|
config.theme = theme;
|
|
await configStore.setTheme(theme);
|
|
}
|
|
|
|
function toggleTool(tool: string) {
|
|
if (config.auto_granted_tools.includes(tool)) {
|
|
config.auto_granted_tools = config.auto_granted_tools.filter((t) => t !== tool);
|
|
} else {
|
|
config.auto_granted_tools = [...config.auto_granted_tools, tool];
|
|
}
|
|
}
|
|
|
|
function addCustomTool() {
|
|
if (newToolName.trim() && !config.auto_granted_tools.includes(newToolName.trim())) {
|
|
config.auto_granted_tools = [...config.auto_granted_tools, newToolName.trim()];
|
|
newToolName = "";
|
|
}
|
|
}
|
|
|
|
function removeTool(tool: string) {
|
|
config.auto_granted_tools = config.auto_granted_tools.filter((t) => t !== tool);
|
|
}
|
|
|
|
function importFromSession() {
|
|
config.auto_granted_tools = [...new Set([...config.auto_granted_tools, ...grantedTools])];
|
|
}
|
|
</script>
|
|
|
|
<!-- Backdrop -->
|
|
{#if isOpen}
|
|
<div
|
|
class="fixed inset-0 bg-black/50 z-40 transition-opacity"
|
|
onclick={configStore.closeSidebar}
|
|
onkeydown={(e) => e.key === "Escape" && configStore.closeSidebar()}
|
|
role="button"
|
|
tabindex="-1"
|
|
aria-label="Close sidebar"
|
|
></div>
|
|
{/if}
|
|
|
|
<!-- Sidebar -->
|
|
<aside
|
|
class="fixed right-0 top-0 h-full w-96 bg-[var(--bg-secondary)] border-l border-[var(--border-color)] z-50 transform transition-transform duration-300 ease-in-out overflow-y-auto {isOpen
|
|
? 'translate-x-0'
|
|
: 'translate-x-full'}"
|
|
>
|
|
<div class="p-4">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-lg font-semibold text-[var(--text-primary)]">Settings</h2>
|
|
<button
|
|
onclick={configStore.closeSidebar}
|
|
class="p-1 text-gray-400 hover:text-white transition-colors"
|
|
aria-label="Close settings"
|
|
>
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{#if saveError}
|
|
<div class="mb-4 p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-400 text-sm">
|
|
{saveError}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Agent Settings Section -->
|
|
<section class="mb-6">
|
|
<h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
|
|
Agent Settings
|
|
</h3>
|
|
|
|
<!-- Model Selection -->
|
|
<div class="mb-4">
|
|
<label for="model" class="block text-sm text-gray-400 mb-1">Model</label>
|
|
<select
|
|
id="model"
|
|
bind:value={config.model}
|
|
class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
|
|
>
|
|
{#each availableModels as model (model.value)}
|
|
<option value={model.value}>{model.label}</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- API Key -->
|
|
<div class="mb-4">
|
|
<label for="api-key" class="block text-sm text-gray-400 mb-1">
|
|
API Key <span class="text-gray-600">(optional override)</span>
|
|
</label>
|
|
<div class="relative">
|
|
<input
|
|
id="api-key"
|
|
type={showApiKey ? "text" : "password"}
|
|
bind:value={config.api_key}
|
|
placeholder="Falls back to ~/.claude settings"
|
|
class="w-full px-3 py-2 pr-10 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onclick={() => (showApiKey = !showApiKey)}
|
|
class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
|
|
aria-label={showApiKey ? "Hide API key" : "Show API key"}
|
|
>
|
|
{#if showApiKey}
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
|
|
/>
|
|
</svg>
|
|
{:else}
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
|
/>
|
|
</svg>
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Instructions -->
|
|
<div class="mb-4">
|
|
<label for="instructions" class="block text-sm text-gray-400 mb-1"
|
|
>Custom Instructions</label
|
|
>
|
|
<textarea
|
|
id="instructions"
|
|
bind:value={config.custom_instructions}
|
|
rows="4"
|
|
placeholder="Additional instructions for the agent..."
|
|
class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)] resize-none"
|
|
></textarea>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Greeting Section -->
|
|
<section class="mb-6">
|
|
<h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
|
|
Greeting
|
|
</h3>
|
|
|
|
<!-- Enable/Disable Toggle -->
|
|
<div class="mb-4">
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
bind:checked={config.greeting_enabled}
|
|
class="w-4 h-4 rounded border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--accent-primary)] focus:ring-[var(--accent-primary)]"
|
|
/>
|
|
<span class="text-sm text-gray-300">Send greeting on connect</span>
|
|
</label>
|
|
<p class="text-xs text-gray-500 mt-1 ml-7">
|
|
Automatically greet you when a session starts with time-based messages
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Custom Greeting Prompt -->
|
|
{#if config.greeting_enabled}
|
|
<div class="mb-4">
|
|
<label for="greeting-prompt" class="block text-sm text-gray-400 mb-1">
|
|
Custom Greeting Prompt <span class="text-gray-600">(optional)</span>
|
|
</label>
|
|
<textarea
|
|
id="greeting-prompt"
|
|
bind:value={config.greeting_custom_prompt}
|
|
rows="3"
|
|
placeholder="Leave empty for time-based greetings, or customize how you'd like to be greeted..."
|
|
class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)] resize-none"
|
|
></textarea>
|
|
</div>
|
|
{/if}
|
|
</section>
|
|
|
|
<!-- MCP Servers Section -->
|
|
<section class="mb-6">
|
|
<h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
|
|
MCP Servers
|
|
</h3>
|
|
<div class="mb-2">
|
|
<label for="mcp-config" class="block text-sm text-gray-400 mb-1">
|
|
Server Configuration <span class="text-gray-600">(JSON)</span>
|
|
</label>
|
|
<textarea
|
|
id="mcp-config"
|
|
bind:value={config.mcp_servers_json}
|
|
rows="6"
|
|
placeholder={`{\n "servers": {\n "example": {\n "command": "npx",\n "args": ["-y", "@example/mcp-server"]\n }\n }\n}`}
|
|
class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] font-mono text-sm focus:outline-none focus:border-[var(--accent-primary)] resize-none"
|
|
></textarea>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Auto-Granted Tools Section -->
|
|
<section class="mb-6">
|
|
<h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
|
|
Auto-Granted Tools
|
|
</h3>
|
|
<p class="text-xs text-gray-500 mb-3">
|
|
These tools will be pre-approved for every session (no permission prompts).
|
|
</p>
|
|
|
|
<!-- Common tools checkboxes -->
|
|
<div class="grid grid-cols-2 gap-2 mb-3">
|
|
{#each commonTools as tool (tool)}
|
|
<label class="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={config.auto_granted_tools.includes(tool)}
|
|
onchange={() => toggleTool(tool)}
|
|
class="w-4 h-4 rounded border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--accent-primary)] focus:ring-[var(--accent-primary)]"
|
|
/>
|
|
{tool}
|
|
</label>
|
|
{/each}
|
|
</div>
|
|
|
|
<!-- Currently granted tools (with import) -->
|
|
{#if grantedTools.length > 0}
|
|
<div class="mb-3">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-xs text-gray-500">Session-granted tools:</span>
|
|
<button
|
|
onclick={importFromSession}
|
|
class="text-xs text-[var(--accent-primary)] hover:text-[var(--accent-secondary)] transition-colors"
|
|
>
|
|
Import all
|
|
</button>
|
|
</div>
|
|
<div class="flex flex-wrap gap-1">
|
|
{#each grantedTools as tool (tool)}
|
|
<span
|
|
class="px-2 py-0.5 text-xs bg-[var(--accent-primary)]/20 text-[var(--accent-primary)] rounded"
|
|
>
|
|
{tool}
|
|
</span>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Custom tools list -->
|
|
{#if config.auto_granted_tools.filter((t) => !commonTools.includes(t)).length > 0}
|
|
<div class="mb-3">
|
|
<span class="text-xs text-gray-500 block mb-2">Custom tools:</span>
|
|
<div class="flex flex-wrap gap-1">
|
|
{#each config.auto_granted_tools.filter((t) => !commonTools.includes(t)) as tool (tool)}
|
|
<span
|
|
class="px-2 py-0.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded flex items-center gap-1"
|
|
>
|
|
{tool}
|
|
<button
|
|
onclick={() => removeTool(tool)}
|
|
class="text-gray-500 hover:text-red-400"
|
|
aria-label="Remove {tool}"
|
|
>
|
|
×
|
|
</button>
|
|
</span>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Add custom tool -->
|
|
<div class="flex gap-2">
|
|
<input
|
|
type="text"
|
|
bind:value={newToolName}
|
|
placeholder="Add custom tool..."
|
|
onkeydown={(e) => e.key === "Enter" && addCustomTool()}
|
|
class="flex-1 px-3 py-1.5 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
|
|
/>
|
|
<button
|
|
onclick={addCustomTool}
|
|
disabled={!newToolName.trim()}
|
|
class="px-3 py-1.5 text-sm bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)] text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Add
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Appearance Section -->
|
|
<section class="mb-6">
|
|
<h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
|
|
Appearance
|
|
</h3>
|
|
<div class="flex gap-2">
|
|
<button
|
|
onclick={() => handleThemeChange("dark")}
|
|
class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
|
|
? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
|
|
: 'bg-[var(--bg-primary)] border-[var(--border-color)] text-gray-400 hover:border-[var(--accent-primary)]'}"
|
|
>
|
|
Dark
|
|
</button>
|
|
<button
|
|
onclick={() => handleThemeChange("light")}
|
|
class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
|
|
? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
|
|
: 'bg-[var(--bg-primary)] border-[var(--border-color)] text-gray-400 hover:border-[var(--accent-primary)]'}"
|
|
>
|
|
Light
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Notifications Section -->
|
|
<section class="mb-6">
|
|
<h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
|
|
Notifications
|
|
</h3>
|
|
|
|
<!-- Enable/Disable Notifications -->
|
|
<div class="mb-4">
|
|
<label class="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
bind:checked={config.notifications_enabled}
|
|
class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
|
|
/>
|
|
<span class="text-sm text-gray-300">Enable sound notifications</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Volume Control -->
|
|
<div class="mb-4">
|
|
<label for="notification-volume" class="block text-sm text-gray-400 mb-2">
|
|
Notification Volume
|
|
</label>
|
|
<div class="flex items-center gap-3">
|
|
<input
|
|
id="notification-volume"
|
|
type="range"
|
|
bind:value={config.notification_volume}
|
|
min="0"
|
|
max="1"
|
|
step="0.1"
|
|
disabled={!config.notifications_enabled}
|
|
class="flex-1 h-2 bg-[var(--bg-primary)] rounded-lg appearance-none cursor-pointer disabled:opacity-50"
|
|
/>
|
|
<span class="text-sm text-gray-300 w-12 text-right">
|
|
{Math.round(config.notification_volume * 100)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-xs text-gray-500">
|
|
Sound notifications will play when I complete tasks, encounter errors, or need permissions.
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Save Button -->
|
|
<div class="sticky bottom-0 pt-4 pb-2 bg-[var(--bg-secondary)]">
|
|
<button
|
|
onclick={handleSave}
|
|
disabled={isSaving}
|
|
class="w-full py-3 bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)] text-white font-medium rounded-lg transition-colors disabled:opacity-50"
|
|
>
|
|
{isSaving ? "Saving..." : "Save Settings"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<style>
|
|
/* Custom range input styling */
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: var(--accent-primary);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="range"]::-moz-range-thumb {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: var(--accent-primary);
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
|
|
input[type="range"]:disabled::-webkit-slider-thumb {
|
|
background: var(--text-tertiary);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
input[type="range"]:disabled::-moz-range-thumb {
|
|
background: var(--text-tertiary);
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|