@shendeguize/dsh-agent-sidecar 0.1.0 → 0.2.0

package/src/client/inject/InjectPanel.tsx

@@ -1,38 +1,18 @@
-/**
- * Inject panel (design §5.1 view 3): the two-phase confirmation UI for
- * message injection. Fully controlled and presentational — the component
- * does NO data fetching; the integration layer supplies `onPrepare` /
- * `onExecute` callbacks that speak to `POST <prefix>/action` and resolve
- * with either the wire success shape or the data layer's normalized
- * ApiError (matched structurally, never imported).
- *
- * Three zones, driven by the pure reducer in ./logic.ts:
- *
- * 1. editor  — message textarea + live UTF-8 byte counter, queue/steer mode
- *    radios, target row, cursor-cli process-list warning (§4.d/S7) and the
- *    audit-fingerprint note (§5.3);
- * 2. confirm — the prepare plan (live target-status snapshot + message
- *    digest), the 60s confirmToken countdown, and the deliberately
- *    restrained danger button;
- * 3. result  — delivered / failed (re-prepare offered) / unknown (terminal:
- *    the reducer itself refuses a reset, so no retry affordance can exist —
- *    S6 — and the copy points at the session to verify).
- *
- * `capability.inject === false` disables the whole panel with the
- * "enable injection in Settings" note.
- */
-
+import { Button, Pill } from '@deepseek-ai/dsh-client-ui-primitives'
 import { useEffect, useId, useReducer, useState } from 'react'
 import type { ReactNode } from 'react'
 import { t as defaultT } from '../locales/index.ts'
 import type { SidecarLocaleKey } from '../locales/index.ts'
+import { surfaceProps } from '../theme/parts.ts'
 import css from './inject.module.css'
 import {
   byteUsage,
   classifyExecuteResponse,
+  classifyPanelKey,
   classifyPrepareResponse,
   deriveEditorGate,
   errorCopy,
+  isDeliveredResult,
   initialPanelState,
   messageInvalidCopy,
   MODE_COPY,
@@ -82,6 +62,12 @@ export interface InjectPanelProps {
   onExecute(req: PanelExecuteRequest): Promise<InjectResultView | ApiErrorLike>
   /** Close/dismiss the panel (the hosting modal owns the lifecycle). */
   onClose?(): void
+  /**
+   * UX-05 observation loop: when given, the delivered result page offers a
+   * 「开启监听观察反应」 button (the host typically enables listen mode on
+   * the detail timeline and closes the panel).
+   */
+  onObserve?(): void
   /** Clock injection for the token countdown; defaults to Date.now. */
   nowMs?: () => number
   /** Locale seat override; defaults to the module-local table. */
@@ -95,10 +81,6 @@ function renderCopy(t: InjectTranslate, copy: CopyRef): string {
   return t(copy.key, copy.params)
 }
 
-// ---------------------------------------------------------------------------
-// Zone building blocks.
-// ---------------------------------------------------------------------------
-
 interface WarningsProps {
   t: InjectTranslate
   agent: string | null
@@ -133,7 +115,7 @@ function PlanBox(props: PlanBoxProps): ReactNode {
       <div className={css['planRow']}>
         <span className={css['planKey']}>{t('inject.planTargetLabel')}</span>
         <span className={css['planValue']}>
-          <span className={css['agentTag']}>{plan.target.agent}</span>
+          <Pill className={css['agentTag']}>{plan.target.agent}</Pill>
           <span className={css['planTitle']} title={plan.target.sessionId}>{targetName}</span>
         </span>
       </div>
@@ -157,15 +139,6 @@ function PlanBox(props: PlanBoxProps): ReactNode {
   )
 }
 
-// ---------------------------------------------------------------------------
-// Panel.
-// ---------------------------------------------------------------------------
-
-/**
- * Render the two-phase inject panel.
- * @param props - capability, target, and the integration callbacks.
- * @returns the panel.
- */
 export function InjectPanel(props: InjectPanelProps): ReactNode {
   const t = props.t ?? defaultT
   const now = props.nowMs ?? Date.now
@@ -240,18 +213,44 @@ export function InjectPanel(props: InjectPanelProps): ReactNode {
     dispatch(event)
   }
 
+  // Keyboard affordances (UX-10): Esc closes in every zone; Cmd/Ctrl+Enter
+  // triggers PREPARE only (classifyPanelKey refuses everything else, so no
+  // keyboard path can shortcut the explicit confirm click).
+  const handleKeyDown = (event: {
+    key: string
+    metaKey: boolean
+    ctrlKey: boolean
+    stopPropagation(): void
+    preventDefault(): void
+  }): void => {
+    const intent = classifyPanelKey({
+      key: event.key,
+      metaKey: event.metaKey,
+      ctrlKey: event.ctrlKey,
+      phase: state.phase,
+      canPrepare: gate.canPrepare,
+    })
+    if (intent === 'close' && props.onClose !== undefined) {
+      event.stopPropagation()
+      props.onClose()
+    } else if (intent === 'prepare') {
+      event.preventDefault()
+      void handlePrepare()
+    }
+  }
+
+  const panelSurface = surfaceProps('inject-panel', css['panel'])
   const closeButton = props.onClose !== undefined
     ? (
-      <button type="button" className={css['btn']} onClick={props.onClose}>
+      <Button type="button" size="sm" variant="outline" onClick={props.onClose}>
         {t('inject.close')}
-      </button>
+      </Button>
     )
     : null
 
-  // ── whole-panel gate: injection capability off ─────────────────────────
   if (!props.capability.inject) {
     return (
-      <section className={css['panel']} aria-label={t('inject.title')}>
+      <section {...panelSurface} aria-label={t('inject.title')} onKeyDown={handleKeyDown}>
         <header className={css['header']}>
           <h3 className={css['title']}>{t('inject.title')}</h3>
         </header>
@@ -265,7 +264,6 @@ export function InjectPanel(props: InjectPanelProps): ReactNode {
     )
   }
 
-  // ── zone 3: result ──────────────────────────────────────────────────────
   if (state.phase === 'result') {
     const { result } = state
     const actions = resultActions(result.outcome)
@@ -275,7 +273,7 @@ export function InjectPanel(props: InjectPanelProps): ReactNode {
         ? css['resultFail']
         : css['resultUnknown']
     return (
-      <section className={css['panel']} aria-label={t('inject.title')}>
+      <section {...panelSurface} aria-label={t('inject.title')} onKeyDown={handleKeyDown}>
         <header className={css['header']}>
           <h3 className={css['title']}>{t('inject.title')}</h3>
         </header>
@@ -293,26 +291,41 @@ export function InjectPanel(props: InjectPanelProps): ReactNode {
             : null}
           <div className={css['footer']}>
             {closeButton}
+            {isDeliveredResult(result) && props.onObserve !== undefined
+              ? (
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="primary"
+                  onClick={props.onObserve}
+                  data-testid="agent-sidecar-inject-observe"
+                >
+                  {t('inject.observeListen')}
+                </Button>
+              )
+              : null}
             {actions.canReprepare
               ? (
-                <button
+                <Button
                   type="button"
-                  className={css['btnPrimary']}
+                  size="sm"
+                  variant="primary"
                   onClick={() => { dispatch({ type: 'RESET' }) }}
                 >
                   {t('inject.reprepare')}
-                </button>
+                </Button>
               )
               : null}
             {result.outcome === 'delivered' && props.onClose === undefined
               ? (
-                <button
+                <Button
                   type="button"
-                  className={css['btnPrimary']}
+                  size="sm"
+                  variant="primary"
                   onClick={() => { dispatch({ type: 'RESET' }) }}
                 >
                   {t('inject.done')}
-                </button>
+                </Button>
               )
               : null}
           </div>
@@ -321,14 +334,17 @@ export function InjectPanel(props: InjectPanelProps): ReactNode {
     )
   }
 
-  // ── zone 2: confirm / executing ─────────────────────────────────────────
   if (state.phase === 'confirm' || state.phase === 'executing') {
     const executing = state.phase === 'executing'
     const countdown = state.phase === 'confirm'
       ? tokenCountdown(state.expiresAt, clock)
       : null
     return (
-      <section className={css['panel']} aria-label={t('inject.confirmTitle')}>
+      <section
+        {...panelSurface}
+        aria-label={t('inject.confirmTitle')}
+        onKeyDown={handleKeyDown}
+      >
         <header className={css['header']}>
           <h3 className={css['title']}>{t('inject.confirmTitle')}</h3>
         </header>
@@ -343,14 +359,15 @@ export function InjectPanel(props: InjectPanelProps): ReactNode {
             )
             : null}
           <div className={css['footer']}>
-            <button
+            <Button
               type="button"
-              className={css['btn']}
+              size="sm"
+              variant="outline"
               disabled={executing}
               onClick={() => { dispatch({ type: 'CANCEL' }) }}
             >
               {t('inject.cancel')}
-            </button>
+            </Button>
             <button
               type="button"
               className={css['btnDanger']}
@@ -365,7 +382,6 @@ export function InjectPanel(props: InjectPanelProps): ReactNode {
     )
   }
 
-  // ── zone 1: editor (idle / preparing) ───────────────────────────────────
   const preparing = state.phase === 'preparing'
   const canEdit = props.target !== null && !preparing
   const usage = byteUsage(validation.bytes)
@@ -373,7 +389,7 @@ export function InjectPanel(props: InjectPanelProps): ReactNode {
   const showInvalid = !validation.ok && validation.code !== 'empty'
 
   return (
-    <section className={css['panel']} aria-label={t('inject.title')}>
+    <section {...panelSurface} aria-label={t('inject.title')} onKeyDown={handleKeyDown}>
       <header className={css['header']}>
         <h3 className={css['title']}>{t('inject.title')}</h3>
       </header>
@@ -397,7 +413,7 @@ export function InjectPanel(props: InjectPanelProps): ReactNode {
           {props.target !== null
             ? (
               <span className={css['planValue']}>
-                <span className={css['agentTag']}>{props.target.agent}</span>
+                <Pill className={css['agentTag']}>{props.target.agent}</Pill>
                 <span className={css['planTitle']} title={props.target.sessionId}>
                   {props.target.title !== undefined && props.target.title !== ''
                     ? props.target.title
@@ -419,6 +435,9 @@ export function InjectPanel(props: InjectPanelProps): ReactNode {
             placeholder={t('inject.messagePlaceholder')}
             disabled={!canEdit}
             rows={5}
+            // eslint-disable-next-line jsx-a11y/no-autofocus -- the panel is
+            // a modal whose single task starts in this field (UX-10).
+            autoFocus
             onChange={(event) => { setDraft(event.target.value) }}
           />
           <div className={css['byteRow']}>
@@ -467,14 +486,15 @@ export function InjectPanel(props: InjectPanelProps): ReactNode {
 
         <div className={css['footer']}>
           {closeButton}
-          <button
+          <Button
             type="button"
-            className={css['btnPrimary']}
+            size="sm"
+            variant="primary"
             disabled={!gate.canPrepare}
             onClick={() => { void handlePrepare() }}
           >
             {t(preparing ? 'inject.preparing' : 'inject.prepare')}
-          </button>
+          </Button>
         </div>
       </div>
     </section>