@shendeguize/dsh-agent-sidecar 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shendeguize/dsh-agent-sidecar",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Agent Sidecar as a native DSH plugin: cross-agent monitoring, injection and bypass analysis / 跨 agent 监控、注入与旁路分析",
   "type": "module",
   "main": "lib/index.js",
@@ -86,6 +86,8 @@
     "@deepseek-ai/cordis": "4.0.1",
     "@deepseek-ai/dsh-client-runtime": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-conversation": "0.1.1-rc.2",
+    "@deepseek-ai/dsh-client-ui-layout": "0.1.1-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-settings-plugins": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-sidebar": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-slots": "0.1.1-rc.2",

package/src/client/analysis/AnalysisPanel.tsx

@@ -1,21 +1,9 @@
-/**
- * AI bypass-analysis panel (T5.10b, design §4.e.3 / §5.1 view 2): fully
- * controlled presentation over an {@link AnalysisGlueState} — the owner
- * (detail view) holds the AnalysisStore and passes state + intents down.
- *
- * Honesty posture (§5.3): the engine disclaimer (fallback copy when a
- * settle never happened) renders with every result, truncation is called
- * out per exchange, terminal errors carry the vocabulary code, and the
- * capability-off state explains where to enable analysis instead of
- * hiding the entry. Strings ride the main locale table (`analysis.*`).
- *
- * @module
- */
-
+import { Button, Input } from '@deepseek-ai/dsh-client-ui-primitives'
 import { useState } from 'react'
 import type { ReactElement } from 'react'
 import { t } from '../locales/index.ts'
 import type { AnalysisExchange, AnalysisGlueState } from '../analysis-glue.ts'
+import { surfaceProps } from '../theme/parts.ts'
 import css from './analysis.module.css'
 
 export interface AnalysisPanelProps {
@@ -87,24 +75,25 @@ export function AnalysisPanel(props: AnalysisPanelProps): ReactElement {
   }
 
   return (
-    <section className={css['panel']} data-testid="agent-sidecar-analysis">
+    <section {...surfaceProps('analysis-panel', css['panel'])} data-testid="agent-sidecar-analysis">
       <div className={css['head']}>
         <span className={css['title']}>{t('analysis.title')}</span>
         <span className={css['spacer']} />
         {conversationLive && (
-          <button
+          <Button
             type="button"
-            className={css['textButton']}
+            size="sm"
+            variant="ghost"
             disabled={!enabled}
             onClick={props.onStop}
             data-testid="agent-sidecar-analysis-stop"
           >
             {t('analysis.stop')}
-          </button>
+          </Button>
         )}
-        <button type="button" className={css['closeButton']} onClick={props.onClose}>
+        <Button type="button" size="sm" variant="ghost" onClick={props.onClose}>
           {t('analysis.close')}
-        </button>
+        </Button>
       </div>
 
       {!enabled && (
@@ -136,14 +125,16 @@ export function AnalysisPanel(props: AnalysisPanelProps): ReactElement {
           {state.phase === 'idle' && (
             <div className={css['mutedLine']}>{t('analysis.idleHint')}</div>
           )}
-          <button
+          <Button
             type="button"
-            className={css['primaryButton']}
+            size="sm"
+            variant="primary"
+            className={css['startButton']}
             onClick={props.onStart}
             data-testid="agent-sidecar-analysis-start"
           >
             {state.phase === 'idle' ? t('analysis.start') : t('analysis.restart')}
-          </button>
+          </Button>
         </>
       )}
 
@@ -156,7 +147,7 @@ export function AnalysisPanel(props: AnalysisPanelProps): ReactElement {
 
       {conversationLive && (
         <div className={css['followupForm']}>
-          <input
+          <Input
             className={css['followupInput']}
             value={question}
             placeholder={t('analysis.followupPlaceholder')}
@@ -169,15 +160,16 @@ export function AnalysisPanel(props: AnalysisPanelProps): ReactElement {
             }}
             data-testid="agent-sidecar-analysis-question"
           />
-          <button
+          <Button
             type="button"
-            className={css['textButton']}
+            size="sm"
+            variant="ghost"
             disabled={!enabled || state.phase !== 'ready' || question.trim() === ''}
             onClick={submitFollowup}
             data-testid="agent-sidecar-analysis-followup"
           >
             {t('analysis.followupSubmit')}
-          </button>
+          </Button>
         </div>
       )}
 

package/src/client/analysis/analysis.module.css

@@ -1,20 +1,13 @@
-/*
- * AI bypass-analysis panel styles (design §4.e.3 / §5.1 view 2): every
- * color rides a --dsw-alias-* design token with a neutral fallback — no
- * theme colors are hardcoded as the only value. Same posture as
- * dsh-tools.module.css.
- */
-
 .panel {
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0;
   padding: 10px 12px;
-  border-radius: 10px;
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
-  color: var(--dsw-alias-label-primary, #1f2328);
+  border: 1px solid var(--agsc-border-strong);
+  border-radius: var(--agsc-radius-control);
+  background: var(--agsc-bg);
+  color: var(--agsc-fg);
 }
 
 .head {
@@ -27,84 +20,43 @@
 .title {
   font-size: 13px;
   font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
 }
 
 .spacer {
   flex: 1;
 }
 
-.closeButton,
-.textButton {
-  flex: none;
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 6px;
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  background: transparent;
-  color: var(--dsw-alias-label-secondary, #57606a);
-  cursor: pointer;
-}
-
-.closeButton:hover,
-.textButton:hover {
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
-}
-
-.primaryButton {
+.startButton {
   align-self: flex-start;
-  font-size: 12px;
-  font-weight: 600;
-  padding: 4px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
-  color: var(--dsw-alias-label-primary, #1f2328);
-  cursor: pointer;
-}
-
-.primaryButton:disabled,
-.textButton:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
 }
 
 .mutedLine {
   font-size: 12px;
   line-height: 18px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
 }
 
-/* Capability-off / terminal-error note. */
-.noteCard {
+.noteCard,
+.errorCard,
+.noticeBar {
+  padding: 8px 10px;
+  border: 1px solid var(--agsc-border-strong);
+  border-radius: var(--agsc-radius-control);
+  background: var(--agsc-bg-raised);
   font-size: 12px;
   line-height: 18px;
-  padding: 8px 10px;
-  border-radius: 8px;
-  border: 1px dashed var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
 }
 
 .errorCard {
-  font-size: 12px;
-  line-height: 18px;
-  padding: 8px 10px;
-  border-radius: 8px;
-  color: var(--dsw-alias-state-error-primary, #cf222e);
-  background: var(--dsw-alias-state-error-secondary, rgba(207, 34, 46, 0.08));
-  border: 1px solid var(--dsw-alias-state-error-secondary, rgba(207, 34, 46, 0.24));
+  border-color: var(--agsc-err);
+  color: var(--agsc-err);
 }
 
-/* Non-terminal retryable notice. */
 .noticeBar {
-  font-size: 12px;
-  line-height: 18px;
-  padding: 6px 10px;
-  border-radius: 8px;
-  color: var(--dsw-alias-state-warning-primary, #9a6700);
-  background: var(--dsw-alias-state-warning-secondary, rgba(154, 103, 0, 0.1));
-  border: 1px solid var(--dsw-alias-state-warning-secondary, rgba(154, 103, 0, 0.28));
+  border-color: var(--agsc-warn);
+  color: var(--agsc-warn);
 }
 
 .exchange {
@@ -116,48 +68,47 @@
 .exchangeLabel {
   font-size: 11px;
   font-weight: 600;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
 }
 
 .question {
+  padding: 6px 10px;
+  border-radius: var(--agsc-radius-control);
+  background: var(--agsc-bg-raised);
+  color: var(--agsc-fg);
   font-size: 12px;
   line-height: 18px;
-  padding: 6px 10px;
-  border-radius: 8px;
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
-  color: var(--dsw-alias-label-primary, #1f2328);
   white-space: pre-wrap;
   word-break: break-word;
 }
 
 .summary {
   margin: 0;
+  max-height: 320px;
+  overflow: auto;
+  padding: 8px 10px;
+  border: 1px solid var(--agsc-border-strong);
+  border-radius: var(--agsc-radius-control);
+  background: var(--agsc-bg-raised);
+  color: var(--agsc-fg);
+  font-family: inherit;
   font-size: 12px;
   line-height: 18px;
-  padding: 8px 10px;
-  border-radius: 8px;
-  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  color: var(--dsw-alias-label-primary, #1f2328);
   white-space: pre-wrap;
   word-break: break-word;
-  font-family: inherit;
-  max-height: 320px;
-  overflow: auto;
 }
 
 .truncated {
+  color: var(--agsc-warn);
   font-size: 11px;
-  color: var(--dsw-alias-state-warning-primary, #9a6700);
 }
 
-/* The §5.3 honesty line — always visible with results. */
 .disclaimer {
+  padding-top: 6px;
+  border-top: 1px solid var(--agsc-border-strong);
+  color: var(--agsc-fg-secondary);
   font-size: 11px;
   line-height: 16px;
-  color: var(--dsw-alias-label-secondary, #57606a);
-  border-top: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.08));
-  padding-top: 6px;
 }
 
 .followupForm {
@@ -168,16 +119,4 @@
 .followupInput {
   flex: 1;
   min-width: 0;
-  font-size: 12px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.16));
-  background: var(--dsw-alias-bg-layer-0, #fff);
-  color: var(--dsw-alias-label-primary, #1f2328);
-}
-
-.actionsRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
 }