From 9887b258645103761fad4d7f16197740c6614046 Mon Sep 17 00:00:00 2001
From: aptdnfapt <197602950+aptdnfapt@users.noreply.github.com>
Date: Sat, 3 Jan 2026 16:07:08 -0500
Subject: [PATCH] Add permission asking UI and subAgent session navigation
 footer  (#101)

* feat: add support for OpenCode permission.asked event

Implement UI handling for the new permission.asked event from OpenCode's
PermissionNext system, allowing tools configured with "ask" in opencode.json
to prompt user for approval.

Changes:
- Add permission.asked event handler in useEventStream
- Add patterns[] and always[] fields to Permission type
- Display patterns being requested in PermissionCard
- Show what "Always Allow" will auto-approve

This enables the permission asking feature where tools can require user
approval based on opencode.json configuration.

* feat: add button to open subAgent session from task tool

When an agent uses the task tool to create a subagent session,
a new "Open subAgent session" button is now displayed next to
the task tool output. Clicking this button navigates to the
child session in the chat view.

The button shows only when a sessionId is available in the task
metadata and uses the external link icon to indicate it opens
a separate session context.
---
 .../ui/src/components/chat/PermissionCard.tsx | 94 ++++++++++++++-----
 .../chat/message/parts/ToolPart.tsx           | 42 +++++++--
 packages/ui/src/hooks/useEventStream.ts       | 38 +++++++-
 packages/ui/src/types/permission.ts           |  6 ++
 4 files changed, 151 insertions(+), 29 deletions(-)

diff --git a/packages/ui/src/components/chat/PermissionCard.tsx b/packages/ui/src/components/chat/PermissionCard.tsx
index c882f48f..5e9cefce 100644
--- a/packages/ui/src/components/chat/PermissionCard.tsx
+++ b/packages/ui/src/components/chat/PermissionCard.tsx
@@ -329,7 +329,26 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
 
           {}
           <div className="px-2 py-2">
-            {}
+            {/* Show patterns being requested */}
+            {(permission.patterns as string[]) && (permission.patterns as string[]).length > 0 && (
+              <div className="mb-2">
+                <div className="typography-meta text-muted-foreground mb-1">Patterns:</div>
+                <code className="typography-meta px-2 py-1 bg-muted/30 rounded block break-all">
+                  {(permission.patterns as string[]).join(", ")}
+                </code>
+              </div>
+            )}
+
+            {!((permission.patterns as string[]) && (permission.patterns as string[]).length > 0) &&
+             (permission.pattern as string | string[]) &&
+             <div className="mb-2">
+               <div className="typography-meta text-muted-foreground mb-1">Pattern:</div>
+               <code className="typography-meta px-2 py-1 bg-muted/30 rounded block break-all">
+                 {Array.isArray(permission.pattern) ? permission.pattern.join(", ") : permission.pattern}
+               </code>
+             </div>
+            }
+
             {(() => {
 
               let primaryContent = '';
@@ -441,27 +460,58 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
               Allow Once
             </button>
 
-            <button
-              onClick={() => handleResponse('always')}
-              disabled={isResponding}
-              className={cn(
-                "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded transition-all",
-                "disabled:opacity-50 disabled:cursor-not-allowed"
-              )}
-              style={{
-                backgroundColor: 'rgb(var(--muted) / 0.5)',
-                color: 'var(--muted-foreground)'
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor = 'rgb(var(--muted) / 0.7)';
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = 'rgb(var(--muted) / 0.5)';
-              }}
-            >
-              <RiTimeLine className="h-3 w-3" />
-              Always Allow
-            </button>
+            {(permission.always as string[]) && (permission.always as string[]).length > 0 ? (
+              <button
+                onClick={() => handleResponse('always')}
+                disabled={isResponding}
+                className={cn(
+                  "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded transition-all",
+                  "disabled:opacity-50 disabled:cursor-not-allowed"
+                )}
+                style={{
+                  backgroundColor: 'rgb(var(--muted) / 0.5)',
+                  color: 'var(--muted-foreground)'
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.backgroundColor = 'rgb(var(--muted) / 0.7)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.backgroundColor = 'rgb(var(--muted) / 0.5)';
+                }}
+              >
+                <RiTimeLine className="h-3 w-3" />
+                {(() => {
+                  const always = (permission.always as string[]) || (permission.metadata.always as string[]) || [];
+                  if (always.length === 0) return "Always Allow";
+                  const displayPatterns = always.slice(0, 2);
+                  const text = displayPatterns.join(", ");
+                  const hasMore = always.length > 2;
+                  return hasMore ? `Always: ${text}...` : `Always: ${text}`;
+                })()}
+              </button>
+            ) : (
+              <button
+                onClick={() => handleResponse('always')}
+                disabled={isResponding}
+                className={cn(
+                  "flex items-center gap-1 px-2 py-1 typography-meta font-medium rounded transition-all",
+                  "disabled:opacity-50 disabled:cursor-not-allowed"
+                )}
+                style={{
+                  backgroundColor: 'rgb(var(--muted) / 0.5)',
+                  color: 'var(--muted-foreground)'
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.backgroundColor = 'rgb(var(--muted) / 0.7)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.backgroundColor = 'rgb(var(--muted) / 0.5)';
+                }}
+              >
+                <RiTimeLine className="h-3 w-3" />
+                Always Allow
+              </button>
+            )}
 
             <button
               onClick={() => handleResponse('reject')}
diff --git a/packages/ui/src/components/chat/message/parts/ToolPart.tsx b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
index a0d473e6..d371118c 100644
--- a/packages/ui/src/components/chat/message/parts/ToolPart.tsx
+++ b/packages/ui/src/components/chat/message/parts/ToolPart.tsx
@@ -1,7 +1,7 @@
 
 import React from 'react';
 import { RuntimeAPIContext } from '@/contexts/runtimeAPIContext';
-import { RiArrowDownSLine, RiArrowRightSLine, RiBookLine, RiFileEditLine, RiFileSearchLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGlobalLine, RiListCheck3, RiMenuSearchLine, RiPencilLine, RiTerminalBoxLine, RiToolsLine } from '@remixicon/react';
+import { RiArrowDownSLine, RiArrowRightSLine, RiBookLine, RiExternalLinkLine, RiFileEditLine, RiFileSearchLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGlobalLine, RiListCheck3, RiMenuSearchLine, RiPencilLine, RiTerminalBoxLine, RiToolsLine } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import { SimpleMarkdownRenderer } from '../../MarkdownRenderer';
 import { getToolMetadata, getLanguageFromExtension, isImageFile, getImageMimeType } from '@/lib/toolHelpers';
@@ -9,6 +9,7 @@ import type { ToolPart as ToolPartType, ToolState as ToolStateUnion } from '@ope
 import { toolDisplayStyles } from '@/lib/typography';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
+import { useSessionStore } from '@/stores/useSessionStore';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
 
@@ -240,7 +241,9 @@ const TaskToolSummary: React.FC<{
     hasPrevTool: boolean;
     hasNextTool: boolean;
     output?: string;
-}> = ({ entries, isExpanded, hasPrevTool, hasNextTool, output }) => {
+    sessionId?: string;
+}> = ({ entries, isExpanded, hasPrevTool, hasNextTool, output, sessionId }) => {
+    const setCurrentSession = useSessionStore((state) => state.setCurrentSession);
     const completedEntries = React.useMemo(() => {
         return entries.filter((entry) => entry.state?.status === 'completed');
     }, [entries]);
@@ -251,7 +254,14 @@ const TaskToolSummary: React.FC<{
     const hasOutput = trimmedOutput.length > 0;
     const [isOutputExpanded, setIsOutputExpanded] = React.useState(false);
 
-    if (completedEntries.length === 0 && !hasOutput) {
+    const handleOpenSession = (event: React.MouseEvent) => {
+        event.stopPropagation();
+        if (sessionId) {
+            setCurrentSession(sessionId);
+        }
+    };
+
+    if (completedEntries.length === 0 && !hasOutput && !sessionId) {
         return null;
     }
 
@@ -292,8 +302,20 @@ const TaskToolSummary: React.FC<{
                 </ToolScrollableSection>
             ) : null}
 
+            {sessionId && (
+                <button
+                    type="button"
+                    className="flex items-center gap-2 typography-meta text-primary hover:text-primary/80 w-full"
+                    onPointerDown={(event) => event.stopPropagation()}
+                    onClick={handleOpenSession}
+                >
+                    <RiExternalLinkLine className="h-3.5 w-3.5 flex-shrink-0" />
+                    <span className="typography-meta text-primary font-medium">Open subAgent session</span>
+                </button>
+            )}
+
             {hasOutput ? (
-                <div className={cn('space-y-1', completedEntries.length > 0 && 'pt-1')}
+                <div className={cn('space-y-1', (completedEntries.length > 0 || sessionId) && 'pt-1')}
                 >
                     <button
                         type="button"
@@ -311,7 +333,6 @@ const TaskToolSummary: React.FC<{
                         )}
                         <span className="typography-meta text-foreground/80 font-medium">Output</span>
                     </button>
-
                     {isOutputExpanded ? (
                         <ToolScrollableSection maxHeightClass="max-h-[50vh]">
                             <div className="w-full min-w-0">
@@ -895,6 +916,14 @@ const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxT
     const effectiveTimeStart = isTaskTool ? (pinnedTaskTimeRef.current.start ?? time?.start) : time?.start;
     const effectiveTimeEnd = isTaskTool ? (pinnedTaskTimeRef.current.end ?? time?.end) : time?.end;
 
+    const taskSessionId = React.useMemo<string | undefined>(() => {
+        if (!isTaskTool) {
+            return undefined;
+        }
+        const candidate = metadata as { sessionId?: string } | undefined;
+        return typeof candidate?.sessionId === 'string' ? candidate.sessionId : undefined;
+    }, [isTaskTool, metadata]);
+
     const taskSummaryEntries = React.useMemo<TaskToolSummaryEntry[]>(() => {
         if (!isTaskTool) {
             return [];
@@ -1023,13 +1052,14 @@ const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxT
             </div>
 
             {}
-            {isTaskTool && (taskSummaryEntries.length > 0 || isActive || isFinalized) ? (
+            {isTaskTool && (taskSummaryEntries.length > 0 || isActive || isFinalized || taskSessionId) ? (
                 <TaskToolSummary
                     entries={taskSummaryEntries}
                     isExpanded={isExpanded}
                     hasPrevTool={hasPrevTool}
                     hasNextTool={hasNextTool}
                     output={typeof stateWithData.output === 'string' ? stateWithData.output : undefined}
+                    sessionId={taskSessionId}
                 />
             ) : null}
 
diff --git a/packages/ui/src/hooks/useEventStream.ts b/packages/ui/src/hooks/useEventStream.ts
index e6d596fc..545961af 100644
--- a/packages/ui/src/hooks/useEventStream.ts
+++ b/packages/ui/src/hooks/useEventStream.ts
@@ -955,8 +955,44 @@ export const useEventStream = () => {
         }
         break;
 
-      case 'permission.replied':
+      case 'permission.asked':
+        // New permission system from OpenCode's PermissionNext
+        if ('sessionID' in props && props.sessionID === currentSessionId) {
+          const askedProps = props as {
+            id: string;
+            permission: string;
+            sessionID: string;
+            patterns?: string[];
+            always?: string[];
+            metadata: Record<string, unknown>;
+            tool?: {
+              messageID: string;
+              callID: string;
+            };
+          };
 
+          // Convert new permission.asked event format to Permission type
+          const permission = {
+            id: askedProps.id,
+            type: askedProps.permission,
+            pattern: askedProps.patterns, // Map patterns to pattern field for compatibility
+            sessionID: askedProps.sessionID,
+            messageID: askedProps.tool?.messageID || askedProps.sessionID,
+            callID: askedProps.tool?.callID,
+            title: `${askedProps.permission} permission required`,
+            metadata: {
+              ...askedProps.metadata,
+              always: askedProps.always, // Store always in metadata for UI access
+              patterns: askedProps.patterns,
+            },
+            time: { created: Date.now() },
+          } as unknown as Permission;
+          addPermission(permission);
+        }
+        break;
+
+      case 'permission.replied':
+        // Permission was responded to - UI will update via permissionStore
         break;
 
       case 'todo.updated': {
diff --git a/packages/ui/src/types/permission.ts b/packages/ui/src/types/permission.ts
index 9d2a650a..1f157cb6 100644
--- a/packages/ui/src/types/permission.ts
+++ b/packages/ui/src/types/permission.ts
@@ -2,6 +2,8 @@ export interface Permission {
   id: string;
   type: string;
   pattern?: string | string[];
+  patterns?: string[];  // New system: array of specific patterns requesting approval
+  always?: string[];    // New system: what will be auto-approved on "always" click
   sessionID: string;
   messageID: string;
   callID?: string;
@@ -10,6 +12,10 @@ export interface Permission {
   time: {
     created: number;
   };
+  tool?: {
+    messageID: string;
+    callID: string;
+  };
 }
 
 export interface PermissionEvent {