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>
222 lines
8.1 KiB
Svelte
222 lines
8.1 KiB
Svelte
<script lang="ts">
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
import { getVersion } from "@tauri-apps/api/app";
|
|
import { open } from "@tauri-apps/plugin-dialog";
|
|
import { openUrl } from "@tauri-apps/plugin-opener";
|
|
import { claudeStore } from "$lib/stores/claude";
|
|
import { configStore, type HikariConfig } from "$lib/stores/config";
|
|
import type { ConnectionStatus } from "$lib/types/messages";
|
|
import { onMount } from "svelte";
|
|
|
|
const DISCORD_URL = "https://chat.nhcarrigan.com";
|
|
|
|
let connectionStatus: ConnectionStatus = $state("disconnected");
|
|
let workingDirectory = $state("");
|
|
let selectedDirectory = $state("/home/naomi");
|
|
let isConnecting = $state(false);
|
|
let grantedToolsList: string[] = $state([]);
|
|
let appVersion = $state("");
|
|
let currentConfig: 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.5,
|
|
});
|
|
|
|
onMount(async () => {
|
|
appVersion = await getVersion();
|
|
});
|
|
|
|
claudeStore.connectionStatus.subscribe((status) => {
|
|
connectionStatus = status;
|
|
isConnecting = status === "connecting";
|
|
});
|
|
|
|
claudeStore.currentWorkingDirectory.subscribe((dir) => {
|
|
workingDirectory = dir;
|
|
});
|
|
|
|
claudeStore.grantedTools.subscribe((tools) => {
|
|
grantedToolsList = Array.from(tools);
|
|
});
|
|
|
|
configStore.config.subscribe((config) => {
|
|
currentConfig = config;
|
|
});
|
|
|
|
async function handleBrowse() {
|
|
try {
|
|
const selected = await open({
|
|
directory: true,
|
|
multiple: false,
|
|
defaultPath: selectedDirectory,
|
|
title: "Select Working Directory",
|
|
});
|
|
if (selected && typeof selected === "string") {
|
|
selectedDirectory = selected;
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to open directory picker:", error);
|
|
}
|
|
}
|
|
|
|
async function handleConnect() {
|
|
if (isConnecting || connectionStatus === "connected") return;
|
|
|
|
const targetDir = selectedDirectory || "/home/naomi";
|
|
|
|
// Combine session-granted tools with config auto-granted tools
|
|
const allAllowedTools = [
|
|
...new Set([...grantedToolsList, ...currentConfig.auto_granted_tools]),
|
|
];
|
|
|
|
try {
|
|
await invoke("start_claude", {
|
|
options: {
|
|
working_dir: targetDir,
|
|
model: currentConfig.model || null,
|
|
api_key: currentConfig.api_key || null,
|
|
custom_instructions: currentConfig.custom_instructions || null,
|
|
mcp_servers_json: currentConfig.mcp_servers_json || null,
|
|
allowed_tools: allAllowedTools,
|
|
},
|
|
});
|
|
} catch (error) {
|
|
console.error("Failed to start Claude:", error);
|
|
claudeStore.addLine("error", `Connection failed: ${error}`);
|
|
}
|
|
}
|
|
|
|
async function handleDisconnect() {
|
|
try {
|
|
await invoke("stop_claude");
|
|
} catch (error) {
|
|
console.error("Failed to stop Claude:", error);
|
|
}
|
|
}
|
|
|
|
function getStatusColor(): string {
|
|
switch (connectionStatus) {
|
|
case "connected":
|
|
return "bg-green-500";
|
|
case "connecting":
|
|
return "bg-yellow-500 animate-pulse";
|
|
case "error":
|
|
return "bg-red-500";
|
|
default:
|
|
return "bg-gray-500";
|
|
}
|
|
}
|
|
|
|
function getStatusText(): string {
|
|
switch (connectionStatus) {
|
|
case "connected":
|
|
return "Connected";
|
|
case "connecting":
|
|
return "Connecting...";
|
|
case "error":
|
|
return "Error";
|
|
default:
|
|
return "Disconnected";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="status-bar flex items-center justify-between px-4 py-2 bg-[var(--bg-secondary)] border-b border-[var(--border-color)]"
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2.5 h-2.5 rounded-full {getStatusColor()}"></div>
|
|
<span class="text-sm text-gray-300">{getStatusText()}</span>
|
|
</div>
|
|
|
|
{#if connectionStatus === "connected"}
|
|
{#if workingDirectory}
|
|
<div class="text-sm text-gray-500">
|
|
<span class="text-gray-600">cwd:</span>
|
|
{workingDirectory}
|
|
</div>
|
|
{/if}
|
|
{:else}
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm text-gray-600">cwd:</span>
|
|
<input
|
|
type="text"
|
|
bind:value={selectedDirectory}
|
|
disabled={isConnecting}
|
|
class="px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-md text-gray-300 w-64 focus:outline-none focus:border-[var(--accent-primary)] disabled:opacity-50"
|
|
placeholder="/path/to/project"
|
|
/>
|
|
<button
|
|
onclick={handleBrowse}
|
|
disabled={isConnecting}
|
|
class="px-2 py-1 text-sm bg-[var(--bg-primary)] hover:bg-[var(--bg-hover)] border border-[var(--border-color)] text-gray-400 rounded-md transition-colors disabled:opacity-50"
|
|
title="Browse..."
|
|
>
|
|
...
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button
|
|
onclick={configStore.openSidebar}
|
|
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
|
|
title="Settings"
|
|
>
|
|
<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
onclick={() => openUrl(DISCORD_URL)}
|
|
class="p-1 text-gray-500 hover:text-[var(--accent-primary)] transition-colors"
|
|
title="Join our Discord"
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
{#if appVersion}
|
|
<span class="text-xs text-gray-600">v{appVersion}</span>
|
|
{/if}
|
|
{#if connectionStatus === "connected"}
|
|
<button
|
|
onclick={handleDisconnect}
|
|
class="px-3 py-1 text-sm bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-md transition-colors"
|
|
>
|
|
Disconnect
|
|
</button>
|
|
{:else}
|
|
<button
|
|
onclick={handleConnect}
|
|
disabled={isConnecting}
|
|
class="px-3 py-1 text-sm bg-green-500/20 hover:bg-green-500/30 text-green-400 rounded-md transition-colors disabled:opacity-50"
|
|
>
|
|
{isConnecting ? "Connecting..." : "Connect"}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|