nhcarrigan/hikari-desktop
9
0
Fork 0
generated from nhcarrigan/template
Code Issues 9 Pull Requests 36 Actions Releases 22 Activity

feat/tabs #47

Merged
naomi merged 10 commits from feat/tabs into main 2026-01-20 13:57:49 -08:00
Conversation 0 Commits 10 Files Changed 20
+74 -30
7 changed files with 74 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e4d2d47e61 - Show all commits
src/lib/components/ConversationTabs.svelte
+29 -13
View File
@@ -2,6 +2,7 @@
import { claudeStore } from "$lib/stores/claude";
import { onMount } from "svelte";
import type { Conversation } from "$lib/stores/conversations";
import { SvelteMap } from "svelte/reactivity";
let conversations: Map<string, Conversation> = new Map();
let activeConversationId: string | null = null;
@@ -12,7 +13,7 @@
let connectedConversationId: string | null = null;
// Track last seen message count for each conversation
let lastSeenMessageCount: Map<string, number> = new Map();
let lastSeenMessageCount = new SvelteMap<string, number>();
claudeStore.conversations.subscribe((convs) => {
conversations = convs;
@@ -75,6 +76,11 @@
event.stopPropagation();
editingTabId = id;
editingName = name;
// Focus input after DOM update
setTimeout(() => {
const input = document.querySelector('.tab-item input[type="text"]') as HTMLInputElement;
if (input) input.focus();
}, 0);
}
function saveTabName() {
@@ -113,6 +119,13 @@
}
}
function handleTabKeydown(id: string, event: KeyboardEvent) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
switchTab(id);
}
}
// Keyboard shortcuts
onMount(() => {
function handleGlobalKeydown(event: KeyboardEvent) {
@@ -165,6 +178,7 @@
? 'bg-[var(--bg-terminal)] text-[var(--text-primary)] border-t border-l border-r border-[var(--border-color)]'
: 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:bg-[var(--bg-terminal)]/50'}"
onclick={() => switchTab(id)}
onkeydown={(e) => handleTabKeydown(id, e)}
role="tab"
tabindex={0}
aria-selected={id === activeConversationId}
@@ -177,22 +191,29 @@
onkeydown={handleKeydown}
onclick={(e) => e.stopPropagation()}
class="bg-transparent border-b border-[var(--border-color)] outline-none px-0 py-0 text-sm w-32"
autofocus
/>
{:else}
<div class="flex items-center gap-2">
<div
class="w-2 h-2 rounded-full {getConnectionStatusColor(conversation.connectionStatus)}"
title="Connection: {conversation.connectionStatus}{id !== connectedConversationId && connectedConversationId ? ' (Another tab is connected)' : ''}"
/>
title="Connection: {conversation.connectionStatus}{id !== connectedConversationId &&
connectedConversationId
? ' (Another tab is connected)'
: ''}"
></div>
<span
class="text-sm pr-6 max-w-[150px] truncate"
ondblclick={(e) => startEditing(id, conversation.name, e)}
role="button"
tabindex={-1}
>
{conversation.name}
</span>
{#if id !== activeConversationId && id === connectedConversationId}
<span class="text-xs text-[var(--text-tertiary)]" title="This tab has the Claude connection">
<span
class="text-xs text-[var(--text-tertiary)]"
title="This tab has the Claude connection"
>
(connected)
</span>
{/if}
@@ -200,7 +221,7 @@
<div
class="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-blue-500 animate-pulse"
title="New messages"
/>
></div>
{/if}
</div>
{/if}
@@ -242,12 +263,7 @@
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 4v16m8-8H4"
/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</button>
</div>
@@ -260,4 +276,4 @@
.tab-item {
min-width: 100px;
}
</style>
</style>
src/lib/components/ConversationTabsDebug.svelte
+1 -1
View File
@@ -4,4 +4,4 @@
<div class="terminal-tabs" style="background: red; height: 36px; color: white;">
Debug: Tabs Component Loaded
</div>
</div>
src/lib/components/InputBar.svelte
+1 -1
View File
@@ -73,7 +73,7 @@ User: ${formattedMessage}`;
}
await invoke("send_prompt", {
conversationId,
message: messageToSend
message: messageToSend,
});
} catch (error) {
console.error("Failed to send prompt:", error);
src/lib/components/PermissionModal.svelte
+1 -1
View File
@@ -81,7 +81,7 @@ Please continue where we left off and retry that action now that you have permis
await invoke("send_prompt", {
conversationId,
message: contextMessage
message: contextMessage,
});
}
} catch (error) {
src/lib/stores/claude.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { derived } from "svelte/store";
import { conversationsStore } from "./conversations";
import type { ConnectionStatus, PermissionRequest, TerminalLine } from "$lib/types/messages";
import type { TerminalLine } from "$lib/types/messages";
import { characterState } from "$lib/stores/character";
import {
setShouldRestoreHistory,
src/lib/stores/conversations.ts
+19 -6
View File
@@ -76,14 +76,23 @@ function createConversationsStore() {
);
// Derived stores for compatibility with existing code
const connectionStatus = derived(activeConversation, ($conv) => $conv?.connectionStatus || "disconnected");
const connectionStatus = derived(
activeConversation,
($conv) => $conv?.connectionStatus || "disconnected"
);
const terminalLines = derived(activeConversation, ($conv) => {
return $conv?.terminalLines || [];
});
const sessionId = derived(activeConversation, ($conv) => $conv?.sessionId || null);
const currentWorkingDirectory = derived(activeConversation, ($conv) => $conv?.workingDirectory || "");
const currentWorkingDirectory = derived(
activeConversation,
($conv) => $conv?.workingDirectory || ""
);
const isProcessing = derived(activeConversation, ($conv) => $conv?.isProcessing || false);
const grantedTools = derived(activeConversation, ($conv) => $conv?.grantedTools || new Set());
const grantedTools = derived(
activeConversation,
($conv) => $conv?.grantedTools || new Set<string>()
);
return {
// Expose derived stores for compatibility
@@ -198,7 +207,6 @@ function createConversationsStore() {
if (targetConv) {
characterState.setState(targetConv.characterState);
}
}
},
@@ -304,7 +312,12 @@ function createConversationsStore() {
return line.id;
},
addLineToConversation: (conversationId: string, type: TerminalLine["type"], content: string, toolName?: string) => {
addLineToConversation: (
conversationId: string,
type: TerminalLine["type"],
content: string,
toolName?: string
) => {
ensureInitialized();
const line: TerminalLine = {
@@ -443,4 +456,4 @@ function createConversationsStore() {
export const conversationsStore = createConversationsStore();
// Initialize immediately
conversationsStore.initialize();
conversationsStore.initialize();
src/lib/tauri.ts
+22 -7
View File
@@ -21,7 +21,7 @@ interface StateChangePayload {
conversation_id?: string;
}
let connectedConversations = new Set<string>();
const connectedConversations = new Set<string>();
let unlisteners: Array<() => void> = [];
let skipNextGreeting = false;
@@ -72,7 +72,7 @@ async function sendGreeting(conversationId: string) {
try {
await invoke("send_prompt", {
conversationId,
message: greetingPrompt
message: greetingPrompt,
});
} catch (error) {
console.error("Failed to send greeting:", error);
@@ -140,7 +140,11 @@ export async function initializeTauriListeners() {
if (targetConversationId) {
// Add system message to the correct conversation
claudeStore.addLineToConversation(targetConversationId, "system", "Connected to Claude Code");
claudeStore.addLineToConversation(
targetConversationId,
"system",
"Connected to Claude Code"
);
// Update character state for this conversation
claudeStore.setCharacterStateForConversation(targetConversationId, "idle");
@@ -162,7 +166,11 @@ export async function initializeTauriListeners() {
// Don't add system message if we're about to reconnect
if (!skipNextGreeting && targetConversationId) {
claudeStore.addLineToConversation(targetConversationId, "system", "Disconnected from Claude Code");
claudeStore.addLineToConversation(
targetConversationId,
"system",
"Disconnected from Claude Code"
);
}
// Update character state for this conversation
@@ -225,7 +233,6 @@ export async function initializeTauriListeners() {
const outputUnlisten = await listen<OutputPayload>("claude:output", (event) => {
const { line_type, content, tool_name, conversation_id } = event.payload;
// Always store the output to the correct conversation
if (conversation_id) {
claudeStore.addLineToConversation(
@@ -256,7 +263,11 @@ export async function initializeTauriListeners() {
// Store session ID for the correct conversation
if (conversation_id) {
claudeStore.setSessionIdForConversation(conversation_id, session_id);
claudeStore.addLineToConversation(conversation_id, "system", `Session: ${session_id.substring(0, 8)}...`);
claudeStore.addLineToConversation(
conversation_id,
"system",
`Session: ${session_id.substring(0, 8)}...`
);
} else {
// Fallback to active conversation if no conversation_id
claudeStore.setSessionId(session_id);
@@ -294,7 +305,11 @@ export async function initializeTauriListeners() {
// Always store the permission message to the correct conversation
if (conversation_id) {
claudeStore.addLineToConversation(conversation_id, "system", `Permission requested for: ${tool_name}`);
claudeStore.addLineToConversation(
conversation_id,
"system",
`Permission requested for: ${tool_name}`
);
} else if (conversation_id === activeConversationId) {
claudeStore.addLine("system", `Permission requested for: ${tool_name}`);
}