mulmoclaude 0.3.0 → 0.5.0

package/src/components/todo/TodoAddDialog.vue

@@ -7,20 +7,20 @@
       aria-labelledby="todo-add-dialog-title"
       @click.stop
     >
-      <h3 id="todo-add-dialog-title" class="text-base font-semibold text-gray-800">Add Todo</h3>
+      <h3 id="todo-add-dialog-title" class="text-base font-semibold text-gray-800">{{ t("todoDialogs.addTitle") }}</h3>
       <label class="block text-xs text-gray-600">
-        Text
+        {{ t("todoDialogs.fieldText") }}
         <input
           ref="textInput"
           v-model="text"
           type="text"
-          placeholder="What needs doing?"
+          :placeholder="t('todoDialogs.textPlaceholder')"
           class="mt-1 w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
           @keydown.enter="submit"
         />
       </label>
       <label class="block text-xs text-gray-600">
-        Note
+        {{ t("todoDialogs.fieldNote") }}
         <textarea
           v-model="note"
           rows="2"
@@ -29,7 +29,7 @@
       </label>
       <div class="grid grid-cols-2 gap-3">
         <label class="block text-xs text-gray-600">
-          Status
+          {{ t("todoDialogs.fieldStatus") }}
           <select v-model="status" class="mt-1 w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400">
             <option v-for="col in columns" :key="col.id" :value="col.id">
               {{ col.label }}
@@ -37,16 +37,16 @@
           </select>
         </label>
         <label class="block text-xs text-gray-600">
-          Priority
+          {{ t("todoDialogs.fieldPriority") }}
           <select v-model="priority" class="mt-1 w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400">
-            <option value="">— None —</option>
+            <option value="">{{ t("todoDialogs.noneOption") }}</option>
             <option v-for="p in PRIORITIES" :key="p" :value="p">
               {{ PRIORITY_LABELS[p] }}
             </option>
           </select>
         </label>
         <label class="block text-xs text-gray-600">
-          Due date
+          {{ t("todoDialogs.fieldDueDate") }}
           <input
             v-model="dueDate"
             type="date"
@@ -54,18 +54,20 @@
           />
         </label>
         <label class="block text-xs text-gray-600">
-          Labels
+          {{ t("todoDialogs.fieldLabels") }}
           <input
             v-model="labelsText"
             type="text"
-            placeholder="work, urgent"
+            :placeholder="t('todoDialogs.labelsPlaceholder')"
             class="mt-1 w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:border-blue-400"
           />
         </label>
       </div>
       <div class="flex justify-end gap-2 pt-1">
-        <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="emit('cancel')">Cancel</button>
-        <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="submit">Add</button>
+        <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="emit('cancel')">
+          {{ t("common.cancel") }}
+        </button>
+        <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="submit">{{ t("common.add") }}</button>
       </div>
     </div>
   </div>
@@ -73,10 +75,13 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import type { StatusColumn } from "../../plugins/todo/index";
 import { PRIORITIES, PRIORITY_LABELS } from "../../plugins/todo/priority";
 import type { CreateItemInput } from "../../plugins/todo/composables/useTodos";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   columns: StatusColumn[];
   defaultStatus?: string;

package/src/components/todo/TodoEditDialog.vue

@@ -8,8 +8,10 @@
       @click.stop
     >
       <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
-        <h3 id="todo-edit-dialog-title" class="text-base font-semibold text-gray-800">Edit Todo</h3>
-        <button class="text-gray-400 hover:text-red-500 text-xs px-2 py-0.5" title="Delete this item" @click="emit('delete', item.id)">Delete</button>
+        <h3 id="todo-edit-dialog-title" class="text-base font-semibold text-gray-800">{{ t("todoDialogs.editTitle") }}</h3>
+        <button class="text-gray-400 hover:text-red-500 text-xs px-2 py-0.5" :title="t('todoDialogs.deleteTitle')" @click="emit('delete', item.id)">
+          {{ t("todoDialogs.deleteButton") }}
+        </button>
       </div>
       <TodoEditPanel :item="item" :columns="columns" @save="(input) => emit('save', input)" @cancel="emit('cancel')" />
     </div>
@@ -18,10 +20,13 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
 import type { StatusColumn, TodoItem } from "../../plugins/todo/index";
 import type { PatchItemInput } from "../../plugins/todo/composables/useTodos";
 import TodoEditPanel from "./TodoEditPanel.vue";
 
+const { t } = useI18n();
+
 defineProps<{
   item: TodoItem;
   columns: StatusColumn[];

package/src/components/todo/TodoEditPanel.vue

@@ -2,7 +2,7 @@
   <div class="border-t border-blue-100 bg-blue-50 p-4 space-y-3 rounded-b-lg">
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
       <label class="block text-xs text-gray-600 sm:col-span-2">
-        Text
+        {{ t("todoDialogs.fieldText") }}
         <input
           v-model="text"
           type="text"
@@ -10,7 +10,7 @@
         />
       </label>
       <label class="block text-xs text-gray-600 sm:col-span-2">
-        Note
+        {{ t("todoDialogs.fieldNote") }}
         <textarea
           v-model="note"
           rows="2"
@@ -18,7 +18,7 @@
         />
       </label>
       <label class="block text-xs text-gray-600">
-        Status
+        {{ t("todoDialogs.fieldStatus") }}
         <select v-model="status" class="mt-1 w-full px-2 py-1.5 text-sm bg-white border border-blue-300 rounded focus:outline-none focus:border-blue-500">
           <option v-for="col in columns" :key="col.id" :value="col.id">
             {{ col.label }}
@@ -26,16 +26,16 @@
         </select>
       </label>
       <label class="block text-xs text-gray-600">
-        Priority
+        {{ t("todoDialogs.fieldPriority") }}
         <select v-model="priority" class="mt-1 w-full px-2 py-1.5 text-sm bg-white border border-blue-300 rounded focus:outline-none focus:border-blue-500">
-          <option value="">— None —</option>
+          <option value="">{{ t("todoDialogs.noneOption") }}</option>
           <option v-for="p in PRIORITIES" :key="p" :value="p">
             {{ PRIORITY_LABELS[p] }}
           </option>
         </select>
       </label>
       <label class="block text-xs text-gray-600">
-        Due date
+        {{ t("todoDialogs.fieldDueDate") }}
         <input
           v-model="dueDate"
           type="date"
@@ -43,28 +43,33 @@
         />
       </label>
       <label class="block text-xs text-gray-600">
-        Labels (comma-separated)
+        {{ t("todoDialogs.fieldLabelsCommaSeparated") }}
         <input
           v-model="labelsText"
           type="text"
-          placeholder="work, urgent"
+          :placeholder="t('todoDialogs.labelsPlaceholder')"
           class="mt-1 w-full px-2 py-1.5 text-sm bg-white border border-blue-300 rounded focus:outline-none focus:border-blue-500"
         />
       </label>
     </div>
     <div class="flex items-center gap-2 pt-1">
-      <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="save">Save</button>
-      <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="emit('cancel')">Cancel</button>
+      <button class="px-3 py-1.5 text-sm rounded bg-blue-500 text-white hover:bg-blue-600" @click="save">{{ t("common.save") }}</button>
+      <button class="px-3 py-1.5 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50" @click="emit('cancel')">
+        {{ t("common.cancel") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 import type { StatusColumn, TodoItem, TodoPriority } from "../../plugins/todo/index";
 import { PRIORITIES, PRIORITY_LABELS } from "../../plugins/todo/priority";
 import type { PatchItemInput } from "../../plugins/todo/composables/useTodos";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   item: TodoItem;
   columns: StatusColumn[];

package/src/components/todo/TodoKanbanView.vue

@@ -32,7 +32,7 @@
               <span class="text-xs text-gray-500 shrink-0">{{ itemsByColumn(col.id).length }}</span>
             </div>
             <div class="relative">
-              <button class="text-gray-400 hover:text-gray-600 px-1" title="Column actions" @click="toggleMenu(col.id)">
+              <button class="text-gray-400 hover:text-gray-600 px-1" :title="t('todoKanban.columnActions')" @click="toggleMenu(col.id)">
                 <span class="material-icons text-base">more_horiz</span>
               </button>
               <div
@@ -40,11 +40,13 @@
                 class="absolute right-0 top-6 z-20 bg-white border border-gray-200 rounded shadow-md text-xs w-40 py-1"
                 @click.stop
               >
-                <button class="w-full text-left px-3 py-1.5 hover:bg-gray-50" @click="startRename(col)">Rename</button>
+                <button class="w-full text-left px-3 py-1.5 hover:bg-gray-50" @click="startRename(col)">{{ t("todoKanban.rename") }}</button>
                 <button class="w-full text-left px-3 py-1.5 hover:bg-gray-50" @click="markAsDone(col.id)">
-                  {{ col.isDone ? "Already done column" : "Mark as done column" }}
+                  {{ col.isDone ? t("todoKanban.alreadyDoneColumn") : t("todoKanban.markAsDoneColumn") }}
+                </button>
+                <button class="w-full text-left px-3 py-1.5 text-red-600 hover:bg-red-50" @click="deleteColumn(col.id)">
+                  {{ t("todoKanban.deleteColumn") }}
                 </button>
-                <button class="w-full text-left px-3 py-1.5 text-red-600 hover:bg-red-50" @click="deleteColumn(col.id)">Delete column</button>
               </div>
             </div>
           </div>
@@ -61,9 +63,14 @@
             <template #item="{ element }: { element: TodoItem }">
               <div
                 :data-testid="`todo-card-${element.id}`"
-                class="bg-white border border-l-4 border-gray-200 rounded shadow-sm p-2 cursor-grab hover:shadow active:cursor-grabbing"
+                tabindex="0"
+                role="button"
+                :aria-label="t('todoKanban.openCardAria', { task: element.text })"
+                class="bg-white border border-l-4 border-gray-200 rounded shadow-sm p-2 cursor-grab hover:shadow active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
                 :class="element.priority ? PRIORITY_BORDER[element.priority] : 'border-l-gray-200'"
                 @click="emit('open', element)"
+                @keydown.enter.prevent.self="(e) => !e.repeat && emit('open', element)"
+                @keydown.space.prevent.self="(e) => !e.repeat && emit('open', element)"
               >
                 <div class="flex items-start gap-2">
                   <input
@@ -103,7 +110,7 @@
 
           <!-- Add card stub -->
           <button class="m-2 text-xs text-gray-500 hover:text-gray-800 hover:bg-gray-200 rounded py-1.5 transition-colors" @click="emit('quickAdd', col.id)">
-            + Add card
+            {{ t("todoKanban.addCard") }}
           </button>
         </div>
       </template>
@@ -113,11 +120,14 @@
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import draggable from "vuedraggable";
 import type { StatusColumn, TodoItem } from "../../plugins/todo/index";
 import { colorForLabel } from "../../plugins/todo/labels";
 import { PRIORITY_BORDER, PRIORITY_CLASSES, PRIORITY_LABELS, dueDateClasses, formatDueLabel } from "../../plugins/todo/priority";
 
+const { t } = useI18n();
+
 // vuedraggable @change event shape. The library emits one of these
 // three keys depending on whether the move was within the same list,
 // added from another list, or removed from the current list. We only

package/src/components/todo/TodoListView.vue

@@ -1,9 +1,17 @@
 <template>
   <div class="h-full overflow-y-auto p-4">
-    <div v-if="filteredItems.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">No items match the current filter</div>
+    <div v-if="filteredItems.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">{{ t("todoTableList.noMatchingFilter") }}</div>
     <ul v-else class="space-y-2 max-w-3xl mx-auto">
       <li v-for="item in filteredItems" :key="item.id" class="rounded-lg border border-gray-200 hover:border-gray-300 transition-colors">
-        <div class="flex items-center gap-3 p-3 cursor-pointer group" @click="toggleExpand(item.id)">
+        <div
+          tabindex="0"
+          role="button"
+          :aria-label="t('todoTableList.expandRowAria', { task: item.text })"
+          class="flex items-center gap-3 p-3 cursor-pointer group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 rounded"
+          @click="toggleExpand(item.id)"
+          @keydown.enter.prevent.self="(e) => !e.repeat && toggleExpand(item.id)"
+          @keydown.space.prevent.self="(e) => !e.repeat && toggleExpand(item.id)"
+        >
           <input type="checkbox" :checked="item.completed" class="cursor-pointer shrink-0" @click.stop @change="toggleComplete(item)" />
           <div class="flex-1 min-w-0">
             <div class="flex items-center gap-2 flex-wrap">
@@ -25,7 +33,7 @@
           </div>
           <button
             class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-red-500 text-xs px-1 shrink-0"
-            title="Delete item"
+            :title="t('pluginTodo.deleteItem')"
             @click.stop="emit('delete', item.id)"
           >
             ✕
@@ -39,12 +47,15 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 import type { StatusColumn, TodoItem } from "../../plugins/todo/index";
 import { colorForLabel } from "../../plugins/todo/labels";
 import { PRIORITY_CLASSES, PRIORITY_LABELS, dueDateClasses, formatDueLabel } from "../../plugins/todo/priority";
 import type { PatchItemInput } from "../../plugins/todo/composables/useTodos";
 import TodoEditPanel from "./TodoEditPanel.vue";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   filteredItems: TodoItem[];
   columns: StatusColumn[];

package/src/components/todo/TodoTableView.vue

@@ -1,10 +1,24 @@
 <template>
   <div class="h-full overflow-auto">
-    <div v-if="filteredItems.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">No items match the current filter</div>
+    <div v-if="filteredItems.length === 0" class="h-full flex items-center justify-center text-gray-400 text-sm">{{ t("todoTableList.noMatchingFilter") }}</div>
     <table v-else class="min-w-full text-sm">
       <thead class="bg-gray-50 sticky top-0 z-10">
         <tr class="text-left text-xs font-medium text-gray-500 uppercase">
-          <th v-for="col in COLUMNS" :key="col.key" class="px-3 py-2 cursor-pointer hover:bg-gray-100 select-none" @click="setSort(col.key)">
+          <!-- Keep the native <th> column-header role so aria-sort and
+               table navigation work for screen readers. role="button"
+               would overwrite the header role and defeat aria-sort.
+               Keyboard activation goes via tabindex + key handlers. -->
+          <th
+            v-for="col in COLUMNS"
+            :key="col.key"
+            tabindex="0"
+            :aria-sort="sortKey === col.key ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'"
+            :aria-label="t('todoTableList.sortColumnAria', { column: col.ariaLabel ?? col.label })"
+            class="px-3 py-2 cursor-pointer hover:bg-gray-100 select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
+            @click="setSort(col.key)"
+            @keydown.enter.prevent.self="(e) => !e.repeat && setSort(col.key)"
+            @keydown.space.prevent.self="(e) => !e.repeat && setSort(col.key)"
+          >
             {{ col.label }}
             <span v-if="sortKey === col.key" class="material-icons text-xs align-middle">{{ sortDir === "asc" ? "arrow_upward" : "arrow_downward" }}</span>
           </th>
@@ -17,7 +31,18 @@
             <td class="px-3 py-2">
               <input type="checkbox" :checked="item.completed" @change="emit('toggleComplete', item)" />
             </td>
-            <td class="px-3 py-2 max-w-md cursor-pointer" @click="toggleExpand(item.id)">
+            <!-- Same rationale as the <th> above: keep the native <td>
+                 cell role so screen-reader table navigation still works;
+                 activation goes via tabindex + key handlers, described
+                 via aria-label. -->
+            <td
+              tabindex="0"
+              :aria-label="t('todoTableList.expandRowAria', { task: item.text })"
+              class="px-3 py-2 max-w-md cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
+              @click="toggleExpand(item.id)"
+              @keydown.enter.prevent.self="(e) => !e.repeat && toggleExpand(item.id)"
+              @keydown.space.prevent.self="(e) => !e.repeat && toggleExpand(item.id)"
+            >
               <div :class="item.completed ? 'line-through text-gray-400' : 'text-gray-800'">
                 {{ item.text }}
               </div>
@@ -53,7 +78,7 @@
               {{ formatShortDate(item.createdAt) }}
             </td>
             <td class="px-3 py-2 text-right">
-              <button class="text-gray-300 hover:text-red-500 text-xs" title="Delete item" @click="emit('delete', item.id)">✕</button>
+              <button class="text-gray-300 hover:text-red-500 text-xs" :title="t('pluginTodo.deleteItem')" @click="emit('delete', item.id)">✕</button>
             </td>
           </tr>
           <tr v-if="expandedId === item.id">
@@ -69,6 +94,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
 import type { StatusColumn, TodoItem } from "../../plugins/todo/index";
 import { colorForLabel } from "../../plugins/todo/labels";
 import { PRIORITY_CLASSES, PRIORITY_LABELS, PRIORITY_ORDER, dueDateClasses, formatDueLabel } from "../../plugins/todo/priority";
@@ -76,16 +102,21 @@ import type { PatchItemInput } from "../../plugins/todo/composables/useTodos";
 import TodoEditPanel from "./TodoEditPanel.vue";
 import { formatShortDate } from "../../utils/format/date";
 
+const { t } = useI18n();
+
 type SortKey = "completed" | "text" | "status" | "priority" | "labels" | "dueDate" | "createdAt";
 type SortDir = "asc" | "desc";
 
 interface ColumnDef {
   key: SortKey;
   label: string;
+  // Fallback name for screen readers when `label` is empty or is a
+  // glyph / checkbox indicator that wouldn't survive being spoken.
+  ariaLabel?: string;
 }
 
 const COLUMNS: ColumnDef[] = [
-  { key: "completed", label: "" },
+  { key: "completed", label: "", ariaLabel: "Completion" },
   { key: "text", label: "Text" },
   { key: "status", label: "Status" },
   { key: "priority", label: "Priority" },

package/src/composables/favicon/conditions.ts

@@ -0,0 +1,76 @@
+// Pure predicates for the favicon resolver. Every function takes
+// only its inputs — no global `Date`, no env, no network — so a test
+// can pin an arbitrary moment and assert the branch deterministically.
+
+// Night runs from 22:00 (inclusive) to 05:00 (exclusive). Chosen so a
+// typical "I'm winding down" window (22–24) and a "still up" window
+// (00–05) share the same deep-work indigo.
+export function isLateNight(now: Date): boolean {
+  const hour = now.getHours();
+  return hour >= 22 || hour < 5;
+}
+
+// Morning covers 05:00–09:00 — the "before the inbox wins" window.
+// Disjoint from `isLateNight`, so the two rules never both fire.
+export function isMorning(now: Date): boolean {
+  const hour = now.getHours();
+  return hour >= 5 && hour < 9;
+}
+
+// Weekend fires only during waking hours so the late-night rule wins
+// overnight on Fri→Sat (that's still "deep work", not "weekend vibes").
+// Saturday = 6, Sunday = 0 per `Date.getDay()`.
+export function isWeekend(now: Date): boolean {
+  const day = now.getDay();
+  const hour = now.getHours();
+  const onWeekend = day === 0 || day === 6;
+  const duringDay = hour >= 9 && hour < 22;
+  return onWeekend && duringDay;
+}
+
+// Birthday match: context stores "MM-DD"; we compare to today in the
+// caller's local clock. Returns false for any malformed input rather
+// than throwing — the favicon must never crash on a typo.
+export function isBirthday(now: Date, userBirthdayMMDD: string | null): boolean {
+  if (!userBirthdayMMDD) return false;
+  if (!/^\d{2}-\d{2}$/.test(userBirthdayMMDD)) return false;
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+  return `${month}-${day}` === userBirthdayMMDD;
+}
+
+// New Year window — Jan 1–3 inclusive. Short enough that it stays
+// special; 3 days covers the common "holiday still going" case
+// (especially in Japan).
+export function isNewYear(now: Date): boolean {
+  return now.getMonth() === 0 && now.getDate() >= 1 && now.getDate() <= 3;
+}
+
+// Christmas window — Dec 24–25. Eve + day.
+export function isChristmas(now: Date): boolean {
+  return now.getMonth() === 11 && (now.getDate() === 24 || now.getDate() === 25);
+}
+
+// Overloaded: server 1-minute load average divided by logical core
+// count. A ratio > 0.9 means "nearly all cores saturated for a full
+// minute". Null input (no data yet, or Windows) → the rule is off.
+export function isOverloaded(cpuLoadRatio: number | null): boolean {
+  if (cpuLoadRatio === null || !Number.isFinite(cpuLoadRatio)) return false;
+  return cpuLoadRatio > 0.9;
+}
+
+// Many-unread threshold — tuned so a typical day with 1–3 sleepy
+// tabs stays green, but a noisy ping storm bumps up to fuchsia.
+export const MANY_UNREAD_THRESHOLD = 5;
+export function isManyUnread(count: number): boolean {
+  return Number.isFinite(count) && count >= MANY_UNREAD_THRESHOLD;
+}
+
+// Running-long threshold — anything past ~1 minute is a "real" run
+// (code gen, long web searches) as opposed to a quick reply.
+export const RUNNING_LONG_MS = 60 * 1000;
+export function isRunningLong(runningSinceMs: number | null, now: Date): boolean {
+  if (runningSinceMs === null) return false;
+  const elapsed = now.getTime() - runningSinceMs;
+  return Number.isFinite(elapsed) && elapsed >= RUNNING_LONG_MS;
+}

package/src/composables/favicon/resolveColor.ts

@@ -0,0 +1,93 @@
+// Priority-ordered rule chain that picks the favicon's backing
+// colour from the full runtime context. See
+// `plans/done/feat-favicon-conditional-palette.md` for the reasoning
+// behind the ordering and the chosen hex values.
+//
+// The function is pure: one input → one output. No clock, no DOM,
+// no network. Every test pins the branch it wants by constructing
+// the context verbatim.
+
+import { FAVICON_REASONS, FAVICON_STATES, type FaviconContext, type FaviconPick } from "./types";
+import { isBirthday, isChristmas, isLateNight, isManyUnread, isMorning, isNewYear, isOverloaded, isRunningLong, isWeekend } from "./conditions";
+
+// Keeping the palette values adjacent to the resolver (rather than
+// in a separate constants module) makes the "why does this colour
+// fire?" audit a one-file read.
+// "running" and "has-unread" no longer have background colors — the
+// yellow dot (top-left) and red dot (top-right) communicate those
+// states. The background is reserved for ambient context (error,
+// load, calendar, time-of-day) plus the two *escalations* of the
+// dot states (runningLong, manyUnread) that carry severity.
+const COLORS = {
+  error: "#DC2626", // red-600
+  overloaded: "#EA580C", // orange-600 — machine is burning
+  manyUnread: "#D946EF", // fuchsia-500 — attention pile-up
+  runningLong: "#06B6D4", // cyan-500 — still thinking (> 60 s)
+  birthday: "#EAB308", // yellow-500
+  newYear: "#B91C1C", // red-700 — festive deeper red
+  christmas: "#15803D", // green-700 — festive deeper green
+  lateNight: "#6366F1", // indigo-500 — deep work
+  morning: "#F59E0B", // amber-500 — sunrise
+  weekend: "#14B8A6", // teal-500 — relaxed
+  idle: "#6B7280", // gray-500 — fallback
+} as const;
+
+// Split the state-driven vs flavour branches so the priority
+// argument is in one place and each helper stays under the
+// cognitive-complexity threshold.
+
+// Rules 1–4: error + load + escalations. These always fire when
+// applicable, beating any flavour. The plain `running` and
+// `hasUnread` rules are gone — the yellow / red corner dots own
+// those signals now, so the background stays free for ambient
+// context even while a session is running.
+function resolveByState(ctx: FaviconContext): FaviconPick | null {
+  if (ctx.state === FAVICON_STATES.error) {
+    return { color: COLORS.error, reason: FAVICON_REASONS.error };
+  }
+  if (isOverloaded(ctx.cpuLoadRatio)) {
+    return { color: COLORS.overloaded, reason: FAVICON_REASONS.overloaded };
+  }
+  if (isManyUnread(ctx.sessionsUnreadCount)) {
+    return { color: COLORS.manyUnread, reason: FAVICON_REASONS.manyUnread };
+  }
+  if (ctx.state === FAVICON_STATES.running && isRunningLong(ctx.runningSinceMs, ctx.now)) {
+    return { color: COLORS.runningLong, reason: FAVICON_REASONS.runningLong };
+  }
+  return null;
+}
+
+// Rules 7–12: flavour / easter eggs. Only consulted when no
+// state-driven rule matched, so a running agent never gets a
+// "cute" colour. Calendar beats clock; hour-based rules are
+// disjoint so we pick whichever matches first.
+function resolveByFlavour(ctx: FaviconContext): FaviconPick {
+  if (isBirthday(ctx.now, ctx.userBirthdayMMDD)) {
+    return { color: COLORS.birthday, reason: FAVICON_REASONS.birthday };
+  }
+  if (isNewYear(ctx.now)) {
+    return { color: COLORS.newYear, reason: FAVICON_REASONS.newYear };
+  }
+  if (isChristmas(ctx.now)) {
+    return { color: COLORS.christmas, reason: FAVICON_REASONS.christmas };
+  }
+  if (isLateNight(ctx.now)) {
+    return { color: COLORS.lateNight, reason: FAVICON_REASONS.lateNight };
+  }
+  if (isMorning(ctx.now)) {
+    return { color: COLORS.morning, reason: FAVICON_REASONS.morning };
+  }
+  if (isWeekend(ctx.now)) {
+    return { color: COLORS.weekend, reason: FAVICON_REASONS.weekend };
+  }
+  return { color: COLORS.idle, reason: FAVICON_REASONS.idle };
+}
+
+export function resolveFaviconColor(ctx: FaviconContext): FaviconPick {
+  return resolveByState(ctx) ?? resolveByFlavour(ctx);
+}
+
+// Expose the palette for test assertions so the hex values aren't
+// hard-coded in two places. Not exported from types.ts because it's
+// resolver-implementation state, not part of the public contract.
+export const FAVICON_COLORS = COLORS;

package/src/composables/favicon/types.ts

@@ -0,0 +1,61 @@
+// Shared types for the favicon palette resolver. Keeping them in a
+// dedicated file lets `conditions.ts` and `resolveColor.ts` import
+// them without cycling, and the unit tests pin the exact shape the
+// context must satisfy.
+
+export const FAVICON_STATES = {
+  idle: "idle",
+  running: "running",
+  done: "done",
+  error: "error",
+} as const;
+
+export type FaviconState = (typeof FAVICON_STATES)[keyof typeof FAVICON_STATES];
+
+// Every possible path through `resolveColor` — the same enum used for
+// the returned `reason` field so callers (and the log breadcrumb) can
+// name the branch without memorising hex codes.
+export const FAVICON_REASONS = {
+  error: "error",
+  overloaded: "overloaded",
+  manyUnread: "many-unread",
+  runningLong: "running-long",
+  birthday: "birthday",
+  newYear: "new-year",
+  christmas: "christmas",
+  lateNight: "late-night",
+  morning: "morning",
+  weekend: "weekend",
+  idle: "idle",
+} as const;
+
+export type FaviconReason = (typeof FAVICON_REASONS)[keyof typeof FAVICON_REASONS];
+
+// The full runtime context fed to `resolveColor`. Everything is
+// plumbed in so the function stays pure: no `new Date()` inside, no
+// global fetches — test fixtures can pin any branch.
+export interface FaviconContext {
+  state: FaviconState;
+  /** Unread across every session, not just the active one. */
+  sessionsUnreadCount: number;
+  /** Epoch ms when the current agent run started, or null if idle. */
+  runningSinceMs: number | null;
+  /** "now" — caller's clock. Tests pass a fixed Date. */
+  now: Date;
+  /**
+   * "MM-DD" if the user has a birthday stored in memory.md, else
+   * null. Null → the birthday rule is skipped.
+   */
+  userBirthdayMMDD: string | null;
+  /**
+   * Server's 1-minute load average divided by logical core count.
+   * `null` when the server hasn't reported yet or the platform
+   * doesn't support `loadavg` (Windows).
+   */
+  cpuLoadRatio: number | null;
+}
+
+export interface FaviconPick {
+  color: string;
+  reason: FaviconReason;
+}