sketch: Propagate host vs. runtime OS/WorkingDir/Hostname
If you have a bunch of sketch sessions, you need to know where they were
launched. The container hostnames (some random thing) and working dirs (always /app)
aren't very helpful, so we want to keep around both. I've updated the UI
to show them as well.
This commit chooses "Host" and "Runtime" as the names of the "Outside"
and "Inside" sketch. I'm open to suggestions for better names.
Co-Authored-By: sketch, but it did a so-so job
diff --git a/loop/webui/esbuild.go b/loop/webui/esbuild.go
index 03c745e..b86b7d7 100644
--- a/loop/webui/esbuild.go
+++ b/loop/webui/esbuild.go
@@ -334,7 +334,7 @@
defer os.RemoveAll(tmpDir)
// Create output directory if it doesn't exist
- if err := os.MkdirAll(outputDir, 0755); err != nil {
+ if err := os.MkdirAll(outputDir, 0o755); err != nil {
return "", err
}
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"