diff --git a/src/lib/components/TodoPanel.svelte b/src/lib/components/TodoPanel.svelte
index e6565d5..6245f31 100644
--- a/src/lib/components/TodoPanel.svelte
+++ b/src/lib/components/TodoPanel.svelte
@@ -15,12 +15,12 @@
 </script>
 
 <div
-  class="fixed top-0 right-0 h-full w-96 bg-gray-900 border-l border-pink-500/30 shadow-2xl flex flex-col z-50"
+  class="fixed top-0 right-0 h-full w-96 bg-[var(--bg-primary)] border-l border-[var(--accent-primary)]/30 shadow-2xl flex flex-col z-50"
 >
   <!-- Header -->
-  <div class="flex items-center justify-between p-4 border-b border-pink-500/30">
+  <div class="flex items-center justify-between p-4 border-b border-[var(--accent-primary)]/30">
     <div class="flex items-center gap-3">
-      <div class="text-pink-400">
+      <div class="text-[var(--accent-primary)]">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class="h-6 w-6"
@@ -37,9 +37,9 @@
         </svg>
       </div>
       <div>
-        <h2 class="text-lg font-semibold text-white">Hikari's Todo List</h2>
+        <h2 class="text-lg font-semibold text-[var(--text-primary)]">Hikari's Todo List</h2>
         {#if hasTodos}
-          <p class="text-xs text-gray-400">
+          <p class="text-xs text-[var(--text-secondary)]">
             {completedCount} of {totalCount} completed
           </p>
         {/if}
@@ -47,7 +47,7 @@
     </div>
     <button
       onclick={onClose}
-      class="text-gray-400 hover:text-white transition-colors p-1 rounded-lg hover:bg-gray-800"
+      class="text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors p-1 rounded-lg hover:bg-[var(--bg-secondary)]"
       aria-label="Close todo panel"
     >
       <svg
@@ -68,7 +68,7 @@
   <!-- Content -->
   <div class="flex-1 overflow-y-auto p-4">
     {#if !hasTodos}
-      <div class="flex flex-col items-center justify-center h-full text-gray-500">
+      <div class="flex flex-col items-center justify-center h-full text-[var(--text-secondary)]">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           class="h-16 w-16 mb-4 opacity-50"
@@ -90,18 +90,18 @@
       <div class="space-y-2">
         {#each currentTodos as todo (todo.content)}
           <div
-            class="group bg-gray-800/50 rounded-lg p-3 border border-gray-700 hover:border-pink-500/50 transition-all"
+            class="group bg-[var(--bg-secondary)]/50 rounded-lg p-3 border border-[var(--border-color)] hover:border-[var(--accent-primary)]/50 transition-all"
             class:opacity-60={todo.status === "completed"}
           >
             <div class="flex items-start gap-3">
               <!-- Status Icon -->
               <div class="mt-0.5 flex-shrink-0">
                 {#if todo.status === "completed"}
-                  <CheckCircle class="w-5 h-5 text-green-400" />
+                  <CheckCircle class="w-5 h-5 text-[var(--success-color)]" />
                 {:else if todo.status === "in_progress"}
-                  <Loader class="w-5 h-5 text-pink-400 animate-spin" />
+                  <Loader class="w-5 h-5 text-[var(--accent-primary)] animate-spin" />
                 {:else}
-                  <Circle class="w-5 h-5 text-gray-500" />
+                  <Circle class="w-5 h-5 text-[var(--text-secondary)]" />
                 {/if}
               </div>
 
@@ -109,9 +109,9 @@
               <div class="flex-1 min-w-0">
                 <p
                   class="text-sm font-medium"
-                  class:text-gray-400={todo.status === "completed"}
+                  class:text-[var(--text-secondary)]={todo.status === "completed"}
                   class:line-through={todo.status === "completed"}
-                  class:text-white={todo.status !== "completed"}
+                  class:text-[var(--text-primary)]={todo.status !== "completed"}
                 >
                   {todo.status === "in_progress" ? todo.activeForm : todo.content}
                 </p>
@@ -120,19 +120,19 @@
                 <div class="mt-1">
                   {#if todo.status === "completed"}
                     <span
-                      class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-900/30 text-green-400 border border-green-500/30"
+                      class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-[var(--success-color)]/20 text-[var(--success-color)] border border-[var(--success-color)]/30"
                     >
                       ✓ Completed
                     </span>
                   {:else if todo.status === "in_progress"}
                     <span
-                      class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-pink-900/30 text-pink-400 border border-pink-500/30 animate-pulse"
+                      class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-[var(--accent-primary)]/20 text-[var(--accent-primary)] border border-[var(--accent-primary)]/30 animate-pulse"
                     >
                       ⚡ In Progress
                     </span>
                   {:else}
                     <span
-                      class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-700/30 text-gray-400 border border-gray-600/30"
+                      class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-[var(--bg-secondary)] text-[var(--text-secondary)] border border-[var(--border-color)]"
                     >
                       ○ Pending
                     </span>
@@ -148,16 +148,16 @@
 
   <!-- Footer with Progress Bar -->
   {#if hasTodos}
-    <div class="border-t border-pink-500/30 p-4 bg-gray-800/50">
+    <div class="border-t border-[var(--accent-primary)]/30 p-4 bg-[var(--bg-secondary)]/50">
       <div class="flex items-center justify-between mb-2">
-        <span class="text-xs font-medium text-gray-400">Progress</span>
-        <span class="text-xs font-medium text-pink-400">
+        <span class="text-xs font-medium text-[var(--text-secondary)]">Progress</span>
+        <span class="text-xs font-medium text-[var(--accent-primary)]">
           {Math.round((completedCount / totalCount) * 100)}%
         </span>
       </div>
-      <div class="w-full bg-gray-700 rounded-full h-2 overflow-hidden">
+      <div class="w-full bg-[var(--bg-secondary)] rounded-full h-2 overflow-hidden">
         <div
-          class="bg-gradient-to-r from-pink-500 to-purple-500 h-2 rounded-full transition-all duration-500 ease-out"
+          class="bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-secondary)] h-2 rounded-full transition-all duration-500 ease-out"
           style="width: {(completedCount / totalCount) * 100}%"
         ></div>
       </div>
diff --git a/src/lib/tauri.ts b/src/lib/tauri.ts
index 32f38b8..0e9a19c 100644
--- a/src/lib/tauri.ts
+++ b/src/lib/tauri.ts
@@ -14,6 +14,7 @@ import type {
 import type { CharacterState } from "$lib/types/states";
 import type { AgentStartPayload, AgentEndPayload } from "$lib/types/agents";
 import { agentStore } from "$lib/stores/agents";
+import { todos } from "$lib/stores/todos";
 import {
   initializeNotificationRules,
   cleanupNotificationRules,
@@ -196,6 +197,9 @@ export async function initializeTauriListeners() {
           "system",
           "Disconnected from Claude Code"
         );
+
+        // Clear todos on real disconnect (not on reconnects for permissions)
+        todos.clear();
       }
 
       // Update character state for this conversation