mulmoclaude 0.3.0 → 0.5.0

package/src/components/FilesView.vue

@@ -54,7 +54,7 @@ import FileTreePane from "./FileTreePane.vue";
 import FileContentHeader from "./FileContentHeader.vue";
 import FileContentRenderer from "./FileContentRenderer.vue";
 import { useFileTree } from "../composables/useFileTree";
-import { useFileSelection, isValidFilePath } from "../composables/useFileSelection";
+import { useFileSelection, isValidFilePath, readPathMatch } from "../composables/useFileSelection";
 import { useMarkdownMode } from "../composables/useMarkdownMode";
 import { useFileSortMode } from "../composables/useFileSortMode";
 import { useContentDisplay } from "../composables/useContentDisplay";
@@ -161,9 +161,11 @@ const { handleMarkdownLinkClick } = useMarkdownLinkHandler(selectedPath, {
   onLoadSession: (sessionId) => emit("loadSession", sessionId),
 });
 
-// External URL changes (back/forward) → update selectedPath.
+// External URL changes (back/forward) → update selectedPath. Reading
+// from `route.params.pathMatch` after the query→params migration;
+// see plans/done/feat-files-path-url.md.
 watch(
-  () => route.query.path,
+  () => readPathMatch(route.params.pathMatch),
   (newPath) => {
     if (!isValidFilePath(newPath)) {
       if (selectedPath.value !== null) {

package/src/components/FilterChip.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  active: boolean;
+  label: string;
+  count?: number;
+}>();
+defineEmits<{ click: [] }>();
+</script>
+
+<template>
+  <button
+    type="button"
+    :aria-pressed="active"
+    :class="[
+      'inline-flex items-center px-2 py-0.5 text-xs leading-4 rounded-full border transition-colors cursor-pointer',
+      active ? 'bg-blue-600 text-white border-blue-600' : 'bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200',
+    ]"
+    @click="$emit('click')"
+  >
+    {{ label }}<template v-if="count !== undefined"> ({{ count }})</template>
+  </button>
+</template>

package/src/components/LockStatusPopup.vue

@@ -3,8 +3,11 @@
     <button
       ref="button"
       data-testid="sandbox-lock-button"
-      :class="sandboxEnabled ? 'text-gray-400 hover:text-gray-700' : 'text-amber-400 hover:text-amber-500'"
-      :title="sandboxEnabled ? 'Sandbox enabled (Docker)' : 'No sandbox (Docker not found)'"
+      :class="[
+        'h-8 w-8 flex items-center justify-center rounded',
+        sandboxEnabled ? 'text-gray-400 hover:text-gray-700' : 'text-amber-400 hover:text-amber-500',
+      ]"
+      :title="sandboxEnabled ? t('lockStatusPopup.sandboxEnabledTooltip') : t('lockStatusPopup.noSandboxTooltip')"
       @click="emit('update:open', !open)"
     >
       <span class="material-icons">{{ sandboxEnabled ? "lock" : "lock_open" }}</span>
@@ -13,36 +16,36 @@
       <p class="mb-2" :class="sandboxEnabled ? 'text-green-800' : 'text-amber-500'">
         <template v-if="sandboxEnabled">
           <span class="material-icons text-xs align-middle mr-1">lock</span>
-          <strong>Sandbox enabled:</strong> Docker is running. Filesystem access is isolated.
+          <strong>{{ t("lockStatusPopup.sandboxEnabledLabel") }}</strong> {{ t("lockStatusPopup.sandboxEnabledBody") }}
         </template>
         <template v-else>
           <span class="material-icons text-xs align-middle mr-1">warning</span>
-          <strong>No sandbox:</strong> Claude can access all files on your machine. Install
-          <a href="https://www.docker.com/products/docker-desktop/" target="_blank" class="underline">Docker Desktop</a>
-          to enable filesystem isolation.
+          <strong>{{ t("lockStatusPopup.noSandboxLabel") }}</strong> {{ t("lockStatusPopup.noSandboxBodyPrefix") }}
+          <a href="https://www.docker.com/products/docker-desktop/" target="_blank" class="underline">{{ t("lockStatusPopup.dockerDesktop") }}</a>
+          {{ t("lockStatusPopup.noSandboxBodySuffix") }}
         </template>
       </p>
       <div v-if="sandboxEnabled" data-testid="sandbox-credentials-block" class="mb-2 border-t border-gray-100 pt-2">
-        <p class="text-gray-400 mb-1">Host credentials attached:</p>
-        <p v-if="sandboxStatus === null" class="text-gray-400 italic" data-testid="sandbox-credentials-loading">loading…</p>
+        <p class="text-gray-400 mb-1">{{ t("lockStatusPopup.hostCredentials") }}</p>
+        <p v-if="sandboxStatus === null" class="text-gray-400 italic" data-testid="sandbox-credentials-loading">{{ t("lockStatusPopup.credsLoading") }}</p>
         <template v-else>
           <p data-testid="sandbox-credentials-ssh">
             <span class="mr-1">🔑</span>
-            <span class="text-gray-500">SSH agent:</span>
+            <span class="text-gray-500">{{ t("lockStatusPopup.sshAgent") }}</span>
             <span :class="sandboxStatus.sshAgent ? 'text-green-700' : 'text-gray-400'" class="ml-1">
-              {{ sandboxStatus.sshAgent ? "forwarded" : "not forwarded" }}
+              {{ sandboxStatus.sshAgent ? t("lockStatusPopup.forwarded") : t("lockStatusPopup.notForwarded") }}
             </span>
           </p>
           <p data-testid="sandbox-credentials-mounts">
             <span class="mr-1">📁</span>
-            <span class="text-gray-500">Mounted configs:</span>
+            <span class="text-gray-500">{{ t("lockStatusPopup.mountedConfigs") }}</span>
             <span :class="sandboxStatus.mounts.length > 0 ? 'text-green-700' : 'text-gray-400'" class="ml-1">
-              {{ sandboxStatus.mounts.length > 0 ? sandboxStatus.mounts.join(", ") : "none" }}
+              {{ sandboxStatus.mounts.length > 0 ? sandboxStatus.mounts.join(", ") : t("lockStatusPopup.none") }}
             </span>
           </p>
         </template>
       </div>
-      <p class="text-gray-400 mb-1">Test sandbox isolation:</p>
+      <p class="text-gray-400 mb-1">{{ t("lockStatusPopup.testIsolation") }}</p>
       <div class="flex flex-col gap-1">
         <button
           v-for="q in SANDBOX_TEST_QUERIES"
@@ -60,8 +63,11 @@
 
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { useSandboxStatus } from "../composables/useSandboxStatus";
 
+const { t } = useI18n();
+
 const props = defineProps<{
   sandboxEnabled: boolean;
   open: boolean;

package/src/components/NewsView.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="h-full flex flex-col bg-white" data-testid="news-view">
+    <!-- Header: title + filter chips + actions. -->
+    <div class="px-3 py-2 border-b border-gray-200 flex flex-wrap items-center gap-2 shrink-0">
+      <h1 class="text-base font-semibold text-gray-900 mr-3">{{ t("pluginNews.title") }}</h1>
+      <span class="text-xs text-gray-500" data-testid="news-counts">{{
+        t("pluginNews.itemCount", {
+          unread: unreadCount,
+          total: items.length,
+        })
+      }}</span>
+      <div class="ml-auto flex items-center gap-2">
+        <div class="flex border border-gray-300 rounded overflow-hidden" role="tablist">
+          <button
+            v-for="filter in readFilterChoices"
+            :key="filter.value"
+            :class="[
+              'h-8 px-2.5 flex items-center gap-1 text-sm transition-colors',
+              readFilter === filter.value ? 'bg-blue-50 text-blue-600 font-medium' : 'bg-white text-gray-600 hover:bg-gray-50',
+            ]"
+            :data-testid="`news-filter-${filter.value}`"
+            :aria-pressed="readFilter === filter.value"
+            @click="readFilter = filter.value"
+          >
+            {{ filter.label }}
+          </button>
+        </div>
+        <button
+          class="h-8 px-2.5 flex items-center gap-1 text-sm rounded border border-gray-300 text-gray-600 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
+          :disabled="unreadCount === 0"
+          data-testid="news-mark-all-read"
+          @click="markAllReadNow"
+        >
+          {{ t("pluginNews.markAllRead") }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Source filter chip row (only sources with items). -->
+    <div v-if="sourceChoices.length > 1" class="px-3 py-2 border-b border-gray-100 flex flex-wrap items-center gap-1 shrink-0">
+      <FilterChip
+        v-for="choice in sourceChoices"
+        :key="choice.slug"
+        :active="sourceFilter === choice.slug"
+        :label="choice.label"
+        :count="choice.count"
+        :data-testid="`news-source-${choice.slug}`"
+        @click="sourceFilter = choice.slug"
+      />
+    </div>
+
+    <!-- Body: list (left) + detail (right). -->
+    <div class="flex-1 min-h-0 flex">
+      <!-- List pane -->
+      <div class="w-80 shrink-0 border-r border-gray-200 overflow-y-auto" data-testid="news-list">
+        <div v-if="loading" class="p-4 text-sm text-gray-400">{{ t("common.loading") }}</div>
+        <div v-else-if="error" class="p-4 text-sm text-red-600 bg-red-50" role="alert">
+          {{ t("pluginNews.loadError", { error }) }}
+        </div>
+        <div v-else-if="visibleItems.length === 0" class="p-4 text-sm text-gray-400">{{ t("pluginNews.empty") }}</div>
+        <ul v-else class="divide-y divide-gray-100">
+          <li
+            v-for="item in visibleItems"
+            :key="item.id"
+            :class="['px-3 py-2 cursor-pointer', selectedId === item.id ? 'bg-blue-50' : 'hover:bg-gray-50']"
+            :data-testid="`news-item-${item.id}`"
+            @click="selectItem(item.id)"
+          >
+            <div class="flex items-start gap-2">
+              <span
+                v-if="!isRead(item.id)"
+                class="mt-1 w-1.5 h-1.5 rounded-full bg-blue-500 shrink-0"
+                :title="t('pluginNews.unread')"
+                :aria-label="t('pluginNews.unread')"
+              />
+              <div class="min-w-0 flex-1">
+                <div :class="['text-sm leading-snug', isRead(item.id) ? 'text-gray-500' : 'text-gray-900 font-medium']">
+                  {{ item.title }}
+                </div>
+                <div class="mt-0.5 flex items-center gap-2 text-[11px] text-gray-500">
+                  <span class="truncate">{{ item.sourceSlug }}</span>
+                  <span>{{ formatSmartTime(item.publishedAt) }}</span>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Detail pane -->
+      <div class="flex-1 min-w-0 flex flex-col" data-testid="news-detail">
+        <div v-if="!selected" class="flex-1 flex items-center justify-center text-sm text-gray-400">
+          {{ t("pluginNews.selectPrompt") }}
+        </div>
+        <template v-else>
+          <div class="flex-1 min-h-0 overflow-y-auto">
+            <div class="px-6 py-4 max-w-3xl">
+              <h2 class="text-xl font-semibold text-gray-900 leading-snug">{{ selected.title }}</h2>
+              <div class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-500">
+                <span>{{ selected.sourceSlug }}</span>
+                <span>{{ formatSmartTime(selected.publishedAt) }}</span>
+                <span v-for="cat in selected.categories" :key="cat" class="text-[10px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-600">
+                  {{ cat }}
+                </span>
+              </div>
+              <a
+                :href="selected.url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="mt-3 inline-flex items-center gap-1 text-sm text-blue-600 hover:underline"
+                data-testid="news-open-original"
+              >
+                <span class="material-icons text-sm">open_in_new</span>
+                {{ t("pluginNews.openOriginal") }}
+              </a>
+              <div class="mt-4">
+                <div v-if="bodyLoading" class="text-sm text-gray-400">{{ t("common.loading") }}</div>
+                <div v-else-if="bodyError" class="text-sm text-red-600">{{ t("pluginNews.bodyError", { error: bodyError }) }}</div>
+                <div v-else-if="!body" class="text-sm text-gray-400 italic">{{ t("pluginNews.noBody") }}</div>
+                <div v-else class="markdown-content prose prose-slate max-w-none" v-html="renderedBody"></div>
+              </div>
+            </div>
+          </div>
+          <PageChatComposer
+            :key="selected.id"
+            :placeholder="t('pluginNews.chatPlaceholder')"
+            :prepend-text="`Read this article. ${selected.url}`"
+            :allow-empty="true"
+            test-id-prefix="news-page-chat"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { marked } from "marked";
+import { useRoute } from "vue-router";
+import { API_ROUTES } from "../config/apiRoutes";
+import { apiGet } from "../utils/api";
+import { formatSmartTime } from "../utils/format/date";
+import { useNewsItems } from "../composables/useNewsItems";
+import { useNewsReadState } from "../composables/useNewsReadState";
+import FilterChip from "./FilterChip.vue";
+import PageChatComposer from "./PageChatComposer.vue";
+
+const { t } = useI18n();
+const route = useRoute();
+
+const { items, loading, error, load: loadItems } = useNewsItems();
+const { isRead, markRead, markAllRead, load: loadReadState } = useNewsReadState();
+
+type ReadFilter = "all" | "unread";
+const readFilter = ref<ReadFilter>("unread");
+const sourceFilter = ref<string>("all");
+const selectedId = ref<string | null>(null);
+const body = ref<string | null>(null);
+const bodyLoading = ref(false);
+const bodyError = ref<string | null>(null);
+
+const readFilterChoices = computed<{ value: ReadFilter; label: string }[]>(() => [
+  { value: "unread", label: t("pluginNews.filterUnread") },
+  { value: "all", label: t("pluginNews.filterAll") },
+]);
+
+const visibleItems = computed(() =>
+  items.value.filter((item) => {
+    if (readFilter.value === "unread" && isRead(item.id)) return false;
+    if (sourceFilter.value !== "all" && item.sourceSlug !== sourceFilter.value) return false;
+    return true;
+  }),
+);
+
+// Source chips: derived from the current items list, sorted by
+// per-source count desc so the busiest source surfaces first.
+const sourceChoices = computed<{ slug: string; label: string; count: number }[]>(() => {
+  const counts = new Map<string, number>();
+  for (const item of items.value) {
+    counts.set(item.sourceSlug, (counts.get(item.sourceSlug) ?? 0) + 1);
+  }
+  const sorted = Array.from(counts.entries())
+    .sort(([, leftCount], [, rightCount]) => rightCount - leftCount)
+    .map(([slug, count]) => ({ slug, label: slug, count }));
+  return [{ slug: "all", label: t("pluginNews.allSources"), count: items.value.length }, ...sorted];
+});
+
+const unreadCount = computed(() => items.value.filter((item) => !isRead(item.id)).length);
+
+const selected = computed(() => items.value.find((item) => item.id === selectedId.value) ?? null);
+
+const renderedBody = computed(() => (body.value ? marked(body.value, { breaks: true, gfm: true }) : ""));
+
+function selectItem(itemId: string): void {
+  selectedId.value = itemId;
+  // Auto mark-as-read on selection. Defer slightly so a rapid arrow-
+  // key scroll doesn't burn through the unread queue accidentally —
+  // we only mark when the user dwells on a card.
+  setTimeout(() => {
+    if (selectedId.value === itemId) markRead(itemId);
+  }, 250);
+}
+
+function markAllReadNow(): void {
+  markAllRead(items.value.map((item) => item.id));
+}
+
+// Body fetch fires whenever the selection changes. Cancellation via
+// a token: a stale response just no-ops if the user moved on.
+let bodyToken = 0;
+watch(
+  () => selectedId.value,
+  async (itemId) => {
+    body.value = null;
+    bodyError.value = null;
+    if (!itemId) return;
+    bodyLoading.value = true;
+    const token = ++bodyToken;
+    const url = API_ROUTES.news.itemBody.replace(":id", encodeURIComponent(itemId));
+    const result = await apiGet<{ body: string | null }>(url);
+    if (token !== bodyToken) return;
+    bodyLoading.value = false;
+    if (!result.ok) {
+      bodyError.value = result.error;
+      return;
+    }
+    body.value = result.data.body;
+  },
+);
+
+// Apply `?source=<slug>` deep link from the Sources page once items
+// land — the sourceFilter only takes effect if the slug is one of
+// the registered sources in the current items list.
+function applyRouteSourceFilter(): void {
+  const querySource = route.query.source;
+  if (typeof querySource === "string" && querySource.length > 0) {
+    sourceFilter.value = querySource;
+  }
+}
+
+onMounted(async () => {
+  applyRouteSourceFilter();
+  await Promise.all([loadItems(), loadReadState()]);
+});
+
+watch(
+  () => route.query.source,
+  () => applyRouteSourceFilter(),
+);
+</script>

package/src/components/NotificationBell.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ref, watch, onMounted, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
 import { useNotifications } from "../composables/useNotifications";
 import { formatRelativeTime } from "../utils/format/date";
 import { NOTIFICATION_ICONS, NOTIFICATION_ACTION_TYPES, NOTIFICATION_PRIORITIES } from "../types/notification";
 import type { NotificationPayload } from "../types/notification";
 
-const { notifications, unreadCount, markAllRead, dismiss } = useNotifications();
+const { t } = useI18n();
+const { notifications, unreadCount, isRead, markRead, markAllRead, dismiss } = useNotifications();
 const open = ref(false);
 const rootRef = ref<HTMLElement | null>(null);
 
@@ -37,7 +39,10 @@ watch(
 
 function toggle(): void {
   open.value = !open.value;
-  if (open.value) markAllRead();
+  // Opening the panel does NOT auto-mark items as read — the user
+  // has to click an item (markRead via handleClick) or dismiss it
+  // (× button) for the unread badge to drop. The "Mark all read"
+  // button in the panel header still bulk-clears.
   emit("update:open", open.value);
 }
 
@@ -55,6 +60,10 @@ function formatTime(iso: string): string {
 }
 
 function handleClick(notification: NotificationPayload): void {
+  // Mark this single item read regardless of whether it has a
+  // navigate action — the user has explicitly engaged with it,
+  // which is the unambiguous "I've seen this" signal.
+  markRead(notification.id);
   if (notification.action.type === NOTIFICATION_ACTION_TYPES.navigate) {
     emit("navigate", notification.action);
     close();
@@ -63,6 +72,10 @@ function handleClick(notification: NotificationPayload): void {
 
 function handleDismiss(event: Event, notificationId: string): void {
   event.stopPropagation();
+  // dismiss removes the entry from the list, so its contribution
+  // to unreadCount drops automatically. No separate markRead call
+  // needed — and we don't want the entry to linger as "read" if
+  // the user explicitly chose to remove it.
   dismiss(notificationId);
 }
 </script>
@@ -70,7 +83,12 @@ function handleDismiss(event: Event, notificationId: string): void {
 <template>
   <div ref="rootRef" class="relative">
     <!-- Bell button -->
-    <button class="relative text-gray-400 hover:text-gray-700" data-testid="notification-bell" aria-label="Notifications" @click="toggle">
+    <button
+      class="relative h-8 w-8 flex items-center justify-center rounded text-gray-400 hover:text-gray-700"
+      data-testid="notification-bell"
+      :aria-label="t('notificationBell.notifications')"
+      @click="toggle"
+    >
       <span class="material-icons">notifications</span>
       <span
         v-if="unreadCount > 0"
@@ -89,12 +107,14 @@ function handleDismiss(event: Event, notificationId: string): void {
     >
       <!-- Header -->
       <div class="flex items-center justify-between px-4 py-2 border-b border-gray-100">
-        <span class="text-sm font-semibold text-gray-700">Notifications</span>
-        <button class="text-xs text-blue-500 hover:text-blue-700" data-testid="notification-mark-all-read" @click="markAllRead">Mark all read</button>
+        <span class="text-sm font-semibold text-gray-700">{{ t("notificationBell.notifications") }}</span>
+        <button class="text-xs text-blue-500 hover:text-blue-700" data-testid="notification-mark-all-read" @click="markAllRead">
+          {{ t("notificationBell.markAllRead") }}
+        </button>
       </div>
 
       <!-- Empty state -->
-      <div v-if="notifications.length === 0" class="py-8 text-center text-sm text-gray-400">No notifications</div>
+      <div v-if="notifications.length === 0" class="py-8 text-center text-sm text-gray-400">{{ t("notificationBell.noNotifications") }}</div>
 
       <!-- Items -->
       <div v-else>
@@ -104,16 +124,22 @@ function handleDismiss(event: Event, notificationId: string): void {
           role="button"
           tabindex="0"
           class="flex items-start gap-3 px-4 py-3 border-b border-gray-50 hover:bg-gray-50 focus:bg-gray-100 cursor-pointer outline-none"
+          :class="isRead(n.id) ? 'bg-white' : 'bg-blue-50/40'"
           :data-testid="`notification-item-${n.id}`"
+          :data-unread="isRead(n.id) ? 'false' : 'true'"
           :aria-label="n.title"
           @click="handleClick(n)"
-          @keydown.enter="handleClick(n)"
+          @keydown.enter.prevent.self="(e) => !e.repeat && handleClick(n)"
+          @keydown.space.prevent.self="(e) => !e.repeat && handleClick(n)"
         >
+          <!-- Unread dot — small leading marker so the user can scan
+               the panel for what's new. Hidden once `markRead` fires. -->
+          <span class="w-2 h-2 mt-2 shrink-0 rounded-full" :class="isRead(n.id) ? 'bg-transparent' : 'bg-blue-500'" aria-hidden="true" />
           <span class="material-icons text-lg mt-0.5 shrink-0" :class="n.priority === NOTIFICATION_PRIORITIES.high ? 'text-red-500' : 'text-gray-400'">
             {{ iconName(n) }}
           </span>
           <div class="flex-1 min-w-0">
-            <p class="text-sm text-gray-800 truncate">{{ n.title }}</p>
+            <p class="text-sm truncate" :class="isRead(n.id) ? 'text-gray-600 font-normal' : 'text-gray-900 font-semibold'">{{ n.title }}</p>
             <p v-if="n.body" class="text-xs text-gray-500 truncate mt-0.5">
               {{ n.body }}
             </p>
@@ -121,7 +147,7 @@ function handleDismiss(event: Event, notificationId: string): void {
               {{ formatTime(n.firedAt) }}
             </p>
           </div>
-          <button class="text-gray-300 hover:text-gray-500 shrink-0 mt-0.5" aria-label="Dismiss" @click="handleDismiss($event, n.id)">
+          <button class="text-gray-300 hover:text-gray-500 shrink-0 mt-0.5" :aria-label="t('notificationBell.dismiss')" @click="handleDismiss($event, n.id)">
             <span class="material-icons text-sm">close</span>
           </button>
         </div>

package/src/components/NotificationToast.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import { useNotifications } from "../composables/useNotifications";
+
+const { t } = useI18n();
 import { NOTIFICATION_ICONS } from "../types/notification";
 import type { NotificationPayload } from "../types/notification";
 import { ONE_SECOND_MS } from "../../server/utils/time";
@@ -52,7 +55,7 @@ function iconName(notif: NotificationPayload): string {
           {{ formatSmartTime(visible.firedAt) }}
         </p>
       </div>
-      <button type="button" class="text-slate-400 hover:text-white" aria-label="Dismiss" @click="dismiss">
+      <button type="button" class="text-slate-400 hover:text-white" :aria-label="t('common.dismiss')" @click="dismiss">
         <span class="material-icons text-base">close</span>
       </button>
     </div>

package/src/components/PageChatComposer.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="border-t border-gray-200 shrink-0 bg-gray-50">
+    <SuggestionsPanel
+      v-if="suggestions && suggestions.length > 0"
+      v-model:expanded="suggestionsExpanded"
+      :queries="suggestions"
+      @send="onSuggestionSend"
+      @edit="onSuggestionEdit"
+    />
+    <div class="px-4 py-3 flex gap-2">
+      <textarea
+        ref="textareaRef"
+        v-model="draft"
+        :data-testid="`${testIdPrefix}-input`"
+        :placeholder="placeholder"
+        rows="2"
+        class="flex-1 bg-white border border-gray-300 rounded px-3 py-2 text-sm text-gray-900 placeholder-gray-400 resize-none"
+        @compositionstart="imeEnter.onCompositionStart"
+        @compositionend="imeEnter.onCompositionEnd"
+        @keydown="imeEnter.onKeydown"
+        @blur="imeEnter.onBlur"
+      />
+      <div class="flex flex-col gap-1 shrink-0">
+        <button
+          v-if="suggestions && suggestions.length > 0"
+          :data-testid="`${testIdPrefix}-suggestions`"
+          class="rounded w-8 h-8 flex items-center justify-center"
+          :class="suggestionsExpanded ? 'text-blue-600 bg-blue-50' : 'text-gray-400 hover:text-gray-600'"
+          :title="t('suggestionsPanel.suggestions')"
+          :aria-label="t('suggestionsPanel.suggestions')"
+          @click="suggestionsExpanded = !suggestionsExpanded"
+        >
+          <span class="material-icons text-base leading-none">lightbulb</span>
+        </button>
+        <button
+          :data-testid="`${testIdPrefix}-send`"
+          class="bg-blue-600 hover:bg-blue-700 text-white rounded w-8 h-8 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+          :title="t('common.sendChat')"
+          :aria-label="t('common.sendChat')"
+          :disabled="!canSend"
+          @click="submit"
+        >
+          <span class="material-icons text-base leading-none">send</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useAppApi } from "../composables/useAppApi";
+import { useImeAwareEnter } from "../composables/useImeAwareEnter";
+import SuggestionsPanel from "./SuggestionsPanel.vue";
+
+const props = withDefaults(
+  defineProps<{
+    placeholder: string;
+    prependText: string;
+    disabled?: boolean;
+    testIdPrefix?: string;
+    allowEmpty?: boolean;
+    suggestions?: string[];
+  }>(),
+  { disabled: false, testIdPrefix: "page-chat", allowEmpty: false, suggestions: () => [] },
+);
+
+const { t } = useI18n();
+const appApi = useAppApi();
+const draft = ref("");
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+const suggestionsExpanded = ref(false);
+
+const canSend = computed(() => !props.disabled && (props.allowEmpty || draft.value.trim().length > 0));
+
+function submitText(text: string) {
+  const trimmed = text.trim();
+  if (!trimmed && !props.allowEmpty) return;
+  const prompt = trimmed ? `${props.prependText}\n\n${trimmed}` : props.prependText;
+  draft.value = "";
+  appApi.startNewChat(prompt);
+}
+
+function submit() {
+  if (props.disabled) return;
+  submitText(draft.value);
+}
+
+function onSuggestionSend(query: string) {
+  if (props.disabled) return;
+  submitText(query);
+}
+
+function onSuggestionEdit(query: string) {
+  draft.value = query;
+  nextTick(() => textareaRef.value?.focus());
+}
+
+const imeEnter = useImeAwareEnter(submit);
+</script>