mulmoclaude 0.1.0

package/src/components/PluginLauncher.vue

@@ -0,0 +1,138 @@
+<template>
+  <div ref="rootRef" class="flex border border-gray-300 rounded overflow-hidden text-xs" data-testid="plugin-launcher">
+    <template v-for="(target, idx) in TARGETS" :key="target.key">
+      <!-- Visual separator between data plugins and management plugins -->
+      <div v-if="idx === SEPARATOR_AFTER_INDEX" class="w-px bg-gray-300 my-0.5" />
+      <button
+        :class="[
+          'px-2.5 py-1 flex items-center gap-1 border-r border-gray-200 last:border-r-0 transition-colors',
+          isActive(target) ? 'bg-blue-50 text-blue-600 font-medium' : 'bg-white text-gray-600 hover:bg-gray-50',
+        ]"
+        :title="target.title"
+        :data-testid="`plugin-launcher-${target.key}`"
+        @click="emit('navigate', target)"
+      >
+        <span class="material-icons text-sm">{{ target.icon }}</span>
+        <span v-if="!compact">{{ target.label }}</span>
+      </button>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from "vue";
+
+// Quick-access toolbar sitting above the canvas. Each button
+// switches the canvas to a dedicated view mode via URL
+// (?view=todos, ?view=wiki, etc.). The "invoke" kind is kept in
+// the union for future use but currently all targets use "view".
+//
+// First slice of issue #253. The list of targets is declared here so
+// the launcher can be swapped for a customisable per-role palette
+// later without touching the App.vue wiring.
+
+const props = defineProps<{
+  /** Current canvas view mode — the matching button lights up. */
+  activeViewMode?: string | null;
+}>();
+
+export type PluginLauncherKind = "view"; // Switch the canvas to a dedicated view mode
+
+export interface PluginLauncherTarget {
+  /** Stable key for testid + dispatch in App.vue. */
+  key: "todos" | "scheduler" | "skills" | "wiki" | "roles" | "files";
+  kind: PluginLauncherKind;
+  /** Material-icons glyph. */
+  icon: string;
+  /** Visible label next to the icon. */
+  label: string;
+  /** Tooltip on hover. */
+  title: string;
+}
+
+const TARGETS: PluginLauncherTarget[] = [
+  // ─── Data plugins ───
+  {
+    key: "todos",
+    kind: "view",
+    icon: "checklist",
+    label: "Todos",
+    title: "Open todos (⌘4)",
+  },
+  {
+    key: "scheduler",
+    kind: "view",
+    icon: "event",
+    label: "Schedule",
+    title: "Open schedule (⌘5)",
+  },
+  {
+    key: "wiki",
+    kind: "view",
+    icon: "menu_book",
+    label: "Wiki",
+    title: "Open wiki (⌘6)",
+  },
+  // ─── Management / navigation ───
+  {
+    key: "skills",
+    kind: "view",
+    icon: "psychology",
+    label: "Skills",
+    title: "Open skills (⌘7)",
+  },
+  {
+    key: "roles",
+    kind: "view",
+    icon: "manage_accounts",
+    label: "Roles",
+    title: "Open roles (⌘8)",
+  },
+  {
+    key: "files",
+    kind: "view",
+    icon: "folder",
+    label: "Files",
+    title: "Open workspace files (⌘3)",
+  },
+];
+
+// Index AFTER which the visual separator is inserted (between wiki
+// and skills — data plugins on the left, management on the right).
+const SEPARATOR_AFTER_INDEX = 3;
+
+function isActive(target: PluginLauncherTarget): boolean {
+  return props.activeViewMode === target.key;
+}
+
+const emit = defineEmits<{
+  navigate: [target: PluginLauncherTarget];
+}>();
+
+// Compact mode (icons only) kicks in when the toolbar's parent row
+// is narrower than this threshold. Tuned against the six labelled
+// buttons + the canvas-view toggle sharing one row.
+const COMPACT_BREAKPOINT_PX = 640;
+
+const rootRef = ref<HTMLElement | null>(null);
+const compact = ref(false);
+let observer: ResizeObserver | null = null;
+
+onMounted(() => {
+  const parent = rootRef.value?.parentElement;
+  if (!parent) return;
+  const update = (width: number) => {
+    compact.value = width < COMPACT_BREAKPOINT_PX;
+  };
+  update(parent.clientWidth);
+  observer = new ResizeObserver((entries) => {
+    for (const entry of entries) update(entry.contentRect.width);
+  });
+  observer.observe(parent);
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  observer = null;
+});
+</script>

package/src/components/RightSidebar.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="w-80 flex-shrink-0 border-l border-gray-200 flex flex-col bg-white text-gray-900">
+    <div ref="historyContainer" class="flex-1 overflow-y-auto min-h-0">
+      <div class="bg-white border-b border-gray-200">
+        <button
+          class="w-full flex items-center justify-between p-4 text-left hover:bg-gray-50"
+          title="Toggle system prompt"
+          @click="showSystemPrompt = !showSystemPrompt"
+        >
+          <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">System Prompt</span>
+          <span class="text-gray-400 text-xs">{{ showSystemPrompt ? "▲" : "▼" }}</span>
+        </button>
+        <div v-if="showSystemPrompt" class="px-4 pb-4">
+          <div class="text-xs text-gray-600 leading-relaxed whitespace-pre-wrap">
+            {{ rolePrompt }}
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-white border-b border-gray-200">
+        <div class="p-4 pb-0">
+          <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Available Tools</span>
+        </div>
+        <div class="px-4 py-3 space-y-1">
+          <div v-for="tool in availableTools" :key="tool" class="text-xs">
+            <button class="flex items-center gap-1 w-full text-left" title="Toggle tool description" @click="toggleTool(tool)">
+              <span class="bg-gray-100 text-gray-700 rounded px-2 py-0.5 border border-gray-200 font-mono">{{ tool }}</span>
+              <span v-if="toolDescriptions[tool]" class="text-gray-400">{{ expandedTools.has(tool) ? "▲" : "▼" }}</span>
+            </button>
+            <div v-if="toolDescriptions[tool] && expandedTools.has(tool)" class="text-gray-500 mt-0.5 pl-1 leading-snug whitespace-pre-wrap">
+              {{ toolDescriptions[tool] }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-4 border-b border-gray-200 bg-white">
+        <h2 class="text-lg font-semibold">Tool Call History</h2>
+      </div>
+
+      <div class="p-2 space-y-2 bg-gray-100">
+        <div v-if="toolCallHistory.length === 0" class="text-gray-400 text-sm text-center py-4">No tool calls yet</div>
+        <div v-for="(call, index) in toolCallHistory" :key="index" class="border border-gray-300 rounded p-3 bg-white text-xs space-y-1">
+          <div class="flex justify-between items-start gap-2">
+            <span class="font-semibold text-blue-600 break-all">{{ call.toolName }}</span>
+            <span class="text-gray-400 flex-shrink-0">{{ formatTime(call.timestamp) }}</span>
+          </div>
+          <div>
+            <div class="font-medium text-gray-500 mb-1">Arguments</div>
+            <pre class="bg-gray-50 p-2 rounded overflow-x-auto text-gray-700">{{ formatJson(call.args) }}</pre>
+          </div>
+          <div v-if="call.error">
+            <div class="font-medium text-gray-500 mb-1">Error</div>
+            <div class="bg-red-50 p-2 rounded text-red-700">
+              {{ call.error }}
+            </div>
+          </div>
+          <div v-else-if="call.result !== undefined">
+            <div class="font-medium text-gray-500 mb-1">Result</div>
+            <pre class="bg-green-50 p-2 rounded overflow-x-auto text-gray-700">{{ call.result }}</pre>
+          </div>
+          <div v-else>
+            <div class="text-gray-400 italic">Running...</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from "vue";
+import type { ToolCallHistoryItem } from "../types/toolCallHistory";
+import { formatTime } from "../utils/format/date";
+
+defineProps<{
+  toolCallHistory: ToolCallHistoryItem[];
+  availableTools: string[];
+  rolePrompt: string;
+  toolDescriptions: Record<string, string>;
+}>();
+
+const showSystemPrompt = ref(false);
+const expandedTools = ref(new Set<string>());
+const historyContainer = ref<HTMLDivElement | null>(null);
+
+function toggleTool(tool: string): void {
+  if (expandedTools.value.has(tool)) {
+    expandedTools.value.delete(tool);
+  } else {
+    expandedTools.value.add(tool);
+  }
+  expandedTools.value = new Set(expandedTools.value);
+}
+
+function formatJson(obj: unknown): string {
+  try {
+    return JSON.stringify(obj, null, 2);
+  } catch {
+    return String(obj);
+  }
+}
+
+function scrollToBottom(): void {
+  nextTick(() => {
+    if (historyContainer.value) {
+      historyContainer.value.scrollTop = historyContainer.value.scrollHeight;
+    }
+  });
+}
+
+defineExpose({ scrollToBottom });
+</script>

package/src/components/RoleSelector.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="flex items-center gap-2 relative w-56 shrink-0">
+    <button
+      ref="button"
+      class="flex-1 flex items-center gap-2 bg-white border border-gray-300 rounded px-2 py-1 text-sm text-gray-900 hover:bg-gray-50 text-left"
+      data-testid="role-selector-btn"
+      @click="open = !open"
+    >
+      <span class="material-icons text-base text-gray-500">{{ roleIcon(roles, currentRoleId) }}</span>
+      <span class="flex-1 truncate">{{ currentRoleName }}</span>
+      <span class="material-icons text-sm text-gray-400">expand_more</span>
+    </button>
+    <div v-if="open" ref="dropdown" class="absolute left-0 right-0 top-full z-50 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
+      <button
+        v-for="role in roles"
+        :key="role.id"
+        :data-testid="`role-option-${role.id}`"
+        class="w-full flex items-center gap-1.5 px-3 py-1 text-sm text-gray-900 hover:bg-gray-50 text-left"
+        @click="selectRole(role.id)"
+      >
+        <span class="material-icons text-base text-gray-400">{{ roleIcon(roles, role.id) }}</span>
+        {{ role.name }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import type { Role } from "../config/roles";
+import { roleIcon, roleName } from "../utils/role/icon";
+import { useClickOutside } from "../composables/useClickOutside";
+
+const props = defineProps<{
+  roles: Role[];
+  currentRoleId: string;
+}>();
+
+const emit = defineEmits<{
+  "update:currentRoleId": [id: string];
+  change: [];
+}>();
+
+const open = ref(false);
+const button = ref<HTMLButtonElement | null>(null);
+const dropdown = ref<HTMLDivElement | null>(null);
+
+const currentRoleName = computed(() => roleName(props.roles, props.currentRoleId));
+
+function selectRole(id: string): void {
+  emit("update:currentRoleId", id);
+  open.value = false;
+  emit("change");
+}
+
+const { handler } = useClickOutside({
+  isOpen: open,
+  buttonRef: button,
+  popupRef: dropdown,
+});
+
+onMounted(() => document.addEventListener("mousedown", handler));
+onBeforeUnmount(() => document.removeEventListener("mousedown", handler));
+</script>

package/src/components/SessionHistoryPanel.vue

@@ -0,0 +1,176 @@
+<template>
+  <div
+    ref="root"
+    class="absolute left-0 right-0 bottom-0 bg-white border-b border-gray-200 shadow-lg z-50 overflow-y-auto"
+    :style="{ top: topOffset != null ? topOffset + 'px' : '4rem' }"
+  >
+    <div class="p-2 space-y-1">
+      <!-- Origin filter bar -->
+      <div class="flex gap-1 mb-1 flex-wrap" data-testid="session-filter-bar">
+        <button
+          v-for="f in FILTERS"
+          :key="f.value"
+          class="px-2 py-0.5 text-[10px] rounded-full border transition-colors"
+          :class="activeFilter === f.value ? 'bg-blue-500 text-white border-blue-500' : 'bg-white text-gray-500 border-gray-300 hover:bg-gray-50'"
+          :data-testid="`session-filter-${f.value}`"
+          @click="activeFilter = f.value"
+        >
+          {{ f.label }}
+          <span v-if="f.value !== 'all'" class="ml-0.5 opacity-70">{{ countByOrigin(f.value) }}</span>
+        </button>
+      </div>
+
+      <div
+        v-if="errorMessage"
+        class="text-xs text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 mb-1"
+        role="alert"
+        data-testid="session-history-error"
+      >
+        ⚠ Failed to refresh: {{ errorMessage }}
+        <span v-if="sessions.length > 0"> — showing last known list.</span>
+      </div>
+      <p v-if="filteredSessions.length === 0" class="text-xs text-gray-400 p-2">
+        {{ activeFilter === "all" ? "No sessions yet." : "No matching sessions." }}
+      </p>
+      <div
+        v-for="session in filteredSessions"
+        :key="session.id"
+        class="cursor-pointer rounded border p-2 text-sm transition-colors"
+        :class="rowClasses(session)"
+        :data-testid="`session-item-${session.id}`"
+        @click="emit('loadSession', session.id)"
+      >
+        <div class="flex items-center gap-1 text-xs text-gray-500 mb-1">
+          <span class="material-icons text-xs">{{ roleIconFor(session.roleId) }}</span>
+          <span>{{ roleNameFor(session.roleId) }}</span>
+          <span
+            v-if="originOf(session) !== 'human'"
+            class="material-icons text-[10px] ml-0.5"
+            :class="originColor(originOf(session))"
+            :title="originOf(session)"
+            >{{ originIcon(originOf(session)) }}</span
+          >
+          <span class="ml-auto flex items-center gap-1.5">
+            <span v-if="isSessionRunning(session)" class="flex items-center gap-0.5 text-yellow-600 font-medium">
+              <span class="w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse" />
+              Running
+            </span>
+            <span v-else-if="isSessionUnread(session)" class="flex items-center gap-0.5 text-gray-900 font-bold"> Unread </span>
+            <span v-else>{{ formatDate(session.updatedAt) }}</span>
+          </span>
+        </div>
+        <p class="truncate" :class="previewClasses(session)">
+          {{ session.preview || "(no messages)" }}
+        </p>
+        <!-- Optional second line: AI-generated summary of the
+             session, populated by the chat indexer (#123). -->
+        <p v-if="session.summary" class="text-xs text-gray-500 truncate mt-0.5">
+          {{ session.summary }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type { Role } from "../config/roles";
+import type { SessionSummary, SessionOrigin } from "../types/session";
+import { SESSION_ORIGINS } from "../types/session";
+import { formatDate } from "../utils/format/date";
+import { roleIcon, roleName } from "../utils/role/icon";
+
+const FILTERS = [
+  { value: "all" as const, label: "All" },
+  { value: SESSION_ORIGINS.human, label: "Human" },
+  { value: SESSION_ORIGINS.scheduler, label: "Scheduler" },
+  { value: SESSION_ORIGINS.skill, label: "Skill" },
+  { value: SESSION_ORIGINS.bridge, label: "Bridge" },
+];
+
+const ORIGIN_ICONS: Record<string, string> = {
+  human: "person",
+  scheduler: "event",
+  skill: "auto_fix_high",
+  bridge: "chat",
+};
+
+const ORIGIN_COLORS: Record<string, string> = {
+  human: "text-gray-400",
+  scheduler: "text-blue-500",
+  skill: "text-purple-500",
+  bridge: "text-green-500",
+};
+
+const props = defineProps<{
+  sessions: SessionSummary[];
+  currentSessionId: string;
+  roles: Role[];
+  topOffset?: number;
+  // Latest fetch error from useSessionHistory, or null when healthy.
+  errorMessage?: string | null;
+}>();
+
+const emit = defineEmits<{
+  loadSession: [id: string];
+}>();
+
+const root = ref<HTMLDivElement | null>(null);
+defineExpose({ root });
+
+// ── Filter ──────────────────────────────────────────────────
+
+const activeFilter = ref<SessionOrigin | "all">("all");
+
+function originOf(session: SessionSummary): SessionOrigin {
+  return session.origin ?? SESSION_ORIGINS.human;
+}
+
+const filteredSessions = computed(() => {
+  if (activeFilter.value === "all") return props.sessions;
+  return props.sessions.filter((s) => originOf(s) === activeFilter.value);
+});
+
+function countByOrigin(origin: string): number {
+  if (origin === "all") return props.sessions.length;
+  return props.sessions.filter((s) => originOf(s) === origin).length;
+}
+
+function originIcon(origin: string): string {
+  return ORIGIN_ICONS[origin] ?? "person";
+}
+
+function originColor(origin: string): string {
+  return ORIGIN_COLORS[origin] ?? "text-gray-400";
+}
+
+// ── Role helpers ────────────────────────────────────────────
+
+function roleIconFor(id: string): string {
+  return roleIcon(props.roles, id);
+}
+function roleNameFor(id: string): string {
+  return roleName(props.roles, id);
+}
+
+function isSessionRunning(session: SessionSummary): boolean {
+  return session.isRunning ?? false;
+}
+
+function isSessionUnread(session: SessionSummary): boolean {
+  return session.hasUnread ?? false;
+}
+
+function rowClasses(session: SessionSummary): string {
+  if (isSessionRunning(session)) return "border-yellow-400 bg-yellow-50 hover:bg-yellow-100";
+  if (isSessionUnread(session)) return "border-sky-300 bg-sky-50 hover:bg-sky-100";
+  if (session.id === props.currentSessionId) return "border-blue-400 bg-blue-50 hover:bg-blue-100";
+  return "border-gray-200 hover:bg-gray-50";
+}
+
+function previewClasses(session: SessionSummary): string {
+  if (isSessionRunning(session)) return "text-yellow-800";
+  if (isSessionUnread(session)) return "text-gray-900 font-bold";
+  return "text-gray-700";
+}
+</script>

package/src/components/SessionTabBar.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="flex-1 flex gap-1 items-center min-w-0">
+    <button
+      class="flex-shrink-0 flex items-center justify-center w-7 py-1 rounded border border-dashed border-gray-300 text-gray-400 hover:border-blue-400 hover:text-blue-500 hover:bg-blue-50 transition-colors"
+      data-testid="new-session-btn"
+      title="New session"
+      aria-label="New session"
+      @click="emit('newSession')"
+    >
+      <span class="material-icons text-sm">add</span>
+    </button>
+    <template v-for="i in 6" :key="i">
+      <button
+        v-if="sessions[i - 1]"
+        class="flex-1 flex items-center justify-center py-1 rounded transition-colors"
+        :class="sessions[i - 1].id === currentSessionId ? 'border border-gray-300 bg-white shadow-sm' : 'hover:bg-gray-100'"
+        :title="sessions[i - 1].preview || roleName(roles, sessions[i - 1].roleId)"
+        :data-testid="`session-tab-${sessions[i - 1].id}`"
+        @click="emit('loadSession', sessions[i - 1].id)"
+      >
+        <span class="material-icons text-base" :class="[tabColor(sessions[i - 1]), sessions[i - 1].isRunning ? 'animate-spin [animation-duration:3s]' : '']">{{
+          roleIcon(roles, sessions[i - 1].roleId)
+        }}</span>
+      </button>
+      <div v-else class="flex-1" />
+    </template>
+    <button
+      ref="historyButton"
+      data-testid="history-btn"
+      class="relative flex-shrink-0 flex items-center justify-center w-7 py-1 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors"
+      :class="{ 'text-blue-500': historyOpen }"
+      title="Session history"
+      @click="emit('toggleHistory')"
+    >
+      <span class="material-icons text-base">expand_more</span>
+      <span
+        v-if="activeSessionCount > 0"
+        class="absolute -top-0.5 -left-0.5 min-w-[1rem] h-4 px-0.5 bg-yellow-400 text-white text-[10px] font-bold rounded-full flex items-center justify-center leading-none cursor-help"
+        :title="`${activeSessionCount} active session${activeSessionCount > 1 ? 's' : ''} (agent running)`"
+        >{{ activeSessionCount }}</span
+      >
+      <span
+        v-if="unreadCount > 0"
+        class="absolute -top-0.5 -right-0.5 min-w-[1rem] h-4 px-0.5 bg-red-500 text-white text-[10px] font-bold rounded-full flex items-center justify-center leading-none cursor-help"
+        :title="`${unreadCount} unread repl${unreadCount > 1 ? 'ies' : 'y'}`"
+        >{{ unreadCount }}</span
+      >
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { Role } from "../config/roles";
+import type { SessionSummary } from "../types/session";
+import { roleIcon, roleName } from "../utils/role/icon";
+
+defineProps<{
+  sessions: SessionSummary[];
+  currentSessionId: string;
+  roles: Role[];
+  activeSessionCount: number;
+  unreadCount: number;
+  historyOpen: boolean;
+}>();
+
+const emit = defineEmits<{
+  newSession: [];
+  loadSession: [id: string];
+  toggleHistory: [];
+}>();
+
+const historyButton = ref<HTMLButtonElement | null>(null);
+defineExpose({ historyButton });
+
+function tabColor(session: SessionSummary): string {
+  if (session.isRunning) return "text-yellow-400";
+  if (session.hasUnread) return "text-gray-900";
+  return "text-gray-400";
+}
+</script>