@chatcode/cco-market 1.45.1

package/src/client/operations.ts

@@ -0,0 +1,201 @@
+/**
+ * The operations model behind the market's activity panel: one record per
+ * mutating operation (install, update, uninstall), from the moment it is
+ * queued until the user clears it.
+ *
+ * It exists because operation state used to live on the card that started it,
+ * which disappears the moment the user paginates, searches, or switches tab —
+ * taking any decision attached to it, such as a loader-id clash, along with
+ * it. Records live here instead, keyed by their own id, so the card only has
+ * to ask "is anything running for this url".
+ *
+ * Every function is pure so the queue, the aggregate counts, and the
+ * three-way visual grouping can be tested without a host or a DOM.
+ */
+
+/** What a record does to the profile. */
+export type OperationKind = 'install' | 'update' | 'uninstall'
+
+/**
+ * Lifecycle of one operation.
+ *
+ * `input` is not a failure: the host already reverted the change (a clash is
+ * detected after pnpm resolves, and the package is removed on the spot), so
+ * the profile is intact and the queue moves on. It means the operation cannot
+ * finish until the user picks an outcome.
+ */
+export type OperationState = 'queued' | 'running' | 'input' | 'done' | 'warned' | 'failed'
+
+/** The installed plugins one candidate clashed with, one entry per owner. */
+export interface ConflictGroup {
+  owner: string
+  ids: string[]
+}
+
+export interface OperationRecord {
+  /** Stable across re-renders; how actions address a record. */
+  id: string
+  kind: OperationKind
+  /** Package name, or the catalog name for an install. */
+  name: string
+  /** Catalog url, present for installs — what a card is keyed by. */
+  url?: string
+  state: OperationState
+  /** 0-100 while running; null when the host reports no total to divide by. */
+  percent?: number | null
+  /** The host's latest progress line, shown verbatim under the bar. */
+  detail?: string
+  /** Set with `input`: the installed plugins that hold the same entry ids. */
+  conflicts?: ConflictGroup[]
+  /** Set with `warned` or `failed`: one sentence naming what went wrong. */
+  reason?: string
+  /**
+   * Set with `failed` when pnpm refused to run a dependency's build scripts.
+   * The way out is one click, so it belongs on the record that reports the
+   * failure — the approval banner lives elsewhere on the page, and a reader
+   * looking at this row was told to press a button they could not see (#314).
+   */
+  blockedBuilds?: string[]
+  /** Set with `done` when the change needs a page refresh to be visible. */
+  needsRefresh?: boolean
+}
+
+/**
+ * Visual grouping. Six states are what the code has to distinguish; three are
+ * what the panel shows, because a reader scanning icons and colors cannot
+ * hold six apart. The distinction inside a bucket is carried by the record's
+ * own status line, not by another color.
+ */
+export type OperationBucket = 'busy' | 'ok' | 'attention'
+
+const BUCKETS: Record<OperationState, OperationBucket> = {
+  queued: 'busy',
+  running: 'busy',
+  input: 'attention',
+  failed: 'attention',
+  done: 'ok',
+  warned: 'ok',
+}
+
+/** Which of the three visual groups a state belongs to. */
+export function bucketOf(state: OperationState): OperationBucket {
+  return BUCKETS[state]
+}
+
+/** Whether a record has stopped moving on its own. */
+export function isSettled(record: OperationRecord): boolean {
+  return record.state === 'done' || record.state === 'warned' || record.state === 'failed'
+}
+
+/** Whether a record is waiting on the user rather than on the host. */
+export function needsUser(record: OperationRecord): boolean {
+  return record.state === 'input'
+}
+
+/** Append a record. Ids are supplied by the caller so tests stay deterministic. */
+export function enqueue(list: readonly OperationRecord[], record: OperationRecord): OperationRecord[] {
+  return [...list, record]
+}
+
+/**
+ * Apply changes to one record.
+ * @returns a new list; unchanged (same contents) when no record matches.
+ */
+export function patch(
+  list: readonly OperationRecord[], id: string, changes: Partial<Omit<OperationRecord, 'id'>>,
+): OperationRecord[] {
+  return list.map(record => (record.id === id ? { ...record, ...changes } : record))
+}
+
+/** Drop one record outright — the panel's per-row dismiss. */
+export function drop(list: readonly OperationRecord[], id: string): OperationRecord[] {
+  return list.filter(record => record.id !== id)
+}
+
+/**
+ * Clear finished records, keeping anything still moving or still waiting on
+ * the user. A record in `input` survives: the user has not answered it yet,
+ * and clearing it would delete the only route back to that decision.
+ */
+export function clearSettled(list: readonly OperationRecord[]): OperationRecord[] {
+  return list.filter(record => !isSettled(record))
+}
+
+/**
+ * How many queued records sit ahead of this one. The panel shows it because
+ * "queued" without a position reads as stuck; the host runs one mutation at a
+ * time, so the order shown is the order that will run.
+ * @returns the count ahead, or null when the record is not queued.
+ */
+export function queuePosition(list: readonly OperationRecord[], id: string): number | null {
+  const queued = list.filter(record => record.state === 'queued')
+  const index = queued.findIndex(record => record.id === id)
+  return index < 0 ? null : index
+}
+
+export interface OperationSummary {
+  running: number
+  queued: number
+  /** Records waiting on a decision. */
+  attention: number
+  /** Records that finished, however they finished. */
+  settled: number
+  /** running + queued + settled: the denominator of "3 / 7". */
+  total: number
+  /** settled + running, the numerator — a running item is the one in flight. */
+  progressed: number
+}
+
+/**
+ * Counts for the panel entry. The entry reports the batch, never one row:
+ * one aggregate line beats seven notifications racing each other.
+ */
+export function summarize(list: readonly OperationRecord[]): OperationSummary {
+  let running = 0
+  let queued = 0
+  let attention = 0
+  let settled = 0
+  for (const record of list) {
+    if (record.state === 'running') running += 1
+    else if (record.state === 'queued') queued += 1
+    else if (needsUser(record)) attention += 1
+    else settled += 1
+  }
+  return {
+    running,
+    queued,
+    attention,
+    settled,
+    total: running + queued + settled,
+    progressed: settled + running,
+  }
+}
+
+/**
+ * Panel order: what needs the user first, then what is still moving, then
+ * what is finished. Within a group the original order is kept so a queue
+ * reads top-to-bottom in the order it will run.
+ */
+export function sortForPanel(list: readonly OperationRecord[]): OperationRecord[] {
+  const rank = (record: OperationRecord): number =>
+    needsUser(record) ? 0 : isSettled(record) ? 2 : 1
+  return [...list]
+    .map((record, index) => ({ record, index }))
+    .sort((a, b) => rank(a.record) - rank(b.record) || a.index - b.index)
+    .map(entry => entry.record)
+}
+
+/**
+ * The record a plugin card should reflect, newest first. A card shows the
+ * button state for an operation in flight and a terminal marker for one that
+ * ended without installing — without that marker a rejected install leaves
+ * the card looking untouched, and the obvious next move is to press Install
+ * again.
+ */
+export function recordForUrl(list: readonly OperationRecord[], url: string): OperationRecord | null {
+  for (let index = list.length - 1; index >= 0; index -= 1) {
+    const record = list[index]
+    if (record.url === url) return record
+  }
+  return null
+}

package/src/client/preset-panel.tsx

@@ -0,0 +1,263 @@
+/**
+ * Diagnostics sub-panel — issue #98 phase 3 (plugin presets).
+ *
+ * Rendered at the bottom of the Diagnostics tab inside a collapsible section
+ * (the parent keeps it mounted and passes `open`, so it lazy-loads on first
+ * expand and keeps its state across collapses). Lists named presets
+ * (GET /dsh-market/presets), saves the current community bundle order as a
+ * new preset (POST /dsh-market/presets {action:'save', name, bundleOrder,
+ * disabled}), applies one (action:'apply' — the host trial-validates and
+ * auto-snapshots before writing; on success the parent refreshes the check
+ * report) and deletes one after an inline double confirmation
+ * (action:'delete').
+ *
+ * The list payload is read defensively (bare array or {presets: [...]}).
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Button, Input } from '@deepseek-ai/dsh-client-ui-primitives'
+import css from './Market.module.css'
+import { api } from './market-data.ts'
+import type { Translate } from './market-data.ts'
+
+/** One preset from GET /dsh-market/presets. */
+export interface Preset {
+  name: string
+  bundleOrder: string[]
+  disabled: string[]
+}
+
+interface PresetPanelProps {
+  t: Translate
+  /** True while the parent collapsible section is expanded (lazy-load gate). */
+  open: boolean
+  /** Current community bundle order (the Diagnostics ordering DRAFT — what the
+   * user is editing, not necessarily the last-applied order); saved verbatim. */
+  bundleOrder: string[]
+  /** Re-fetch the check report after a successful preset apply. */
+  onRefresh: () => void
+}
+
+interface JsonBody {
+  ok?: unknown
+  error?: unknown
+  changes?: unknown
+}
+
+async function postJson(url: string, body: unknown): Promise<{ status: number; body: JsonBody | null }> {
+  let res: Response
+  try {
+    res = await fetch(url, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) })
+  } catch {
+    return { status: 0, body: null }
+  }
+  let payload: JsonBody | null = null
+  try { payload = (await res.json()) as JsonBody } catch { /* non-JSON body */ }
+  return { status: res.status, body: payload }
+}
+
+const errorText = (status: number, body: JsonBody | null, fallback: string): string =>
+  body !== null && typeof body.error === 'string'
+    ? body.error
+    : status === 0 ? fallback + 'network error' : fallback + `HTTP ${String(status)}`
+
+export function PresetPanel(props: PresetPanelProps) {
+  const { t, open, bundleOrder, onRefresh } = props
+  const [presets, setPresets] = useState<Preset[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [msg, setMsg] = useState<string | null>(null)
+  const [busy, setBusy] = useState<string | null>(null)
+  const [name, setName] = useState('')
+  /** Preset name awaiting the second confirm click, or null. */
+  const [confirmDelete, setConfirmDelete] = useState<string | null>(null)
+  /** Hidden <input type="file"> for the import action. */
+  const loaded = useRef(false)
+
+  const load = useCallback(() => {
+    fetch(api('/dsh-market/presets'), { cache: 'no-store' })
+      .then(res => res.json())
+      .then(body => {
+        const list: unknown[] = Array.isArray(body) ? body : Array.isArray(body.presets) ? body.presets : []
+        setPresets(list.map((item: unknown) => {
+          const preset = (item ?? {}) as Preset
+          return {
+            name: String(preset.name ?? ''),
+            bundleOrder: Array.isArray(preset.bundleOrder) ? preset.bundleOrder.map(String) : [],
+            disabled: Array.isArray(preset.disabled) ? preset.disabled.map(String) : [],
+          }
+        }))
+        setError(null)
+        // Mark loaded only on success so a transient failure retries on the
+        // next expand (review M3).
+        loaded.current = true
+      })
+      .catch(() => setError(t('presetListFail') + 'network'))
+  }, [t])
+
+  useEffect(() => {
+    if (open && !loaded.current) {
+      load()
+    }
+  }, [open, load])
+
+  const save = useCallback(() => {
+    const presetName = name.trim()
+    if (presetName === '') {
+      setError(t('presetNameEmpty'))
+      return
+    }
+    if (busy !== null) return
+    setBusy('save')
+    setMsg(null)
+    setError(null)
+    // Save the CURRENT disable list too — applying a preset restores it, so
+    // saving an empty list would silently re-enable every disabled plugin.
+    fetch(api('/dsh-market/installed'), { cache: 'no-store' })
+      .then(res => res.json())
+      .then((installed: { disabled?: unknown }) => postJson(api('/dsh-market/presets'), {
+        action: 'save',
+        name: presetName,
+        bundleOrder,
+        disabled: Array.isArray(installed.disabled) ? installed.disabled.map(String) : [],
+      }))
+      .then(({ status, body }) => {
+        if (status >= 200 && status < 300 && body?.ok === true) {
+          setName('')
+          setMsg(t('presetSaved'))
+          load()
+        } else {
+          setError(errorText(status, body, t('presetFail')))
+        }
+      })
+      .catch(() => setError(t('presetFail') + 'network'))
+      .finally(() => setBusy(null))
+  }, [busy, bundleOrder, load, name, t])
+
+  const apply = useCallback((presetName: string) => {
+    if (busy !== null) return
+    setBusy('apply')
+    setMsg(null)
+    setError(null)
+    postJson(api('/dsh-market/presets'), { action: 'apply', name: presetName })
+      .then(({ status, body }) => {
+        if (status >= 200 && status < 300 && body?.ok === true) {
+          setMsg(t('presetApplied'))
+          onRefresh()
+        } else {
+          setError(errorText(status, body, t('presetFail')))
+        }
+      })
+      .catch(() => setError(t('presetFail') + 'network'))
+      .finally(() => setBusy(null))
+  }, [busy, onRefresh, t])
+
+  const remove = useCallback((presetName: string) => {
+    if (busy !== null) return
+    setBusy('delete')
+    setMsg(null)
+    setError(null)
+    postJson(api('/dsh-market/presets'), { action: 'delete', name: presetName })
+      .then(({ status, body }) => {
+        if (status >= 200 && status < 300 && body?.ok === true) {
+          setConfirmDelete(null)
+          setMsg(t('presetDeleted'))
+          load()
+        } else {
+          setError(errorText(status, body, t('presetFail')))
+        }
+      })
+      .catch(() => setError(t('presetFail') + 'network'))
+      .finally(() => setBusy(null))
+  }, [busy, load, t])
+
+  /** Change preview of one preset: {reordered[], enabled[], disabled[], noop}. */
+  const [previewed, setPreviewed] = useState<{ name: string; changes: { reordered: string[]; enabled: string[]; disabled: string[]; noop: boolean } } | null>(null)
+  const preview = useCallback((presetName: string) => {
+    if (busy !== null) return
+    setBusy('preview')
+    setMsg(null)
+    setError(null)
+    if (previewed?.name === presetName) {
+      setPreviewed(null)
+      setBusy(null)
+      return
+    }
+    postJson(api('/dsh-market/presets'), { action: 'preview', name: presetName })
+      .then(({ status, body }) => {
+        if (status >= 200 && status < 300 && body?.ok === true && body.changes !== null && typeof body.changes === 'object') {
+          const changes = body.changes as { reordered?: unknown; enabled?: unknown; disabled?: unknown; noop?: unknown }
+          setPreviewed({
+            name: presetName,
+            changes: {
+              reordered: Array.isArray(changes.reordered) ? changes.reordered.map(String) : [],
+              enabled: Array.isArray(changes.enabled) ? changes.enabled.map(String) : [],
+              disabled: Array.isArray(changes.disabled) ? changes.disabled.map(String) : [],
+              noop: changes.noop === true,
+            },
+          })
+        } else {
+          setError(errorText(status, body, t('presetPreviewFail')))
+        }
+      })
+      .catch(() => setError(t('presetPreviewFail') + 'network'))
+      .finally(() => setBusy(null))
+  }, [busy, previewed, t])
+
+  return (
+    <div className={css.orderPanel}>
+      <p className={css.panelNote}>{t('presetHint')}</p>
+
+      {error !== null && <div className={css.err}>{error}</div>}
+
+      {presets === null || presets.length === 0
+        ? <div className={css.diagEmpty}>{t('presetEmpty')}</div>
+        : (
+            <div className={css.presetList}>
+              {presets.map(preset => (
+                <div key={preset.name} className={css.presetRow}>
+                  <div className={css.confirmRow}>
+                    <span className={css.presetName}>{preset.name}</span>
+                    {preset.bundleOrder.length > 0 && (
+                      <span className={css.spec}>{t('presetBundleCount').replace('{0}', String(preset.bundleOrder.length))}</span>
+                    )}
+                    <span className={css.grow} />
+                    {confirmDelete === preset.name ? (
+                      <span className={css.confirmRow}>
+                        <Button variant="primary" size="sm" disabled={busy !== null} onClick={() => remove(preset.name)}>{t('presetDelete')}</Button>
+                        <Button variant="ghost" size="sm" disabled={busy !== null} onClick={() => setConfirmDelete(null)}>{t('cancel')}</Button>
+                      </span>
+                    ) : (
+                      <span className={css.confirmRow}>
+                        <Button variant="outline" size="sm" disabled={busy !== null} onClick={() => apply(preset.name)}>{t('presetApply')}</Button>
+                        <Button variant="ghost" size="sm" disabled={busy !== null} onClick={() => preview(preset.name)}>
+                          {previewed?.name === preset.name ? t('cancel') : t('presetPreview')}
+                        </Button>
+                        <Button variant="ghost" size="sm" disabled={busy !== null} onClick={() => setConfirmDelete(preset.name)}>{t('presetDelete')}</Button>
+                      </span>
+                    )}
+                  </div>
+                  {previewed?.name === preset.name && (
+                    <div className={css.diagList}>
+                      <span className={css.diagKey}>{t('presetPreviewTitle')}</span>
+                      {previewed.changes.noop
+                        ? <div className={css.spec}>{t('presetNoop')}</div>
+                        : (
+                            <div className={css.spec}>
+                              {previewed.changes.reordered.length > 0
+                                && <div className={css.warnLine}>{t('presetReorder').replace('{0}', String(previewed.changes.reordered.length))}: {previewed.changes.reordered.join(', ')}</div>}
+                              {previewed.changes.enabled.length > 0
+                                && <div className={css.warnLine}>{t('presetEnable').replace('{0}', String(previewed.changes.enabled.length))}: {previewed.changes.enabled.join(', ')}</div>}
+                              {previewed.changes.disabled.length > 0
+                                && <div className={css.warnLine}>{t('presetDisable').replace('{0}', String(previewed.changes.disabled.length))}: {previewed.changes.disabled.join(', ')}</div>}
+                            </div>
+                          )}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+      {msg !== null && <div className={css.okState}>{msg}</div>}
+    </div>
+  )
+}

package/src/client/primitives.d.ts

@@ -0,0 +1,140 @@
+/**
+ * Ambient types for @deepseek-ai/dsh-client-ui-primitives — provided at
+ * runtime by the host's frozen platform module table
+ * (packages/client/web/src/platform.ts). The published npm package is only a
+ * dev-time mirror used by the jsdom test lane, so the browser bundle stays
+ * external (see tsdown.config.ts CLIENT_EXTERNALS); keep these signatures in
+ * sync with deepseek-harness/packages/client/ui-primitives/src/ @0.1.0-rc.6.
+ * Only the members this plugin uses are declared.
+ */
+declare module '@deepseek-ai/dsh-client-ui-primitives' {
+  import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactElement, ReactNode } from 'react'
+
+  export type ButtonVariant = 'primary' | 'ghost' | 'outline' | 'toolbar'
+  export function Button(props: {
+    variant?: ButtonVariant
+    size?: 'md' | 'sm'
+    icon?: ReactNode
+    className?: string | undefined
+    children?: ReactNode
+  } & ButtonHTMLAttributes<HTMLButtonElement>): ReactElement
+
+  export function Pill(props: {
+    active?: boolean
+    className?: string | undefined
+    children?: ReactNode
+  } & ButtonHTMLAttributes<HTMLButtonElement>): ReactElement
+
+  export function Input(props: {
+    icon?: ReactNode
+    className?: string
+  } & InputHTMLAttributes<HTMLInputElement>): ReactElement
+
+  export function Modal(props: {
+    open: boolean
+    onClose: () => void
+    title: string
+    closeLabel?: string
+    description?: string
+    children?: ReactNode
+    footer?: ReactNode
+    className?: string
+    contentClassName?: string
+    headless?: boolean
+  }): ReactElement | null
+
+  export function Toast(props: {
+    text: string
+    icon?: ReactNode
+    anchor?: HTMLElement | null
+    onDone: () => void
+  }): ReactElement
+
+  /** One primary-menu entry: a row, a separator, or a heading label. */
+  export interface MenuItem {
+    id: string
+    label: ReactNode
+    disabled?: boolean
+    icon?: ReactNode
+    danger?: boolean
+    submenu?: readonly MenuItem[]
+  }
+  export interface MenuSeparator { type: 'separator'; id: string }
+  export interface MenuLabel { type: 'label'; id: string; text: string }
+  export type MenuEntry = MenuItem | MenuSeparator | MenuLabel
+
+  export function Menu(props: {
+    open: boolean
+    anchor: ReactNode
+    items: readonly MenuEntry[]
+    footer?: readonly MenuEntry[]
+    selectedId?: string | undefined
+    selectedIds?: readonly string[] | undefined
+    onSelect: (id: string) => void
+    onClose: () => void
+    align?: 'start' | 'end'
+    side?: 'bottom' | 'top' | 'right'
+    portal?: boolean
+    closeOnPointerLeave?: boolean
+    dense?: boolean
+    compact?: boolean
+    className?: string
+  }): ReactElement
+
+  export interface DisclosureRowProps {
+    icon: ReactNode
+    title: string
+    open: boolean
+    expandable: boolean
+    onToggle: () => void
+    expandOnRowClick?: boolean | undefined
+    previewChevron?: boolean | undefined
+    keepContentWhenOpen?: boolean | undefined
+    collapsedContent?: ReactNode
+    children?: ReactNode
+    className?: string | undefined
+    rowClassName?: string | undefined
+    leadingClassName?: string | undefined
+    chevronClassName?: string | undefined
+    titleClassName?: string | undefined
+  }
+  export function DisclosureRow(props: DisclosureRowProps): ReactElement
+
+  export function Tooltip(props: {
+    label: string | (() => string)
+    side?: 'right' | 'bottom' | 'top'
+    delayMs?: number
+    disabled?: boolean
+    maxWidth?: number
+    children: ReactElement
+  }): ReactElement
+
+  export interface IconProps {
+    size?: number
+    className?: string
+  }
+  export function IconChevronDownOutline14(props: IconProps): ReactElement
+  export function IconChevronUpOutline14(props: IconProps): ReactElement
+  export function IconCheckOutline16(props: IconProps): ReactElement
+  export function IconChevronLeftOutline14(props: IconProps): ReactElement
+  export function IconChevronRightOutline14(props: IconProps): ReactElement
+  export function IconSearchOutline16(props: IconProps): ReactElement
+  export function IconRefreshOutline14(props: IconProps): ReactElement
+  export function IconWarningOutline16(props: IconProps): ReactElement
+  export function IconQuestionOutline14(props: IconProps): ReactElement
+  export function IconSparkle16(props: IconProps): ReactElement
+  export function IconCodeOutline16(props: IconProps): ReactElement
+  export function IconCordisPluginOutline14(props: IconProps): ReactElement
+  export function IconLoadingOutline16(props: IconProps): ReactElement
+  export function IconLinkOutline14(props: IconProps): ReactElement
+  export function IconDownloadOutline16(props: IconProps): ReactElement
+  export function IconFullscreenOutline16(props: IconProps): ReactElement
+  export function IconFolderOpen16(props: IconProps): ReactElement
+
+  export type StateDotState = 'done' | 'warning' | 'ongoing' | 'error'
+  export function StateDot(props: {
+    state: StateDotState
+    size?: number | undefined
+    className?: string | undefined
+  }): ReactElement
+}