opencube 0.1.1 → 0.2.1

package/README.md

@@ -9,7 +9,11 @@ OpenCube is a tiny desktop pet for [opencode](https://opencode.ai/).
 It watches opencode session activity and renders a small Three.js cube on your desktop:
 
 - busy sessions light up cube faces
-- idle sessions release their face glow after the cube slows down
+- active tool calls emit bright face-colored sparks from the corresponding cube face
+- right-click drag applies extra rotational friction with small braking particles
+- idle sessions keep a subtle torque-breathing motion and release face glow after the cube slows down
+- a macOS-style tray/menu bar control can show, hide, quit, or open the Inbox
+- the Inbox shows raw opencode hook events plus local mouse/keyboard diagnostics
 - `/pet_say_hello` flashes one free face
 - `/pet_fancy_say_hello` plays a randomized light show on free faces
 
@@ -48,6 +52,21 @@ You can also add it manually to `~/.config/opencode/opencode.json`:
 
 These commands are handled by the plugin and do not get sent to the model.
 
+## What you can see
+
+OpenCube turns opencode lifecycle events into small desktop signals:
+
+| opencode activity | OpenCube signal |
+| --- | --- |
+| Session becomes busy | One cube face lights up with a stable session color. |
+| Session becomes idle | The face glow is released once the cube slows down. |
+| A tool call starts | The session's face emits fast, bright sparks in that face's current outward direction. |
+| A tool call finishes | Spark emission stops; existing sparks fade out naturally. |
+| Right mouse hold on the cube | Friction increases and braking particles appear. |
+| Tray menu → Show Inbox | Opens a two-column event/debug panel. |
+
+Multiple busy sessions can light multiple faces. If more than six sessions are busy, OpenCube shows the latest six.
+
 ## How it works
 
 OpenCube has two parts in one npm package:
@@ -55,13 +74,28 @@ OpenCube has two parts in one npm package:
 1. `src/plugin-server.cjs` — the opencode plugin entrypoint.
 2. `src/main.js` — the Electron desktop pet.
 
-The plugin registers slash commands, listens for opencode `session.status` events, and sends events to the desktop pet over a local HTTP API:
+The plugin registers slash commands, listens for opencode `session.status` events and `tool.execute.*` hooks, and sends events to the desktop pet over a local HTTP API:
 
 ```text
 opencode plugin -> http://127.0.0.1:47832 -> Electron OpenCube
 ```
 
-The Electron process owns the window, Three.js renderer, cube rotation, face glow state, and inbox/debug endpoints.
+The Electron process owns the window, tray menu, Three.js renderer, cube rotation, face glow state, particle effects, and inbox/debug endpoints.
+
+## Local API
+
+OpenCube exposes a local-only HTTP API while it is running:
+
+| Endpoint | Purpose |
+| --- | --- |
+| `GET /health` | Check whether OpenCube is running. |
+| `GET /debug-render` | Inspect renderer state, busy faces, active tools, and particle counters. |
+| `POST /event` | Receive opencode lifecycle/tool/hello events. |
+| `POST /interaction` | Receive local renderer mouse/keyboard diagnostics. |
+| `POST /show` | Show the cube window. |
+| `POST /quit` | Quit OpenCube. |
+
+The API binds to `127.0.0.1` only.
 
 ## Requirements
 
@@ -74,9 +108,11 @@ Users do not need to run `npm install` manually when installing via `opencode pl
 ## Notes
 
 - The first install may take a while because Electron is downloaded as a runtime dependency.
+- If Electron's platform binary is missing after installation, OpenCube attempts a first-run self-repair download.
 - If commands do not appear after installation, restart opencode.
 - OpenCube uses a local-only HTTP server on `127.0.0.1:47832`.
 - If that port is already in use, set `OPENCODE_PET_PORT` before starting opencode.
+- In opencode desktop, OpenCube currently uses a command-abort sentinel to keep local slash commands out of the model flow; depending on opencode version, the desktop UI may show an error toast even though the command was handled.
 
 ## Local development
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opencube",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "A tiny Three.js desktop pet for opencode session activity.",
   "main": "src/main.js",
   "exports": {

package/src/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, Menu, screen } = require("electron")
+const { app, BrowserWindow, Menu, Tray, nativeImage, screen, ipcMain } = require("electron")
 const fs = require("node:fs")
 const http = require("node:http")
 const os = require("node:os")
@@ -14,15 +14,38 @@ const STATE_FILE = path.join(DATA_DIR, "state.json")
 const PET_HTML_FILE = path.join(DATA_DIR, "pet.html")
 const ICON_PATH = process.env.OPENCODE_PET_ICON || path.join(__dirname, "..", "assets", "opencode-icon.png")
 const MAX_EVENTS = 100
+const MAX_INTERACTION_EVENTS = 80
 const IDLE_TTL_MS = 5 * 60 * 1000
 
 let petWindow = null
 let panelWindow = null
+let tray = null
 let server = null
 let events = []
+let interactionEvents = []
 let petSignals = []
 let sessionMap = new Map()
+let activeToolsBySession = new Map()
+let pendingPermissionsByRequest = new Map()
 let cleanupTimer = null
+let dragState = null
+
+ipcMain.on("opencube-drag-start", (event, point) => {
+  if (!petWindow || petWindow.isDestroyed()) return
+  const [x, y] = petWindow.getPosition()
+  dragState = { windowX: x, windowY: y, screenX: point.screenX, screenY: point.screenY }
+})
+
+ipcMain.on("opencube-drag-move", (event, point) => {
+  if (!petWindow || petWindow.isDestroyed() || !dragState) return
+  const nextX = Math.round(dragState.windowX + point.screenX - dragState.screenX)
+  const nextY = Math.round(dragState.windowY + point.screenY - dragState.screenY)
+  petWindow.setPosition(nextX, nextY, false)
+})
+
+ipcMain.on("opencube-drag-end", () => {
+  dragState = null
+})
 
 function ensureDataDir() {
   fs.mkdirSync(DATA_DIR, { recursive: true })
@@ -108,6 +131,8 @@ function recordEvent(event) {
     ...event,
   }
   applySessionEvent(item)
+  applyToolEvent(item)
+  applyPermissionEvent(item)
   if (item.type === "hello" || item.type === "fancy_hello") {
     petSignals.push({
       id: item.id,
@@ -125,6 +150,71 @@ function recordEvent(event) {
   return item
 }
 
+function applyPermissionEvent(event) {
+  if (!event || typeof event.sessionID !== "string") return
+
+  if (event.type === "permission.ask") {
+    const requestID = typeof event.requestID === "string" ? event.requestID : event.id
+    if (!requestID) return
+    pendingPermissionsByRequest.set(requestID, {
+      requestID,
+      sessionID: event.sessionID,
+      permission: event.permission,
+      patterns: event.patterns,
+      metadata: event.metadata,
+      always: event.always,
+      tool: event.tool,
+      askedAt: event.receivedAt || Date.now(),
+    })
+    return
+  }
+
+  if (event.type === "permission.reply") {
+    if (typeof event.requestID === "string") pendingPermissionsByRequest.delete(event.requestID)
+  }
+}
+
+function clearPendingPermissionsForSession(sessionID) {
+  for (const [requestID, permission] of pendingPermissionsByRequest) {
+    if (permission?.sessionID === sessionID) pendingPermissionsByRequest.delete(requestID)
+  }
+}
+
+function applyToolEvent(event) {
+  if (!event || typeof event.sessionID !== "string" || typeof event.callID !== "string") return
+  if (event.type !== "tool.start" && event.type !== "tool.finish") return
+
+  let tools = activeToolsBySession.get(event.sessionID)
+  if (!tools) {
+    tools = new Map()
+    activeToolsBySession.set(event.sessionID, tools)
+  }
+
+  if (event.type === "tool.start") {
+    tools.set(event.callID, {
+      callID: event.callID,
+      tool: event.tool,
+      startedAt: event.receivedAt || Date.now(),
+    })
+    return
+  }
+
+  tools.delete(event.callID)
+  if (tools.size === 0) activeToolsBySession.delete(event.sessionID)
+}
+
+function recordInteractionEvent(event) {
+  const item = {
+    id: `${Date.now()}-${Math.random().toString(16).slice(2)}`,
+    receivedAt: Date.now(),
+    ...event,
+  }
+  interactionEvents.unshift(item)
+  interactionEvents = interactionEvents.slice(0, MAX_INTERACTION_EVENTS)
+  updatePanel()
+  return item
+}
+
 function applySessionEvent(event) {
   if (!event || typeof event.sessionID !== "string") return
   const now = event.receivedAt || Date.now()
@@ -145,6 +235,8 @@ function applySessionEvent(event) {
   }
 
   if (event.type === "session.idle") {
+    activeToolsBySession.delete(event.sessionID)
+    clearPendingPermissionsForSession(event.sessionID)
     sessionMap.set(event.sessionID, {
       sessionID: event.sessionID,
       state: "idle",
@@ -165,6 +257,8 @@ function pruneIdleSessions(refresh = true) {
     const expiresFrom = session.idleAt || session.lastAt
     if (session.state === "idle" && expiresFrom && now - expiresFrom > IDLE_TTL_MS) {
       sessionMap.delete(sessionID)
+      activeToolsBySession.delete(sessionID)
+      clearPendingPermissionsForSession(sessionID)
       changed = true
     }
   }
@@ -186,6 +280,7 @@ function getPetState() {
       ball: { size: 14 },
     },
     sessions: Array.from(sessionMap.values()).map((session, index) => ({
+      activeTools: Array.from(activeToolsBySession.get(session.sessionID)?.values() || []),
       sessionID: session.sessionID,
       state: session.state,
       busyAt: session.busyAt,
@@ -198,6 +293,7 @@ function getPetState() {
       idleIndex: session.state === "idle" ? idleIndex++ : undefined,
       color: DEFAULT_SESSION_COLORS[index % DEFAULT_SESSION_COLORS.length],
     })),
+    permissions: Array.from(pendingPermissionsByRequest.values()),
     signals: petSignals,
   }
 }
@@ -230,6 +326,14 @@ function panelHtml() {
     })
     .join("")
 
+  const interactionRows = interactionEvents
+    .map((event) => {
+      const time = new Date(event.receivedAt).toLocaleTimeString()
+      const payload = JSON.stringify(event, null, 2)
+      return `<div class="event interaction"><div class="meta interaction-meta">${escapeHtml(time)} · ${escapeHtml(event.type || "interaction")}</div><pre>${escapeHtml(payload)}</pre></div>`
+    })
+    .join("")
+
   return `<!doctype html>
 <html>
   <head>
@@ -239,17 +343,31 @@ function panelHtml() {
       .panel { box-sizing: border-box; width: 100%; height: 100%; padding: 12px; border-radius: 16px; background: rgba(24, 24, 27, 0.94); color: white; box-shadow: 0 14px 42px rgba(0,0,0,.28); overflow: hidden; }
       .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
       .hint { color: rgba(255,255,255,.6); font-size: 11px; font-weight: 500; }
-      .list { height: 292px; overflow: auto; padding-right: 4px; }
+      .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 316px; }
+      .section { min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
+      .section-title { display: flex; justify-content: space-between; color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; margin: 0 2px 6px; }
+      .list { flex: 1; overflow: auto; padding-right: 4px; }
       .empty { color: rgba(255,255,255,.6); font-size: 13px; padding: 18px 4px; }
       .event { border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 8px; margin-bottom: 8px; background: rgba(255,255,255,.06); }
+      .event.interaction { background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.18); }
       .meta { color: #a7f3d0; font-size: 11px; margin-bottom: 5px; }
+      .interaction-meta { color: #93c5fd; }
       pre { margin: 0; color: rgba(255,255,255,.88); white-space: pre-wrap; word-break: break-word; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
     </style>
   </head>
   <body>
     <div class="panel">
-      <div class="header"><span>opencode pet inbox</span><span class="hint">${events.length}/${MAX_EVENTS}</span></div>
-      <div class="list">${rows || `<div class="empty">还没有收到事件。试试 /pet 或 /pet_stop。</div>`}</div>
+      <div class="header"><span>OpenCube inbox</span><span class="hint">events ${events.length}/${MAX_EVENTS} · input ${interactionEvents.length}/${MAX_INTERACTION_EVENTS}</span></div>
+      <div class="columns">
+        <section class="section">
+          <div class="section-title"><span>HTTP / hook events</span><span>${events.length}</span></div>
+          <div class="list">${rows || `<div class="empty">还没有收到事件。</div>`}</div>
+        </section>
+        <section class="section">
+          <div class="section-title"><span>Mouse / keyboard</span><span>${interactionEvents.length}</span></div>
+          <div class="list">${interactionRows || `<div class="empty">还没有捕捉到输入事件。</div>`}</div>
+        </section>
+      </div>
     </div>
   </body>
 </html>`
@@ -548,7 +666,7 @@ function petHtml3D() {
         height: 100%;
         position: relative;
         background: transparent;
-        -webkit-app-region: drag;
+        -webkit-app-region: no-drag;
         user-select: none;
       }
       #scene {
@@ -558,11 +676,18 @@ function petHtml3D() {
         height: 100%;
         pointer-events: none;
       }
+      #hit-layer {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        -webkit-app-region: no-drag;
+      }
     </style>
   </head>
   <body>
     <div class="stage" title="opencode pet：拖拽移动，右键打开菜单">
       <canvas id="scene" aria-label="3D opencode pet"></canvas>
+      <div id="hit-layer" aria-label="OpenCube interaction layer"></div>
     </div>
     <script>
       window.__PET_BOOT_ERROR = null
@@ -575,9 +700,11 @@ function petHtml3D() {
     </script>
     <script>
       const THREE = require(${threeCjsPath})
+      const { ipcRenderer } = require("electron")
 
       window.__PET_STATE = ${initialStateJson}
       const stage = document.querySelector(".stage")
+      const hitLayer = document.getElementById("hit-layer")
       const faceOrder = ["front", "right", "top", "back", "left", "bottom"]
       const sessionFaceMap = new Map()
       const sessionColorMap = new Map()
@@ -586,6 +713,7 @@ function petHtml3D() {
       const colorReleaseSpeed = 90
       const faceMeshes = new Map()
       const glowMeshes = new Map()
+      const permissionGlowMeshes = new Map()
       let snapshot = window.__PET_STATE || { sessions: [] }
       let lastFrame = performance.now()
       let rotation = { x: -14, y: -28, z: 0 }
@@ -593,6 +721,10 @@ function petHtml3D() {
       let torque = { x: 0, y: 0, z: 0 }
       let nextTorqueAt = 0
       let wasBusy = false
+      let frictionHoldActive = false
+      let frictionHoldLevel = 0
+      let leftDragActive = false
+      let dragEmitAccumulator = 0
       let latestDebug = { now: Date.now(), busy: 0, rotation, angularVelocity, torque, speed: 0, faceRotations: {} }
 
       const canvas = document.getElementById("scene")
@@ -606,6 +738,11 @@ function petHtml3D() {
 
       const cubeGroup = new THREE.Group()
       scene.add(cubeGroup)
+      const dragParticleGroup = new THREE.Group()
+      dragParticleGroup.position.z = 0.88
+      scene.add(dragParticleGroup)
+      const toolParticleGroup = new THREE.Group()
+      scene.add(toolParticleGroup)
       const iconTexture = new THREE.TextureLoader().load("${iconUrl}")
       iconTexture.colorSpace = THREE.SRGBColorSpace
       iconTexture.generateMipmaps = false
@@ -619,8 +756,10 @@ function petHtml3D() {
         side: THREE.DoubleSide,
       })
       const glowTexture = createGlowTexture()
+      const dragParticleTexture = createDragParticleTexture()
       const faceGeometry = new THREE.PlaneGeometry(0.60, 0.60)
       const glowGeometry = new THREE.PlaneGeometry(1.18, 1.18)
+      const permissionGlowGeometry = new THREE.PlaneGeometry(1.42, 1.42)
       const rad = THREE.MathUtils.degToRad
 
       function createGlowTexture() {
@@ -641,6 +780,286 @@ function petHtml3D() {
         return texture
       }
 
+      function createDragParticleTexture() {
+        const canvas = document.createElement("canvas")
+        canvas.width = 96
+        canvas.height = 96
+        const ctx = canvas.getContext("2d")
+        const gradient = ctx.createRadialGradient(48, 48, 1, 48, 48, 45)
+        gradient.addColorStop(0, "rgba(255,255,255,1)")
+        gradient.addColorStop(0.24, "rgba(255,255,255,1)")
+        gradient.addColorStop(0.52, "rgba(255,255,255,.52)")
+        gradient.addColorStop(1, "rgba(255,255,255,0)")
+        ctx.fillStyle = gradient
+        ctx.fillRect(0, 0, 96, 96)
+        const texture = new THREE.CanvasTexture(canvas)
+        texture.colorSpace = THREE.SRGBColorSpace
+        return texture
+      }
+
+      const dragParticles = []
+      const toolParticles = []
+      const toolEmitAccumulators = new Map()
+      const toolEmissionStates = new Map()
+      const toolEmissionHoldMs = 2000
+      const faceVectors = {
+        front: { position: new THREE.Vector3(0, 0, 0.34), normal: new THREE.Vector3(0, 0, 1) },
+        back: { position: new THREE.Vector3(0, 0, -0.34), normal: new THREE.Vector3(0, 0, -1) },
+        right: { position: new THREE.Vector3(0.34, 0, 0), normal: new THREE.Vector3(1, 0, 0) },
+        left: { position: new THREE.Vector3(-0.34, 0, 0), normal: new THREE.Vector3(-1, 0, 0) },
+        top: { position: new THREE.Vector3(0, 0.34, 0), normal: new THREE.Vector3(0, 1, 0) },
+        bottom: { position: new THREE.Vector3(0, -0.34, 0), normal: new THREE.Vector3(0, -1, 0) },
+      }
+
+      function createDragParticles() {
+        const geometry = new THREE.PlaneGeometry(0.086, 0.086)
+        for (let index = 0; index < 34; index++) {
+          const material = new THREE.MeshBasicMaterial({
+            map: dragParticleTexture,
+            color: new THREE.Color(1, 1, 1),
+            transparent: true,
+            opacity: 0,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+            side: THREE.DoubleSide,
+          })
+          const particle = new THREE.Mesh(geometry, material)
+          particle.userData = {
+            active: false,
+            life: 0,
+            maxLife: 1,
+            vx: 0,
+            vy: 0,
+            size: randomBetween(0.72, 1.28),
+          }
+          dragParticleGroup.add(particle)
+          dragParticles.push(particle)
+        }
+      }
+
+      function createToolParticles() {
+        for (let index = 0; index < 56; index++) {
+          const material = new THREE.SpriteMaterial({
+            map: dragParticleTexture,
+            color: 0xffffff,
+            transparent: true,
+            opacity: 0,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+          })
+          const particle = new THREE.Sprite(material)
+          particle.userData = {
+            active: false,
+            life: 0,
+            maxLife: 1,
+            velocity: new THREE.Vector3(),
+            size: 0.06,
+          }
+          toolParticleGroup.add(particle)
+          toolParticles.push(particle)
+        }
+      }
+
+      function colorToThree(color) {
+        return new THREE.Color((color?.r ?? 255) / 255, (color?.g ?? 255) / 255, (color?.b ?? 255) / 255)
+      }
+
+      function emitToolParticle(faceName, color) {
+        const face = faceVectors[faceName]
+        if (!face) return false
+        const particle = toolParticles.find((item) => !item.userData.active)
+        if (!particle) return false
+
+        const origin = face.position.clone()
+        const normal = face.normal.clone()
+        cubeGroup.localToWorld(origin)
+        normal.applyQuaternion(cubeGroup.quaternion).normalize()
+
+        const basis = Math.abs(normal.y) > 0.82 ? new THREE.Vector3(1, 0, 0) : new THREE.Vector3(0, 1, 0)
+        const tangentA = new THREE.Vector3().crossVectors(normal, basis).normalize()
+        const tangentB = new THREE.Vector3().crossVectors(normal, tangentA).normalize()
+
+        const data = particle.userData
+        data.active = true
+        data.life = 0
+        data.maxLife = randomBetween(0.45, 0.78)
+        data.size = randomBetween(0.062, 0.115)
+        data.velocity.copy(normal).multiplyScalar(randomBetween(1.45, 2.35))
+        data.velocity.add(tangentA.multiplyScalar(randomBetween(-0.32, 0.32)))
+        data.velocity.add(tangentB.multiplyScalar(randomBetween(-0.32, 0.32)))
+        particle.position.copy(origin).add(normal.clone().multiplyScalar(0.035))
+        particle.scale.setScalar(data.size)
+        particle.material.color.copy(colorToThree(color))
+        particle.material.opacity = 0.92
+        return true
+      }
+
+      function updateToolParticles(sessions, dt, now) {
+        const activeIDs = new Set()
+        const emitters = []
+        const busyIDs = new Set(
+          sessions
+            .filter((session) => session?.state === "busy" && typeof session.sessionID === "string")
+            .map((session) => session.sessionID),
+        )
+
+        for (const session of sessions) {
+          if (session?.state !== "busy" || typeof session.sessionID !== "string" || !session.activeTools?.length) continue
+          const currentState = toolEmissionStates.get(session.sessionID)
+          const faceName = sessionFaceMap.get(session.sessionID) || currentState?.faceName
+          if (!faceName) continue
+          const color = sessionColorMap.get(session.sessionID) || currentState?.color || randomSessionGlowColor()
+
+          activeIDs.add(session.sessionID)
+          toolEmissionStates.set(session.sessionID, {
+            faceName,
+            color,
+            holdUntil: now + toolEmissionHoldMs,
+          })
+          emitters.push({ sessionID: session.sessionID, faceName, color, held: false, holdRemainingMs: toolEmissionHoldMs })
+        }
+
+        for (const [sessionID, state] of Array.from(toolEmissionStates.entries())) {
+          if (activeIDs.has(sessionID)) continue
+          if (!busyIDs.has(sessionID) || !state?.faceName || state.holdUntil <= now) {
+            toolEmissionStates.delete(sessionID)
+            toolEmitAccumulators.delete(sessionID)
+            continue
+          }
+          emitters.push({
+            sessionID,
+            faceName: state.faceName,
+            color: state.color || randomSessionGlowColor(),
+            held: true,
+            holdRemainingMs: state.holdUntil - now,
+          })
+        }
+
+        const emittingIDs = new Set(emitters.map((emitter) => emitter.sessionID))
+        for (const sessionID of Array.from(toolEmitAccumulators.keys())) {
+          if (!emittingIDs.has(sessionID)) toolEmitAccumulators.delete(sessionID)
+        }
+
+        for (const emitter of emitters) {
+          const jitterRate = randomBetween(7.5, 11.5)
+          const next = (toolEmitAccumulators.get(emitter.sessionID) || 0) + dt * jitterRate
+          let accumulator = next
+          while (accumulator >= 1) {
+            if (!emitToolParticle(emitter.faceName, emitter.color)) break
+            accumulator -= 1
+          }
+          toolEmitAccumulators.set(emitter.sessionID, accumulator)
+        }
+
+        let activeCount = 0
+        for (const particle of toolParticles) {
+          const data = particle.userData
+          if (!data.active) {
+            particle.material.opacity = 0
+            continue
+          }
+          data.life += dt
+          if (data.life >= data.maxLife) {
+            data.active = false
+            particle.material.opacity = 0
+            continue
+          }
+          activeCount += 1
+          const age = data.life / data.maxLife
+          particle.position.addScaledVector(data.velocity, dt)
+          particle.scale.setScalar(data.size * (1.02 + age * 0.42))
+          particle.material.opacity = Math.min(1, 0.24 + Math.sin(age * Math.PI) * 1.18)
+        }
+        const heldSessions = emitters.filter((emitter) => emitter.held).length
+        toolParticleGroup.visible = activeCount > 0 || emitters.length > 0
+        return { activeSessions: activeIDs.size, emittingSessions: emitters.length, heldSessions, activeCount }
+      }
+
+      function activeDragColors() {
+        const colors = []
+        for (const color of sessionColorMap.values()) {
+          if (color && Number.isFinite(color.r) && Number.isFinite(color.g) && Number.isFinite(color.b)) colors.push(color)
+        }
+        return colors
+      }
+
+      function monochromeDragColor(index, cycle) {
+        const value = 0.26 + ((index % 5) / 4) * 0.56 + Math.sin(cycle * Math.PI) * 0.12
+        const clamped = Math.max(0.18, Math.min(0.92, value))
+        return { r: Math.round(clamped * 255), g: Math.round(clamped * 255), b: Math.round(clamped * 255) }
+      }
+
+      function chooseDragParticleColor(index, palette) {
+        if (palette.length > 0) return palette[index % palette.length]
+        const value = index % 2 === 0 ? 238 : 32
+        return { r: value, g: value, b: value }
+      }
+
+      function emitDragParticle(palette) {
+        const particle = dragParticles.find((item) => !item.userData.active)
+        if (!particle) return false
+        const data = particle.userData
+        const angle = randomBetween(0, Math.PI * 2)
+        const startRadius = randomBetween(0.16, 0.30)
+        const velocity = randomBetween(0.10, 0.20)
+        const tangent = randomBetween(-0.045, 0.045)
+        const color = chooseDragParticleColor(Math.floor(randomBetween(0, 1000)), palette)
+        data.active = true
+        data.life = 0
+        data.maxLife = randomBetween(1.15, 1.9)
+        data.vx = Math.cos(angle) * velocity + Math.cos(angle + Math.PI / 2) * tangent
+        data.vy = Math.sin(angle) * velocity + Math.sin(angle + Math.PI / 2) * tangent
+        data.size = randomBetween(0.92, 1.52)
+        particle.position.x = Math.cos(angle) * startRadius
+        particle.position.y = Math.sin(angle) * startRadius
+        particle.position.z = 0
+        particle.scale.setScalar(data.size)
+        particle.material.color.setRGB(color.r / 255, color.g / 255, color.b / 255)
+        particle.material.opacity = 0.96
+        return true
+      }
+
+      function updateDragParticles(now, holdLevel, speed, dt) {
+        const hold = Math.max(0, Math.min(1, holdLevel / 11))
+        const intensity = hold
+        const palette = activeDragColors()
+        if (hold > 0.02) {
+          const emitRate = 7.5 - hold * 5.2
+          dragEmitAccumulator += dt * emitRate
+          while (dragEmitAccumulator >= 1) {
+            if (!emitDragParticle(palette)) break
+            dragEmitAccumulator -= 1
+          }
+        } else {
+          dragEmitAccumulator = 0
+        }
+
+        let activeCount = 0
+        for (const particle of dragParticles) {
+          const data = particle.userData
+          if (!data.active) {
+            particle.material.opacity = 0
+            continue
+          }
+          data.life += dt
+          if (data.life >= data.maxLife) {
+            data.active = false
+            particle.material.opacity = 0
+            continue
+          }
+          activeCount += 1
+          const age = data.life / data.maxLife
+          particle.position.x += data.vx * dt
+          particle.position.y += data.vy * dt
+          const fade = Math.sin(age * Math.PI)
+          const scale = data.size * (0.92 + age * 0.58)
+          particle.scale.setScalar(scale)
+          particle.material.opacity = Math.min(1, 0.12 + fade * 0.98)
+        }
+        dragParticleGroup.visible = activeCount > 0 || intensity > 0.01
+        return { intensity, activeCount, emitRate: hold > 0.02 ? 7.5 - hold * 5.2 : 0 }
+      }
+
       function resize() {
         const width = Math.max(1, window.innerWidth)
         const height = Math.max(1, window.innerHeight)
@@ -651,6 +1070,113 @@ function petHtml3D() {
       window.addEventListener("resize", resize)
       resize()
 
+      function postInteraction(event) {
+        fetch("http://${HOST}:${PORT}/interaction", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({
+            ...event,
+            source: "opencube-renderer",
+            frictionHoldActive,
+            frictionHoldLevel,
+            frictionHoldMultiplier: 1 + frictionHoldLevel,
+          }),
+        }).catch(() => {})
+      }
+
+      function pointerPayload(type, event) {
+        return {
+          type,
+          nativeType: event.type,
+          pointerId: event.pointerId,
+          pointerType: event.pointerType,
+          button: event.button,
+          buttons: event.buttons,
+          screenX: Math.round(event.screenX || 0),
+          screenY: Math.round(event.screenY || 0),
+          clientX: Math.round(event.clientX),
+          clientY: Math.round(event.clientY),
+          altKey: event.altKey,
+          ctrlKey: event.ctrlKey,
+          metaKey: event.metaKey,
+          shiftKey: event.shiftKey,
+          target: "cube",
+        }
+      }
+
+      function beginFrictionHold(event) {
+        if (event.button !== 2) return
+        event.preventDefault()
+        try { hitLayer.setPointerCapture(event.pointerId) } catch {}
+        frictionHoldActive = true
+        postInteraction(pointerPayload("mouse.right.down", event))
+      }
+
+      function endFrictionHold(event) {
+        if (event && event.button !== undefined && event.button !== 2) return
+        if (frictionHoldActive) postInteraction(pointerPayload("mouse.right.up", event || { button: 2, buttons: 0, clientX: 0, clientY: 0 }))
+        frictionHoldActive = false
+      }
+
+      function beginLeftDrag(event) {
+        if (event.button !== 0) return
+        event.preventDefault()
+        try { hitLayer.setPointerCapture(event.pointerId) } catch {}
+        leftDragActive = true
+        ipcRenderer.send("opencube-drag-start", { screenX: event.screenX, screenY: event.screenY })
+      }
+
+      function moveLeftDrag(event) {
+        if (!leftDragActive) return
+        event.preventDefault()
+        ipcRenderer.send("opencube-drag-move", { screenX: event.screenX, screenY: event.screenY })
+      }
+
+      function endLeftDrag(event) {
+        if (!leftDragActive) return
+        leftDragActive = false
+        ipcRenderer.send("opencube-drag-end")
+      }
+
+      function updateFrictionHold(dt) {
+        const growPerSecond = 2.4
+        const recoverPerSecond = 8.0
+        if (frictionHoldActive) {
+          frictionHoldLevel = Math.min(11, frictionHoldLevel + growPerSecond * dt)
+        } else {
+          frictionHoldLevel = Math.max(0, frictionHoldLevel - recoverPerSecond * dt)
+        }
+        return 1 + frictionHoldLevel
+      }
+
+      hitLayer.addEventListener("pointerdown", (event) => {
+        if (event.button === 0) beginLeftDrag(event)
+        if (event.button === 2) beginFrictionHold(event)
+      })
+      hitLayer.addEventListener("pointermove", moveLeftDrag)
+      hitLayer.addEventListener("pointerup", (event) => {
+        if (event.button === 0) endLeftDrag(event)
+        if (event.button === 2) endFrictionHold(event)
+      })
+      hitLayer.addEventListener("pointercancel", (event) => {
+        endLeftDrag(event)
+        endFrictionHold(event)
+      })
+      hitLayer.addEventListener("contextmenu", (event) => {
+        event.preventDefault()
+        postInteraction(pointerPayload("mouse.right.contextmenu", event))
+      })
+      window.addEventListener("keydown", (event) => postInteraction({ type: "keyboard.down", key: event.key, code: event.code, altKey: event.altKey, ctrlKey: event.ctrlKey, metaKey: event.metaKey, shiftKey: event.shiftKey }))
+      window.addEventListener("keyup", (event) => postInteraction({ type: "keyboard.up", key: event.key, code: event.code, altKey: event.altKey, ctrlKey: event.ctrlKey, metaKey: event.metaKey, shiftKey: event.shiftKey }))
+      document.addEventListener("mouseup", endFrictionHold)
+      window.addEventListener("mouseup", endFrictionHold)
+      window.addEventListener("pointerup", endFrictionHold)
+      window.addEventListener("pointercancel", () => endFrictionHold())
+      window.addEventListener("blur", () => {
+        endLeftDrag()
+        endFrictionHold()
+      })
+
       function randomBetween(min, max) {
         return min + Math.random() * (max - min)
       }
@@ -722,6 +1248,8 @@ function petHtml3D() {
       createFace("left", [-0.30, 0, 0], [0, -Math.PI / 2, rad(faceRotations.left || 0)], [-0.314, 0, 0])
       createFace("top", [0, 0.30, 0], [-Math.PI / 2, 0, rad(faceRotations.top || 0)], [0, 0.314, 0])
       createFace("bottom", [0, -0.30, 0], [Math.PI / 2, 0, rad(faceRotations.bottom || 0)], [0, -0.314, 0])
+      createDragParticles()
+      createToolParticles()
 
       function createFace(name, position, rotation, glowPosition) {
         const face = new THREE.Mesh(faceGeometry, iconMaterial.clone())
@@ -746,6 +1274,23 @@ function petHtml3D() {
         glow.rotation.set(...rotation)
         cubeGroup.add(glow)
         glowMeshes.set(name, glow)
+
+        const permissionGlow = new THREE.Mesh(
+          permissionGlowGeometry,
+          new THREE.MeshBasicMaterial({
+            map: glowTexture,
+            color: 0xff2448,
+            transparent: true,
+            opacity: 0,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
+            side: THREE.DoubleSide,
+          }),
+        )
+        permissionGlow.position.set(...glowPosition.map((value) => value === 0 ? 0 : value * 1.055))
+        permissionGlow.rotation.set(...rotation)
+        cubeGroup.add(permissionGlow)
+        permissionGlowMeshes.set(name, permissionGlow)
       }
 
       function magnitude(vector) {
@@ -932,6 +1477,35 @@ function petHtml3D() {
         return active
       }
 
+      function applyPermissionGlowFaces(permissions, now) {
+        const pendingSessionIDs = new Set(
+          (permissions || [])
+            .map((permission) => permission?.sessionID)
+            .filter((sessionID) => typeof sessionID === "string"),
+        )
+        const active = {}
+        const wave = (Math.sin(now * 0.0095) + 1) / 2
+        const pulse = Math.pow(wave, 1.85)
+
+        for (const faceName of faceOrder) {
+          const permissionGlow = permissionGlowMeshes.get(faceName)
+          if (!permissionGlow) continue
+
+          const sessionID = Array.from(pendingSessionIDs).find((id) => sessionFaceMap.get(id) === faceName)
+          if (!sessionID) {
+            permissionGlow.material.opacity = 0
+            continue
+          }
+
+          permissionGlow.material.color.setRGB(1, 0.08, 0.16)
+          permissionGlow.material.opacity = 0.16 + pulse * 0.62
+          permissionGlow.scale.setScalar(1.00 + pulse * 0.34)
+          active[faceName] = { sessionID, pulse, pending: true }
+        }
+
+        return active
+      }
+
       window.__setPetState = setSnapshot
       window.__getPetDebug = () => latestDebug
 
@@ -949,15 +1523,20 @@ function petHtml3D() {
         const busyCount = sessions.filter((session) => session.state === "busy").length
         const isBusy = busyCount > 0
 
-        if (isBusy && !wasBusy) setNextTorque(now)
-        if (isBusy && now >= nextTorqueAt) setNextTorque(now)
-        if (!isBusy) torque = { x: 0, y: 0, z: 0 }
+        // Keep the same randomized torque model in both busy and idle modes.
+        // Busy uses low friction, so the cube accelerates into active motion.
+        // Idle keeps receiving random torque, but high friction turns it into a
+        // subtle breathing/drifting motion instead of stopping completely.
+        if (isBusy !== wasBusy) setNextTorque(now)
+        if (now >= nextTorqueAt) setNextTorque(now)
         wasBusy = isBusy
         stage.classList.toggle("has-busy", isBusy)
         stage.classList.toggle("has-sessions", sessions.length > 0)
 
         const inertia = 1.18
-        const friction = isBusy ? 0.58 : 2.85
+        const baseFriction = isBusy ? 0.58 : 2.85
+        const holdMultiplier = updateFrictionHold(dt)
+        const friction = baseFriction * holdMultiplier
         angularVelocity.x += (torque.x / inertia) * dt
         angularVelocity.y += (torque.y / inertia) * dt
         angularVelocity.z += (torque.z / inertia) * dt
@@ -970,6 +1549,10 @@ function petHtml3D() {
         rotation.x += angularVelocity.x * dt
         rotation.y += angularVelocity.y * dt
         rotation.z += angularVelocity.z * dt
+        cubeGroup.rotation.x = rad(rotation.x)
+        cubeGroup.rotation.y = rad(rotation.y)
+        cubeGroup.rotation.z = rad(rotation.z)
+        cubeGroup.updateMatrixWorld(true)
 
         const speed = magnitude(angularVelocity)
         const speedRatio = Math.min(1, speed / 1400)
@@ -977,25 +1560,42 @@ function petHtml3D() {
         const glowR = Math.round(92 + (0 - 92) * glow)
         const glowG = Math.round(255 + (190 - 255) * glow)
         const glowB = Math.round(232 + (210 - 232) * glow)
+        const dragParticles = updateDragParticles(now, frictionHoldLevel, speed, dt)
         const busyFaces = syncBusyFaces(sessions, speed)
+        const toolParticles = updateToolParticles(sessions, dt, now)
         processSignals(snapshot.signals || [], now)
         const helloFlashes = applyFlashFaces(now)
+        const permissionGlows = applyPermissionGlowFaces(snapshot.permissions || [], now)
         renderCube()
         latestDebug = {
           now: Date.now(),
           busy: busyCount,
+          mode: isBusy ? "busy" : "idle",
+          sessions: sessions.map((session) => ({
+            sessionID: session.sessionID,
+            state: session.state,
+            activeTools: session.activeTools || [],
+          })),
           rotation: { ...rotation },
           angularVelocity: { ...angularVelocity },
           torque: { ...torque },
+          friction,
+          baseFriction,
+          frictionHoldActive,
+          frictionHoldMultiplier: holdMultiplier,
+          frictionHoldLevel,
           speed,
           speedRatio,
           nextTorqueAt,
           glow,
+          dragParticles,
+          toolParticles,
           colorReleaseSpeed,
           glowColor: { r: glowR, g: glowG, b: glowB },
           faceRotations,
           busyFaces,
           helloFlashes,
+          permissionGlows,
         }
         requestAnimationFrame(tick)
       }
@@ -1059,11 +1659,9 @@ function createPetWindow() {
   })
   petWindow.setAlwaysOnTop(true, "floating")
   petWindow.loadFile(writePetHtmlFile())
-  petWindow.webContents.on("context-menu", () => buildMenu().popup({ window: petWindow }))
   petWindow.on("moved", () => {
     const [x, y] = petWindow.getPosition()
     writeState({ visible: true, x, y })
-    positionPanel()
   })
   petWindow.on("closed", () => {
     petWindow = null
@@ -1076,8 +1674,8 @@ function createPanelWindow() {
   if (panelWindow && !panelWindow.isDestroyed()) return panelWindow
 
   panelWindow = new BrowserWindow({
-    width: 360,
-    height: 360,
+    width: 680,
+    height: 420,
     show: false,
     frame: false,
     resizable: false,
@@ -1100,14 +1698,28 @@ function createPanelWindow() {
 }
 
 function positionPanel() {
-  if (!petWindow || petWindow.isDestroyed() || !panelWindow || panelWindow.isDestroyed()) return
-  const [x, y] = petWindow.getPosition()
-  const petBounds = petWindow.getBounds()
+  if (!panelWindow || panelWindow.isDestroyed()) return
   const panelBounds = panelWindow.getBounds()
-  const display = screen.getDisplayNearestPoint({ x, y }).workArea
-  let nextX = x - panelBounds.width - 10
-  let nextY = y
-  if (nextX < display.x) nextX = x + petBounds.width + 10
+  const anchor = tray && !tray.isDestroyed() ? tray.getBounds() : undefined
+  const display = anchor
+    ? screen.getDisplayNearestPoint({ x: anchor.x, y: anchor.y }).workArea
+    : screen.getPrimaryDisplay().workArea
+
+  let nextX = anchor
+    ? Math.round(anchor.x + anchor.width / 2 - panelBounds.width / 2)
+    : display.x + display.width - panelBounds.width - 16
+  let nextY = anchor
+    ? Math.round(anchor.y + anchor.height + 8)
+    : display.y + 36
+
+  // If the menu bar reports a coordinate outside the workArea, keep the panel
+  // as a standalone top-right popover instead of attaching it to the cube.
+  if (!anchor || nextY < display.y || nextY > display.y + display.height) {
+    nextX = display.x + display.width - panelBounds.width - 16
+    nextY = display.y + 36
+  }
+
+  if (nextX < display.x) nextX = display.x + 8
   if (nextX + panelBounds.width > display.x + display.width) nextX = display.x + display.width - panelBounds.width - 8
   if (nextY + panelBounds.height > display.y + display.height) nextY = display.y + display.height - panelBounds.height - 8
   if (nextY < display.y) nextY = display.y + 8
@@ -1115,7 +1727,6 @@ function positionPanel() {
 }
 
 function showPanel() {
-  showPet()
   const win = createPanelWindow()
   updatePanel()
   positionPanel()
@@ -1147,15 +1758,32 @@ function hidePet() {
 
 function buildMenu() {
   return Menu.buildFromTemplate([
-    { label: "Show Pet", click: showPet },
+    { label: "Show OpenCube", click: showPet },
+    { label: "Hide OpenCube", click: hidePet },
+    { type: "separator" },
     { label: "Show Inbox", click: showPanel },
-    { label: "Hide Pet", click: hidePet },
     { label: "Hide Inbox", click: hidePanel },
     { type: "separator" },
-    { label: "Quit Pet", click: () => app.quit() },
+    { label: "Quit OpenCube", click: () => app.quit() },
   ])
 }
 
+function createTray() {
+  if (tray) return tray
+  let image = nativeImage.createFromPath(ICON_PATH)
+  if (image.isEmpty()) {
+    image = nativeImage.createFromDataURL(
+      "data:image/svg+xml;utf8," +
+        encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><rect x="4" y="4" width="24" height="24" rx="6" fill="#111"/><rect x="11" y="8" width="10" height="16" rx="2" fill="#fff"/><rect x="14" y="12" width="5" height="9" rx="1" fill="#111"/></svg>`),
+    )
+  }
+  image = image.resize({ width: 18, height: 18 })
+  tray = new Tray(image)
+  tray.setToolTip("OpenCube")
+  tray.setContextMenu(buildMenu())
+  return tray
+}
+
 function startServer() {
   if (server) return
   server = http.createServer(async (req, res) => {
@@ -1208,6 +1836,12 @@ function startServer() {
         return json(res, 200, { ok: true, event: item })
       }
 
+      if (req.method === "POST" && url.pathname === "/interaction") {
+        const body = await readRequestJson(req)
+        const item = recordInteractionEvent(body)
+        return json(res, 200, { ok: true, event: item })
+      }
+
       if (req.method === "POST" && url.pathname === "/show") {
         showPet()
         return json(res, 200, { ok: true })
@@ -1238,6 +1872,7 @@ function startServer() {
 function start() {
   app.dock?.hide()
   writeState({ visible: false, mode: "floating" })
+  createTray()
   startServer()
   cleanupTimer = setInterval(() => pruneIdleSessions(true), 30 * 1000)
   cleanupTimer.unref?.()

package/src/plugin-server.cjs

@@ -47,6 +47,17 @@ function cubNotice(text, icon = CUB_ICON) {
   return `${icon} ${text}`
 }
 
+function summarizeToolOutput(output) {
+  if (!output || typeof output !== "object") return undefined
+  const text = typeof output.output === "string" ? output.output : undefined
+  return {
+    title: output.title,
+    output: text && text.length > 2000 ? `${text.slice(0, 2000)}…` : text,
+    outputLength: text?.length,
+    metadata: output.metadata,
+  }
+}
+
 module.exports = {
   id: "opencube",
   server: async ({ client }) => {
@@ -128,6 +139,36 @@ module.exports = {
       },
 
       event: async ({ event }) => {
+        if (event.type === "permission.asked") {
+          const permission = event.properties || {}
+          await sendEvent({
+            type: "permission.ask",
+            message: "opencode is waiting for permission",
+            sessionID: permission.sessionID,
+            requestID: permission.id,
+            permission: permission.permission,
+            patterns: permission.patterns,
+            metadata: permission.metadata,
+            always: permission.always,
+            tool: permission.tool,
+            source: "opencube-plugin",
+          })
+          return
+        }
+
+        if (event.type === "permission.replied") {
+          const permission = event.properties || {}
+          await sendEvent({
+            type: "permission.reply",
+            message: "opencode permission was answered",
+            sessionID: permission.sessionID,
+            requestID: permission.requestID,
+            reply: permission.reply,
+            source: "opencube-plugin",
+          })
+          return
+        }
+
         if (event.type !== "session.status") return
 
         const sessionID = event.properties?.sessionID
@@ -164,6 +205,31 @@ module.exports = {
           source: "opencube-plugin",
         })
       },
+
+      "tool.execute.before": async (input, output) => {
+        await sendEvent({
+          type: "tool.start",
+          message: `tool ${input.tool} started`,
+          sessionID: input.sessionID,
+          tool: input.tool,
+          callID: input.callID,
+          args: output?.args,
+          source: "opencube-plugin",
+        })
+      },
+
+      "tool.execute.after": async (input, output) => {
+        await sendEvent({
+          type: "tool.finish",
+          message: `tool ${input.tool} finished`,
+          sessionID: input.sessionID,
+          tool: input.tool,
+          callID: input.callID,
+          args: input.args,
+          result: summarizeToolOutput(output),
+          source: "opencube-plugin",
+        })
+      },
     }
   },
 }