sync: update from private repo (f6d625db)

ui/src/components/detail/ContextUsageGauge.tsx

@@ -1,7 +1,14 @@
+import { useTranslation } from 'react-i18next';
+
 interface ContextUsageGaugeProps {
   promptTokens?: number | null;
   limitTokens?: number | null;
   jobStatus?: string;
+  /**
+   * compact: 入力欄の直上に常時表示する低プロファイルのバー。概要タブのカード型
+   * （既定）と同じ色・比率ロジックを共有しつつ、薄い 1 行表示にする。
+   */
+  compact?: boolean;
 }
 
 function formatNumber(n: number): string {
@@ -29,16 +36,38 @@ function pickLabel(jobStatus: string | undefined): string {
   }
 }
 
-export function ContextUsageGauge({ promptTokens, limitTokens, jobStatus }: ContextUsageGaugeProps) {
+export function ContextUsageGauge({ promptTokens, limitTokens, jobStatus, compact }: ContextUsageGaugeProps) {
+  const { t } = useTranslation('detail');
   if (!limitTokens || limitTokens <= 0) return null;
 
   const tokens = typeof promptTokens === 'number' ? promptTokens : 0;
   const awaiting = typeof promptTokens !== 'number';
   const ratio = Math.min(1, Math.max(0, tokens / limitTokens));
   const percent = Math.round(ratio * 100);
+  const remaining = Math.max(0, limitTokens - tokens);
   const colorClass = pickColorClass(ratio);
   const label = pickLabel(jobStatus);
 
+  if (compact) {
+    return (
+      <div
+        className="flex items-center gap-2 text-2xs text-slate-500 tabular-nums"
+        title={`${formatNumber(tokens)} / ${formatNumber(limitTokens)} tokens`}
+        aria-label={t('context.ariaLabel', { remaining: formatNumber(remaining), percent })}
+      >
+        <div className="h-1.5 flex-1 bg-slate-100 rounded-full overflow-hidden">
+          <div
+            className={`h-full ${colorClass} transition-[width] duration-300 ease-out`}
+            style={{ width: `${percent}%` }}
+          />
+        </div>
+        <span className="shrink-0">
+          {awaiting ? t('context.awaiting') : t('context.remaining', { remaining: formatNumber(remaining), percent })}
+        </span>
+      </div>
+    );
+  }
+
   return (
     <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
       <div className="flex items-baseline justify-between mb-2">