feat: permission & question reply system (#10)

* feat: implement permission and question reply system

Permission prompts (status: "permission") show Allow Once / Always / Deny
buttons in the ask-banner, calling POST /permission/{requestID}/reply.

Question prompts (status: "question") show the question in the banner;
user answers via the composer, which routes to POST /question/{requestID}/reply
instead of the normal message endpoint.

Also handles "question" and "permission" status types in SessionCard,
SessionsScreen, and App so they render correctly alongside existing "ask".

https://claude.ai/code/session_01C5jwLppG6iUepK9TPKzTTH

* fix: route composer send to question reply when status is ask + requestID

Previously only "question" status was routed; "ask" (the more likely
server-returned value) fell through to sendPrompt. Now both "ask" and
"question" with a requestID route to POST /question/{requestID}/reply.
Permission status is handled by buttons only, not the composer.

https://claude.ai/code/session_01C5jwLppG6iUepK9TPKzTTH

* fix: hide composer during permission prompts

Typing does nothing when a permission is pending — only the Allow/Deny
buttons matter. Hiding the composer removes the dead input and keeps
the permission banner as the sole focus.

https://claude.ai/code/session_01C5jwLppG6iUepK9TPKzTTH

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: JasonLow8

web/src/App.tsx

@@ -41,7 +41,7 @@ function App() {
   const connected = sv.connectedVersion !== ""
 
   const isWorking = Boolean(
-    sd.selectedSession && ["busy", "retry", "ask"].includes(sd.selectedSession.status),
+    sd.selectedSession && ["busy", "retry", "ask", "question", "permission"].includes(sd.selectedSession.status),
   )
 
   function openSession(id: string, dir: string) {
@@ -134,6 +134,7 @@ function App() {
           currentAgent={sd.currentAgent}
           primaryAgents={sd.primaryAgents}
           cycleAgent={chat.cycleAgent}
+          replyPermission={chat.replyPermission}
         />
       ) : helpOpen ? (
         <HelpScreen

web/src/api.ts

@@ -185,5 +185,19 @@ export const api = {
       method: "POST",
       body: {}
     })
+  },
+
+  replyPermission(config: ServerConfig, requestID: string, directory: string, reply: "once" | "always" | "reject") {
+    return request<boolean>(config, `/permission/${requestID}/reply`, {
+      method: "POST",
+      body: { directory, reply }
+    })
+  },
+
+  replyQuestion(config: ServerConfig, requestID: string, directory: string, answers: string[]) {
+    return request<boolean>(config, `/question/${requestID}/reply`, {
+      method: "POST",
+      body: { directory, answers }
+    })
   }
 }

web/src/components/SessionCard.tsx

@@ -9,25 +9,30 @@ type Props = {
   selectionMode?: boolean
 }
 
+function isAskLike(status: string) {
+  return status === "ask" || status === "question" || status === "permission"
+}
+
 function getDotColor(status: string): string {
   if (status === "busy" || status === "retry") return "green"
-  if (status === "ask") return "amber"
+  if (isAskLike(status)) return "amber"
   return "gray"
 }
 
 function getCardClass(status: string, selected?: boolean): string {
   const sel = selected ? " selected" : ""
   if (status === "busy" || status === "retry") return `scard running${sel}`
-  if (status === "ask") return `scard ask${sel}`
+  if (isAskLike(status)) return `scard ask${sel}`
   return `scard${sel}`
 }
 
 function renderStatusTag(status: string, statusMessage?: string) {
   if (status === "busy" || status === "retry") {
     return <span className="tag running">running</span>
   }
-  if (status === "ask") {
-    return <span className="tag ask">{statusMessage ?? "awaiting you"}</span>
+  if (isAskLike(status)) {
+    const label = status === "permission" ? "permission" : statusMessage ?? "awaiting you"
+    return <span className="tag ask">{label}</span>
   }
   return <span className="tag idle">idle</span>
 }

web/src/hooks/useChat.ts

@@ -66,6 +66,30 @@ export function useChat(params: {
 
   // ── Actions ─────────────────────────────────────────────────────
 
+  async function replyPermission(requestID: string, reply: "once" | "always" | "reject") {
+    if (!selectedSession) return
+    try {
+      setRuntimeError(null)
+      await api.replyPermission(config, requestID, selectedSession.directory, reply)
+      await refreshSessions()
+      await loadSelected(selectedSession.id, selectedSession.directory)
+    } catch (err) {
+      setRuntimeError((err as Error).message)
+    }
+  }
+
+  async function replyQuestion(requestID: string, text: string) {
+    if (!selectedSession) return
+    try {
+      setRuntimeError(null)
+      await api.replyQuestion(config, requestID, selectedSession.directory, [text])
+      await refreshSessions()
+      await loadSelected(selectedSession.id, selectedSession.directory)
+    } catch (err) {
+      setRuntimeError((err as Error).message)
+    }
+  }
+
   async function send() {
     if (!selectedSession) return
     const text = composer.trim()
@@ -74,6 +98,15 @@ export function useChat(params: {
     setSlashOpen(false)
     if (textareaRef.current) textareaRef.current.style.height = "auto"
 
+    // If awaiting a question reply, route through the question endpoint.
+    // Covers both "question" (specific) and "ask" (generic) when a requestID is present.
+    // "permission" is handled by buttons only — user shouldn't be typing.
+    const isQuestionState = (selectedSession.status === "question" || selectedSession.status === "ask") && selectedSession.requestID
+    if (isQuestionState) {
+      await replyQuestion(selectedSession.requestID!, text)
+      return
+    }
+
     setBusySending(true)
     setRuntimeError(null)
     try {
@@ -240,6 +273,8 @@ export function useChat(params: {
     cycleAgent,
     cycleVariant,
     abortSession,
-    selectModel
+    selectModel,
+    replyPermission,
+    replyQuestion
   }
 }

web/src/hooks/useServerData.ts

@@ -141,6 +141,7 @@ export function useServerData(config: ServerConfig) {
           updated: session.time.updated,
           status: statuses[session.id]?.type ?? "idle",
           statusMessage: statuses[session.id]?.message,
+          requestID: statuses[session.id]?.requestID,
           files: session.summary?.files ?? 0,
           additions: session.summary?.additions ?? 0,
           deletions: session.summary?.deletions ?? 0

web/src/screens/ChatScreen.tsx

@@ -65,6 +65,7 @@ type ChatScreenProps = {
   currentAgent: string | null
   primaryAgents: AgentInfo[]
   cycleAgent: () => void
+  replyPermission: (requestID: string, reply: "once" | "always" | "reject") => Promise<void>
 }
 
 export default function ChatScreen({
@@ -101,12 +102,15 @@ export default function ChatScreen({
   cycleVariant,
   currentAgent,
   primaryAgents,
-  cycleAgent
+  cycleAgent,
+  replyPermission
 }: ChatScreenProps) {
   const chatSub = selectedSession?.directory ?? ""
 
   const isRunning = selectedSession?.status === "busy" || selectedSession?.status === "retry"
-  const isAsking = selectedSession?.status === "ask"
+  const isPermission = selectedSession?.status === "permission"
+  const isQuestion = selectedSession?.status === "ask" || selectedSession?.status === "question"
+  const isAsking = isPermission || isQuestion
 
   return (
     <div className="app-screen">
@@ -244,8 +248,29 @@ export default function ChatScreen({
         )}
       </div>
 
-      {/* Permission prompt banner */}
-      {isAsking && (
+      {/* Permission banner */}
+      {isPermission && selectedSession?.requestID && (
+        <div className="ask-banner ask-banner-permission">
+          <div className="ask-banner-msg">
+            <i className="ti ti-shield-question"></i>
+            <span>{selectedSession.statusMessage ?? "Permission required"}</span>
+          </div>
+          <div className="ask-banner-actions">
+            <button className="perm-btn allow-once" onClick={() => replyPermission(selectedSession.requestID!, "once")}>
+              Allow once
+            </button>
+            <button className="perm-btn allow-always" onClick={() => replyPermission(selectedSession.requestID!, "always")}>
+              Always
+            </button>
+            <button className="perm-btn deny" onClick={() => replyPermission(selectedSession.requestID!, "reject")}>
+              Deny
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Question / generic ask banner */}
+      {isQuestion && (
         <div className="ask-banner">
           <i className="ti ti-help-circle"></i>
           <span>{selectedSession?.statusMessage ?? "Opencode is awaiting your response"}</span>
@@ -311,8 +336,8 @@ export default function ChatScreen({
         </div>
       )}
 
-      {/* Composer */}
-      {selectedSession && (
+      {/* Composer — hidden during permission prompts since only buttons are needed */}
+      {selectedSession && !isPermission && (
         <Composer
           composer={composer}
           setComposer={setComposer}

web/src/screens/SessionsScreen.tsx

@@ -129,8 +129,8 @@ export default function SessionsScreen({
     const normalizeTime = (updated: number) => (updated < 1_000_000_000_000 ? updated * 1000 : updated)
 
     const busy = filteredSessions.filter((s) => s.status === "busy" || s.status === "retry")
-    const actionRequired = filteredSessions.filter((s) => s.status === "ask")
-    const rest = filteredSessions.filter((s) => s.status !== "busy" && s.status !== "retry" && s.status !== "ask")
+    const actionRequired = filteredSessions.filter((s) => s.status === "ask" || s.status === "question" || s.status === "permission")
+    const rest = filteredSessions.filter((s) => s.status !== "busy" && s.status !== "retry" && s.status !== "ask" && s.status !== "question" && s.status !== "permission")
 
     const sections: Array<{ label: string; sessions: SessionView[] }> = []
     if (busy.length > 0) sections.push({ label: `Busy · ${busy.length}`, sessions: busy })

web/src/styles.css

@@ -696,6 +696,52 @@ input, textarea, button, select {
   margin-top: 1px;
 }
 
+.ask-banner-permission {
+  flex-direction: column;
+  gap: 10px;
+}
+
+.ask-banner-msg {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.ask-banner-actions {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.perm-btn {
+  padding: 5px 12px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: opacity var(--transition-fast);
+}
+.perm-btn:active {
+  opacity: 0.75;
+}
+.perm-btn.allow-once {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+.perm-btn.allow-always {
+  background: transparent;
+  color: var(--accent);
+  border-color: var(--accent);
+}
+.perm-btn.deny {
+  background: transparent;
+  color: var(--danger);
+  border-color: var(--danger);
+}
+
 .stop-btn {
   width: 28px;
   height: 28px;

web/src/types.ts

@@ -30,6 +30,7 @@ export type SessionStatus = {
   attempt?: number
   message?: string
   next?: number
+  requestID?: string
 }
 
 export type ToolStatePending = {
@@ -153,6 +154,7 @@ export type SessionView = {
   updated: number
   status: string
   statusMessage?: string
+  requestID?: string
   files: number
   additions: number
   deletions: number