loop/webui: add prettier
diff --git a/loop/webui/src/web-components/sketch-timeline-message.ts b/loop/webui/src/web-components/sketch-timeline-message.ts
index cd2985a..ea32015 100644
--- a/loop/webui/src/web-components/sketch-timeline-message.ts
+++ b/loop/webui/src/web-components/sketch-timeline-message.ts
@@ -248,7 +248,7 @@
display: flex;
flex-direction: column;
}
-
+
.commit-preview {
padding: 8px 12px;
cursor: pointer;
@@ -256,38 +256,38 @@
background-color: #f6f8fa;
border-bottom: 1px dashed #d1d5da;
}
-
+
.commit-preview:hover {
background-color: #eef2f6;
}
-
+
.commit-hash {
color: #0366d6;
font-weight: bold;
}
-
+
.commit-details {
padding: 8px 12px;
max-height: 200px;
overflow-y: auto;
}
-
+
.commit-details pre {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
-
+
.commit-details.is-hidden {
display: none;
}
-
+
.pushed-branch {
color: #28a745;
font-weight: 500;
margin-left: 6px;
}
-
+
.commit-diff-button {
padding: 6px 12px;
border: 1px solid #ccc;
@@ -300,12 +300,12 @@
margin: 8px 12px;
display: block;
}
-
+
.commit-diff-button:hover {
background-color: #e7e7e7;
border-color: #aaa;
}
-
+
/* Tool call cards */
.tool-call-cards-container {
display: flex;
@@ -446,7 +446,13 @@
}
showCommit(commitHash: string) {
- this.dispatchEvent(new CustomEvent("show-commit-diff", {bubbles: true, composed: true, detail: {commitHash}}))
+ this.dispatchEvent(
+ new CustomEvent("show-commit-diff", {
+ bubbles: true,
+ composed: true,
+ detail: { commitHash },
+ }),
+ );
}
render() {
@@ -464,14 +470,35 @@
<div class="message-content">
<div class="message-header">
<span class="message-type">${this.message?.type}</span>
- <span class="message-timestamp">${this.formatTimestamp(this.message?.timestamp)} ${this.message?.elapsed ? html`(${(this.message?.elapsed / 1e9).toFixed(2)}s)` : ''}</span>
- ${this.message?.usage ? html`
- <span class="message-usage">
- <span title="Input tokens">In: ${this.message?.usage?.input_tokens}</span>
- ${this.message?.usage?.cache_read_input_tokens > 0 ? html`<span title="Cache tokens">[Cache: ${this.formatNumber(this.message?.usage?.cache_read_input_tokens)}]</span>` : ""}
- <span title="Output tokens">Out: ${this.message?.usage?.output_tokens}</span>
- <span title="Message cost">(${this.formatCurrency(this.message?.usage?.cost_usd)})</span>
- </span>` : ''}
+ <span class="message-timestamp"
+ >${this.formatTimestamp(this.message?.timestamp)}
+ ${this.message?.elapsed
+ ? html`(${(this.message?.elapsed / 1e9).toFixed(2)}s)`
+ : ""}</span
+ >
+ ${this.message?.usage
+ ? html` <span class="message-usage">
+ <span title="Input tokens"
+ >In: ${this.message?.usage?.input_tokens}</span
+ >
+ ${this.message?.usage?.cache_read_input_tokens > 0
+ ? html`<span title="Cache tokens"
+ >[Cache:
+ ${this.formatNumber(
+ this.message?.usage?.cache_read_input_tokens,
+ )}]</span
+ >`
+ : ""}
+ <span title="Output tokens"
+ >Out: ${this.message?.usage?.output_tokens}</span
+ >
+ <span title="Message cost"
+ >(${this.formatCurrency(
+ this.message?.usage?.cost_usd,
+ )})</span
+ >
+ </span>`
+ : ""}
</div>
<div class="message-text-container">
<div class="message-actions">
@@ -492,22 +519,31 @@
? html`
<div class="commits-container">
<div class="commits-header">
- ${this.message.commits.length} new commit${this.message.commits.length > 1 ? "s" : ""} detected
+ ${this.message.commits.length} new
+ commit${this.message.commits.length > 1 ? "s" : ""} detected
</div>
${this.message.commits.map((commit) => {
return html`
<div class="commit-boxes-row">
<div class="commit-box">
<div class="commit-preview">
- <span class="commit-hash">${commit.hash.substring(0, 8)}</span>
+ <span class="commit-hash"
+ >${commit.hash.substring(0, 8)}</span
+ >
${commit.subject}
<span class="pushed-branch"
- >→ pushed to ${commit.pushed_branch}</span>
+ >→ pushed to ${commit.pushed_branch}</span
+ >
</div>
<div class="commit-details is-hidden">
<pre>${commit.body}</pre>
</div>
- <button class="commit-diff-button" @click=${() => this.showCommit(commit.hash)}>View Changes</button>
+ <button
+ class="commit-diff-button"
+ @click=${() => this.showCommit(commit.hash)}
+ >
+ View Changes
+ </button>
</div>
</div>
`;
@@ -521,9 +557,11 @@
}
}
-function copyButton(textToCopy: string) {
+function copyButton(textToCopy: string) {
// Add click event listener to handle copying
- const ret = html`<button class="copy-button" title="Copy text to clipboard" @click=${(e: Event) => {
+ const ret = html`<button class="copy-button" title="Copy text to clipboard" @click=${(
+ e: Event,
+ ) => {
e.stopPropagation();
const copyButton = e.currentTarget as HTMLButtonElement;
navigator.clipboard
@@ -543,7 +581,7 @@
});
}}>Copy</button`;
- return ret
+ return ret;
}
declare global {