feat(tui): add turn token usage diagnostics (#38398)

packages/tui/src/component/devtools-bar.tsx

@@ -59,6 +59,7 @@ export function DevToolsBar() {
   const canSwitchMode = () => supports(nextMode())
   const runtime = createMemo(() => runtimeStatus(frontendSamples()))
   const timing = () => config.data.debug?.timing ?? false
+  const turnTokens = () => config.data.debug?.turn_tokens ?? false
 
   const offEscape = keymap.intercept(
     "key",
@@ -352,6 +353,16 @@ export function DevToolsBar() {
               >
                 {timing() ? "[x]" : "[ ]"} Time to first draw
               </Action>
+              <Action
+                onClick={() =>
+                  void config.update((draft) => {
+                    draft.debug = { ...draft.debug, turn_tokens: !turnTokens() }
+                  })
+                }
+                hoverBackground
+              >
+                {turnTokens() ? "[x]" : "[ ]"} Turn token usage
+              </Action>
             </box>
             <For each={groups()}>
               {(group) => (
@@ -403,7 +414,7 @@ function PanelBox(props: ParentProps) {
       position="absolute"
       zIndex={2600}
       bottom={1}
-      left={0}
+      left={-1}
       width={42}
       paddingLeft={2}
       paddingRight={2}

packages/tui/src/component/dialog-config.tsx

@@ -222,14 +222,6 @@ const settings: Setting[] = [
     values: [false, true],
     labels: ["off", "on"],
   },
-  {
-    title: "DevTools: Timing",
-    category: "Debug",
-    path: ["debug", "timing"],
-    default: true,
-    values: [false, true],
-    labels: ["off", "on"],
-  },
 ]
 
 export function DialogConfig() {