@chatcode/cco-better-sidebar 0.18.0-alpha.0

package/src/client/UsageHeatmapSection.tsx

@@ -0,0 +1,301 @@
+import { useEffect, useId, useMemo, useState } from 'react'
+import {
+  IconChevronLeftOutline14,
+  IconChevronRightOutline14,
+  IconLoadingOutline16,
+  IconRefreshOutline14,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import clsx from 'clsx'
+// Type-only: pulls the settings shell's SlotMap merges ('settings.section').
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
+import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import { api, SidebarApiError, type ChatCodeTokenDay } from './api.ts'
+import { isZh, t } from './locales.ts'
+import css from './UsageHeatmapSection.module.css'
+
+/** Full section props: the settings shell's runtime share (close, …). */
+export type UsageHeatmapSectionProps = PropsRuntime<'settings.section'>
+
+/** One rendered day cell. */
+interface DayCell {
+  day: number
+  key: string
+  today: boolean
+  future: boolean
+  tokens: number
+  tokensIn: number
+  tokensOut: number
+}
+
+/** One month query's outcome. */
+type LoadState =
+  | { kind: 'loading' }
+  | { kind: 'ready'; days: Map<string, ChatCodeTokenDay> }
+  | { kind: 'signin' }
+  | { kind: 'error'; message: string }
+
+const startOfMonth = (date: Date): Date => new Date(date.getFullYear(), date.getMonth(), 1)
+
+const dayKey = (year: number, month: number, day: number): string =>
+  `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+
+/** Coerce one platform number defensively (absent/negative/garbage → 0). */
+const num = (value: unknown): number => {
+  const parsed = typeof value === 'number' ? value : Number(value)
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : 0
+}
+
+/** Compact token count (40477872 → “4048万” / “40M”). */
+const compactTokens = (value: number): string =>
+  new Intl.NumberFormat(isZh() ? 'zh-CN' : 'en-US', { notation: 'compact', maximumFractionDigits: 1 }).format(value)
+
+/** Full token count with separators (tooltip and a11y text). */
+const fullTokens = (value: number): string => new Intl.NumberFormat().format(Math.round(value))
+
+/** “2026年9月” / “September 2026”. */
+const monthLabelOf = (anchor: Date): string =>
+  new Intl.DateTimeFormat(isZh() ? 'zh-CN' : 'en-US', { year: 'numeric', month: 'long' }).format(anchor)
+
+/** “9月14日” / “Sep 14”. */
+const shortDateOf = (anchor: Date, day: number): string =>
+  new Intl.DateTimeFormat(isZh() ? 'zh-CN' : 'en-US', { month: 'short', day: 'numeric' }).format(new Date(anchor.getFullYear(), anchor.getMonth(), day))
+
+export function UsageHeatmapSection(_props: UsageHeatmapSectionProps) {
+  const [anchor, setAnchor] = useState(() => startOfMonth(new Date()))
+  const [load, setLoad] = useState<LoadState>({ kind: 'loading' })
+  const [reloadKey, setReloadKey] = useState(0)
+  const [hover, setHover] = useState<{ cell: DayCell; left: number; top: number; below: boolean } | null>(null)
+  const tooltipId = useId()
+
+  useEffect(() => {
+    const dismiss = (): void => { setHover(null) }
+    window.addEventListener('scroll', dismiss, true)
+    window.addEventListener('resize', dismiss)
+    return () => {
+      window.removeEventListener('scroll', dismiss, true)
+      window.removeEventListener('resize', dismiss)
+    }
+  }, [])
+
+  useEffect(() => {
+    const controller = new AbortController()
+    setLoad({ kind: 'loading' })
+    setHover(null)
+    const year = anchor.getFullYear()
+    const month = anchor.getMonth()
+    const lastDay = new Date(year, month + 1, 0).getDate()
+    api.chatcodeTokenTrend(dayKey(year, month, 1), dayKey(year, month, lastDay), controller.signal)
+      .then(rows => {
+        const days = new Map<string, ChatCodeTokenDay>()
+        for (const row of rows) days.set(String(row.statDate), row)
+        setLoad({ kind: 'ready', days })
+      })
+      .catch((error: unknown) => {
+        if (controller.signal.aborted) return
+        const code = error instanceof SidebarApiError ? error.code : ''
+        if (code === 'chatcode-unavailable' || code === 'chatcode-unauthorized') {
+          setLoad({ kind: 'signin' })
+          return
+        }
+        setLoad({ kind: 'error', message: error instanceof Error ? error.message : String(error) })
+      })
+    return () => { controller.abort() }
+  }, [anchor, reloadKey])
+
+  const cells = useMemo<DayCell[]>(() => {
+    const year = anchor.getFullYear()
+    const month = anchor.getMonth()
+    const daysInMonth = new Date(year, month + 1, 0).getDate()
+    const today = new Date()
+    const sameMonth = year === today.getFullYear() && month === today.getMonth()
+    const futureMonth = year > today.getFullYear() || (year === today.getFullYear() && month > today.getMonth())
+    const days = load.kind === 'ready' ? load.days : null
+    const list: DayCell[] = []
+    for (let day = 1; day <= daysInMonth; day++) {
+      const row = days?.get(dayKey(year, month, day))
+      list.push({
+        day,
+        key: dayKey(year, month, day),
+        today: sameMonth && day === today.getDate(),
+        future: futureMonth || (sameMonth && day > today.getDate()),
+        tokens: num(row?.totalTokens),
+        tokensIn: num(row?.tokensIn),
+        tokensOut: num(row?.tokensOut),
+      })
+    }
+    return list
+  }, [anchor, load])
+
+  const stats = useMemo(() => {
+    let total = 0
+    let peak = 0
+    let peakDay = 0
+    let active = 0
+    for (const cell of cells) {
+      if (cell.future) continue
+      total += cell.tokens
+      if (cell.tokens > peak) {
+        peak = cell.tokens
+        peakDay = cell.day
+      }
+      if (cell.tokens > 0) active++
+    }
+    return { total, peak, peakDay, active }
+  }, [cells])
+
+  const leadingBlanks = (new Date(anchor.getFullYear(), anchor.getMonth(), 1).getDay() + 6) % 7
+  const weekdays = [...t('usageWeekdays')]
+  const nextMonthDisabled = anchor.getTime() >= startOfMonth(new Date()).getTime()
+  const reload = (): void => { setReloadKey(key => key + 1) }
+  const goPrev = (): void => { setAnchor(current => new Date(current.getFullYear(), current.getMonth() - 1, 1)) }
+  const goNext = (): void => { setAnchor(current => new Date(current.getFullYear(), current.getMonth() + 1, 1)) }
+
+  const heatLevel = (cell: DayCell): number =>
+    cell.future || cell.tokens === 0 || stats.peak === 0 ? 0 : Math.ceil(cell.tokens / stats.peak * 4)
+
+  const showDetails = (cell: DayCell, target: HTMLElement): void => {
+    if (cell.future) return
+    const rect = target.getBoundingClientRect()
+    const below = rect.top < 160
+    setHover({ cell, left: rect.left + rect.width / 2, top: below ? rect.bottom : rect.top, below })
+  }
+
+  return (
+    <div className={css.section}>
+      <div className={css.group}>
+        <div className={css.headerRow}>
+          <div className={css.monthNav}>
+            <button type="button" className={css.monthButton} aria-label={t('usagePrevMonth')} onClick={goPrev}>
+              <IconChevronLeftOutline14 size={14} />
+            </button>
+            <span className={css.monthLabel} aria-live="polite">{monthLabelOf(anchor)}</span>
+            <button
+              type="button"
+              className={css.monthButton}
+              aria-label={t('usageNextMonth')}
+              onClick={goNext}
+              disabled={nextMonthDisabled}
+            >
+              <IconChevronRightOutline14 size={14} />
+            </button>
+          </div>
+          <button type="button" className={css.refreshButton} onClick={reload} disabled={load.kind === 'loading'}>
+            <IconRefreshOutline14 size={14} className={load.kind === 'loading' ? css.spin : undefined} />
+            <span>{t('usageRefresh')}</span>
+          </button>
+        </div>
+
+        {load.kind === 'ready' ? (
+          <>
+            <div className={css.overview}>
+              <div className={css.total}>
+                <span className={css.statLabel}>{t('usageStatTotal')}</span>
+                <div className={css.totalNumber} title={fullTokens(stats.total)}>
+                  <span className={css.totalValue}>{compactTokens(stats.total)}</span>
+                  <span className={css.totalUnit}>Tokens</span>
+                </div>
+              </div>
+              <div className={css.stats}>
+                <div className={css.stat}>
+                  <span className={css.statLabel}>{t('usageStatPeak')}</span>
+                  <span className={css.statValue} title={stats.peakDay > 0 ? shortDateOf(anchor, stats.peakDay) : undefined}>{compactTokens(stats.peak)}</span>
+                </div>
+                <div className={css.stat}>
+                  <span className={css.statLabel}>{t('usageStatActive')}</span>
+                  <span className={css.statValue}>{stats.active}</span>
+                </div>
+                <div className={css.stat}>
+                  <span className={css.statLabel}>{t('usageStatAvg')}</span>
+                  <span className={css.statValue}>{compactTokens(stats.active > 0 ? stats.total / stats.active : 0)}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className={css.gridBody}>
+              <div className={css.weekdays} aria-hidden="true">
+                {weekdays.map((weekday, index) => <span key={index}>{weekday}</span>)}
+              </div>
+              <div className={css.grid} role="group" aria-label={monthLabelOf(anchor)}>
+                {Array.from({ length: leadingBlanks }, (_, index) => <span key={`blank-${index}`} aria-hidden="true" />)}
+                {cells.map(cell => (
+                  <button
+                    type="button"
+                    key={cell.key}
+                    className={clsx(css.cell, cell.future && css.cellFuture, cell.today && css.cellToday, hover?.cell === cell && css.cellHover)}
+                    data-level={heatLevel(cell)}
+                    disabled={cell.future}
+                    aria-current={cell.today ? 'date' : undefined}
+                    aria-describedby={hover?.cell === cell ? tooltipId : undefined}
+                    aria-label={cell.future
+                      ? shortDateOf(anchor, cell.day)
+                      : `${shortDateOf(anchor, cell.day)} · ${t('usageDayTokens', { tokens: fullTokens(cell.tokens) })} · ${t('usageTokensIn', { tokens: fullTokens(cell.tokensIn) })} · ${t('usageTokensOut', { tokens: fullTokens(cell.tokensOut) })}`}
+                    onMouseEnter={event => { showDetails(cell, event.currentTarget) }}
+                    onMouseLeave={() => { setHover(null) }}
+                    onFocus={event => { showDetails(cell, event.currentTarget) }}
+                    onBlur={() => { setHover(null) }}
+                    onClick={event => { showDetails(cell, event.currentTarget) }}
+                    onKeyDown={event => {
+                      if (event.key === 'Escape' && hover !== null) {
+                        event.stopPropagation()
+                        setHover(null)
+                      }
+                    }}
+                  >
+                    <span className={css.cellDay}>{cell.day}</span>
+                    <span className={css.cellTokens} aria-hidden="true">{!cell.future && cell.tokens > 0 ? compactTokens(cell.tokens) : '\u00a0'}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <div className={css.footer}>
+              {cells.some(cell => cell.today) && <span className={css.todayLabel}><span className={css.todayDot} />{t('usageToday')}</span>}
+              <div className={css.legend} aria-hidden="true">
+                <span>{t('usageLess')}</span>
+                {[0, 1, 2, 3, 4].map(level => (
+                  <span key={level} className={css.legendSwatch} data-level={level} />
+                ))}
+                <span>{t('usageMore')}</span>
+              </div>
+            </div>
+
+            {stats.total === 0 && <div className={css.empty}>{t('usageEmpty')}</div>}
+          </>
+        ) : load.kind === 'loading' ? (
+          <div className={css.state} role="status">
+            <IconLoadingOutline16 className={css.spin} size={16} />
+            <span>{t('usageLoading')}</span>
+          </div>
+        ) : load.kind === 'signin' ? (
+          <div className={css.state}>{t('usageLoginRequired')}</div>
+        ) : (
+          <div className={css.stateError}>
+            <span>{load.message === '' ? t('usageError') : `${t('usageError')}：${load.message}`}</span>
+            <button type="button" className={css.retry} onClick={reload}>
+              {t('usageRetry')}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {hover !== null && !hover.cell.future && (
+        <div
+          id={tooltipId}
+          className={clsx(css.tooltip, hover.below && css.tooltipBelow)}
+          role="tooltip"
+          style={{
+            left: Math.min(Math.max(hover.left, 124), window.innerWidth - 124),
+            top: hover.top,
+          }}
+        >
+          <span className={css.tooltipDate}>{shortDateOf(anchor, hover.cell.day)}{hover.cell.today && <span className={css.tooltipToday}>{t('usageToday')}</span>}</span>
+          <span className={css.tooltipTokens}>{t('usageDayTokens', { tokens: fullTokens(hover.cell.tokens) })}</span>
+          <div className={css.tooltipSplit}>
+            <span>{t('usageTokensIn', { tokens: fullTokens(hover.cell.tokensIn) })}</span>
+            <span>{t('usageTokensOut', { tokens: fullTokens(hover.cell.tokensOut) })}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/add-plugin-modal.tsx

@@ -0,0 +1,199 @@
+/**
+ * The "add plugin" modals (Side card settings → the dashed cards at the
+ * end of the 侧边栏内容 / 文件预览 grids): declare that the sidebar's
+ * extension points — tab pages and file previewers — are open to plugins
+ * (registered through `ctx.betterSidebar`), point at the GitHub topic page
+ * for discovery, and show the repo's recommended plugin catalog of the
+ * matching kind (name / url / description / install script).
+ *
+ * Per entry there are two actions:
+ * - 「跳转」opens the plugin's repo in a REAL new browser tab (window.open
+ *   — a button, so the sidebar link takeover cannot reroute it);
+ * - 「安装」only COPIES the install script to the clipboard (writeClipboard)
+ *   with a transient "已复制" feedback on the button — the user pastes and
+ *   runs it wherever they manage their DSH profile. No terminal is opened,
+ *   nothing is closed, nothing can fail outward.
+ *
+ * The body is extracted as {@link PluginListBody} so tests render it
+ * directly — the Modal primitive runs hooks unconditionally, so an open
+ * Modal must never be renderToString'd (same rule as the settingsFor popup
+ * in SideCardSection); the modal itself mounts only while open.
+ */
+import { useState, type ReactNode } from 'react'
+import { Modal, writeClipboard } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { BetterSidebarService } from './service.ts'
+import { PLUGIN_TOPIC_URL, type PluginEntry } from './plugins-shared.ts'
+import { builtinTabPlugins } from './plugins-tabs.ts'
+import { builtinViewerPlugins } from './plugins-viewers.ts'
+import { t } from './locales.ts'
+import css from './SideCardSection.module.css'
+
+/** Which extension point the modal is adding a plugin for. */
+export type PluginKind = 'tab' | 'viewer'
+
+/** The catalog of one kind (kept in two repo files: plugins-tabs.ts /
+ *  plugins-viewers.ts). */
+function catalogOf(kind: PluginKind): readonly PluginEntry[] {
+  return kind === 'tab' ? builtinTabPlugins : builtinViewerPlugins
+}
+
+/** How long the "已复制" feedback stays on the copy button. */
+const COPIED_FEEDBACK_MS = 1500
+
+/** The modal body: the GitHub topic button + the recommended plugin list
+ *  with per-entry jump/copy buttons (extracted for direct testing). */
+export function PluginListBody(props: { service: BetterSidebarService; kind: PluginKind }) {
+  const { service, kind } = props
+  // Which entry's copy button currently shows the "已复制" feedback.
+  const [copiedId, setCopiedId] = useState<string | null>(null)
+  // Live catalog filter (name / id / description). A free-text search keeps
+  // the list usable once the catalogs grow beyond a handful of entries:
+  // every keystroke narrows the rendered rows, so a long catalog never
+  // becomes a wall of scrolling.
+  const [query, setQuery] = useState('')
+
+  const catalog = catalogOf(kind)
+  const needle = query.trim().toLowerCase()
+  const matches = (entry: PluginEntry): boolean => {
+    if (needle === '') return true
+    const description = typeof entry.description === 'function' ? entry.description() : entry.description
+    return entry.name.toLowerCase().includes(needle)
+      || entry.id.toLowerCase().includes(needle)
+      || description.toLowerCase().includes(needle)
+  }
+  const filtered = catalog.filter(matches)
+  // Group by the optional category (stable order: category order of first
+  // appearance, uncategorized entries last under the plain list).
+  const groups = new Map<string | undefined, PluginEntry[]>()
+  for (const entry of filtered) {
+    const key = entry.category === undefined ? undefined : (typeof entry.category === 'function' ? entry.category() : entry.category)
+    const list = groups.get(key)
+    if (list === undefined) groups.set(key, [entry])
+    else list.push(entry)
+  }
+
+  /** Copy the entry's install script to the clipboard and flash the button's
+   *  "已复制" label for a moment. The feedback ONLY appears after a
+   *  successful write — when the clipboard is unavailable or denied
+   *  (writeClipboard resolves false) nothing is shown, so the user is never
+   *  told to paste a command that was not placed on the clipboard. Never
+   *  closes anything, never throws outward. */
+  const copy = async (entry: PluginEntry): Promise<void> => {
+    const written = await writeClipboard(entry.install)
+    if (!written) return
+    setCopiedId(entry.id)
+    window.setTimeout(() => {
+      setCopiedId(current => (current === entry.id ? null : current))
+    }, COPIED_FEEDBACK_MS)
+  }
+
+  /** Open the plugin's repo in a REAL new browser tab (window.open — a
+   *  button, so the sidebar link takeover cannot reroute it). */
+  const jump = (entry: PluginEntry): void => {
+    window.open(entry.url, '_blank', 'noopener')
+  }
+
+  /** One catalog row (extracted so the group render stays flat). */
+  const renderEntry = (entry: PluginEntry): ReactNode => (
+    <div key={entry.id} className={css.pluginEntry}>
+      <div className={css.pluginEntryHead}>
+        {/* The name is a BUTTON on the same window.open path as the
+            jump button: as an anchor it would be caught by the
+            document-capture link takeover (which ignores
+            target=_blank) and land in the sidebar browser. */}
+        <button
+          type="button"
+          className={css.pluginName}
+          aria-label={`${t('openPlugin')}: ${entry.name}`}
+          onClick={() => { jump(entry) }}
+        >
+          {entry.name}
+        </button>
+        <span className={css.pluginEntryActions}>
+          <button
+            type="button"
+            className={css.pluginJumpBtn}
+            aria-label={`${t('openPlugin')}: ${entry.name}`}
+            onClick={() => { jump(entry) }}
+          >
+            {t('openPlugin')}
+          </button>
+          <button
+            type="button"
+            className={css.pluginCopyBtn}
+            aria-label={`${t('copyInstall')}: ${entry.name}`}
+            onClick={() => { copy(entry) }}
+          >
+            {copiedId === entry.id ? t('copied') : t('copy')}
+          </button>
+        </span>
+      </div>
+      <div className={css.pluginDesc}>
+        {typeof entry.description === 'function' ? entry.description() : entry.description}
+      </div>
+      <code className={css.pluginInstall}>{entry.install}</code>
+    </div>
+  )
+
+  return (
+    <div className={css.pluginList}>
+      <button
+        type="button"
+        className={css.pluginTopicBtn}
+        onClick={() => { window.open(PLUGIN_TOPIC_URL, '_blank', 'noopener') }}
+      >
+        {t('addPluginsBrowseMore')}
+      </button>
+      <input
+        type="search"
+        className={css.pluginSearch}
+        placeholder={t('addPluginsSearch')}
+        aria-label={t('addPluginsSearch')}
+        value={query}
+        onChange={event => { setQuery(event.currentTarget.value) }}
+      />
+      <div className={css.groupHeading}>
+        <span>{t('addPluginsRecommended')}</span>
+        <span className={css.count}>{filtered.length}</span>
+      </div>
+      {catalog.length === 0 ? (
+        <div className={css.pluginEmpty}>{t('addPluginsEmpty')}</div>
+      ) : filtered.length === 0 ? (
+        <div className={css.pluginEmpty}>{t('addPluginsNoMatch')}</div>
+      ) : (
+        <div className={css.pluginEntries}>
+          {[...groups.entries()].map(([category, entries]) => (
+            <div key={category ?? '\u0000'} className={css.pluginGroup}>
+              {category !== undefined && (
+                <div className={css.pluginGroupHeading}>{category}</div>
+              )}
+              {entries.map(renderEntry)}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** The modal itself (mounted only while open — see the module comment). */
+export function AddPluginModal(props: { service: BetterSidebarService; onClose: () => void; kind: PluginKind }) {
+  const { service, onClose, kind } = props
+  return (
+    <Modal
+      open
+      onClose={onClose}
+      title={kind === 'tab' ? t('addPluginsTabCard') : t('addPluginsViewerCard')}
+      description={kind === 'tab' ? t('addPluginsTabDesc') : t('addPluginsViewerDesc')}
+      closeLabel={t('close')}
+      className={css.pluginModal}
+      footer={(
+        <button type="button" className={css.done} onClick={onClose}>
+          {t('settingsDone')}
+        </button>
+      )}
+    >
+      <PluginListBody service={service} kind={kind} />
+    </Modal>
+  )
+}