feat: Auto-open PromptBar on permission request and improve permission card UI

PromptBar now auto-opens when a permission request arrives and it's hidden.
Permission cards show rich contextual info: tool badge, description, code
blocks for Bash, diff preview for Edit, file paths for Write, and icons
on Allow/Deny buttons.

frontend/src/components/AgentBar.vue

@@ -20,6 +20,21 @@ const activeAgentId = ref<string | null>(null)
 const activeAnchorRect = ref<DOMRect | null>(null)
 const openInRecording = ref(false)
 const promptBarRef = ref<InstanceType<typeof PromptBar> | null>(null)
+const bubbleRefs = new Map<string, Element>()
+
+function setBubbleRef(agentId: string, el: any) {
+  if (el?.$el) bubbleRefs.set(agentId, el.$el)
+  else if (el) bubbleRefs.set(agentId, el)
+}
+
+function autoOpenForAgent(agentId: string) {
+  if (activeAgentId.value === agentId) return // Already open
+  const bubbleEl = bubbleRefs.get(agentId)
+  if (!bubbleEl) return
+  activeAnchorRect.value = bubbleEl.getBoundingClientRect()
+  openInRecording.value = false
+  activeAgentId.value = agentId
+}
 
 const isRecordingActive = computed(() =>
   promptBarRef.value?.isRecording ?? false
@@ -177,6 +192,8 @@ function connectStatusWs() {
 
         case 'permissionRequest':
           s.awaitingPermission = true
+          // Auto-open PromptBar if not already open for this agent
+          autoOpenForAgent(agent.id)
           break
 
         case 'reading':
@@ -334,6 +351,7 @@ onBeforeUnmount(() => {
     <FloatBubble
       v-for="agent in enabledAgents"
       :key="agent.id"
+      :ref="(el: any) => setBubbleRef(agent.id, el)"
       :agent="agent"
       :status="agentStatuses[agent.id]"
       :recording="(activeAgentId === agent.id && isRecordingActive) || (floatingAgentId === agent.id && isFloatingRecording)"