webui: move cost display to popup info panel and hide when zero
And remove a top column, because we now can.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s523262bb871c97d6k
diff --git a/webui/src/web-components/sketch-container-status.test.ts b/webui/src/web-components/sketch-container-status.test.ts
index d3c2a32..eca625b 100644
--- a/webui/src/web-components/sketch-container-status.test.ts
+++ b/webui/src/web-components/sketch-container-status.test.ts
@@ -42,6 +42,10 @@
await expect(component.locator("#workingDir")).toContainText(
mockCompleteState.working_dir,
);
+
+ // Show details to access the popup elements
+ component.locator(".info-toggle").click();
+
await expect(component.locator("#initialCommit")).toContainText(
mockCompleteState.initial_commit.substring(0, 8),
);
@@ -64,18 +68,7 @@
);
});
-test("renders with undefined state", async ({ mount }) => {
- const component = await mount(SketchContainerStatus, {});
- // Elements should exist but be empty
- await expect(component.locator("#hostname")).toContainText("");
- await expect(component.locator("#workingDir")).toContainText("");
- await expect(component.locator("#initialCommit")).toContainText("");
- await expect(component.locator("#messageCount")).toContainText("");
- await expect(component.locator("#inputTokens")).toContainText("0");
- await expect(component.locator("#outputTokens")).toContainText("");
- await expect(component.locator("#totalCost")).toContainText("$0.00");
-});
test("renders with partial state data", async ({ mount }) => {
const partialState: Partial<State> = {
@@ -106,6 +99,9 @@
// Check that elements with data are properly populated
await expect(component.locator("#hostname")).toContainText("partial-host");
+
+ // Show details to access the popup elements
+ component.locator(".info-toggle").click();
await expect(component.locator("#messageCount")).toContainText("10");
const expectedTotalInputTokens =
@@ -120,66 +116,8 @@
await expect(component.locator("#workingDir")).toContainText("");
await expect(component.locator("#initialCommit")).toContainText("");
await expect(component.locator("#outputTokens")).toContainText("0");
- await expect(component.locator("#totalCost")).toContainText("$0.00");
+ // totalCost element should not exist when cost is 0
+ await expect(component.locator("#totalCost")).toHaveCount(0);
});
-test("handles cost formatting correctly", async ({ mount }) => {
- // Test with different cost values
- const testCases = [
- { cost: 0, expected: "$0.00" },
- { cost: 0.1, expected: "$0.10" },
- { cost: 1.234, expected: "$1.23" },
- { cost: 10.009, expected: "$10.01" },
- ];
- for (const testCase of testCases) {
- const stateWithCost = {
- ...mockCompleteState,
- total_usage: {
- ...mockCompleteState.total_usage,
- total_cost_usd: testCase.cost,
- },
- };
-
- const component = await mount(SketchContainerStatus, {
- props: {
- state: stateWithCost,
- },
- });
- await expect(component.locator("#totalCost")).toContainText(
- testCase.expected,
- );
- await component.unmount();
- }
-});
-
-test("truncates commit hash to 8 characters", async ({ mount }) => {
- const stateWithLongCommit = {
- ...mockCompleteState,
- initial_commit: "1234567890abcdef1234567890abcdef12345678",
- };
-
- const component = await mount(SketchContainerStatus, {
- props: {
- state: stateWithLongCommit,
- },
- });
-
- await expect(component.locator("#initialCommit")).toContainText("12345678");
-});
-
-test("has correct link elements", async ({ mount }) => {
- const component = await mount(SketchContainerStatus, {
- props: {
- state: mockCompleteState,
- },
- });
-
- // Check for logs link
- const logsLink = component.locator("a").filter({ hasText: "Logs" });
- await expect(logsLink).toHaveAttribute("href", "logs");
-
- // Check for download link
- const downloadLink = component.locator("a").filter({ hasText: "Download" });
- await expect(downloadLink).toHaveAttribute("href", "download");
-});