loop/webui: add prettier
diff --git a/loop/webui/src/web-components/demo/demo.css b/loop/webui/src/web-components/demo/demo.css
index bb9750e..11164a1 100644
--- a/loop/webui/src/web-components/demo/demo.css
+++ b/loop/webui/src/web-components/demo/demo.css
@@ -1,9 +1,14 @@
body {
- font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
- Roboto, sans-serif;
+ font-family:
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
margin: 0;
padding: 20px;
padding-bottom: 100px; /* Adjusted padding for chat container */
color: #333;
line-height: 1.4; /* Reduced line height for more compact text */
-}
\ No newline at end of file
+}
diff --git a/loop/webui/src/web-components/demo/sketch-app-shell.demo.html b/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
index 092ad7c..ef335ed 100644
--- a/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
@@ -2,12 +2,14 @@
<head>
<title>sketch-app-shell demo</title>
<link rel="stylesheet" href="demo.css" />
- <script src="/dist/web-components/sketch-app-shell.js" type="module"></script>
+ <script
+ src="/dist/web-components/sketch-app-shell.js"
+ type="module"
+ ></script>
</head>
<body>
<h1>sketch-app-shell demo</h1>
<sketch-app-shell></sketch-app-shell>
-
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-charts.demo.html b/loop/webui/src/web-components/demo/sketch-charts.demo.html
index b525785..d9b714d 100644
--- a/loop/webui/src/web-components/demo/sketch-charts.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-charts.demo.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html>
<head>
<meta charset="utf-8" />
@@ -12,8 +12,13 @@
}
body {
- font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
- Roboto, sans-serif;
+ font-family:
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ sans-serif;
}
</style>
</head>
diff --git a/loop/webui/src/web-components/demo/sketch-chat-input.demo.html b/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
index 4806035..99d581b 100644
--- a/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
@@ -2,24 +2,26 @@
<head>
<title>sketch-chat-input demo</title>
<link rel="stylesheet" href="demo.css" />
- <script src="/dist/web-components/sketch-chat-input.js" type="module"></script>
+ <script
+ src="/dist/web-components/sketch-chat-input.js"
+ type="module"
+ ></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
- const chatInput = document.querySelector('sketch-chat-input');
+ const chatInput = document.querySelector("sketch-chat-input");
console.log("chatInput: ", chatInput);
chatInput.content = "hi";
chatInput.addEventListener("send-chat", (evt) => {
- console.log('send chat event: ', evt);
+ console.log("send chat event: ", evt);
const msgDiv = document.querySelector("#chat-messages");
const newDiv = document.createElement("div");
- newDiv.innerText = evt.detail.message;
+ newDiv.innerText = evt.detail.message;
msgDiv.append(newDiv);
- chatInput.content = '';
+ chatInput.content = "";
});
});
</script>
-
</head>
<body>
<h1>sketch-chat-input demo</h1>
@@ -27,6 +29,5 @@
<div id="chat-messages"></div>
<sketch-chat-input></sketch-chat-input>
-
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-container-status.demo.html b/loop/webui/src/web-components/demo/sketch-container-status.demo.html
index bd2544d..a35e881 100644
--- a/loop/webui/src/web-components/demo/sketch-container-status.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-container-status.demo.html
@@ -2,30 +2,32 @@
<head>
<title>sketch-container-status demo</title>
<link rel="stylesheet" href="demo.css" />
- <script src="/dist/web-components/sketch-container-status.js" type="module"></script>
+ <script
+ src="/dist/web-components/sketch-container-status.js"
+ type="module"
+ ></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
- const containerStatus = document.querySelector('#status-2');
+ const containerStatus = document.querySelector("#status-2");
containerStatus.state = {
- hostname: 'example.hostname',
- initial_commit: 'decafbad',
+ hostname: "example.hostname",
+ initial_commit: "decafbad",
message_count: 27,
- os: 'linux',
+ os: "linux",
total_usage: {
- start_time: 'around lunch',
- messages:1337,
+ start_time: "around lunch",
+ messages: 1337,
input_tokens: 3,
output_tokens: 1000,
cache_read_input_tokens: 28,
cache_creation_input_tokens: 12354,
total_cost_usd: 2.03,
- },
- working_dir: '/app',
+ },
+ working_dir: "/app",
};
});
</script>
-
</head>
<body>
<h1>sketch-container-status demo</h1>
@@ -35,6 +37,5 @@
With state fields set:
<sketch-container-status id="status-2"></sketch-container-status>
-
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-diff-view.demo.html b/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
index 63b5395..3a6cb35 100644
--- a/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
@@ -1,61 +1,69 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Sketch Diff Viewer Demo</title>
- <link rel="stylesheet" href="../../../node_modules/diff2html/bundles/css/diff2html.min.css">
- <script type="module" src="/dist/web-components/sketch-diff-view.js"></script>
- <style>
- body {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
- max-width: 1200px;
- margin: 0 auto;
- padding: 2rem;
- }
-
- h1 {
- color: #333;
- margin-bottom: 2rem;
- }
-
- .control-panel {
- margin-bottom: 2rem;
- padding: 1rem;
- background-color: #f0f0f0;
- border-radius: 4px;
- }
-
- input {
- padding: 0.5rem;
- border-radius: 4px;
- border: 1px solid #ccc;
- width: 300px;
- }
-
- button {
- padding: 0.5rem 1rem;
- background-color: #2196f3;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- margin-left: 1rem;
- }
-
- button:hover {
- background-color: #0d8bf2;
- }
- </style>
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Sketch Diff Viewer Demo</title>
+ <link
+ rel="stylesheet"
+ href="../../../node_modules/diff2html/bundles/css/diff2html.min.css"
+ />
+ <script
+ type="module"
+ src="/dist/web-components/sketch-diff-view.js"
+ ></script>
+ <style>
+ body {
+ font-family:
+ -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ Arial, sans-serif;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ }
-<script>
- document.addEventListener('DOMContentLoaded', () => {
- const diffViewer = document.getElementById('diffViewer');
- const commitHashInput = document.getElementById('commitHash');
- const viewDiffButton = document.getElementById('viewDiff');
- let commit = false;
- viewDiffButton.addEventListener('click', () => {
- let diffContent = `diff --git a/sample.txt b/sample.txt
+ h1 {
+ color: #333;
+ margin-bottom: 2rem;
+ }
+
+ .control-panel {
+ margin-bottom: 2rem;
+ padding: 1rem;
+ background-color: #f0f0f0;
+ border-radius: 4px;
+ }
+
+ input {
+ padding: 0.5rem;
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ width: 300px;
+ }
+
+ button {
+ padding: 0.5rem 1rem;
+ background-color: #2196f3;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-left: 1rem;
+ }
+
+ button:hover {
+ background-color: #0d8bf2;
+ }
+ </style>
+
+ <script>
+ document.addEventListener("DOMContentLoaded", () => {
+ const diffViewer = document.getElementById("diffViewer");
+ const commitHashInput = document.getElementById("commitHash");
+ const viewDiffButton = document.getElementById("viewDiff");
+ let commit = false;
+ viewDiffButton.addEventListener("click", () => {
+ let diffContent = `diff --git a/sample.txt b/sample.txt
index 1111111..2222222 100644
--- a/sample.txt
+++ b/sample.txt
@@ -67,12 +75,12 @@
-Another line to remove
+A completely new line
The last line is unchanged`;
- if (commit) {
+ if (commit) {
// For demo purposes, generate fake diff based on commit hash
- diffContent = `diff --git a/file-${commit.substring(0,5)}.txt b/file-${commit.substring(0,5)}.txt
+ diffContent = `diff --git a/file-${commit.substring(0, 5)}.txt b/file-${commit.substring(0, 5)}.txt
index 3333333..4444444 100644
---- a/file-${commit.substring(0,5)}.txt
-+++ b/file-${commit.substring(0,5)}.txt
+--- a/file-${commit.substring(0, 5)}.txt
++++ b/file-${commit.substring(0, 5)}.txt
@@ -1,4 +1,6 @@
File with commit: ${commit}
+This line was added in commit ${commit}
@@ -82,23 +90,23 @@
+Another new line added in this commit
Last line of the file`;
}
- diffViewer.diffText = diffContent;
- diffViewer.commitHash = commitHashInput.value.trim();
- });
- });
-</script>
+ diffViewer.diffText = diffContent;
+ diffViewer.commitHash = commitHashInput.value.trim();
+ });
+ });
+ </script>
+ </head>
+ <body>
+ <h1>Sketch Diff Viewer Demo</h1>
-</head>
-<body>
- <h1>Sketch Diff Viewer Demo</h1>
-
- <div class="control-panel">
- <label for="commitHash">Commit Hash (leave empty for unstaged changes):</label>
- <input type="text" id="commitHash" placeholder="Enter commit hash">
- <button id="viewDiff">View Diff</button>
- </div>
-
- <sketch-diff-view id="diffViewer"></sketch-diff-view>
-
-</body>
-</html>
\ No newline at end of file
+ <div class="control-panel">
+ <label for="commitHash"
+ >Commit Hash (leave empty for unstaged changes):</label
+ >
+ <input type="text" id="commitHash" placeholder="Enter commit hash" />
+ <button id="viewDiff">View Diff</button>
+ </div>
+
+ <sketch-diff-view id="diffViewer"></sketch-diff-view>
+ </body>
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-network-status.demo.html b/loop/webui/src/web-components/demo/sketch-network-status.demo.html
index 9926b0e..d645840 100644
--- a/loop/webui/src/web-components/demo/sketch-network-status.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-network-status.demo.html
@@ -2,16 +2,24 @@
<head>
<title>sketch-network-status demo</title>
<link rel="stylesheet" href="demo.css" />
- <script src="/dist/web-components/sketch-network-status.js" type="module"></script>
+ <script
+ src="/dist/web-components/sketch-network-status.js"
+ type="module"
+ ></script>
</head>
<body>
<h1>sketch-network-status demo</h1>
Connected:
- <sketch-network-status connection="connected" message="connected"></sketch-network-status>
+ <sketch-network-status
+ connection="connected"
+ message="connected"
+ ></sketch-network-status>
Error:
- <sketch-network-status connection="error" error="error"></sketch-network-status>
-
+ <sketch-network-status
+ connection="error"
+ error="error"
+ ></sketch-network-status>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html b/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
index 466f910..cb2bdf3 100644
--- a/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
@@ -53,10 +53,9 @@
messageEl.message = msg;
document.body.appendChild(messageEl);
});
- window.addEventListener(
- "show-commit-diff",
- (evt) => {console.log("show-commit-diff", evt)}
- );
+ window.addEventListener("show-commit-diff", (evt) => {
+ console.log("show-commit-diff", evt);
+ });
});
</script>
</head>
diff --git a/loop/webui/src/web-components/demo/sketch-timeline.demo.html b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
index 427181d..f8b7ad4 100644
--- a/loop/webui/src/web-components/demo/sketch-timeline.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
@@ -2,7 +2,10 @@
<head>
<title>sketch-timeline demo</title>
<link rel="stylesheet" href="demo.css" />
- <script src="/dist/web-components/sketch-timeline.js" type="module"></script>
+ <script
+ src="/dist/web-components/sketch-timeline.js"
+ type="module"
+ ></script>
<script>
const messages = [
@@ -32,16 +35,14 @@
},
];
document.addEventListener("DOMContentLoaded", () => {
- const timelineEl = document.querySelector('sketch-timeline');
+ const timelineEl = document.querySelector("sketch-timeline");
timelineEl.messages = messages;
});
</script>
-
</head>
<body>
<h1>sketch-timeline demo</h1>
<sketch-timeline></sketch-timeline>
-
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html b/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
index dac6831..0d71067 100644
--- a/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
@@ -3,29 +3,32 @@
<title>sketch-view-mode-select demo</title>
<link rel="stylesheet" href="demo.css" />
- <script src="/dist/web-components/sketch-view-mode-select.js" type="module"></script>
+ <script
+ src="/dist/web-components/sketch-view-mode-select.js"
+ type="module"
+ ></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
- const viewModeSelect = document.querySelector('sketch-view-mode-select');
+ const viewModeSelect = document.querySelector(
+ "sketch-view-mode-select",
+ );
const msgDiv = document.querySelector("#selected-mode");
msgDiv.innerText = `selected mode: ${viewModeSelect.activeMode}`;
console.log("viewModeSelect: ", viewModeSelect);
viewModeSelect.addEventListener("view-mode-select", (evt) => {
- console.log('view mode change event: ', evt);
+ console.log("view mode change event: ", evt);
const msgDiv = document.querySelector("#selected-mode");
msgDiv.innerText = `selected mode: ${evt.detail.mode}`;
});
});
- </script>
-
+ </script>
</head>
<body>
<h1>sketch-view-mode-select demo</h1>
<sketch-view-mode-select></sketch-view-mode-select>
<div id="selected-mode"></div>
-
</body>
-</html>
\ No newline at end of file
+</html>