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");
-});
diff --git a/webui/src/web-components/sketch-container-status.ts b/webui/src/web-components/sketch-container-status.ts
index c6b862d..2199342 100644
--- a/webui/src/web-components/sketch-container-status.ts
+++ b/webui/src/web-components/sketch-container-status.ts
@@ -207,10 +207,6 @@
       cursor: default;
     }
 
-    .cost {
-      color: #2e7d32;
-    }
-
     .info-item a {
       --tw-text-opacity: 1;
       color: rgb(37 99 235 / var(--tw-text-opacity, 1));
@@ -246,7 +242,7 @@
 
     .main-info-grid {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-columns: 1fr 1fr;
       gap: 10px;
       width: 100%;
     }
@@ -614,18 +610,37 @@
   render() {
     return html`
       <div class="info-container">
-        <!-- Main visible info in two columns - hostname/dir and repo/cost -->
+        <!-- Main visible info in two columns - github/hostname/dir and last commit -->
         <div class="main-info-grid">
-          <!-- First column: hostname and working dir -->
+          <!-- First column: GitHub repo (or hostname) and working dir -->
           <div class="info-column">
             <div class="info-item">
-              <span
-                id="hostname"
-                class="info-value"
-                title="${this.getHostnameTooltip()}"
-              >
-                ${this.formatHostname()}
-              </span>
+              ${(() => {
+                const github = this.formatGitHubRepo(this.state?.git_origin);
+                if (github) {
+                  return html`
+                    <a
+                      href="${github.url}"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="github-link"
+                      title="${this.state?.git_origin}"
+                    >
+                      ${github.formatted}
+                    </a>
+                  `;
+                } else {
+                  return html`
+                    <span
+                      id="hostname"
+                      class="info-value"
+                      title="${this.getHostnameTooltip()}"
+                    >
+                      ${this.formatHostname()}
+                    </span>
+                  `;
+                }
+              })()}
             </div>
             <div class="info-item">
               <span
@@ -638,49 +653,7 @@
             </div>
           </div>
 
-          <!-- Second column: git repo, agent state, and cost -->
-          <div class="info-column">
-            ${this.state?.git_origin
-              ? html`
-                  <div class="info-item">
-                    ${(() => {
-                      const github = this.formatGitHubRepo(
-                        this.state?.git_origin,
-                      );
-                      if (github) {
-                        return html`
-                          <a
-                            href="${github.url}"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="github-link"
-                            title="${this.state?.git_origin}"
-                          >
-                            ${github.formatted}
-                          </a>
-                        `;
-                      } else {
-                        return html`
-                          <span id="gitOrigin" class="info-value"
-                            >${this.state?.git_origin}</span
-                          >
-                        `;
-                      }
-                    })()}
-                  </div>
-                `
-              : ""}
-
-            <div class="info-item">
-              <span id="totalCost" class="info-value cost"
-                >$${(this.state?.total_usage?.total_cost_usd || 0).toFixed(
-                  2,
-                )}</span
-              >
-            </div>
-          </div>
-
-          <!-- Third column: Last Commit -->
+          <!-- Second column: Last Commit -->
           <div class="info-column last-commit-column">
             <div class="info-item">
               <span class="info-label">Last Commit</span>
@@ -774,6 +747,16 @@
                 >${this.state?.session_id || "N/A"}</span
               >
             </div>
+            <div class="info-item">
+              <span class="info-label">Hostname:</span>
+              <span
+                id="hostnameDetail"
+                class="info-value"
+                title="${this.getHostnameTooltip()}"
+              >
+                ${this.formatHostname()}
+              </span>
+            </div>
             ${this.state?.agent_state
               ? html`
                   <div class="info-item">
@@ -800,6 +783,18 @@
                 >${formatNumber(this.state?.total_usage?.output_tokens)}</span
               >
             </div>
+            ${(this.state?.total_usage?.total_cost_usd || 0) > 0
+              ? html`
+                  <div class="info-item">
+                    <span class="info-label">Total cost:</span>
+                    <span id="totalCost" class="info-value cost"
+                      >$${(this.state?.total_usage?.total_cost_usd).toFixed(
+                        2,
+                      )}</span
+                    >
+                  </div>
+                `
+              : ""}
             <div
               class="info-item"
               style="grid-column: 1 / -1; margin-top: 5px; border-top: 1px solid #eee; padding-top: 5px;"