File size: 4,457 Bytes
cd8bd0a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
"use client";

import Link from "next/link";
import { useTranslations } from "next-intl";

type CavemanIntensity = "lite" | "full" | "ultra";
type RtkIntensity = "minimal" | "standard" | "aggressive";

export interface CompressionTokenSaverConfig {
  enabled: boolean;
  cavemanConfig?: { enabled: boolean; intensity: CavemanIntensity };
  cavemanOutputMode?: { enabled: boolean; intensity: CavemanIntensity };
  rtkConfig?: { enabled: boolean; intensity: RtkIntensity };
}

export type CompressionTokenSaverPatch = Partial<CompressionTokenSaverConfig>;

// Read-only summary. The engine on/off + level toggles that used to live here moved to
// the single-source panel (/dashboard/context/settings). This card now only reflects the
// current state and links to the panel — it no longer writes anything (the `onSave` prop
// is accepted for backward compatibility but intentionally unused).
function StatusPill({ on }: { on: boolean }) {
  return (
    <span
      className={`rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider ${
        on ? "bg-emerald-500/15 text-emerald-500" : "bg-border/50 text-text-muted"
      }`}
    >
      {on ? "on" : "off"}
    </span>
  );
}

function SummaryRow({
  title,
  badge,
  href,
  on,
  level,
}: {
  title: string;
  badge: string;
  href: string;
  on: boolean;
  level: string;
}) {
  return (
    <div className="flex items-center justify-between gap-3 py-2 text-sm text-text-main">
      <div className="flex items-center gap-2">
        {title}
        <Link
          href={href}
          className="rounded border border-border bg-bg-subtle px-1.5 py-0.5 text-[10px] uppercase tracking-wider text-text-muted hover:border-primary/40 hover:text-primary"
        >
          {badge}
        </Link>
      </div>
      <div className="flex items-center gap-2 text-xs text-text-muted">
        <span>{level}</span>
        <StatusPill on={on} />
      </div>
    </div>
  );
}

export default function CompressionTokenSaverCard({
  config,
}: {
  config: CompressionTokenSaverConfig;
  // Kept for call-site compatibility; this card is read-only and never persists.
  saving?: boolean;
  onSave?: (patch: CompressionTokenSaverPatch) => void | Promise<void>;
}) {
  const t = useTranslations("settings");
  const masterEnabled = config.enabled;
  const rtk = config.rtkConfig ?? { enabled: true, intensity: "standard" as RtkIntensity };
  const cavemanOut = config.cavemanOutputMode ?? {
    enabled: false,
    intensity: "full" as CavemanIntensity,
  };
  const cavemanIn = config.cavemanConfig ?? {
    enabled: true,
    intensity: "full" as CavemanIntensity,
  };

  return (
    <section className="rounded-lg border border-border/70 bg-surface/40 p-4">
      <div className="mb-1 flex items-start justify-between gap-4">
        <div className="min-w-0 flex-1">
          <h4 className="flex items-center gap-2 text-base font-semibold text-text-main">
            <span className="material-symbols-outlined text-[21px] text-amber-500">bolt</span>
            {t("tokenSaverTitle")}
          </h4>
          <p className="mt-1 text-sm text-text-muted">{t("tokenSaverSubtitle")}</p>
        </div>
        <StatusPill on={masterEnabled} />
      </div>

      <div className="mt-3 divide-y divide-border">
        <SummaryRow
          title={t("tokenSaverToolOutput")}
          badge="RTK"
          href="/dashboard/context/settings"
          on={masterEnabled && rtk.enabled}
          level={rtk.intensity}
        />
        <SummaryRow
          title={t("tokenSaverLlmOutput")}
          badge="Caveman"
          href="/dashboard/context/settings"
          on={masterEnabled && cavemanOut.enabled}
          level={cavemanOut.intensity}
        />
        <SummaryRow
          title={t("tokenSaverInputCompression")}
          badge="Caveman"
          href="/dashboard/context/settings"
          on={masterEnabled && cavemanIn.enabled}
          level={cavemanIn.intensity}
        />
      </div>

      <div className="mt-4 flex items-start gap-2 border-t border-border pt-3 text-xs text-text-muted">
        <span className="material-symbols-outlined mt-px text-[16px]">info</span>
        <p>
          Turn these layers on/off and set their level in{" "}
          <Link href="/dashboard/context/settings" className="text-primary hover:underline">
            Compression Settings
          </Link>
          .
        </p>
      </div>
    </section>
  );
}