T24f Agent: control and cost

HumanInputRequest asks a question with answers to pick and a line to write one; CostBreakdown totals a session and splits it by part. InterruptButton, TokenUsageChart, TraceViewer and EvalResultTable point to chat::stop_button, a stacked BarChart, TimelineProfiler and DataTable. UsageBar shows amounts as its owner writes them. MemoryPanel and HumanInputRequest share agent::line::send_line; the chapter's bool callbacks take forms::OnFlag. DataTable scrolls columns wider than its box sideways, pinned or not, and leaves a plain wheel to the page; sortable headers are Tab stops. TimelineProfiler fits its ruler to its lane, its spans are Tab stops, and a picked span takes accent.
2026-09-26 11:39:24 -04:00
1 parent 96c4fe01a6
commit a29cc8bc45
@@ -1,9 +1,9 @@
 use std::{collections::HashSet, rc::Rc};

 use gpui::{
-    AnyElement, App, ElementId, Entity, InteractiveElement, IntoElement, MouseButton,
-    ParentElement, Pixels, Rems, SharedString, StatefulInteractiveElement, Styled, Window, div,
-    prelude::*,
+    AnyElement, App, Div, ElementId, Entity, InteractiveElement, IntoElement, MouseButton,
+    ParentElement, Pixels, Rems, SharedString, Stateful, StatefulInteractiveElement, Styled,
+    Window, div, prelude::*, transparent_black,
 };

 use super::{Align, Column, Row, cell::draw, model::tint, table::View};
@@ -32,6 +32,13 @@ pub(super) fn sized<E: Styled>(cell: E, column: &Column, narrowest: Rems) -> E {
    }
 }

+/// A box a table's columns scroll sideways in; a plain wheel passes to the page.
+pub(super) fn sideways(id: &ElementId) -> Stateful<Div> {
+    let mut sideways = div().id((id.clone(), "sideways")).overflow_x_scroll();
+    sideways.style().restrict_scroll_to_axis = Some(true);
+    sideways
+}
+
 /// What the body draws, one after another.
 #[derive(Clone, Debug, PartialEq)]
 pub(super) enum Line {
@@ -76,6 +83,21 @@ impl Body {
        self.lead * (usize::from(self.select.is_some()) + usize::from(self.detail.is_some())) as f32
    }

+    /// The least width columns `cols` draw in: fixed widths, the narrowest share for the rest, and the leading cells.
+    pub(super) fn least(&self, cols: &[usize], lead: bool, rem: Pixels) -> Pixels {
+        let start = match lead {
+            true => self.lead_width().to_pixels(rem),
+            false => Pixels::ZERO,
+        };
+        cols.iter().fold(start, |sum, col| {
+            sum + match (self.widths[*col], self.columns[*col].width) {
+                (Some(width), _) => width,
+                (None, Some(width)) => width.to_pixels(rem),
+                (None, None) => self.narrowest.to_pixels(rem),
+            }
+        })
+    }
+
    /// Line `at` over columns `cols`; `lead` draws the leading cells.
    pub(super) fn line(
        &self,
@@ -266,7 +288,9 @@ impl Body {
            .h_full()
            .flex()
            .items_center()
-            .px_3();
+            .px_3()
+            .border_x_1()
+            .border_color(transparent_black());
        let frame = match self.widths[col] {
            Some(width) => frame
                .w(width)
@@ -1,13 +1,13 @@
 use gpui::{
    App, DragMoveEvent, ElementId, Entity, EntityId, FontWeight, InteractiveElement, IntoElement,
-    ParentElement, Pixels, Rems, SharedString, StatefulInteractiveElement, Styled, canvas, div,
-    prelude::*,
+    MouseButton, ParentElement, Pixels, Rems, SharedString, StatefulInteractiveElement, Styled,
+    canvas, div, prelude::*, transparent_black,
 };

 use super::{Column, body::sized, table::View};
 use crate::layout::seeded::Seeded;
 use crate::{
-    primitives::{DragGhost, Icon, IconName},
+    primitives::{DragGhost, FocusRing, Icon, IconName},
    theme::{ActiveTheme, IconSize, TextSize},
 };

@@ -111,6 +111,8 @@ pub(crate) fn header(
        .items_center()
        .gap_1()
        .px_3()
+        .border_1()
+        .border_color(transparent_black())
        .text_size(theme.text_size(TextSize::Xs))
        .font_weight(FontWeight::MEDIUM)
        .text_color(colors.fg_muted);
@@ -120,8 +122,11 @@ pub(crate) fn header(
    };
    cell.when(column.sortable, |cell| {
        let key = key.clone();
-        cell.cursor_pointer()
+        cell.tab_index(0)
+            .focus_ring(cx)
+            .cursor_pointer()
            .hover(|style| style.text_color(colors.fg))
+            .on_mouse_down(MouseButton::Left, |_, window, _| window.prevent_default())
            .on_click(move |event, _, cx| {
                let join = event.modifiers().shift;
                sorter.update(cx, |sorting, cx| {
@@ -6,12 +6,12 @@ use std::{
 use gpui::{
    AnyElement, App, Div, ElementId, Entity, FontWeight, InteractiveElement, IntoElement,
    ParentElement, Pixels, RenderOnce, SharedString, StatefulInteractiveElement, StyleRefinement,
-    Styled, UniformListScrollHandle, Window, div, prelude::*, uniform_list,
+    Styled, UniformListScrollHandle, Window, div, prelude::*, transparent_black, uniform_list,
 };

 use super::{
    Aggregate, Cell, Column, FilterRule,
-    body::{Body, Detail, Line, OnEdit, Select, sized},
+    body::{Body, Detail, Line, OnEdit, Select, sideways, sized},
    header::header,
    model::{figure, filtered, page, range},
    rules::{groups, kept, sorted_by},
@@ -380,7 +380,12 @@ impl RenderOnce for DataTable {
                                    )
                                    .child(value)
                            });
-                            let cell = div().px_3().flex().items_center();
+                            let cell = div()
+                                .px_3()
+                                .border_x_1()
+                                .border_color(transparent_black())
+                                .flex()
+                                .items_center();
                            match widths[*col] {
                                Some(width) => cell.w(width).flex_none(),
                                None => sized(cell, column, narrowest),
@@ -400,64 +405,68 @@ impl RenderOnce for DataTable {
                .children(lines)
                .children(figures(cols, lead, cx))
        };
-        let table: AnyElement = if total == 0 {
-            let theme = cx.theme();
-            div()
-                .flex()
-                .flex_col()
-                .child(heads(&shown_columns, true, cx))
-                .child(
-                    div()
-                        .flex()
-                        .justify_center()
-                        .py_6()
-                        .text_size(theme.text_size(TextSize::Sm))
-                        .text_color(theme.colors.fg_subtle)
-                        .child("Nothing matches."),
-                )
-                .into_any_element()
-        } else if self.virtualized {
-            let (scroll, count, cols, drawn) = (
-                view.read(cx).scroll.clone(),
-                body.lines.len(),
-                shown_columns.clone(),
-                body.clone(),
-            );
-            div()
-                .flex()
-                .flex_col()
-                .size_full()
-                .child(heads(&shown_columns, true, cx))
-                .child(
-                    uniform_list((id.clone(), "rows"), count, move |range, window, cx| {
-                        range
-                            .map(|at| drawn.line(at, &cols, true, window, cx))
-                            .collect()
-                    })
-                    .track_scroll(scroll)
-                    .flex_1()
-                    .min_h_0(),
-                )
-                .children(figures(&shown_columns, true, cx))
-                .into_any_element()
-        } else if pinned_any {
-            let (held, moving): (Vec<usize>, Vec<usize>) =
-                shown_columns.iter().partition(|col| columns[**col].pinned);
-            div()
-                .flex()
-                .child(part(&held, true, window, cx).flex_none())
-                .child(
-                    div()
-                        .id((id.clone(), "sideways"))
+        let table: AnyElement =
+            if total == 0 {
+                let theme = cx.theme();
+                let least = body.least(&shown_columns, true, rem);
+                sideways(&id)
+                    .child(
+                        div()
+                            .flex()
+                            .flex_col()
+                            .min_w(least)
+                            .child(heads(&shown_columns, true, cx))
+                            .child(
+                                div()
+                                    .flex()
+                                    .justify_center()
+                                    .py_6()
+                                    .text_size(theme.text_size(TextSize::Sm))
+                                    .text_color(theme.colors.fg_subtle)
+                                    .child("Nothing matches."),
+                            ),
+                    )
+                    .into_any_element()
+            } else if self.virtualized {
+                let (scroll, count, cols, drawn) = (
+                    view.read(cx).scroll.clone(),
+                    body.lines.len(),
+                    shown_columns.clone(),
+                    body.clone(),
+                );
+                div()
+                    .flex()
+                    .flex_col()
+                    .size_full()
+                    .child(heads(&shown_columns, true, cx))
+                    .child(
+                        uniform_list((id.clone(), "rows"), count, move |range, window, cx| {
+                            range
+                                .map(|at| drawn.line(at, &cols, true, window, cx))
+                                .collect()
+                        })
+                        .track_scroll(scroll)
                        .flex_1()
-                        .min_w_0()
-                        .overflow_x_scroll()
-                        .child(part(&moving, false, window, cx)),
-                )
-                .into_any_element()
-        } else {
-            part(&shown_columns, true, window, cx).into_any_element()
-        };
+                        .min_h_0(),
+                    )
+                    .children(figures(&shown_columns, true, cx))
+                    .into_any_element()
+            } else if pinned_any {
+                let (held, moving): (Vec<usize>, Vec<usize>) =
+                    shown_columns.iter().partition(|col| columns[**col].pinned);
+                div()
+                    .flex()
+                    .child(part(&held, true, window, cx).flex_none())
+                    .child(sideways(&id).flex_1().min_w_0().child(
+                        part(&moving, false, window, cx).min_w(body.least(&moving, false, rem)),
+                    ))
+                    .into_any_element()
+            } else {
+                let least = body.least(&shown_columns, true, rem);
+                sideways(&id)
+                    .child(part(&shown_columns, true, window, cx).min_w(least))
+                    .into_any_element()
+            };
        let pager = pages.filter(|pages| *pages > 1).map(|pages| {
            let size = self.page_size.expect("pages come from a page size");
            let (first, last) = (page_at * size + 1, ((page_at + 1) * size).min(total));
@@ -0,0 +1,95 @@
+use std::{cell::RefCell, rc::Rc};
+
+use gpui::{
+    Context, IntoElement, KeyUpEvent, Keystroke, Modifiers, Render, Styled, TestAppContext, Window,
+    point, px,
+};
+
+use super::{edit_at, settle};
+use crate::{
+    tables::{Column, DataTable, Row},
+    theme::Theme,
+};
+
+/// Three editable columns 200 wide in a table 280 wide, the first pinned or not; it keeps the column of each edit.
+struct Wide(Rc<RefCell<Vec<String>>>, bool);
+
+impl Render for Wide {
+    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
+        let heard = self.0.clone();
+        let column = |key: &'static str| Column::new(key, key).width(gpui::rems(12.5)).editable();
+        let first = if self.1 {
+            column("a").pinned()
+        } else {
+            column("a")
+        };
+        DataTable::new("wide", [first, column("b"), column("c")])
+            .rows(vec![Row::new("r", ["A".into(), "B".into(), "C".into()])])
+            .on_edit(move |_, column, _, _, _| heard.borrow_mut().push(column.to_string()))
+            .w(px(280.0))
+    }
+}
+
+#[gpui::test]
+fn columns_past_the_table_scroll_sideways_and_a_plain_wheel_leaves_them(cx: &mut TestAppContext) {
+    cx.update(|cx| {
+        Theme::init(cx);
+        crate::forms::bind_keys(cx);
+    });
+    for pinned in [false, true] {
+        let heard = Rc::new(RefCell::new(Vec::new()));
+        let seen = heard.clone();
+        let (_, cx) = cx.add_window_view(|_, _| Wide(seen, pinned));
+        settle(cx);
+        let cell = point(px(250.0), px(54.0));
+        for delta in [point(px(0.0), px(-2000.0)), point(px(-2000.0), px(0.0))] {
+            cx.simulate_event(gpui::ScrollWheelEvent {
+                position: cell,
+                delta: gpui::ScrollDelta::Pixels(delta),
+                modifiers: Modifiers::none(),
+                touch_phase: gpui::TouchPhase::Moved,
+            });
+            settle(cx);
+            edit_at(cell, "x", cx);
+        }
+        assert_eq!(*heard.borrow(), ["b", "c"], "pinned {pinned}");
+    }
+}
+
+/// Two rows under a sortable, editable name; it keeps the row of each edit.
+struct Sorting(Rc<RefCell<Vec<String>>>);
+
+impl Render for Sorting {
+    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
+        let heard = self.0.clone();
+        DataTable::new("sorting", [Column::new("name", "Name").editable()])
+            .rows(vec![
+                Row::new("bea", ["Bea".into()]),
+                Row::new("ada", ["Ada".into()]),
+            ])
+            .on_edit(move |row, _, _, _, _| heard.borrow_mut().push(row.to_string()))
+            .w(px(400.0))
+    }
+}
+
+#[gpui::test]
+fn tab_reaches_a_header_and_enter_sorts_by_it(cx: &mut TestAppContext) {
+    cx.update(|cx| {
+        Theme::init(cx);
+        crate::forms::bind_keys(cx);
+    });
+    let heard = Rc::new(RefCell::new(Vec::new()));
+    let seen = heard.clone();
+    let (_, cx) = cx.add_window_view(|_, _| Sorting(seen));
+    cx.update(|window, _| window.activate_window());
+    settle(cx);
+    cx.update(|window, _| window.focus_next());
+    cx.simulate_keystrokes("enter");
+    settle(cx);
+    cx.simulate_event(KeyUpEvent {
+        keystroke: Keystroke::parse("enter").expect("a key"),
+    });
+    settle(cx);
+    edit_at(point(px(120.0), px(54.0)), "x", cx);
+    assert_eq!(*heard.borrow(), ["ada"], "Ada rises to the top");
+}
@@ -9,6 +9,8 @@ use gpui::{
    Styled, TestAppContext, VisualTestContext, Window, div, point, px,
 };

+mod columns;
+
 use super::{Column, DataTable, FilterBuilder, FilterRule, Row};
 use crate::{
    primitives::{FocusNext, FocusPrev, FocusScope},
@@ -39,6 +41,29 @@ fn settle(cx: &mut VisualTestContext) {
    cx.run_until_parked();
 }

+/// Edits the cell at `at`: a double press, then `text` and Enter.
+fn edit_at(at: gpui::Point<gpui::Pixels>, text: &str, cx: &mut VisualTestContext) {
+    for count in [1, 2] {
+        cx.simulate_event(gpui::MouseDownEvent {
+            button: gpui::MouseButton::Left,
+            position: at,
+            modifiers: Modifiers::none(),
+            click_count: count,
+            first_mouse: false,
+        });
+        cx.simulate_event(gpui::MouseUpEvent {
+            button: gpui::MouseButton::Left,
+            position: at,
+            modifiers: Modifiers::none(),
+            click_count: count,
+        });
+    }
+    settle(cx);
+    cx.simulate_input(text);
+    cx.simulate_keystrokes("enter");
+    settle(cx);
+}
+
 fn picks(seen: &Rc<RefCell<Vec<SharedString>>>) -> Vec<String> {
    seen.borrow().iter().map(|key| key.to_string()).collect()
 }
@@ -159,26 +184,11 @@ fn a_row_opens_its_detail_and_a_double_press_edits_a_cell(cx: &mut TestAppContex
    cx.simulate_click(point(px(14.0), px(54.0)), Modifiers::none());
    settle(cx);
    assert_eq!(heard.borrow().last().map(String::as_str), Some("detail a"));
-    let name = point(px(120.0), px(54.0 + 36.0 + 40.0 + 24.0));
-    for count in [1, 2] {
-        cx.simulate_event(gpui::MouseDownEvent {
-            button: gpui::MouseButton::Left,
-            position: name,
-            modifiers: Modifiers::none(),
-            click_count: count,
-            first_mouse: false,
-        });
-        cx.simulate_event(gpui::MouseUpEvent {
-            button: gpui::MouseButton::Left,
-            position: name,
-            modifiers: Modifiers::none(),
-            click_count: count,
-        });
-    }
-    settle(cx);
-    cx.simulate_input("Alan Kay");
-    cx.simulate_keystrokes("enter");
-    settle(cx);
+    edit_at(
+        point(px(120.0), px(54.0 + 36.0 + 40.0 + 24.0)),
+        "Alan Kay",
+        cx,
+    );
    assert_eq!(
        heard
            .borrow()