feat(web-shell): manage pairing approvals

packages/web-shell/client/components/channels/ChannelEditorDialog.test.tsx

@@ -57,6 +57,15 @@ const INSTANCE: DaemonChannelInstanceSnapshot = {
   runtime: { state: 'stopped' },
 };
 
+const PAIRING_INSTANCE: DaemonChannelInstanceSnapshot = {
+  ...INSTANCE,
+  config: {
+    ...INSTANCE.config,
+    senderPolicy: 'pairing',
+    allowedUsers: ['configured-user'],
+  },
+};
+
 const { ChannelEditorDialog } = await import('./ChannelEditorDialog');
 const { I18nProvider } = await import('../../i18n');
 
@@ -79,6 +88,8 @@ async function renderDialog(
           onReload={vi.fn().mockResolvedValue(undefined)}
           listPairingRequests={vi.fn().mockResolvedValue({ requests: [] })}
           approvePairingRequest={vi.fn()}
+          listPairingApprovals={vi.fn().mockResolvedValue({ senderIds: [] })}
+          revokePairingApproval={vi.fn()}
           {...props}
         />
       </I18nProvider>,
@@ -237,4 +248,22 @@ describe('ChannelEditorDialog', () => {
     );
     expect(document.querySelector('[role="dialog"]')).not.toBeNull();
   });
+
+  it('shows the configured allowlist for a pairing Channel and hides it without one', async () => {
+    await renderDialog({ instance: PAIRING_INSTANCE });
+
+    expect(document.body.textContent).toContain('Configured allowlist');
+    expect(document.body.textContent).toContain('configured-user');
+  });
+
+  it('does not show the allowlist alert when no users are configured', async () => {
+    const pairingNoAllowlist: DaemonChannelInstanceSnapshot = {
+      ...INSTANCE,
+      config: { ...INSTANCE.config, senderPolicy: 'pairing' },
+    };
+    await renderDialog({ instance: pairingNoAllowlist });
+
+    expect(document.body.textContent).toContain('Pairing approvals');
+    expect(document.body.textContent).not.toContain('Configured allowlist');
+  });
 });

packages/web-shell/client/components/channels/ChannelEditorDialog.tsx

@@ -16,7 +16,9 @@ import type {
   DaemonChannelConfigFieldDescriptor,
   DaemonChannelInstanceSnapshot,
   DaemonChannelPairingApprovalResult,
+  DaemonChannelPairingApprovalsSnapshot,
   DaemonChannelPairingRequestsSnapshot,
+  DaemonChannelPairingRevocationResult,
   DaemonChannelTypeDescriptor,
   DaemonChannelUpsertRequest,
 } from '@qwen-code/sdk/daemon';
@@ -95,6 +97,20 @@ export interface ChannelEditorDialogProps {
     name: string,
     code: string,
   ) => Promise<DaemonChannelPairingApprovalResult>;
+  listPairingApprovals: (
+    name: string,
+  ) => Promise<DaemonChannelPairingApprovalsSnapshot>;
+  revokePairingApproval: (
+    name: string,
+    senderId: string,
+  ) => Promise<DaemonChannelPairingRevocationResult>;
+}
+
+function configuredAllowedUsers(instance?: DaemonChannelInstanceSnapshot) {
+  const value = instance?.config['allowedUsers'];
+  return Array.isArray(value)
+    ? value.filter((item): item is string => typeof item === 'string')
+    : [];
 }
 
 function FieldShell({
@@ -146,6 +162,8 @@ export function ChannelEditorDialog({
   onReload,
   listPairingRequests,
   approvePairingRequest,
+  listPairingApprovals,
+  revokePairingApproval,
 }: ChannelEditorDialogProps) {
   const { t } = useI18n();
   const formId = useId();
@@ -537,6 +555,9 @@ export function ChannelEditorDialog({
                     channelName={instance.name}
                     listRequests={listPairingRequests}
                     approveRequest={approvePairingRequest}
+                    listApprovals={listPairingApprovals}
+                    revokeApproval={revokePairingApproval}
+                    staticAllowedUsers={configuredAllowedUsers(instance)}
                   />
                 ) : (
                   <Alert>

packages/web-shell/client/components/channels/ChannelPairingRequests.module.css

@@ -35,6 +35,12 @@
   gap: 4px;
 }
 
+.divider {
+  height: 1px;
+  margin-block: 2px;
+  background: var(--border);
+}
+
 .success {
   display: flex;
   align-items: center;
@@ -91,6 +97,44 @@
   background: var(--card);
 }
 
+.approval {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 9px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--card);
+}
+
+.approvalIdentity {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.approvalIdentity > svg {
+  width: 15px;
+  height: 15px;
+  flex: 0 0 auto;
+  color: var(--muted-foreground);
+}
+
+.approvalSenderId,
+.allowlist {
+  overflow-wrap: anywhere;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.allowlist {
+  display: block;
+  margin-top: 5px;
+  color: var(--foreground);
+}
+
 .requestIdentity {
   display: flex;
   min-width: 0;
@@ -133,4 +177,9 @@
   .requestIdentity {
     grid-column: 1 / -1;
   }
+
+  .approval {
+    align-items: flex-start;
+    flex-direction: column;
+  }
 }