diff --git a/loop/webui/src/types.ts b/loop/webui/src/types.ts
index dfa89a7..68b6045 100644
--- a/loop/webui/src/types.ts
+++ b/loop/webui/src/types.ts
@@ -67,6 +67,13 @@
 	initial_commit: string;
 	title: string;
 	os: string;
+	host_hostname?: string;
+	runtime_hostname?: string;
+	host_os?: string;
+	runtime_os?: string;
+	host_working_dir?: string;
+	runtime_working_dir?: string;
+	git_origin?: string;
 }
 
 export type CodingAgentMessageType = 'user' | 'agent' | 'error' | 'budget' | 'tool' | 'commit' | 'auto';
diff --git a/loop/webui/src/web-components/sketch-container-status.ts b/loop/webui/src/web-components/sketch-container-status.ts
index e4c5802..c6aa811 100644
--- a/loop/webui/src/web-components/sketch-container-status.ts
+++ b/loop/webui/src/web-components/sketch-container-status.ts
@@ -54,6 +54,11 @@
       font-weight: 600;
     }
 
+    [title] {
+      cursor: help;
+      text-decoration: underline dotted;
+    }
+
     .cost {
       color: #2e7d32;
     }
@@ -69,6 +74,62 @@
     super();
   }
 
+  formatHostname() {
+    const hostHostname = this.state?.host_hostname;
+    const runtimeHostname = this.state?.runtime_hostname;
+
+    if (!hostHostname || !runtimeHostname) {
+      return this.state?.hostname;
+    }
+
+    if (hostHostname === runtimeHostname) {
+      return hostHostname;
+    }
+
+    return `${hostHostname}:${runtimeHostname}`;
+  }
+
+  formatWorkingDir() {
+    const hostWorkingDir = this.state?.host_working_dir;
+    const runtimeWorkingDir = this.state?.runtime_working_dir;
+
+    if (!hostWorkingDir || !runtimeWorkingDir) {
+      return this.state?.working_dir;
+    }
+
+    if (hostWorkingDir === runtimeWorkingDir) {
+      return hostWorkingDir;
+    }
+
+    return `${hostWorkingDir}:${runtimeWorkingDir}`;
+  }
+
+  getHostnameTooltip() {
+    const hostHostname = this.state?.host_hostname;
+    const runtimeHostname = this.state?.runtime_hostname;
+
+    if (!hostHostname || !runtimeHostname || hostHostname === runtimeHostname) {
+      return "";
+    }
+
+    return `Host: ${hostHostname}, Runtime: ${runtimeHostname}`;
+  }
+
+  getWorkingDirTooltip() {
+    const hostWorkingDir = this.state?.host_working_dir;
+    const runtimeWorkingDir = this.state?.runtime_working_dir;
+
+    if (
+      !hostWorkingDir ||
+      !runtimeWorkingDir ||
+      hostWorkingDir === runtimeWorkingDir
+    ) {
+      return "";
+    }
+
+    return `Host: ${hostWorkingDir}, Runtime: ${runtimeWorkingDir}`;
+  }
+
   // See https://lit.dev/docs/components/lifecycle/
   connectedCallback() {
     super.connectedCallback();
@@ -91,13 +152,33 @@
           <a href="download">Download</a>
         </div>
         <div class="info-item">
-          <span id="hostname" class="info-value">${this.state?.hostname}</span>
+          <span
+            id="hostname"
+            class="info-value"
+            title="${this.getHostnameTooltip()}"
+          >
+            ${this.formatHostname()}
+          </span>
         </div>
         <div class="info-item">
-          <span id="workingDir" class="info-value"
-            >${this.state?.working_dir}</span
+          <span
+            id="workingDir"
+            class="info-value"
+            title="${this.getWorkingDirTooltip()}"
           >
+            ${this.formatWorkingDir()}
+          </span>
         </div>
+        ${this.state?.git_origin
+          ? html`
+              <div class="info-item">
+                <span class="info-label">Origin:</span>
+                <span id="gitOrigin" class="info-value"
+                  >${this.state?.git_origin}</span
+                >
+              </div>
+            `
+          : ""}
         <div class="info-item">
           <span class="info-label">Commit:</span>
           <span id="initialCommit" class="info-value"