Add Exact and Calm information modes to the floating bar (SOU-178)

apps/desktop-tauri/src-tauri/src/commands/bridge.rs

@@ -561,6 +561,7 @@ pub struct SettingsSnapshot {
     float_bar_style: String,
     taskbar_widget_open_on_hover: bool,
     float_bar_density: String,
+    float_bar_information_mode: String,
     float_bar_contrast: String,
     float_bar_click_through: bool,
     float_bar_provider_ids: Vec<String>,
@@ -661,6 +662,7 @@ impl From<Settings> for SettingsSnapshot {
             float_bar_style: settings.float_bar_style,
             taskbar_widget_open_on_hover: settings.taskbar_widget_open_on_hover,
             float_bar_density: settings.float_bar_density,
+            float_bar_information_mode: settings.float_bar_information_mode,
             float_bar_contrast,
             float_bar_click_through: settings.float_bar_click_through,
             float_bar_provider_ids: settings.float_bar_provider_ids,

apps/desktop-tauri/src-tauri/src/commands/settings.rs

@@ -58,6 +58,7 @@ pub struct SettingsUpdate {
     pub float_bar_style: Option<String>,
     pub taskbar_widget_open_on_hover: Option<bool>,
     pub float_bar_density: Option<String>,
+    pub float_bar_information_mode: Option<String>,
     pub float_bar_contrast: Option<String>,
     pub float_bar_click_through: Option<bool>,
     pub float_bar_provider_ids: Option<Vec<String>>,
@@ -283,6 +284,7 @@ impl SettingsUpdate {
             style: self.float_bar_style.clone(),
             open_on_hover: self.taskbar_widget_open_on_hover,
             density: self.float_bar_density.clone(),
+            information_mode: self.float_bar_information_mode.clone(),
             contrast: self.float_bar_contrast.clone(),
             click_through: self.float_bar_click_through,
             provider_ids: self.float_bar_provider_ids.clone(),

apps/desktop-tauri/src-tauri/src/floatbar/mod.rs

@@ -107,6 +107,7 @@ pub struct SettingsPatch {
     pub style: Option<String>,
     pub open_on_hover: Option<bool>,
     pub density: Option<String>,
+    pub information_mode: Option<String>,
     pub contrast: Option<String>,
     pub click_through: Option<bool>,
     pub provider_ids: Option<Vec<String>>,
@@ -126,6 +127,7 @@ impl SettingsPatch {
             && self.style.is_none()
             && self.open_on_hover.is_none()
             && self.density.is_none()
+            && self.information_mode.is_none()
             && self.contrast.is_none()
             && self.click_through.is_none()
             && self.provider_ids.is_none()
@@ -164,6 +166,10 @@ impl SettingsPatch {
         if let Some(v) = &self.density {
             settings.float_bar_density = codexbar::settings::normalize_float_bar_density(v);
         }
+        if let Some(v) = &self.information_mode {
+            settings.float_bar_information_mode =
+                codexbar::settings::normalize_float_bar_information_mode(v);
+        }
         if let Some(v) = &self.contrast {
             settings.float_bar_contrast = Some(codexbar::settings::normalize_float_bar_contrast(v));
         }
@@ -218,6 +224,22 @@ mod tests {
         assert!(SettingsPatch::default().is_empty());
     }
 
+    #[test]
+    fn information_mode_only_change_is_a_non_empty_patch() {
+        // A mode-only change must count as a float-bar patch so the detached
+        // bar is told to re-fetch (after_settings_saved notifies when the patch
+        // is non-empty), and so it applies the new mode on disk.
+        let patch = SettingsPatch {
+            information_mode: Some("calm".into()),
+            ..SettingsPatch::default()
+        };
+        assert!(!patch.is_empty());
+
+        let mut settings = Settings::default();
+        patch.apply(&mut settings);
+        assert_eq!(settings.float_bar_information_mode, "calm");
+    }
+
     #[test]
     fn settings_patch_apply_only_writes_present_fields() {
         let mut s = Settings {

apps/desktop-tauri/src/App.test.tsx

@@ -112,6 +112,7 @@ function settings(overrides: Partial<SettingsSnapshot> = {}): SettingsSnapshot {
     floatBarStyle: "floating",
     taskbarWidgetOpenOnHover: true,
     floatBarDensity: "standard",
+    floatBarInformationMode: "exact",
     floatBarContrast: "auto",
     floatBarClickThrough: false,
     floatBarProviderIds: [],

apps/desktop-tauri/src/floatbar/FloatBar.css

@@ -287,6 +287,51 @@ body.floatbar-window #root {
 .floatbar__reset--emphasis .floatbar__reset-time {
   font-weight: 650;
 }
+/* ── Calm information mode ─────────────────────────────────────────────
+   The pill leads with a trustworthy pace state + next reset and becomes an
+   expandable button. No new motion, so reduced-motion is unaffected. */
+.floatbar__pill--calm {
+  cursor: pointer;
+}
+.floatbar__pill--calm:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--ceiling-accent, #26b5ce) 70%, white);
+  outline-offset: 1px;
+}
+.floatbar__pace {
+  font-size: 0.86em;
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+}
+.floatbar__pace--steady {
+  color: color-mix(in srgb, #34d399 62%, white);
+}
+.floatbar__pace--watch {
+  color: color-mix(in srgb, #f59e0b 68%, white);
+}
+.floatbar__calm-reset {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(3px * var(--floatbar-scale, 1));
+  opacity: 0.66;
+  line-height: 1;
+}
+.floatbar__calm-sep {
+  opacity: 0.5;
+}
+.floatbar__pct--calm {
+  padding-left: calc(6px * var(--floatbar-scale, 1));
+  margin-left: calc(2px * var(--floatbar-scale, 1));
+  border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+  font-size: 0.98em;
+}
+.floatbar--light-bg .floatbar__pace--steady {
+  color: color-mix(in srgb, #059669 78%, black);
+}
+.floatbar--light-bg .floatbar__pace--watch {
+  color: color-mix(in srgb, #b45309 82%, black);
+}
+
 .floatbar--vertical .floatbar__text {
   flex-direction: column;
   align-items: center;

apps/desktop-tauri/src/floatbar/FloatBar.test.tsx

@@ -137,6 +137,7 @@ function settings(overrides: Partial<SettingsSnapshot> = {}): SettingsSnapshot {
     floatBarStyle: "floating",
     taskbarWidgetOpenOnHover: true,
     floatBarDensity: "standard",
+    floatBarInformationMode: "exact",
     floatBarContrast: "light-text",
     floatBarClickThrough: false,
     floatBarProviderIds: [],
@@ -221,6 +222,73 @@ describe("FloatBar", () => {
     expect(titles[1]).toMatch(/Claude: 20% used/);
   });
 
+  it("calm mode leads with a pace state and expands to the exact % on click", async () => {
+    const calmProvider: ProviderUsageSnapshot = {
+      ...snapshot("codex", "Codex", 60, {
+        resetsAt: new Date(Date.now() + 2 * 3600_000).toISOString(),
+      }),
+      updatedAt: new Date().toISOString(),
+      pace: {
+        windowLabel: "Weekly",
+        stage: "on_track",
+        deltaPercent: 0,
+        willLastToReset: true,
+        etaSeconds: null,
+        expectedUsedPercent: 60,
+        actualUsedPercent: 60,
+      },
+    };
+    tauriMocks.getCachedProviders.mockResolvedValue([calmProvider]);
+    tauriMocks.getSettingsSnapshot.mockResolvedValue(
+      settings({ floatBarInformationMode: "calm" }),
+    );
+
+    const { container } = renderFloatBar(
+      bootstrap({ floatBarInformationMode: "calm" }),
+    );
+    await waitFor(() => {
+      expect(container.querySelector(".floatbar__pill--calm")).toBeInTheDocument();
+    });
+
+    // Calm leads with the trustworthy pace state; the exact % is hidden until
+    // the user expands, and the pill is a keyboard-accessible button.
+    expect(container.querySelector(".floatbar__pace")).toHaveTextContent("On pace");
+    expect(container.querySelector(".floatbar__pct--calm")).toBeNull();
+    const pill = container.querySelector<HTMLElement>(".floatbar__pill--calm")!;
+    expect(pill.getAttribute("role")).toBe("button");
+    expect(pill.getAttribute("tabindex")).toBe("0");
+
+    act(() => {
+      pill.click();
+    });
+    expect(container.querySelector(".floatbar__pct--calm")).toHaveTextContent("60%");
+  });
+
+  it("calm + compact stays non-blank and drops the window·reset row", async () => {
+    // No fresh pace + compact density (which hides the window/reset): the pill
+    // must still show the exact % rather than collapse to just the icon, and
+    // the calm reset row (with its separator) must not render.
+    tauriMocks.getCachedProviders.mockResolvedValue([
+      snapshot("codex", "Codex", 60, {
+        resetsAt: new Date(Date.now() + 3600_000).toISOString(),
+      }),
+    ]);
+    tauriMocks.getSettingsSnapshot.mockResolvedValue(
+      settings({ floatBarInformationMode: "calm", floatBarDensity: "compact" }),
+    );
+
+    const { container } = renderFloatBar(
+      bootstrap({ floatBarInformationMode: "calm", floatBarDensity: "compact" }),
+    );
+    await waitFor(() => {
+      expect(container.querySelector(".floatbar__pill--calm")).toBeInTheDocument();
+    });
+
+    expect(container.querySelector(".floatbar__calm-reset")).toBeNull();
+    expect(container.querySelector(".floatbar__calm-sep")).toBeNull();
+    expect(container.querySelector(".floatbar__pct--calm")).toHaveTextContent("60%");
+  });
+
   it("does not render hypothetical local costs from the legacy setting", async () => {
     tauriMocks.getCachedProviders.mockResolvedValue([
       snapshot("codex", "Codex", 75),