@nightkatana/kronosys-app 1.0.0-beta.0

package/components/dashboard/SessionEndReasonEditor.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+import { normalizeSessionEndReasonKind, normalizeSessionEndReasonNote } from "@/lib/sessionEndReason";
+
+const REASON_OPTIONS = ["", "planned", "early", "overrun", "other"] as const;
+
+export function SessionEndReasonEditor({
+  t,
+  radioGroupName,
+  sessionId,
+  initialKind,
+  initialNote,
+  post,
+}: {
+  t: DashboardStrings;
+  /** Nom du groupe de boutons radio (unique par instance sur la page). */
+  radioGroupName: string;
+  sessionId: string;
+  initialKind?: string;
+  initialNote?: string;
+  post: (body: Record<string, unknown>) => Promise<unknown>;
+}) {
+  const [kind, setKind] = useState("");
+  const [note, setNote] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    setKind(normalizeSessionEndReasonKind(initialKind) || "");
+    setNote(typeof initialNote === "string" ? initialNote : "");
+  }, [sessionId, initialKind, initialNote]);
+
+  const normalizedInitialKind = useMemo(() => normalizeSessionEndReasonKind(initialKind) || "", [initialKind]);
+  const normalizedInitialNote = useMemo(() => normalizeSessionEndReasonNote(initialNote), [initialNote]);
+  const currentKind = normalizeSessionEndReasonKind(kind) || "";
+  const currentNote = normalizeSessionEndReasonNote(note);
+  const dirty = currentKind !== normalizedInitialKind || currentNote !== normalizedInitialNote;
+
+  const optionLabels = useMemo(
+    () =>
+      ({
+        "": t.sessionEndReasonSkip,
+        planned: t.sessionEndReasonPlanned,
+        early: t.sessionEndReasonEarly,
+        overrun: t.sessionEndReasonOverrun,
+        other: t.sessionEndReasonOther,
+      }) as Record<(typeof REASON_OPTIONS)[number], string>,
+    [t]
+  );
+
+  const onSave = async () => {
+    setSaving(true);
+    try {
+      await post({
+        type: "setSessionEndReason",
+        sessionId,
+        sessionEndReasonKind: currentKind,
+        sessionEndReasonNote: currentNote,
+      });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3 text-left text-[0.75rem] leading-snug text-zinc-700 dark:text-zinc-300">
+      <p className="text-[0.7rem] leading-snug text-zinc-600 dark:text-zinc-400">{t.sessionEndReasonEditHint}</p>
+      <fieldset className="space-y-2 border-0 p-0">
+        <legend className="text-[0.65rem] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+          {t.sessionEndReasonFieldsetLegend}
+        </legend>
+        {REASON_OPTIONS.map((value) => (
+          <label
+            key={value || "skip"}
+            className="flex cursor-pointer items-start gap-2 rounded-md py-0.5 pr-1 hover:bg-zinc-100/80 dark:hover:bg-zinc-800/50"
+          >
+            <input
+              type="radio"
+              name={radioGroupName}
+              className="mt-1 size-4 shrink-0 border-zinc-300 text-violet-600 focus:ring-violet-500/50 dark:border-zinc-600"
+              checked={currentKind === value}
+              onChange={() => setKind(value)}
+            />
+            <span className="leading-snug">{optionLabels[value]}</span>
+          </label>
+        ))}
+      </fieldset>
+      <label className="block">
+        <span className="sr-only">{t.sessionEndReasonNoteAria}</span>
+        <textarea
+          className="mt-1 w-full min-h-[4rem] resize-y rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-violet-500/70 focus:outline-none focus:ring-2 focus:ring-violet-500/25 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100 dark:placeholder:text-zinc-500"
+          rows={3}
+          maxLength={500}
+          value={note}
+          onChange={(e) => setNote(e.target.value)}
+          placeholder={t.sessionEndReasonNotePlaceholder}
+          aria-label={t.sessionEndReasonNoteAria}
+        />
+      </label>
+      <div className="flex justify-end pt-1">
+        <button
+          type="button"
+          className="rounded-lg border border-violet-300 bg-violet-50 px-3 py-1.5 text-sm font-medium text-violet-900 transition hover:bg-violet-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-violet-700/80 dark:bg-violet-950/50 dark:text-violet-100 dark:hover:bg-violet-950/80"
+          disabled={!dirty || saving}
+          aria-label={t.sessionEndReasonSaveAria}
+          onClick={() => void onSave()}
+        >
+          {saving ? t.sessionEndReasonSaving : t.sessionEndReasonSaveBtn}
+        </button>
+      </div>
+    </div>
+  );
+}

package/components/dashboard/SessionListPanel.tsx

@@ -0,0 +1,320 @@
+"use client";
+
+import { Archive, Circle, ExternalLink, Loader2, Square, Trash2, UploadCloud } from "lucide-react";
+import { sessionTaskCountNoun, type DashboardStrings, type Lang } from "@/lib/dashboardCopy";
+import { DEFAULT_DASHBOARD_TIME_ZONE, isValidIanaTimeZone } from "@/lib/dashboardTimeZone";
+import { formatIsoInstantShort } from "@/lib/formatIsoShort";
+import { sessionWallClockMinutes, type LooseSession } from "@/lib/reportingAggregate";
+import { formatDuration } from "@/lib/taskParsing";
+
+export type SessionListEntry = {
+  sessionId: string;
+  sessionName?: string;
+  savedAt?: string;
+  /** Horodatage immuable de création de la session ; repli : `startAt` pour les anciennes données. */
+  createdAt?: string | null;
+  startAt?: string | null;
+  endAt?: string | null;
+  sessionDurationMinutes?: number;
+  /** Catégorie enregistrée à la clôture (session terminée). */
+  sessionEndReasonKind?: string;
+  /** Précision libre à la clôture. */
+  sessionEndReasonNote?: string;
+  tasks?: unknown[];
+  activeTasks?: unknown[];
+  activeTask?: unknown | null;
+  mongoPushedAt?: string;
+  mongoLastPushedSavedAt?: string;
+};
+
+function taskCount(s: SessionListEntry): number {
+  const listed = s.tasks?.length ?? 0;
+  const nActive =
+    Array.isArray(s.activeTasks) && s.activeTasks.length > 0
+      ? s.activeTasks.length
+      : s.activeTask
+        ? 1
+        : 0;
+  return listed + nActive;
+}
+
+function sessionMongoPushState(sess: SessionListEntry): "never" | "synced" | "dirty" {
+  const saved = sess.savedAt ?? "";
+  const lastPush = sess.mongoLastPushedSavedAt;
+  if (!lastPush) {
+    return "never";
+  }
+  return lastPush === saved ? "synced" : "dirty";
+}
+
+function sortSessions(sessions: SessionListEntry[]): SessionListEntry[] {
+  return [...sessions].sort((a, b) => {
+    const timeA = Date.parse(a.savedAt || a.createdAt || a.startAt || "") || 0;
+    const timeB = Date.parse(b.savedAt || b.createdAt || b.startAt || "") || 0;
+    return timeB - timeA;
+  });
+}
+
+/** Zone fixe (28×28) pour aligner les icônes sur la ligne date / tâches. */
+const sessionRowActionBase =
+  "inline-flex size-7 shrink-0 items-center justify-center rounded-md border border-transparent hover:border-zinc-400 hover:bg-zinc-200/90 dark:hover:border-zinc-600 dark:hover:bg-zinc-800/80";
+
+const sessionRowActionIconSize = 16;
+
+export function SessionListPanel({
+  sessions,
+  liveSessionId,
+  selectedSessionId,
+  t,
+  onSelectSession,
+  onOpenSessionInNewTab,
+  onEndLiveSession,
+  onArchiveSession,
+  onDeleteSession,
+  onOpenArchives,
+  archivedCount = 0,
+  lang,
+  displayTimeZone = DEFAULT_DASHBOARD_TIME_ZONE,
+  use24HourClock = true,
+  mongoPushEnabled = false,
+  onPushSessionToMongo,
+  pushingSessionId = null,
+  sessionDurationAlertThresholdMinutes,
+}: {
+  sessions: SessionListEntry[];
+  lang: Lang;
+  /** Fuseau IANA pour la date affichée sur chaque session. */
+  displayTimeZone?: string;
+  /** Format 12 h / 24 h pour les horodatages début et fin de session. */
+  use24HourClock?: boolean;
+  liveSessionId: string | undefined;
+  /** When inspecting history, the selected id; when live, equals liveSessionId */
+  selectedSessionId: string | undefined;
+  t: DashboardStrings;
+  onSelectSession: (sessionId: string) => void;
+  /** Ouvre `?session=id` dans un nouvel onglet (URL dédiée, sans imposer la session aux autres onglets). */
+  onOpenSessionInNewTab?: (sessionId: string) => void;
+  /** Session live uniquement : enregistrer l’instantané dans l’historique sans « Nouvelle session ». */
+  onEndLiveSession?: () => void;
+  onArchiveSession?: (sessionId: string) => void;
+  onDeleteSession?: (sessionId: string) => void;
+  onOpenArchives?: () => void;
+  archivedCount?: number;
+  /** Mongo activé + connexion OK : affiche le bouton d’envoi par session. */
+  mongoPushEnabled?: boolean;
+  onPushSessionToMongo?: (sessionId: string) => void;
+  pushingSessionId?: string | null;
+  /** Minutes murales : durée affichée en alerte si ≥ seuil (même réglage que le panneau session). */
+  sessionDurationAlertThresholdMinutes?: number;
+}) {
+  const sorted = sortSessions(sessions);
+  const archivesLabel =
+    archivedCount > 0 ? `${t.archivesModalTitle} (${archivedCount})` : t.archivesModalTitle;
+
+  return (
+    <aside className="flex h-min min-w-0 max-w-full max-h-[calc(100vh-8rem)] flex-col rounded-xl border border-zinc-200 bg-white/90 shadow-sm dark:border-zinc-800 dark:bg-zinc-800/50 dark:shadow-none xl:z-0">
+      <div className="flex flex-wrap items-center justify-end gap-3 border-b border-zinc-200 px-5 py-3 dark:border-zinc-800">
+        {onOpenArchives ? (
+          <button
+            type="button"
+            className="relative inline-flex size-9 shrink-0 items-center justify-center rounded-md border border-zinc-300 text-zinc-600 hover:bg-zinc-100 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-800"
+            onClick={onOpenArchives}
+            aria-label={archivesLabel}
+            title={archivesLabel}
+          >
+            <Archive size={18} strokeWidth={1.75} className="text-zinc-600 dark:text-zinc-300" aria-hidden />
+            {archivedCount > 0 ? (
+              <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-violet-600 px-0.5 text-[0.6rem] font-semibold leading-none text-white">
+                {archivedCount > 99 ? "99+" : archivedCount}
+              </span>
+            ) : null}
+          </button>
+        ) : (
+          <span className="size-9 shrink-0" aria-hidden />
+        )}
+      </div>
+
+      <nav className="min-h-0 flex-1 overflow-y-auto px-3 py-3 pr-4" aria-label={t.sessionsListAriaLabel}>
+        <ul className="space-y-1.5">
+          {sorted.map((sess) => {
+            const id = sess.sessionId;
+            const isLive = id === liveSessionId;
+            const isSelected = id === selectedSessionId;
+            const n = taskCount(sess);
+            const tz =
+              displayTimeZone.trim() && isValidIanaTimeZone(displayTimeZone.trim())
+                ? displayTimeZone.trim()
+                : DEFAULT_DASHBOARD_TIME_ZONE;
+            const createdIso = (sess.createdAt?.trim() || sess.startAt?.trim() || sess.savedAt?.trim() || "").trim();
+            const createdLabel = formatIsoInstantShort(createdIso, lang, tz, use24HourClock);
+            const label = sess.sessionName?.trim() || (createdLabel ? `${id.slice(0, 8)} · ${createdLabel}` : id.slice(0, 8));
+            const startIso = (sess.startAt?.trim() || sess.savedAt?.trim() || "").trim();
+            const startLabel = formatIsoInstantShort(startIso, lang, tz, use24HourClock) ?? "—";
+            const hasEnd =
+              typeof sess.endAt === "string" && sess.endAt.trim() !== "";
+            const endLabel = hasEnd
+              ? formatIsoInstantShort(sess.endAt!.trim(), lang, tz, use24HourClock) ?? "—"
+              : null;
+
+            const taskNoun = sessionTaskCountNoun(n, t, lang);
+            const wallMins = sessionWallClockMinutes(sess as LooseSession);
+            const durationLabel = wallMins > 0 ? formatDuration(wallMins) : "—";
+            const thresholdMin =
+              typeof sessionDurationAlertThresholdMinutes === "number" &&
+              Number.isFinite(sessionDurationAlertThresholdMinutes)
+                ? Math.max(1, Math.round(sessionDurationAlertThresholdMinutes))
+                : null;
+            const durationAlert =
+              thresholdMin !== null && wallMins > 0 && wallMins >= thresholdMin;
+            const thresholdHours = thresholdMin !== null ? Math.round(thresholdMin / 60) : 0;
+            const durationTitle = durationAlert
+              ? t.sessionListWallDurationAlertTooltip.replace("{hours}", String(thresholdHours))
+              : t.sessionListWallDurationTitle;
+            const mongoState = sessionMongoPushState(sess);
+            const mongoTitle =
+              mongoState === "synced"
+                ? t.sessionMongoPushSyncedTitle
+                : mongoState === "dirty"
+                  ? t.sessionMongoPushDirtyTitle
+                  : t.sessionMongoPushNeverTitle;
+            const mongoIconClass =
+              mongoState === "synced"
+                ? "text-emerald-400/95"
+                : mongoState === "dirty"
+                  ? "text-amber-400/95"
+                  : "text-zinc-500";
+
+            return (
+              <li key={id} id={`kronosys-session-${id}`} className="scroll-mt-20">
+                <div
+                  className={`grid grid-cols-[minmax(0,1fr)_auto] grid-rows-[auto_auto] gap-x-1.5 gap-y-1 rounded-lg px-3.5 py-3 transition-colors ${
+                    isSelected
+                      ? "bg-violet-500/15 ring-1 ring-violet-500/45 dark:bg-violet-600/20 dark:ring-violet-500/50"
+                      : "hover:bg-zinc-100/90 dark:hover:bg-zinc-800/80"
+                  }`}
+                >
+                  <button
+                    type="button"
+                    onClick={() => onSelectSession(id)}
+                    className="group col-start-1 row-start-1 row-span-2 flex min-w-0 flex-col gap-0.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-violet-500/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900 rounded-md -mx-1 px-1 -my-0.5 py-0.5"
+                  >
+                    <span className="flex min-w-0 items-center gap-2 text-sm font-medium text-zinc-800 group-hover:text-zinc-950 dark:text-zinc-100 dark:group-hover:text-white">
+                      {isLive && (
+                        <Circle
+                          className="shrink-0 fill-emerald-400 text-emerald-400"
+                          size={10}
+                          aria-hidden
+                        />
+                      )}
+                      <span className="truncate">{label}</span>
+                      {isLive && (
+                        <span className="shrink-0 rounded bg-emerald-100 px-1.5 py-0 text-[0.6rem] font-bold uppercase tracking-wide text-emerald-900 ring-1 ring-emerald-600/20 dark:bg-emerald-900/50 dark:text-emerald-300 dark:ring-0">
+                          {t.sessionLiveBadge}
+                        </span>
+                      )}
+                    </span>
+                    <span className="flex min-w-0 flex-col gap-0.5 text-[0.7rem] leading-snug text-zinc-500 group-hover:text-zinc-600 dark:group-hover:text-zinc-400">
+                      <span className="min-w-0 break-words">
+                        <span className="text-zinc-600 dark:text-zinc-500">{t.sessionListStartedPrefix}</span>{" "}
+                        {startLabel}
+                      </span>
+                      {endLabel !== null ? (
+                        <span className="min-w-0 break-words">
+                          <span className="text-zinc-600 dark:text-zinc-500">{t.sessionListEndedPrefix}</span>{" "}
+                          {endLabel}
+                        </span>
+                      ) : null}
+                      <span className="min-w-0 truncate">
+                        <span>
+                          {n} {taskNoun}
+                        </span>
+                        <span className="text-zinc-400 dark:text-zinc-600"> · </span>
+                        <span
+                          className={`inline tabular-nums ${
+                            durationAlert ? "kronosys-session-duration-alert font-semibold" : ""
+                          }`}
+                          title={durationTitle}
+                        >
+                          {durationLabel}
+                        </span>
+                      </span>
+                    </span>
+                  </button>
+                  <div className="col-start-2 row-start-2 flex shrink-0 items-center gap-0.5 self-center">
+                    {mongoPushEnabled && onPushSessionToMongo ? (
+                      <button
+                        type="button"
+                        className={`${sessionRowActionBase} ${mongoIconClass} hover:text-sky-600 disabled:opacity-40 dark:hover:text-sky-300`}
+                        title={mongoTitle}
+                        aria-label={t.sessionMongoPushAriaLabel}
+                        disabled={pushingSessionId === id}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onPushSessionToMongo(id);
+                        }}
+                      >
+                        {pushingSessionId === id ? (
+                          <Loader2
+                            className="animate-spin text-zinc-500 dark:text-zinc-400"
+                            size={sessionRowActionIconSize}
+                            aria-label={t.sessionMongoPushBusy}
+                          />
+                        ) : (
+                          <UploadCloud size={sessionRowActionIconSize} aria-hidden />
+                        )}
+                      </button>
+                    ) : null}
+                    {isLive && onEndLiveSession ? (
+                      <button
+                        type="button"
+                        className={`${sessionRowActionBase} text-zinc-500 hover:text-rose-600 dark:hover:text-rose-300`}
+                        title={t.sessionEndLiveTitle}
+                        aria-label={t.sessionEndLiveAria}
+                        onClick={() => onEndLiveSession()}
+                      >
+                        <Square size={sessionRowActionIconSize} aria-hidden />
+                      </button>
+                    ) : null}
+                    {onOpenSessionInNewTab ? (
+                      <button
+                        type="button"
+                        className={`${sessionRowActionBase} text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200`}
+                        title={t.openSessionInNewTab}
+                        aria-label={t.openSessionInNewTab}
+                        onClick={() => onOpenSessionInNewTab(id)}
+                      >
+                        <ExternalLink size={sessionRowActionIconSize} aria-hidden />
+                      </button>
+                    ) : null}
+                    {onArchiveSession && !isLive ? (
+                      <button
+                        type="button"
+                        className={`${sessionRowActionBase} text-zinc-500 hover:text-amber-700 dark:hover:text-amber-200/90`}
+                        title={t.sessionArchiveTitle}
+                        aria-label={t.sessionArchiveBtn}
+                        onClick={() => onArchiveSession(id)}
+                      >
+                        <Archive size={sessionRowActionIconSize} aria-hidden />
+                      </button>
+                    ) : null}
+                    {onDeleteSession && !isLive ? (
+                      <button
+                        type="button"
+                        className={`${sessionRowActionBase} text-zinc-500 hover:text-red-600 dark:hover:text-red-300`}
+                        title={t.sessionDeleteTitle}
+                        aria-label={t.sessionDeleteBtn}
+                        onClick={() => onDeleteSession(id)}
+                      >
+                        <Trash2 size={sessionRowActionIconSize} aria-hidden />
+                      </button>
+                    ) : null}
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+    </aside>
+  );
+}

package/components/dashboard/SessionLocMetricsSection.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import type { DashboardStrings } from "@/lib/dashboardCopy";
+import { DashboardCollapsibleSection } from "./DashboardCollapsibleSection";
+import { InlineMetricHelpTrigger } from "./InlineMetricHelpTrigger";
+
+export type SessionLocMetricsShape = {
+  linesWrittenTotal?: number;
+  linesWrittenHuman?: number;
+  linesWrittenAi?: number;
+  locByLanguage?: Array<[string, number]>;
+  codingSignalsByLanguage?: Array<[string, number]>;
+};
+
+export function SessionLocMetricsSection({
+  session,
+  t,
+}: {
+  session: SessionLocMetricsShape;
+  t: DashboardStrings;
+}) {
+  const total = session.linesWrittenTotal ?? 0;
+  const human = session.linesWrittenHuman ?? 0;
+  const ai = session.linesWrittenAi ?? 0;
+  const locRows = [...(session.locByLanguage ?? [])].sort((a, b) => b[1] - a[1]);
+  const sigRows = [...(session.codingSignalsByLanguage ?? [])].sort((a, b) => b[1] - a[1]);
+
+  return (
+    <DashboardCollapsibleSection
+      sectionAriaLabel={t.statsLocSectionTitle}
+      title={
+        <span className="text-sm font-semibold text-zinc-800 dark:text-zinc-200">{t.statsLocSectionTitle}</span>
+      }
+    >
+      <div className="grid gap-4 sm:grid-cols-3">
+        <div>
+          <div className="flex min-h-5 items-center gap-0.5">
+            <span className="text-xs uppercase text-zinc-500 dark:text-zinc-500">{t.statsLinesWrittenTotal}</span>
+            <InlineMetricHelpTrigger
+              ariaLabel={t.statsMetricLinesWrittenHelpAria}
+              body={t.statsMetricLinesWrittenHelpBody}
+            />
+          </div>
+          <div className="mt-1 text-2xl font-semibold tabular-nums text-zinc-900 dark:text-zinc-100">{total}</div>
+        </div>
+        <div>
+          <div className="flex min-h-5 items-center gap-0.5">
+            <span className="text-xs uppercase text-zinc-500 dark:text-zinc-500">{t.statsLinesWrittenHuman}</span>
+            <InlineMetricHelpTrigger
+              ariaLabel={t.statsMetricLinesWrittenHelpAria}
+              body={t.statsMetricLinesWrittenHelpBody}
+            />
+          </div>
+          <div className="mt-1 text-2xl font-semibold tabular-nums text-emerald-400/90">{human}</div>
+        </div>
+        <div>
+          <div className="flex min-h-5 items-center gap-0.5">
+            <span className="text-xs uppercase text-zinc-500 dark:text-zinc-500">{t.statsLinesWrittenAi}</span>
+            <InlineMetricHelpTrigger
+              ariaLabel={t.statsMetricLinesWrittenHelpAria}
+              body={t.statsMetricLinesWrittenHelpBody}
+            />
+          </div>
+          <div className="mt-1 text-2xl font-semibold tabular-nums text-violet-400/90">{ai}</div>
+        </div>
+      </div>
+
+      <div className="mt-6 grid gap-6 lg:grid-cols-2">
+        <div>
+          <div className="mb-2 flex min-h-5 items-center gap-0.5">
+            <span className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+              {t.statsLocByLanguageHeading}
+            </span>
+            <InlineMetricHelpTrigger
+              ariaLabel={t.statsMetricLocByLanguageHelpAria}
+              body={t.statsMetricLocByLanguageHelpBody}
+            />
+          </div>
+          {locRows.length === 0 ? (
+            <p className="text-sm text-zinc-500">{t.noData}</p>
+          ) : (
+            <ul className="divide-y divide-zinc-200 rounded-lg border border-zinc-200 dark:divide-zinc-800/90 dark:border-zinc-800/80">
+              {locRows.map(([lang, n]) => (
+                <li
+                  key={lang}
+                  className="flex items-center justify-between gap-3 px-3 py-2 text-sm text-zinc-800 dark:text-zinc-200"
+                >
+                  <span className="min-w-0 truncate font-mono text-xs text-zinc-500 dark:text-zinc-400">
+                    {lang}
+                  </span>
+                  <span className="shrink-0 tabular-nums text-zinc-900 dark:text-zinc-100">{n}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+        <div>
+          <div className="mb-2 flex min-h-5 items-center gap-0.5">
+            <span className="text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-500">
+              {t.statsCodingSignalsHeading}
+            </span>
+            <InlineMetricHelpTrigger
+              ariaLabel={t.statsMetricCodingSignalsHelpAria}
+              body={t.statsMetricCodingSignalsHelpBody}
+            />
+          </div>
+          {sigRows.length === 0 ? (
+            <p className="text-sm text-zinc-500">{t.noData}</p>
+          ) : (
+            <ul className="divide-y divide-zinc-200 rounded-lg border border-zinc-200 dark:divide-zinc-800/90 dark:border-zinc-800/80">
+              {sigRows.map(([lang, n]) => (
+                <li
+                  key={lang}
+                  className="flex items-center justify-between gap-3 px-3 py-2 text-sm text-zinc-800 dark:text-zinc-200"
+                >
+                  <span className="min-w-0 truncate font-mono text-xs text-zinc-500 dark:text-zinc-400">
+                    {lang}
+                  </span>
+                  <span className="shrink-0 tabular-nums text-zinc-900 dark:text-zinc-100">{n}</span>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </DashboardCollapsibleSection>
+  );
+}