feat: voice assistant integration, PiP window fixes, widget improvements and pixel art scrollbar

- Android voice assistant: RecognitionService, VoiceInteractionSession with startAssistantActivity, es-HN speech recognition - Voice transcript sent to first alive terminal via WebSocket, opens FloatingTranscriptDebug on correct session - PiP window: fix close button using getCurrentWebviewWindow(), add mini/restore toggle, remove alwaysOnTop - Add webview-close and window-destroy permissions to capabilities - Pixel art ocean scrollbar on /transcript-debug respecting scroll nav mode settings - Widget improvements: terminal list service, input widget provider, updated layouts
2026-02-23 22:35:58 -06:00
parent f6ec5ba5de
commit c46b1283d1
14 changed files with 837 additions and 252 deletions
--- a/frontend/src/pages/TranscriptDebugPage.vue
+++ b/frontend/src/pages/TranscriptDebugPage.vue
@@ -6,6 +6,7 @@ import { useVoiceInput } from '@/composables/useVoiceInput'
 import { useSessionState } from '@/stores/session-state'
 import { ChatContainer, AquaticBackground, AgentBadge, NewSessionModal } from '@/components/transcript-debug'
 import type { AgentName } from '@/types/transcript-debug'
+import { isTauri, isMobileTauri, getTauriWindow } from '@/lib/tauri'

 const route = useRoute()
 const router = useRouter()
@@ -59,6 +60,7 @@ const agents: { id: AgentName; label: string }[] = [
 const chatRef = ref<InstanceType<typeof ChatContainer> | null>(null)
 const showSelector = ref(false)
 const showNewSessionModal = ref(false)
+const isPipWindow = computed(() => route.query.pip === '1')

 // Readability overlay
 const savedOverlay = localStorage.getItem('transcript-overlay-opacity')
@@ -160,6 +162,84 @@ watch(() => sessionState.terminalRegistry.length, () => {
  if (route.params.terminalIndex) syncTerminalFromRoute()
 })

+const isAndroid = isMobileTauri()
+const pipOpen = ref(false)
+
+async function closePipWindow() {
+  try {
+    const { getCurrentWebviewWindow } = await import('@tauri-apps/api/webviewWindow')
+    await getCurrentWebviewWindow().close()
+  } catch {
+    window.close()
+  }
+}
+
+const pipMini = ref(false)
+async function togglePipMini() {
+  try {
+    const { getCurrentWindow } = await import('@tauri-apps/api/window')
+    const win = getCurrentWindow()
+    if (pipMini.value) {
+      await win.setSize(new (await import('@tauri-apps/api/dpi')).LogicalSize(380, 620))
+      pipMini.value = false
+    } else {
+      await win.setSize(new (await import('@tauri-apps/api/dpi')).LogicalSize(320, 180))
+      pipMini.value = true
+    }
+  } catch {}
+}
+
+async function enterPip() {
+  // Android: native PiP
+  if (isAndroid) {
+    const bridge = (window as any).AgentUI
+    if (bridge?.enterPip) bridge.enterPip()
+    return
+  }
+
+  // Desktop Tauri: toggle pip window
+  if (!isTauri) return
+  if (pipOpen.value) {
+    try {
+      const { WebviewWindow } = await import('@tauri-apps/api/webviewWindow')
+      const existing = await WebviewWindow.getByLabel('pip-terminal')
+      if (existing) await existing.close()
+    } catch {}
+    pipOpen.value = false
+    return
+  }
+
+  try {
+    const { WebviewWindow } = await import('@tauri-apps/api/webviewWindow')
+
+    // Build the URL for the pip window — same transcript page with terminal index
+    const terminalIdx = route.params.terminalIndex || '1'
+    const pipUrl = `/transcript-debug/${terminalIdx}?pip=1`
+
+    const pip = new WebviewWindow('pip-terminal', {
+      url: pipUrl,
+      title: 'Agent UI',
+      width: 380,
+      height: 620,
+      x: window.screen.width - 400,
+      y: 60,
+      alwaysOnTop: false,
+      decorations: false,
+      resizable: true,
+      focus: true,
+    })
+
+    pipOpen.value = true
+
+    pip.onCloseRequested(() => {
+      pipOpen.value = false
+    })
+  } catch (e) {
+    console.warn('Failed to open PiP window:', e)
+    pipOpen.value = false
+  }
+}
+
 onMounted(async () => {
  await init()
  await voice.init()
@@ -173,9 +253,29 @@ onBeforeUnmount(() => {
 </script>

 <template>
-  <div class="transcript-debug-page">
-    <!-- Terminal selector strip -->
-    <div class="terminal-strip">
+  <div :class="['transcript-debug-page', { 'pip-mode': isPipWindow }]">
+    <!-- PiP window title bar with drag + close -->
+    <div v-if="isPipWindow" class="pip-titlebar">
+      <span class="pip-title">Agent UI</span>
+      <div class="pip-controls">
+        <button class="pip-btn pip-mini" @click="togglePipMini" :title="pipMini ? 'Restore' : 'Mini'">
+          <svg v-if="!pipMini" width="10" height="10" viewBox="0 0 10 10">
+            <rect x="0.5" y="4.5" width="9" height="5" fill="none" stroke="currentColor" stroke-width="1" />
+          </svg>
+          <svg v-else width="10" height="10" viewBox="0 0 10 10">
+            <rect x="0.5" y="0.5" width="9" height="9" fill="none" stroke="currentColor" stroke-width="1" />
+          </svg>
+        </button>
+        <button class="pip-btn pip-close" @click="closePipWindow" title="Close">
+          <svg width="10" height="10" viewBox="0 0 10 10">
+            <line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.4" />
+            <line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.4" />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <!-- Terminal selector strip (hidden in PiP) -->
+    <div v-if="!isPipWindow" class="terminal-strip">
      <div class="strip-left">
        <button
          v-for="(entry, idx) in sessionState.terminalRegistry"
@@ -235,6 +335,17 @@ onBeforeUnmount(() => {
            </template>
          </svg>
        </button>
+        <button
+          v-if="isTauri"
+          @click.stop="enterPip"
+          :class="['strip-btn', 'pip-btn', { active: pipOpen }]"
+          title="Picture-in-Picture"
+        >
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="2" y="3" width="20" height="14" rx="2"/>
+            <rect x="12" y="9" width="8" height="6" rx="1" fill="currentColor" opacity="0.3"/>
+          </svg>
+        </button>
        <button
          @click.stop="showSelector = !showSelector"
          :class="['strip-btn', { active: showSelector }]"
@@ -252,7 +363,7 @@ onBeforeUnmount(() => {
    <div v-if="error" class="error-bar">{{ error }}</div>

    <!-- Content -->
-    <div :class="['content-area', { 'selector-open': showSelector }]">
+    <div :class="['content-area', { 'selector-open': showSelector }, `nav-${scrollNavMode}`]">
      <AquaticBackground />
      <div class="readability-overlay" :style="{ background: `rgba(0, 0, 0, ${overlayOpacity})` }" />

@@ -595,6 +706,42 @@ onBeforeUnmount(() => {
  flex: 1 !important;
 }

+/* ── Scroll modes: hide scrollbar for buttons / none ── */
+.content-area:not(.nav-scrollbar) :deep(.messages-scroll) {
+  scrollbar-width: none !important;
+}
+.content-area:not(.nav-scrollbar) :deep(.messages-scroll)::-webkit-scrollbar {
+  display: none !important;
+}
+
+/* ── Pixel art scrollbar (only in scrollbar mode) ── */
+.content-area.nav-scrollbar :deep(.messages-scroll) {
+  scrollbar-gutter: stable !important;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(14, 165, 233, 0.3) rgba(12, 45, 74, 0.4);
+}
+
+.content-area.nav-scrollbar :deep(.messages-scroll)::-webkit-scrollbar {
+  width: 8px;
+}
+
+.content-area.nav-scrollbar :deep(.messages-scroll)::-webkit-scrollbar-track {
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='8' height='8' fill='%230c2d4a' opacity='0.4'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23075985' opacity='0.15'/%3E%3Crect x='6' y='6' width='2' height='2' fill='%23075985' opacity='0.1'/%3E%3C/svg%3E") repeat;
+}
+
+.content-area.nav-scrollbar :deep(.messages-scroll)::-webkit-scrollbar-thumb {
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16' viewBox='0 0 8 16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='8' height='16' fill='%230ea5e9' opacity='0.3'/%3E%3Crect x='2' y='2' width='4' height='2' fill='%2322d3ee' opacity='0.25'/%3E%3Crect x='2' y='6' width='4' height='2' fill='%2367e8f9' opacity='0.2'/%3E%3Crect x='2' y='10' width='4' height='2' fill='%2322d3ee' opacity='0.25'/%3E%3Crect x='2' y='14' width='4' height='2' fill='%2367e8f9' opacity='0.15'/%3E%3C/svg%3E") repeat;
+  border: 1px solid rgba(14, 165, 233, 0.15);
+}
+
+.content-area.nav-scrollbar :deep(.messages-scroll)::-webkit-scrollbar-thumb:hover {
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='16' viewBox='0 0 8 16' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='8' height='16' fill='%230ea5e9' opacity='0.45'/%3E%3Crect x='2' y='2' width='4' height='2' fill='%2322d3ee' opacity='0.35'/%3E%3Crect x='2' y='6' width='4' height='2' fill='%2367e8f9' opacity='0.3'/%3E%3Crect x='2' y='10' width='4' height='2' fill='%2322d3ee' opacity='0.35'/%3E%3Crect x='2' y='14' width='4' height='2' fill='%2367e8f9' opacity='0.25'/%3E%3C/svg%3E") repeat;
+  border-color: rgba(14, 165, 233, 0.3);
+}
+
 /* Bottom overlay: absolute container for lifecycle + input + status */
 .content-area :deep(.bottom-overlay) {
  position: absolute !important;
@@ -608,6 +755,20 @@ onBeforeUnmount(() => {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
+  /* Auto-hide: fade out when idle */
+  opacity: 0;
+  transform: translateY(100%);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  pointer-events: none;
+}
+
+/* Show on hover anywhere in the content area or when input is focused */
+.content-area:hover :deep(.bottom-overlay),
+.content-area:has(:focus-within) :deep(.bottom-overlay),
+.content-area :deep(.bottom-overlay:focus-within) {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
 }

 .content-area :deep(.status-bar) {
@@ -761,4 +922,61 @@ onBeforeUnmount(() => {
 .content-area :deep(.message-wrapper.selected) {
  background: rgba(99, 102, 241, 0.06);
 }
+
+/* PiP window titlebar */
+.pip-titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 28px;
+  padding: 0 4px 0 10px;
+  background: transparent;
+  -webkit-app-region: drag;
+  app-region: drag;
+  flex-shrink: 0;
+  user-select: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+}
+
+.pip-title {
+  font-size: 11px;
+  color: var(--text-muted, #666);
+  font-weight: 500;
+}
+
+.pip-controls {
+  display: flex;
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
+.pip-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary, #a1a1aa);
+  cursor: pointer;
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+  transition: background 0.1s, color 0.1s;
+}
+
+.pip-btn:hover {
+  background: var(--bg-hover, #1e1e28);
+  color: var(--text-primary, #e4e4e7);
+}
+
+.pip-close:hover {
+  background: #e81123;
+  color: #fff;
+}
 </style>