feat: open TokenLedger settings from the overview and command center

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- Add a gear to the overview and an **Open TokenLedger Settings** command. Both open the plugin settings page, which is otherwise several levels deep.
+
 ## v0.8.1 (2026-10-23) — custom price overrides and provider `extends`
 
 Requires Paseo **0.11.0 or newer**. Existing ledger records and custom prices remain compatible. See the [release notes](docs/releases/v0.8.1.md).

README.md

@@ -89,7 +89,7 @@ Open any agent and pick the **TokenLedger** panel. Server lifecycle hooks start
 
 ## Settings
 
-Open **Settings → Plugins → token-ledger → TokenLedger** on the selected host:
+Open the gear on the overview, the **Open TokenLedger Settings** command, or **Settings → Plugins → token-ledger → TokenLedger** on the selected host:
 
 - **Timeline summaries** controls summaries for newly finished turns; existing rows remain intact.
 - **OpenRouter reference prices** controls both cached reference prices and background catalog refresh.

client/overview.tsx

@@ -1,7 +1,7 @@
 import { useDenseLayout } from "./layout.ts";
 import type { PluginTheme } from "@getpaseo/plugin";
 import { type PluginScreenProps } from "@getpaseo/plugin/client";
-import { ScrollView } from "@getpaseo/plugin/client/react-native";
+import { Icon, ScrollView } from "@getpaseo/plugin/client/react-native";
 import { useEffect, useMemo, useState } from "react";
 import { useOverview } from "./data.ts";
 import { Pressable, Text, View } from "react-native";
@@ -105,7 +105,8 @@ export function TokenLedgerOverview({
   layout,
   navigation,
   params,
-}: PluginScreenProps) {
+  openSettings,
+}: PluginScreenProps & { openSettings: () => void }) {
   const paramRange = parseRange(params.range);
   const [range, setRange] = useState(paramRange);
   useEffect(() => setRange(paramRange), [paramRange]);
@@ -130,7 +131,20 @@ export function TokenLedgerOverview({
 
   return (
     <ScrollView style={styles.screen} contentContainerStyle={styles.content} onLayout={(event) => setWidth(event.nativeEvent.layout.width)}>
-      <RangePicker range={range} theme={theme} onRange={setRange} />
+      <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
+        <View style={{ flex: 1 }}>
+          <RangePicker range={range} theme={theme} onRange={setRange} />
+        </View>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="TokenLedger settings"
+          hitSlop={8}
+          onPress={openSettings}
+          style={({ pressed }) => ({ padding: 4, borderRadius: 6, backgroundColor: pressed ? theme.colors.surface1 : "transparent" })}
+        >
+          <Icon name="Settings" size={16} color={theme.colors.foregroundMuted} />
+        </Pressable>
+      </View>
       {error ? <Text style={{ color: theme.colors.statusDanger, fontSize: 13 }}>{String(error)}</Text> : null}
       {data ? (
         <>

index.client.tsx

@@ -10,9 +10,11 @@ import { UsageTimelineRow } from "./client/timeline.tsx";
 import { UsageTimelineSchema, USAGE_TIMELINE_KIND } from "./shared/timeline.ts";
 import { TokenLedgerSettings } from './client/settings.tsx';
 
+const SETTINGS_SCREEN = 'preferences';
+
 export default function contribute(client: PluginClientContext) {
   const placement = createPanelPlacement();
-  client.addSettingsScreen({ id: 'preferences', title: 'TokenLedger', icon: 'Coins', Component: TokenLedgerSettings });
+  client.addSettingsScreen({ id: SETTINGS_SCREEN, title: 'TokenLedger', icon: 'Coins', Component: TokenLedgerSettings });
   client.addTimelineRenderer({ kind: USAGE_TIMELINE_KIND, version: 1, schema: UsageTimelineSchema, Component: UsageTimelineRow });
   client.addWorkspacePanel({
     id: "ledger",
@@ -25,7 +27,7 @@ export default function contribute(client: PluginClientContext) {
   client.addScreen({
     id: OVERVIEW_SCREEN,
     title: "TokenLedger",
-    Component: TokenLedgerOverview,
+    Component: (props) => <TokenLedgerOverview {...props} openSettings={() => client.openSettings(SETTINGS_SCREEN)} />,
   });
   client.addSidebarFooterItem({ id: "ledger-today", title: "TokenLedger", Component: LedgerSidebarItem });
   client.addCommandCenterItem({
@@ -48,5 +50,15 @@ export default function contribute(client: PluginClientContext) {
       openScreen({ screenId: OVERVIEW_SCREEN });
     },
   });
+  client.addCommandCenterItem({
+    id: "open-ledger-settings",
+    title: "Open TokenLedger Settings",
+    icon: "Settings",
+    keywords: ["token", "usage", "cost", "ledger", "settings", "pricing"],
+    context: "global",
+    onSelect({ openSettings }) {
+      openSettings(SETTINGS_SCREEN);
+    },
+  });
   return contributePills(client, placement);
 }