all: fix formatting
diff --git a/webui/src/web-components/demo/mock-git-data-service.ts b/webui/src/web-components/demo/mock-git-data-service.ts
index 74937f0..3ca5098 100644
--- a/webui/src/web-components/demo/mock-git-data-service.ts
+++ b/webui/src/web-components/demo/mock-git-data-service.ts
@@ -1,75 +1,75 @@
// mock-git-data-service.ts
// Mock implementation of GitDataService for the demo environment
-import { GitDataService, GitDiffFile } from '../git-data-service';
-import { GitLogEntry } from '../../types';
+import { GitDataService, GitDiffFile } from "../git-data-service";
+import { GitLogEntry } from "../../types";
/**
* Demo implementation of GitDataService with canned responses
*/
export class MockGitDataService implements GitDataService {
constructor() {
- console.log('MockGitDataService instance created');
+ console.log("MockGitDataService instance created");
}
// Mock commit history
private mockCommits: GitLogEntry[] = [
{
- hash: 'abc123456789',
- subject: 'Implement new file picker UI',
- refs: ['HEAD', 'main']
+ hash: "abc123456789",
+ subject: "Implement new file picker UI",
+ refs: ["HEAD", "main"],
},
{
- hash: 'def987654321',
- subject: 'Add range picker component',
- refs: []
+ hash: "def987654321",
+ subject: "Add range picker component",
+ refs: [],
},
{
- hash: 'ghi456789123',
- subject: 'Fix styling issues in navigation',
- refs: []
+ hash: "ghi456789123",
+ subject: "Fix styling issues in navigation",
+ refs: [],
},
{
- hash: 'jkl789123456',
- subject: 'Initial commit',
- refs: ['sketch-base']
- }
+ hash: "jkl789123456",
+ subject: "Initial commit",
+ refs: ["sketch-base"],
+ },
];
// Mock diff files for various scenarios
private mockDiffFiles: GitDiffFile[] = [
{
- path: 'src/components/FilePicker.js',
- status: 'A',
- new_mode: '100644',
- old_mode: '000000',
- old_hash: '0000000000000000000000000000000000000000',
- new_hash: 'def0123456789abcdef0123456789abcdef0123'
+ path: "src/components/FilePicker.js",
+ status: "A",
+ new_mode: "100644",
+ old_mode: "000000",
+ old_hash: "0000000000000000000000000000000000000000",
+ new_hash: "def0123456789abcdef0123456789abcdef0123",
},
{
- path: 'src/components/RangePicker.js',
- status: 'A',
- new_mode: '100644',
- old_mode: '000000',
- old_hash: '0000000000000000000000000000000000000000',
- new_hash: 'cde0123456789abcdef0123456789abcdef0123'
+ path: "src/components/RangePicker.js",
+ status: "A",
+ new_mode: "100644",
+ old_mode: "000000",
+ old_hash: "0000000000000000000000000000000000000000",
+ new_hash: "cde0123456789abcdef0123456789abcdef0123",
},
{
- path: 'src/components/App.js',
- status: 'M',
- new_mode: '100644',
- old_mode: '100644',
- old_hash: 'abc0123456789abcdef0123456789abcdef0123',
- new_hash: 'bcd0123456789abcdef0123456789abcdef0123'
+ path: "src/components/App.js",
+ status: "M",
+ new_mode: "100644",
+ old_mode: "100644",
+ old_hash: "abc0123456789abcdef0123456789abcdef0123",
+ new_hash: "bcd0123456789abcdef0123456789abcdef0123",
},
{
- path: 'src/styles/main.css',
- status: 'M',
- new_mode: '100644',
- old_mode: '100644',
- old_hash: 'fgh0123456789abcdef0123456789abcdef0123',
- new_hash: 'ghi0123456789abcdef0123456789abcdef0123'
- }
+ path: "src/styles/main.css",
+ status: "M",
+ new_mode: "100644",
+ old_mode: "100644",
+ old_hash: "fgh0123456789abcdef0123456789abcdef0123",
+ new_hash: "ghi0123456789abcdef0123456789abcdef0123",
+ },
];
// Mock file content for different files and commits
@@ -286,118 +286,129 @@
}`;
async getCommitHistory(initialCommit?: string): Promise<GitLogEntry[]> {
- console.log(`[MockGitDataService] Getting commit history from ${initialCommit || 'beginning'}`);
-
+ console.log(
+ `[MockGitDataService] Getting commit history from ${initialCommit || "beginning"}`,
+ );
+
// If initialCommit is provided, return commits from that commit to HEAD
if (initialCommit) {
- const startIndex = this.mockCommits.findIndex(commit => commit.hash === initialCommit);
+ const startIndex = this.mockCommits.findIndex(
+ (commit) => commit.hash === initialCommit,
+ );
if (startIndex >= 0) {
return this.mockCommits.slice(0, startIndex + 1);
}
}
-
+
return [...this.mockCommits];
}
async getDiff(from: string, to: string): Promise<GitDiffFile[]> {
console.log(`[MockGitDataService] Getting diff from ${from} to ${to}`);
-
+
return [...this.mockDiffFiles];
}
async getCommitDiff(commit: string): Promise<GitDiffFile[]> {
console.log(`[MockGitDataService] Getting diff for commit ${commit}`);
-
+
// Return a subset of files for specific commits
- if (commit === 'abc123456789') {
+ if (commit === "abc123456789") {
return this.mockDiffFiles.slice(0, 2);
- } else if (commit === 'def987654321') {
+ } else if (commit === "def987654321") {
return this.mockDiffFiles.slice(1, 3);
}
-
+
// For other commits, return all files
return [...this.mockDiffFiles];
}
async getFileContent(fileHash: string): Promise<string> {
- console.log(`[MockGitDataService] Getting file content for hash: ${fileHash}`);
-
+ console.log(
+ `[MockGitDataService] Getting file content for hash: ${fileHash}`,
+ );
+
// Return different content based on the file hash
- if (fileHash === 'bcd0123456789abcdef0123456789abcdef0123') {
+ if (fileHash === "bcd0123456789abcdef0123456789abcdef0123") {
return this.appJSModified;
- } else if (fileHash === 'abc0123456789abcdef0123456789abcdef0123') {
+ } else if (fileHash === "abc0123456789abcdef0123456789abcdef0123") {
return this.appJSOriginal;
- } else if (fileHash === 'def0123456789abcdef0123456789abcdef0123') {
+ } else if (fileHash === "def0123456789abcdef0123456789abcdef0123") {
return this.filePickerJS;
- } else if (fileHash === 'cde0123456789abcdef0123456789abcdef0123') {
+ } else if (fileHash === "cde0123456789abcdef0123456789abcdef0123") {
return this.rangePickerJS;
- } else if (fileHash === 'ghi0123456789abcdef0123456789abcdef0123') {
+ } else if (fileHash === "ghi0123456789abcdef0123456789abcdef0123") {
return this.mainCSSModified;
- } else if (fileHash === 'fgh0123456789abcdef0123456789abcdef0123') {
+ } else if (fileHash === "fgh0123456789abcdef0123456789abcdef0123") {
return this.mainCSSOriginal;
}
-
+
// Return empty string for unknown file hashes
- return '';
+ return "";
}
async getBaseCommitRef(): Promise<string> {
- console.log('[MockGitDataService] Getting base commit ref');
-
+ console.log("[MockGitDataService] Getting base commit ref");
+
// Find the commit with the sketch-base ref
- const baseCommit = this.mockCommits.find(commit =>
- commit.refs && commit.refs.includes('sketch-base')
+ const baseCommit = this.mockCommits.find(
+ (commit) => commit.refs && commit.refs.includes("sketch-base"),
);
-
+
if (baseCommit) {
return baseCommit.hash;
}
-
+
// Fallback to the last commit in our list
return this.mockCommits[this.mockCommits.length - 1].hash;
}
// Helper to simulate network delay
private delay(ms: number): Promise<void> {
- return new Promise(resolve => setTimeout(resolve, ms));
+ return new Promise((resolve) => setTimeout(resolve, ms));
}
-
+
async getWorkingCopyContent(filePath: string): Promise<string> {
- console.log(`[MockGitDataService] Getting working copy content for path: ${filePath}`);
-
+ console.log(
+ `[MockGitDataService] Getting working copy content for path: ${filePath}`,
+ );
+
// Return different content based on the file path
- if (filePath === 'src/components/App.js') {
+ if (filePath === "src/components/App.js") {
return this.appJSModified;
- } else if (filePath === 'src/components/FilePicker.js') {
+ } else if (filePath === "src/components/FilePicker.js") {
return this.filePickerJS;
- } else if (filePath === 'src/components/RangePicker.js') {
+ } else if (filePath === "src/components/RangePicker.js") {
return this.rangePickerJS;
- } else if (filePath === 'src/styles/main.css') {
+ } else if (filePath === "src/styles/main.css") {
return this.mainCSSModified;
}
-
+
// Return empty string for unknown file paths
- return '';
+ return "";
}
-
- async getUnstagedChanges(from: string = 'HEAD'): Promise<GitDiffFile[]> {
+
+ async getUnstagedChanges(from: string = "HEAD"): Promise<GitDiffFile[]> {
console.log(`[MockGitDataService] Getting unstaged changes from ${from}`);
-
+
// Create a new array of files with 0000000... as the new hashes
// to simulate unstaged changes
- return this.mockDiffFiles.map(file => ({
+ return this.mockDiffFiles.map((file) => ({
...file,
- newHash: '0000000000000000000000000000000000000000'
+ newHash: "0000000000000000000000000000000000000000",
}));
}
-
+
async saveFileContent(filePath: string, content: string): Promise<void> {
- console.log(`[MockGitDataService] Saving file content for path: ${filePath}`);
+ console.log(
+ `[MockGitDataService] Saving file content for path: ${filePath}`,
+ );
// Simulate a network delay
await this.delay(500);
// In a mock implementation, we just log the save attempt
- console.log(`File would be saved: ${filePath} (${content.length} characters)`);
+ console.log(
+ `File would be saved: ${filePath} (${content.length} characters)`,
+ );
// Return void as per interface
}
-
-}
\ No newline at end of file
+}
diff --git a/webui/src/web-components/demo/sketch-diff2-view.demo.html b/webui/src/web-components/demo/sketch-diff2-view.demo.html
index da9e46f..9199b23 100644
--- a/webui/src/web-components/demo/sketch-diff2-view.demo.html
+++ b/webui/src/web-components/demo/sketch-diff2-view.demo.html
@@ -1,74 +1,83 @@
-<!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 Monaco Diff View Demo</title>
- <script type="module">
- // Set up the demo environment with mock data service
- import { MockGitDataService } from './mock-git-data-service.ts';
- import '../sketch-diff2-view.ts';
-
- // Wait for DOM content to be loaded before initializing components
- document.addEventListener('DOMContentLoaded', () => {
- // Create a mock service instance
- const mockService = new MockGitDataService();
- console.log('Demo initialized with MockGitDataService');
-
- // Get the diff2 view component and set its gitService property
- const diff2View = document.querySelector('sketch-diff2-view');
- if (diff2View) {
- diff2View.gitService = mockService;
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Sketch Monaco Diff View Demo</title>
+ <script type="module">
+ // Set up the demo environment with mock data service
+ import { MockGitDataService } from "./mock-git-data-service.ts";
+ import "../sketch-diff2-view.ts";
+
+ // Wait for DOM content to be loaded before initializing components
+ document.addEventListener("DOMContentLoaded", () => {
+ // Create a mock service instance
+ const mockService = new MockGitDataService();
+ console.log("Demo initialized with MockGitDataService");
+
+ // Get the diff2 view component and set its gitService property
+ const diff2View = document.querySelector("sketch-diff2-view");
+ if (diff2View) {
+ diff2View.gitService = mockService;
+ }
+ });
+ </script>
+ <style>
+ body {
+ font-family:
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ Helvetica,
+ Arial,
+ sans-serif;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
}
- });
- </script>
- <style>
- body {
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- max-width: 1200px;
- margin: 0 auto;
- padding: 2rem;
- }
- h1 {
- color: #333;
- margin-bottom: 2rem;
- }
+ h1 {
+ color: #333;
+ margin-bottom: 2rem;
+ }
- .control-panel {
- margin-bottom: 2rem;
- padding: 1rem;
- background-color: #f0f0f0;
- border-radius: 4px;
- }
-
- .demo-container {
- display: flex;
- height: 80vh; /* Use viewport height to ensure good sizing */
- min-height: 600px; /* Minimum height */
- border: 1px solid #ddd;
- margin-top: 20px;
- margin-bottom: 30px;
- }
+ .control-panel {
+ margin-bottom: 2rem;
+ padding: 1rem;
+ background-color: #f0f0f0;
+ border-radius: 4px;
+ }
- sketch-diff2-view {
- width: 100%;
- height: 100%;
- }
- </style>
-</head>
-<body>
- <h1>Sketch Monaco Diff View Demo</h1>
+ .demo-container {
+ display: flex;
+ height: 80vh; /* Use viewport height to ensure good sizing */
+ min-height: 600px; /* Minimum height */
+ border: 1px solid #ddd;
+ margin-top: 20px;
+ margin-bottom: 30px;
+ }
- <div class="control-panel">
- <p>This demonstrates the Monaco-based diff view with range and file pickers.</p>
- <p>Using mock data to simulate the real API responses.</p>
- </div>
+ sketch-diff2-view {
+ width: 100%;
+ height: 100%;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Sketch Monaco Diff View Demo</h1>
- <div class="demo-container">
- <sketch-diff2-view></sketch-diff2-view>
- </div>
-
+ <div class="control-panel">
+ <p>
+ This demonstrates the Monaco-based diff view with range and file
+ pickers.
+ </p>
+ <p>Using mock data to simulate the real API responses.</p>
+ </div>
-</body>
+ <div class="demo-container">
+ <sketch-diff2-view></sketch-diff2-view>
+ </div>
+ </body>
</html>
diff --git a/webui/src/web-components/demo/sketch-monaco-view.demo.html b/webui/src/web-components/demo/sketch-monaco-view.demo.html
index 92da292..f5e12d4 100644
--- a/webui/src/web-components/demo/sketch-monaco-view.demo.html
+++ b/webui/src/web-components/demo/sketch-monaco-view.demo.html
@@ -26,7 +26,7 @@
background-color: #f0f0f0;
border-radius: 4px;
}
-
+
button {
padding: 8px 12px;
background-color: #4285f4;
@@ -36,11 +36,11 @@
cursor: pointer;
margin-right: 8px;
}
-
+
button:hover {
background-color: #3367d6;
}
-
+
sketch-monaco-view {
margin-top: 20px;
height: 500px;
@@ -60,34 +60,34 @@
</div>
<sketch-monaco-view id="diffEditor"></sketch-monaco-view>
-
+
<script>
- document.addEventListener('DOMContentLoaded', () => {
- const diffEditor = document.getElementById('diffEditor');
-
+ document.addEventListener("DOMContentLoaded", () => {
+ const diffEditor = document.getElementById("diffEditor");
+
// Set initial example
diffEditor.originalCode = `function hello() {
console.log("Hello World");
return true;
}`;
-
+
diffEditor.modifiedCode = `function hello() {
// Add a comment
console.log("Hello Updated World");
return true;
}`;
-
+
// Example 1: JavaScript
- document.getElementById('example1').addEventListener('click', () => {
+ document.getElementById("example1").addEventListener("click", () => {
diffEditor.setOriginalCode(
`function calculateTotal(items) {
return items
.map(item => item.price * item.quantity)
.reduce((a, b) => a + b, 0);
}`,
- 'original.js'
+ "original.js",
);
-
+
diffEditor.setModifiedCode(
`function calculateTotal(items) {
// Apply discount if available
@@ -100,12 +100,12 @@
})
.reduce((a, b) => a + b, 0);
}`,
- 'modified.js'
+ "modified.js",
);
});
-
+
// Example 2: HTML
- document.getElementById('example2').addEventListener('click', () => {
+ document.getElementById("example2").addEventListener("click", () => {
diffEditor.setOriginalCode(
`<!DOCTYPE html>
<html>
@@ -117,9 +117,9 @@
<p>This is a paragraph.</p>
</body>
</html>`,
- 'original.html'
+ "original.html",
);
-
+
diffEditor.setModifiedCode(
`<!DOCTYPE html>
<html>
@@ -140,12 +140,12 @@
</footer>
</body>
</html>`,
- 'modified.html'
+ "modified.html",
);
});
-
+
// Example 3: Go
- document.getElementById('example3').addEventListener('click', () => {
+ document.getElementById("example3").addEventListener("click", () => {
diffEditor.setOriginalCode(
`package main
@@ -154,9 +154,9 @@
func main() {
fmt.Println("Hello, world!")
}`,
- 'original.go'
+ "original.go",
);
-
+
diffEditor.setModifiedCode(
`package main
@@ -169,7 +169,7 @@
fmt.Println("Hello, world!")
fmt.Printf("The time is %s\n", time.Now().Format(time.RFC3339))
}`,
- 'modified.go'
+ "modified.go",
);
});
});
diff --git a/webui/src/web-components/demo/sketch-network-status.demo.html b/webui/src/web-components/demo/sketch-network-status.demo.html
index b0aad7e..2a6b270 100644
--- a/webui/src/web-components/demo/sketch-network-status.demo.html
+++ b/webui/src/web-components/demo/sketch-network-status.demo.html
@@ -19,17 +19,17 @@
</head>
<body>
<h1>Status Indicators Demo</h1>
-
+
<div class="status-container">
<div class="label">Connected State:</div>
<sketch-call-status
.isDisconnected="false"
.isIdle="true"
.llmCalls="0"
- .toolCalls='[]'
+ .toolCalls="[]"
></sketch-call-status>
</div>
-
+
<div class="status-container">
<div class="label">Working State:</div>
<sketch-call-status
@@ -39,14 +39,14 @@
.toolCalls='["bash"]'
></sketch-call-status>
</div>
-
+
<div class="status-container">
<div class="label">Disconnected State:</div>
<sketch-call-status
.isDisconnected="true"
.isIdle="true"
.llmCalls="0"
- .toolCalls='[]'
+ .toolCalls="[]"
></sketch-call-status>
</div>
</body>
diff --git a/webui/src/web-components/demo/status-demo.html b/webui/src/web-components/demo/status-demo.html
index 063c693..4ce5af3 100644
--- a/webui/src/web-components/demo/status-demo.html
+++ b/webui/src/web-components/demo/status-demo.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
<html>
<head>
<title>Status Demo</title>
@@ -36,7 +36,7 @@
<body>
<h1>Status Indicators Demo</h1>
<p>This demo shows the status indicators with the DISCONNECTED state.</p>
-
+
<div class="demo-section">
<div class="demo-item">
<h2>IDLE State</h2>
@@ -44,14 +44,14 @@
<sketch-call-status id="idle-status"></sketch-call-status>
</div>
</div>
-
+
<div class="demo-item">
<h2>WORKING State</h2>
<div class="status-display">
<sketch-call-status id="working-status"></sketch-call-status>
</div>
</div>
-
+
<div class="demo-item">
<h2>DISCONNECTED State</h2>
<div class="status-display">
@@ -62,23 +62,25 @@
<script>
// Set up the demo after components are defined
- window.addEventListener('DOMContentLoaded', () => {
+ window.addEventListener("DOMContentLoaded", () => {
// IDLE status
- const idleStatus = document.getElementById('idle-status');
+ const idleStatus = document.getElementById("idle-status");
idleStatus.isIdle = true;
idleStatus.isDisconnected = false;
idleStatus.llmCalls = 0;
idleStatus.toolCalls = [];
-
+
// WORKING status
- const workingStatus = document.getElementById('working-status');
+ const workingStatus = document.getElementById("working-status");
workingStatus.isIdle = false;
workingStatus.isDisconnected = false;
workingStatus.llmCalls = 1;
- workingStatus.toolCalls = ['bash'];
-
+ workingStatus.toolCalls = ["bash"];
+
// DISCONNECTED status
- const disconnectedStatus = document.getElementById('disconnected-status');
+ const disconnectedStatus = document.getElementById(
+ "disconnected-status",
+ );
disconnectedStatus.isIdle = true;
disconnectedStatus.isDisconnected = true;
disconnectedStatus.llmCalls = 0;
@@ -86,4 +88,4 @@
});
</script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/webui/src/web-components/demo/status-indicators.demo.html b/webui/src/web-components/demo/status-indicators.demo.html
index 5fa9400..90131a5 100644
--- a/webui/src/web-components/demo/status-indicators.demo.html
+++ b/webui/src/web-components/demo/status-indicators.demo.html
@@ -57,12 +57,15 @@
</head>
<body>
<h1>Status Indicators Demo</h1>
- <p>This demo shows the new status indicators without the green connection dot.</p>
-
+ <p>
+ This demo shows the new status indicators without the green connection
+ dot.
+ </p>
+
<div class="demo-container">
<div class="status-container">
<div class="label">Connected States:</div>
-
+
<div class="status-row">
<div class="status-item">IDLE:</div>
<div class="status-view">
@@ -73,9 +76,11 @@
.toolCalls="[]"
></sketch-call-status>
</div>
- <div class="description">Agent is connected but not actively working</div>
+ <div class="description">
+ Agent is connected but not actively working
+ </div>
</div>
-
+
<div class="status-row">
<div class="status-item">WORKING:</div>
<div class="status-view">
@@ -89,10 +94,10 @@
<div class="description">Agent is connected and actively working</div>
</div>
</div>
-
+
<div class="status-container">
<div class="label">Disconnected State:</div>
-
+
<div class="status-row">
<div class="status-item">DISCONNECTED:</div>
<div class="status-view">
@@ -108,4 +113,4 @@
</div>
</div>
</body>
-</html>
\ No newline at end of file
+</html>