generated from nhcarrigan/template
hikari
1c4432c4d8
## Overview Full audit and implementation of Claude Code CLI changelog entries from v2.1.105 through v2.1.131. ## Changes ### Implemented - **#268** — Add `claude-opus-4-7` to the model picker, update all model pricing and context window sizes (also fixes a bug where `claude-opus-4-6` was coded as 200K context instead of 1M) - **#269** — Expose effort level setting in UI via `--effort <level>` flag (`low`, `medium`, `high`, `xhigh`, `max`) - **#273** — Expose prompt caching TTL env vars in UI (`ENABLE_PROMPT_CACHING_1H` / `FORCE_PROMPT_CACHING_5M`) - **#267** — Add `PreCompact` hook support — emits `claude:pre-compact` event with "Compacting context..." toast and thinking state - **#270** — Parse `plugin_errors` from stream-json init event and surface them as error output lines - **#266** — Bump supported CLI version constant to `2.1.131` ### Closed as Not Applicable - **#271** (`autoScrollEnabled`) — TUI-only setting; we manage our own scroll behaviour - **#272** (`tui` fullscreen mode) — TUI-only setting; we use stream-json and never activate the TUI ## Testing All checks pass (`./check-all.sh`) including frontend lint, format, type check, Vitest coverage, Clippy, and Rust test coverage. ✨ This PR was created with help from Hikari~ 🌸 Reviewed-on: #274 Co-authored-by: Hikari <hikari@nhcarrigan.com> Co-committed-by: Hikari <hikari@nhcarrigan.com>
300 lines
10 KiB
Svelte
300 lines
10 KiB
Svelte
<script lang="ts">
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
import { get } from "svelte/store";
|
|
import { SvelteSet } from "svelte/reactivity";
|
|
import { claudeStore, hasQuestionPending } from "$lib/stores/claude";
|
|
import { characterState } from "$lib/stores/character";
|
|
import type { UserQuestionEvent } from "$lib/types/messages";
|
|
import { updateDiscordRpc, setSkipNextGreeting } from "$lib/tauri";
|
|
import { conversationsStore } from "$lib/stores/conversations";
|
|
import { configStore } from "$lib/stores/config";
|
|
|
|
let isVisible = $state(false);
|
|
let question: UserQuestionEvent | null = $state(null);
|
|
let selectedOptions: SvelteSet<string> = new SvelteSet();
|
|
let customAnswer = $state("");
|
|
let showCustomInput = $state(false);
|
|
let grantedToolsList: string[] = $state([]);
|
|
let workingDirectory = $state("");
|
|
|
|
hasQuestionPending.subscribe((pending) => {
|
|
isVisible = pending;
|
|
if (!pending) {
|
|
selectedOptions.clear();
|
|
customAnswer = "";
|
|
showCustomInput = false;
|
|
}
|
|
});
|
|
|
|
claudeStore.pendingQuestion.subscribe((q) => {
|
|
question = q;
|
|
if (q) {
|
|
characterState.setState("permission");
|
|
}
|
|
});
|
|
|
|
claudeStore.grantedTools.subscribe((tools) => {
|
|
grantedToolsList = Array.from(tools);
|
|
});
|
|
|
|
claudeStore.currentWorkingDirectory.subscribe((dir) => {
|
|
workingDirectory = dir;
|
|
});
|
|
|
|
function toggleOption(label: string) {
|
|
if (!question) return;
|
|
|
|
if (question.multi_select) {
|
|
if (selectedOptions.has(label)) {
|
|
selectedOptions.delete(label);
|
|
} else {
|
|
selectedOptions.add(label);
|
|
}
|
|
} else {
|
|
selectedOptions.clear();
|
|
selectedOptions.add(label);
|
|
}
|
|
showCustomInput = false;
|
|
}
|
|
|
|
function selectCustom() {
|
|
showCustomInput = true;
|
|
selectedOptions.clear();
|
|
}
|
|
|
|
async function handleSubmitAndReconnect() {
|
|
if (!question) return;
|
|
|
|
const conversationId = get(claudeStore.activeConversationId);
|
|
if (!conversationId) return;
|
|
|
|
let answerText: string;
|
|
|
|
if (showCustomInput && customAnswer.trim()) {
|
|
answerText = customAnswer.trim();
|
|
} else if (selectedOptions.size > 0) {
|
|
if (question.multi_select) {
|
|
answerText = Array.from(selectedOptions).join(", ");
|
|
} else {
|
|
answerText = Array.from(selectedOptions)[0];
|
|
}
|
|
} else {
|
|
return;
|
|
}
|
|
|
|
const questionText = question.question;
|
|
const conversationHistory = claudeStore.getConversationHistory();
|
|
|
|
claudeStore.addLine("system", `Answer: ${answerText}. Reconnecting with context...`);
|
|
claudeStore.clearQuestion();
|
|
|
|
try {
|
|
// Prevent stats reset on reconnection
|
|
setSkipNextGreeting(true);
|
|
|
|
await invoke("stop_claude", { conversationId });
|
|
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
|
|
const config = configStore.getConfig();
|
|
await invoke("start_claude", {
|
|
conversationId,
|
|
options: {
|
|
working_dir: workingDirectory || "/home/naomi",
|
|
model: config.model || null,
|
|
api_key: config.api_key || null,
|
|
custom_instructions: config.custom_instructions || null,
|
|
mcp_servers_json: config.mcp_servers_json || null,
|
|
allowed_tools: grantedToolsList,
|
|
use_worktree: config.use_worktree ?? false,
|
|
disable_1m_context: config.disable_1m_context ?? false,
|
|
disable_cron: config.disable_cron ?? false,
|
|
disable_skill_shell_execution: config.disable_skill_shell_execution ?? false,
|
|
include_git_instructions: config.include_git_instructions ?? true,
|
|
enable_claudeai_mcp_servers: config.enable_claudeai_mcp_servers ?? true,
|
|
auto_memory_directory: config.auto_memory_directory || null,
|
|
model_overrides: config.model_overrides || null,
|
|
session_name: null,
|
|
bare_mode: config.bare_mode ?? false,
|
|
show_clear_context_on_plan_accept: config.show_clear_context_on_plan_accept ?? true,
|
|
custom_model_option: config.custom_model_option || null,
|
|
effort_level: config.effort_level || null,
|
|
prompt_caching_ttl: config.prompt_caching_ttl || null,
|
|
},
|
|
});
|
|
|
|
// Update Discord RPC when reconnecting after answering question
|
|
const activeConversation = get(conversationsStore.activeConversation);
|
|
if (activeConversation) {
|
|
await updateDiscordRpc(
|
|
activeConversation.name,
|
|
config.model || "claude",
|
|
activeConversation.startedAt
|
|
);
|
|
}
|
|
|
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
|
|
if (conversationHistory) {
|
|
const contextMessage = `[CONTEXT RESTORATION]
|
|
I just answered your question. Here's our conversation so far:
|
|
|
|
${conversationHistory}
|
|
|
|
You asked me: "${questionText}"
|
|
My answer: "${answerText}"
|
|
|
|
Please continue where we left off, taking my answer into account.`;
|
|
|
|
await invoke("send_prompt", {
|
|
conversationId,
|
|
message: contextMessage,
|
|
});
|
|
}
|
|
|
|
characterState.setTemporaryState("success", 2000);
|
|
} catch (error) {
|
|
console.error("Failed to reconnect:", error);
|
|
claudeStore.addLine("error", `Reconnect failed: ${error}`);
|
|
characterState.setTemporaryState("error", 3000);
|
|
}
|
|
}
|
|
|
|
function handleDismiss() {
|
|
claudeStore.clearQuestion();
|
|
claudeStore.addLine("system", "Question dismissed");
|
|
characterState.setTemporaryState("idle", 1000);
|
|
}
|
|
|
|
function handleKeydown(event: KeyboardEvent) {
|
|
if (!isVisible || !question) return;
|
|
|
|
if (event.key === "Enter" && !showCustomInput) {
|
|
event.preventDefault();
|
|
if (selectedOptions.size > 0) {
|
|
handleSubmitAndReconnect();
|
|
}
|
|
} else if (event.key === "Escape") {
|
|
event.preventDefault();
|
|
handleDismiss();
|
|
}
|
|
}
|
|
|
|
function canSubmit(): boolean {
|
|
return selectedOptions.size > 0 || (showCustomInput && customAnswer.trim().length > 0);
|
|
}
|
|
</script>
|
|
|
|
<svelte:window onkeydown={handleKeydown} />
|
|
|
|
{#if isVisible && question}
|
|
<div
|
|
class="question-overlay fixed inset-0 bg-black/70 flex items-center justify-center z-50 backdrop-blur-sm"
|
|
>
|
|
<div
|
|
class="question-modal bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-xl p-6 max-w-md w-full mx-4 shadow-2xl"
|
|
>
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center">
|
|
<span class="text-xl">?</span>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-[var(--text-primary)]">
|
|
{question.header || "Question"}
|
|
</h2>
|
|
<p class="text-sm text-[var(--text-secondary)]">Hikari needs your input</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p class="text-[var(--text-primary)]">{question.question}</p>
|
|
</div>
|
|
|
|
<div class="mb-4 space-y-2">
|
|
{#each question.options as option (option.label)}
|
|
<button
|
|
onclick={() => toggleOption(option.label)}
|
|
class="w-full text-left px-4 py-3 rounded-lg border transition-colors {selectedOptions.has(
|
|
option.label
|
|
)
|
|
? 'bg-[var(--accent-primary)]/20 border-[var(--accent-primary)] text-[var(--text-primary)]'
|
|
: 'bg-[var(--bg-secondary)] border-[var(--border-color)] text-[var(--text-primary)] hover:border-[var(--accent-primary)]/50'}"
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<div
|
|
class="mt-0.5 w-5 h-5 rounded-{question.multi_select
|
|
? 'sm'
|
|
: 'full'} border-2 flex items-center justify-center {selectedOptions.has(
|
|
option.label
|
|
)
|
|
? 'border-[var(--accent-primary)] bg-[var(--accent-primary)]'
|
|
: 'border-[var(--text-secondary)]'}"
|
|
>
|
|
{#if selectedOptions.has(option.label)}
|
|
<span class="text-white text-xs">{question.multi_select ? "x" : "x"}</span>
|
|
{/if}
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-medium">{option.label}</div>
|
|
{#if option.description}
|
|
<div class="text-sm text-[var(--text-secondary)] mt-1">{option.description}</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
{/each}
|
|
|
|
<button
|
|
onclick={selectCustom}
|
|
class="w-full text-left px-4 py-3 rounded-lg border transition-colors {showCustomInput
|
|
? 'bg-[var(--accent-primary)]/20 border-[var(--accent-primary)] text-[var(--text-primary)]'
|
|
: 'bg-[var(--bg-secondary)] border-[var(--border-color)] text-[var(--text-primary)] hover:border-[var(--accent-primary)]/50'}"
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<div
|
|
class="mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center {showCustomInput
|
|
? 'border-[var(--accent-primary)] bg-[var(--accent-primary)]'
|
|
: 'border-[var(--text-secondary)]'}"
|
|
>
|
|
{#if showCustomInput}
|
|
<span class="text-white text-xs">x</span>
|
|
{/if}
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-medium">Other</div>
|
|
<div class="text-sm text-[var(--text-secondary)] mt-1">Provide a custom answer</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
{#if showCustomInput}
|
|
<div class="mb-4">
|
|
<textarea
|
|
bind:value={customAnswer}
|
|
placeholder="Type your answer here..."
|
|
class="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] placeholder-[var(--text-secondary)] resize-none focus:outline-none focus:border-[var(--accent-primary)]"
|
|
rows="3"
|
|
></textarea>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="flex gap-3">
|
|
<button
|
|
onclick={handleDismiss}
|
|
class="flex-1 px-4 py-2 bg-gray-500/20 hover:bg-gray-500/30 text-[var(--text-secondary)] rounded-lg transition-colors font-medium"
|
|
>
|
|
Dismiss
|
|
</button>
|
|
<button
|
|
onclick={handleSubmitAndReconnect}
|
|
disabled={!canSubmit()}
|
|
class="flex-1 px-4 py-2 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 rounded-lg transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Answer & Reconnect
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|