generated from nhcarrigan/template
hikari
b88f25a61b
## Summary Implements support for Claude Code CLI v2.1.81 features and adds a global CLAUDE.md editor, closing issues #237, #239, #244, #245, #246, #247, #248, and #262. ### Stream-JSON forward-compatibility (#245, #246, #247, #248) - **#248** — `output_style` field added to `System` init message; silently accepted for forward-compat - **#245** — `fast_mode_state` field added to `Result` message; logged at debug level - **#246** — `model_usage` field added to `Result` message; per-model breakdown logged at debug level - **#247** — `total_cost_usd` field added to `Result` message; authoritative cost logged at debug level ### New config options (#237, #239, #244) - **#237** — `bare_mode` config toggle: passes `--bare` to Claude Code, suppressing UI chrome for scripted headless `-p` calls - **#239** — `show_clear_context_on_plan_accept` toggle: passes `showClearContextOnPlanAccept: false` in `--settings` when disabled - **#244** — `custom_model_option` text field: sets `ANTHROPIC_CUSTOM_MODEL_OPTION` env var for custom model providers ### Global CLAUDE.md editor (#262) - New Tauri commands `get_global_claude_md` / `save_global_claude_md` read/write `~/.claude/CLAUDE.md` (creates file + directory if absent) - New "Global Instructions" section in the Config Sidebar with a textarea and Save button ### Bug fix (pre-existing) `disable_cron` and `disable_skill_shell_execution` were saved to `HikariConfig` but never passed to `start_claude` invocations — fixed in all 9 call sites. All 3 new config fields are also wired through all 9 call sites. All changes pass `check-all.sh` (ESLint → Prettier → svelte-check → Vitest → Clippy → cargo test with llvm-cov). ✨ This PR was created with help from Hikari~ 🌸 Reviewed-on: #263 Co-authored-by: Hikari <hikari@nhcarrigan.com> Co-committed-by: Hikari <hikari@nhcarrigan.com>
554 lines
19 KiB
Svelte
554 lines
19 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
onToggleAchievements?: () => void;
|
|
onToggleCompact?: () => void;
|
|
}
|
|
|
|
const { onToggleAchievements = () => {}, onToggleCompact = () => {} }: Props = $props();
|
|
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
import { getVersion } from "@tauri-apps/api/app";
|
|
import { open } from "@tauri-apps/plugin-dialog";
|
|
import { get } from "svelte/store";
|
|
import { claudeStore } from "$lib/stores/claude";
|
|
import { configStore, type HikariConfig, isStreamerMode } from "$lib/stores/config";
|
|
import type { ConnectionStatus } from "$lib/types/messages";
|
|
import { onMount } from "svelte";
|
|
import { PROJECT_CONTEXT_SYSTEM_ADDENDUM } from "$lib/stores/projectContext";
|
|
import { conversationsStore } from "$lib/stores/conversations";
|
|
import {
|
|
generateContextInjection,
|
|
createSummary,
|
|
sanitizeForJson,
|
|
} from "$lib/utils/conversationUtils";
|
|
import { updateDiscordRpc, setSkipNextGreeting } from "$lib/tauri";
|
|
import WorkspaceTrustModal from "./WorkspaceTrustModal.svelte";
|
|
import type { WorkspaceHookInfo } from "$lib/types/messages";
|
|
import NavMenu from "./NavMenu.svelte";
|
|
import { taskLoopStore } from "$lib/stores/taskLoop";
|
|
|
|
let connectionStatus: ConnectionStatus = $state("disconnected");
|
|
let workingDirectory = $state("");
|
|
let worktreeInfo: import("$lib/types/worktree").WorktreeInfo | null = $state(null);
|
|
let selectedDirectory = $state("/home/naomi");
|
|
let isConnecting = $state(false);
|
|
let grantedToolsList: string[] = $state([]);
|
|
let appVersion = $state("");
|
|
let isSummarising = $state(false);
|
|
let showWorkspaceTrust = $state(false);
|
|
let pendingHookInfo: WorkspaceHookInfo | null = $state(null);
|
|
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,
|
|
always_on_top: false,
|
|
update_checks_enabled: true,
|
|
character_panel_width: null,
|
|
font_size: 14,
|
|
streamer_mode: false,
|
|
streamer_hide_paths: false,
|
|
compact_mode: false,
|
|
profile_name: null,
|
|
profile_avatar_path: null,
|
|
profile_bio: null,
|
|
custom_theme_colors: {
|
|
bg_primary: null,
|
|
bg_secondary: null,
|
|
bg_terminal: null,
|
|
accent_primary: null,
|
|
accent_secondary: null,
|
|
text_primary: null,
|
|
text_secondary: null,
|
|
border_color: null,
|
|
},
|
|
budget_enabled: false,
|
|
session_token_budget: null,
|
|
session_cost_budget: null,
|
|
budget_action: "warn",
|
|
budget_warning_threshold: 0.8,
|
|
discord_rpc_enabled: true,
|
|
show_thinking_blocks: true,
|
|
use_worktree: false,
|
|
disable_1m_context: false,
|
|
max_output_tokens: null,
|
|
trusted_workspaces: [],
|
|
background_image_path: null,
|
|
background_image_opacity: 0.3,
|
|
custom_font_path: null,
|
|
custom_font_family: null,
|
|
custom_ui_font_path: null,
|
|
custom_ui_font_family: null,
|
|
task_loop_auto_commit: false,
|
|
task_loop_commit_prefix: "feat",
|
|
task_loop_include_summary: false,
|
|
disable_cron: false,
|
|
include_git_instructions: true,
|
|
enable_claudeai_mcp_servers: true,
|
|
auto_memory_directory: null,
|
|
model_overrides: null,
|
|
disable_skill_shell_execution: false,
|
|
bare_mode: false,
|
|
show_clear_context_on_plan_accept: true,
|
|
custom_model_option: null,
|
|
});
|
|
|
|
let streamerModeActive = $state(false);
|
|
isStreamerMode.subscribe((value) => {
|
|
streamerModeActive = value;
|
|
});
|
|
|
|
const loopStatus = $derived(taskLoopStore.loopStatus);
|
|
const loopTasks = $derived(taskLoopStore.tasks);
|
|
const loopCurrentIndex = $derived(taskLoopStore.currentTaskIndex);
|
|
const loopCompletedCount = $derived(
|
|
$loopTasks.filter((t) => t.status === "completed" || t.status === "failed").length
|
|
);
|
|
const loopTotalCount = $derived($loopTasks.length);
|
|
|
|
onMount(async () => {
|
|
appVersion = await getVersion();
|
|
});
|
|
|
|
claudeStore.connectionStatus.subscribe((status) => {
|
|
connectionStatus = status;
|
|
isConnecting = status === "connecting";
|
|
});
|
|
|
|
claudeStore.currentWorkingDirectory.subscribe((dir) => {
|
|
workingDirectory = dir;
|
|
});
|
|
|
|
claudeStore.worktreeInfo.subscribe((info) => {
|
|
worktreeInfo = info;
|
|
});
|
|
|
|
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 doConnect(targetDir: string) {
|
|
// Combine session-granted tools with config auto-granted tools
|
|
const allAllowedTools = [
|
|
...new Set([...grantedToolsList, ...currentConfig.auto_granted_tools]),
|
|
];
|
|
|
|
try {
|
|
const conversationId = get(claudeStore.activeConversationId);
|
|
if (!conversationId) {
|
|
throw new Error("No active conversation");
|
|
}
|
|
const activeConversationForName = get(conversationsStore.activeConversation);
|
|
await invoke("start_claude", {
|
|
conversationId,
|
|
options: {
|
|
working_dir: targetDir,
|
|
model: currentConfig.model || null,
|
|
api_key: currentConfig.api_key || null,
|
|
custom_instructions:
|
|
(currentConfig.custom_instructions ?? "") + PROJECT_CONTEXT_SYSTEM_ADDENDUM,
|
|
mcp_servers_json: currentConfig.mcp_servers_json || null,
|
|
allowed_tools: allAllowedTools,
|
|
use_worktree: currentConfig.use_worktree ?? false,
|
|
disable_1m_context: currentConfig.disable_1m_context ?? false,
|
|
max_output_tokens: currentConfig.max_output_tokens ?? null,
|
|
disable_cron: currentConfig.disable_cron ?? false,
|
|
disable_skill_shell_execution: currentConfig.disable_skill_shell_execution ?? false,
|
|
include_git_instructions: currentConfig.include_git_instructions ?? true,
|
|
enable_claudeai_mcp_servers: currentConfig.enable_claudeai_mcp_servers ?? true,
|
|
auto_memory_directory: currentConfig.auto_memory_directory || null,
|
|
model_overrides: currentConfig.model_overrides || null,
|
|
session_name: activeConversationForName?.name || null,
|
|
bare_mode: currentConfig.bare_mode ?? false,
|
|
show_clear_context_on_plan_accept:
|
|
currentConfig.show_clear_context_on_plan_accept ?? true,
|
|
custom_model_option: currentConfig.custom_model_option || null,
|
|
},
|
|
});
|
|
|
|
// Update Discord RPC when a new session starts
|
|
const activeConversation = get(conversationsStore.activeConversation);
|
|
if (activeConversation) {
|
|
await updateDiscordRpc(
|
|
activeConversation.name,
|
|
currentConfig.model || "claude",
|
|
activeConversation.startedAt
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to start Claude:", error);
|
|
claudeStore.addLine("error", `Connection failed: ${error}`);
|
|
}
|
|
}
|
|
|
|
async function handleConnect() {
|
|
if (isConnecting || connectionStatus === "connected") return;
|
|
|
|
const targetDir = selectedDirectory || "/home/naomi";
|
|
|
|
if (currentConfig.trusted_workspaces?.includes(targetDir)) {
|
|
await doConnect(targetDir);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const hookInfo = await invoke<WorkspaceHookInfo>("check_workspace_hooks", {
|
|
workingDir: targetDir,
|
|
});
|
|
|
|
if (hookInfo.has_concerns) {
|
|
pendingHookInfo = hookInfo;
|
|
showWorkspaceTrust = true;
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
// Fail open: if we can't check hooks, proceed with connection
|
|
console.error("Failed to check workspace hooks:", error);
|
|
}
|
|
|
|
await doConnect(targetDir);
|
|
}
|
|
|
|
async function handleTrustAndConnect() {
|
|
showWorkspaceTrust = false;
|
|
const targetDir = selectedDirectory || "/home/naomi";
|
|
pendingHookInfo = null;
|
|
const alreadyTrusted = currentConfig.trusted_workspaces?.includes(targetDir) ?? false;
|
|
if (!alreadyTrusted) {
|
|
await configStore.updateConfig({
|
|
trusted_workspaces: [...(currentConfig.trusted_workspaces ?? []), targetDir],
|
|
});
|
|
}
|
|
doConnect(targetDir);
|
|
}
|
|
|
|
function handleCancelConnect() {
|
|
showWorkspaceTrust = false;
|
|
pendingHookInfo = null;
|
|
}
|
|
|
|
async function handleDisconnect() {
|
|
try {
|
|
const conversationId = get(claudeStore.activeConversationId);
|
|
if (!conversationId) {
|
|
throw new Error("No active conversation");
|
|
}
|
|
await invoke("stop_claude", { conversationId });
|
|
|
|
// Clear granted permissions when user explicitly disconnects
|
|
claudeStore.revokeAllTools();
|
|
} 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";
|
|
}
|
|
}
|
|
|
|
async function handleCompactConversation() {
|
|
const activeId = get(conversationsStore.activeConversationId);
|
|
if (!activeId) return;
|
|
|
|
isSummarising = true;
|
|
|
|
try {
|
|
const conversationContent = conversationsStore.getConversationForSummary(activeId);
|
|
const messageCount =
|
|
get(conversationsStore.activeConversation)?.terminalLines.filter(
|
|
(l) => l.type === "user" || l.type === "assistant"
|
|
).length || 0;
|
|
const tokenEstimate = conversationsStore.estimateTokenCount(activeId);
|
|
|
|
// Create a summary from the conversation content (truncate if too long)
|
|
// Apply sanitization early to handle any problematic escape sequences
|
|
const sanitizedContent = sanitizeForJson(conversationContent);
|
|
const summaryContent =
|
|
sanitizedContent.length > 4000
|
|
? `${sanitizedContent.slice(0, 4000)}\n\n[Truncated for length - original had ${messageCount} messages]`
|
|
: sanitizedContent;
|
|
|
|
// Step 1: Disconnect from Claude to reset context
|
|
// Prevent stats reset on reconnection
|
|
setSkipNextGreeting(true);
|
|
|
|
if (connectionStatus === "connected") {
|
|
await invoke("stop_claude", { conversationId: activeId });
|
|
}
|
|
|
|
// Step 2: Clear messages and store summary
|
|
conversationsStore.compactWithSummary(activeId, summaryContent, messageCount, tokenEstimate);
|
|
|
|
// Step 3: Reconnect to Claude with fresh context
|
|
const allAllowedTools = [
|
|
...(currentConfig.auto_granted_tools || []),
|
|
...Array.from(get(claudeStore.grantedTools)),
|
|
];
|
|
|
|
await invoke("start_claude", {
|
|
conversationId: activeId,
|
|
options: {
|
|
working_dir: workingDirectory || selectedDirectory,
|
|
model: currentConfig.model || null,
|
|
api_key: currentConfig.api_key || null,
|
|
custom_instructions:
|
|
(currentConfig.custom_instructions ?? "") + PROJECT_CONTEXT_SYSTEM_ADDENDUM,
|
|
mcp_servers_json: currentConfig.mcp_servers_json || null,
|
|
allowed_tools: allAllowedTools,
|
|
use_worktree: currentConfig.use_worktree ?? false,
|
|
disable_1m_context: currentConfig.disable_1m_context ?? false,
|
|
max_output_tokens: currentConfig.max_output_tokens ?? null,
|
|
disable_cron: currentConfig.disable_cron ?? false,
|
|
disable_skill_shell_execution: currentConfig.disable_skill_shell_execution ?? false,
|
|
include_git_instructions: currentConfig.include_git_instructions ?? true,
|
|
enable_claudeai_mcp_servers: currentConfig.enable_claudeai_mcp_servers ?? true,
|
|
auto_memory_directory: currentConfig.auto_memory_directory || null,
|
|
model_overrides: currentConfig.model_overrides || null,
|
|
session_name: null,
|
|
bare_mode: currentConfig.bare_mode ?? false,
|
|
show_clear_context_on_plan_accept:
|
|
currentConfig.show_clear_context_on_plan_accept ?? true,
|
|
custom_model_option: currentConfig.custom_model_option || null,
|
|
},
|
|
});
|
|
|
|
// Step 4: Send the context summary to Claude as the first message
|
|
const contextPrompt = generateContextInjection(
|
|
createSummary(summaryContent, messageCount, tokenEstimate)
|
|
);
|
|
|
|
await invoke("send_prompt", {
|
|
conversationId: activeId,
|
|
message: contextPrompt,
|
|
});
|
|
|
|
claudeStore.addLine(
|
|
"system",
|
|
"Conversation compacted. Context from previous session has been provided to Claude."
|
|
);
|
|
} catch (error) {
|
|
console.error("Failed to compact conversation:", error);
|
|
claudeStore.addLine("error", `Failed to compact conversation: ${error}`);
|
|
} finally {
|
|
isSummarising = false;
|
|
}
|
|
}
|
|
|
|
async function handleStartFreshWithContext() {
|
|
const activeId = get(conversationsStore.activeConversationId);
|
|
if (!activeId) return;
|
|
|
|
const conversationContent = conversationsStore.getConversationForSummary(activeId);
|
|
const messageCount =
|
|
get(conversationsStore.activeConversation)?.terminalLines.filter(
|
|
(l) => l.type === "user" || l.type === "assistant"
|
|
).length || 0;
|
|
const tokenEstimate = conversationsStore.estimateTokenCount(activeId);
|
|
|
|
const summary = createSummary(
|
|
`This is a continuation of a previous conversation. Here's what was discussed:\n\n${conversationContent.slice(0, 4000)}${conversationContent.length > 4000 ? "\n\n[Truncated for length...]" : ""}`,
|
|
messageCount,
|
|
tokenEstimate
|
|
);
|
|
|
|
const newConvId = conversationsStore.createConversation("Fresh Start");
|
|
|
|
conversationsStore.setSummary(newConvId, summary);
|
|
|
|
// Context injection is generated but the actual injection happens via the summary
|
|
generateContextInjection(summary);
|
|
claudeStore.addLine("system", "Started fresh conversation with context from previous session.");
|
|
claudeStore.addLine(
|
|
"system",
|
|
`Previous session had ${messageCount} messages (~${tokenEstimate.toLocaleString()} tokens).`
|
|
);
|
|
}
|
|
</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}
|
|
{#if worktreeInfo}
|
|
<div
|
|
class="flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-500/15 border border-emerald-500/30 text-emerald-400 text-xs"
|
|
title="Worktree: {worktreeInfo.name} | Base: {worktreeInfo.original_repo_directory}"
|
|
>
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M13 10V3L4 14h7v7l9-11h-7z"
|
|
/>
|
|
</svg>
|
|
{worktreeInfo.branch}
|
|
</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-2">
|
|
{#if streamerModeActive}
|
|
<div
|
|
class="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse shrink-0"
|
|
title="Streamer mode active (Ctrl+Shift+S to toggle)"
|
|
></div>
|
|
{/if}
|
|
|
|
{#if $loopStatus === "running" || $loopStatus === "paused"}
|
|
<span
|
|
class="text-xs px-2 py-0.5 rounded-full border shrink-0 {$loopStatus === 'running'
|
|
? 'bg-blue-500/20 text-blue-400 border-blue-500/30 animate-pulse'
|
|
: 'bg-amber-500/20 text-amber-400 border-amber-500/30'}"
|
|
title="Task loop {$loopStatus}"
|
|
>
|
|
Loop {$loopStatus === "running" ? "▶" : "⏸"}
|
|
{loopCompletedCount +
|
|
($loopStatus === "running" && $loopCurrentIndex >= 0 ? 1 : 0)}/{loopTotalCount}
|
|
</span>
|
|
{/if}
|
|
|
|
<NavMenu
|
|
{connectionStatus}
|
|
{workingDirectory}
|
|
{selectedDirectory}
|
|
{isSummarising}
|
|
{onToggleCompact}
|
|
{onToggleAchievements}
|
|
onCompactConversation={handleCompactConversation}
|
|
onStartFreshWithContext={handleStartFreshWithContext}
|
|
/>
|
|
|
|
{#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>
|
|
|
|
{#if showWorkspaceTrust && pendingHookInfo}
|
|
<WorkspaceTrustModal
|
|
hookInfo={pendingHookInfo}
|
|
onTrust={handleTrustAndConnect}
|
|
onCancel={handleCancelConnect}
|
|
/>
|
|
{/if}
|
|
|
|
<style>
|
|
/* Responsive status bar styling */
|
|
.status-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Make all buttons shrink but not grow */
|
|
.status-bar button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Stack left and right sections on very small screens */
|
|
@media (max-width: 768px) {
|
|
.status-bar {
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
}
|
|
</style>
|