feat(web-shell): manage Channel pairing requests

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

@@ -77,6 +77,8 @@ async function renderDialog(
           onOpenChange={vi.fn()}
           onSave={vi.fn().mockResolvedValue(undefined)}
           onReload={vi.fn().mockResolvedValue(undefined)}
+          listPairingRequests={vi.fn().mockResolvedValue({ requests: [] })}
+          approvePairingRequest={vi.fn()}
           {...props}
         />
       </I18nProvider>,
@@ -179,6 +181,15 @@ describe('ChannelEditorDialog', () => {
     });
   });
 
+  it('explains that pairing requests appear after a new Channel is saved', async () => {
+    await renderDialog();
+
+    expect(document.body.textContent).toContain('Save pairing mode first');
+    expect(document.body.textContent).toContain(
+      'Pending requests will appear here after this Channel is saved in pairing mode.',
+    );
+  });
+
   it('keeps the dialog open and offers a reload after a stale write', async () => {
     const onSave = vi
       .fn()

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

@@ -15,6 +15,8 @@ import { CheckCircle2Icon, KeyRoundIcon } from 'lucide-react';
 import type {
   DaemonChannelConfigFieldDescriptor,
   DaemonChannelInstanceSnapshot,
+  DaemonChannelPairingApprovalResult,
+  DaemonChannelPairingRequestsSnapshot,
   DaemonChannelTypeDescriptor,
   DaemonChannelUpsertRequest,
 } from '@qwen-code/sdk/daemon';
@@ -43,6 +45,7 @@ import {
 import { Spinner } from '../ui/spinner';
 import { Switch } from '../ui/switch';
 import styles from './ChannelEditorDialog.module.css';
+import { ChannelPairingRequests } from './ChannelPairingRequests';
 import {
   buildChannelUpsertRequest,
   createChannelEditorDraft,
@@ -85,6 +88,13 @@ export interface ChannelEditorDialogProps {
     request: DaemonChannelUpsertRequest,
   ) => Promise<unknown>;
   onReload: () => Promise<unknown>;
+  listPairingRequests: (
+    name: string,
+  ) => Promise<DaemonChannelPairingRequestsSnapshot>;
+  approvePairingRequest: (
+    name: string,
+    code: string,
+  ) => Promise<DaemonChannelPairingApprovalResult>;
 }
 
 function FieldShell({
@@ -134,6 +144,8 @@ export function ChannelEditorDialog({
   onOpenChange,
   onSave,
   onReload,
+  listPairingRequests,
+  approvePairingRequest,
 }: ChannelEditorDialogProps) {
   const { t } = useI18n();
   const formId = useId();
@@ -519,6 +531,25 @@ export function ChannelEditorDialog({
                   {errors['senderPolicy']}
                 </p>
               ) : null}
+              {draft.senderPolicy === 'pairing' ? (
+                instance?.config.senderPolicy === 'pairing' ? (
+                  <ChannelPairingRequests
+                    channelName={instance.name}
+                    listRequests={listPairingRequests}
+                    approveRequest={approvePairingRequest}
+                  />
+                ) : (
+                  <Alert>
+                    <KeyRoundIcon />
+                    <AlertTitle>
+                      {t('channels.editor.pairing.saveFirst.title')}
+                    </AlertTitle>
+                    <AlertDescription>
+                      {t('channels.editor.pairing.saveFirst.description')}
+                    </AlertDescription>
+                  </Alert>
+                )
+              ) : null}
             </section>
           </div>
           <DialogFooter className="mt-4">

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

@@ -0,0 +1,136 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: color-mix(in srgb, var(--muted) 34%, transparent);
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.title {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.description,
+.emptyDescription {
+  margin-top: 2px;
+  color: var(--muted-foreground);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.headerActions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+}
+
+.success {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 10px;
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--primary) 8%, transparent);
+  color: var(--foreground);
+  font-size: 12px;
+}
+
+.success svg {
+  width: 14px;
+  height: 14px;
+  color: var(--primary);
+}
+
+.empty {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-md);
+  background: var(--card);
+}
+
+.empty > svg {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  color: var(--muted-foreground);
+}
+
+.emptyTitle {
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.request {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--card);
+}
+
+.requestIdentity {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.senderName {
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.senderId,
+.requestTime {
+  overflow: hidden;
+  color: var(--muted-foreground);
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.code {
+  padding: 5px 7px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+}
+
+@media (max-width: 520px) {
+  .request {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .requestIdentity {
+    grid-column: 1 / -1;
+  }
+}