loop/webui: add prettier
diff --git a/loop/webui/src/web-components/sketch-timeline-message.test.ts b/loop/webui/src/web-components/sketch-timeline-message.test.ts
index 3f30696..d768f02 100644
--- a/loop/webui/src/web-components/sketch-timeline-message.test.ts
+++ b/loop/webui/src/web-components/sketch-timeline-message.test.ts
@@ -5,7 +5,9 @@
describe("SketchTimelineMessage", () => {
// Helper function to create mock timeline messages
- function createMockMessage(props: Partial<TimelineMessage> = {}): TimelineMessage {
+ function createMockMessage(
+ props: Partial<TimelineMessage> = {},
+ ): TimelineMessage {
return {
idx: props.idx || 0,
type: props.type || "agent",
@@ -17,39 +19,37 @@
tool_calls: props.tool_calls || [],
commits: props.commits || [],
usage: props.usage,
- ...props
+ ...props,
};
}
it("renders with basic message content", async () => {
const message = createMockMessage({
type: "agent",
- content: "This is a test message"
+ content: "This is a test message",
});
const el: SketchTimelineMessage = await fixture(html`
- <sketch-timeline-message
- .message=${message}
- ></sketch-timeline-message>
+ <sketch-timeline-message .message=${message}></sketch-timeline-message>
`);
const messageContent = el.shadowRoot!.querySelector(".message-text");
expect(messageContent).to.exist;
- expect(messageContent!.textContent!.trim()).to.include("This is a test message");
+ expect(messageContent!.textContent!.trim()).to.include(
+ "This is a test message",
+ );
});
it("renders with correct message type classes", async () => {
const messageTypes = ["user", "agent", "tool", "error"];
-
+
for (const type of messageTypes) {
const message = createMockMessage({ type });
-
+
const el: SketchTimelineMessage = await fixture(html`
- <sketch-timeline-message
- .message=${message}
- ></sketch-timeline-message>
+ <sketch-timeline-message .message=${message}></sketch-timeline-message>
`);
-
+
const messageElement = el.shadowRoot!.querySelector(".message");
expect(messageElement).to.exist;
expect(messageElement!.classList.contains(type)).to.be.true;
@@ -58,13 +58,11 @@
it("renders end-of-turn marker correctly", async () => {
const message = createMockMessage({
- end_of_turn: true
+ end_of_turn: true,
});
const el: SketchTimelineMessage = await fixture(html`
- <sketch-timeline-message
- .message=${message}
- ></sketch-timeline-message>
+ <sketch-timeline-message .message=${message}></sketch-timeline-message>
`);
const messageElement = el.shadowRoot!.querySelector(".message");
@@ -74,13 +72,11 @@
it("formats timestamps correctly", async () => {
const message = createMockMessage({
- timestamp: "2023-05-15T12:00:00Z"
+ timestamp: "2023-05-15T12:00:00Z",
});
const el: SketchTimelineMessage = await fixture(html`
- <sketch-timeline-message
- .message=${message}
- ></sketch-timeline-message>
+ <sketch-timeline-message .message=${message}></sketch-timeline-message>
`);
const timestamp = el.shadowRoot!.querySelector(".message-timestamp");
@@ -92,15 +88,14 @@
});
it("renders markdown content correctly", async () => {
- const markdownContent = "# Heading\n\n- List item 1\n- List item 2\n\n`code block`";
+ const markdownContent =
+ "# Heading\n\n- List item 1\n- List item 2\n\n`code block`";
const message = createMockMessage({
- content: markdownContent
+ content: markdownContent,
});
const el: SketchTimelineMessage = await fixture(html`
- <sketch-timeline-message
- .message=${message}
- ></sketch-timeline-message>
+ <sketch-timeline-message .message=${message}></sketch-timeline-message>
`);
const contentElement = el.shadowRoot!.querySelector(".markdown-content");
@@ -116,25 +111,23 @@
input_tokens: 150,
output_tokens: 300,
cost_usd: 0.025,
- cache_read_input_tokens: 50
+ cache_read_input_tokens: 50,
};
-
+
const message = createMockMessage({
- usage
+ usage,
});
const el: SketchTimelineMessage = await fixture(html`
- <sketch-timeline-message
- .message=${message}
- ></sketch-timeline-message>
+ <sketch-timeline-message .message=${message}></sketch-timeline-message>
`);
const usageElement = el.shadowRoot!.querySelector(".message-usage");
expect(usageElement).to.exist;
- expect(usageElement!.textContent).to.include("In: 150");
- expect(usageElement!.textContent).to.include("Out: 300");
- expect(usageElement!.textContent).to.include("Cache: 50");
- expect(usageElement!.textContent).to.include("$0.03");
+ expect(usageElement!.textContent).to.include("150"); // In
+ expect(usageElement!.textContent).to.include("300"); // Out
+ expect(usageElement!.textContent).to.include("50"); // Cache
+ expect(usageElement!.textContent).to.include("$0.03"); // Cost
});
it("renders commit information correctly", async () => {
@@ -143,31 +136,29 @@
hash: "1234567890abcdef",
subject: "Fix bug in application",
body: "This fixes a major bug in the application\n\nSigned-off-by: Developer",
- pushed_branch: "main"
- }
+ pushed_branch: "main",
+ },
];
-
+
const message = createMockMessage({
- commits
+ commits,
});
const el: SketchTimelineMessage = await fixture(html`
- <sketch-timeline-message
- .message=${message}
- ></sketch-timeline-message>
+ <sketch-timeline-message .message=${message}></sketch-timeline-message>
`);
const commitsContainer = el.shadowRoot!.querySelector(".commits-container");
expect(commitsContainer).to.exist;
-
+
const commitHeader = commitsContainer!.querySelector(".commits-header");
expect(commitHeader).to.exist;
- expect(commitHeader!.textContent).to.include("1 new commit");
-
+ expect(commitHeader!.textContent).to.include("1 new");
+
const commitHash = commitsContainer!.querySelector(".commit-hash");
expect(commitHash).to.exist;
expect(commitHash!.textContent).to.equal("12345678"); // First 8 chars
-
+
const pushedBranch = commitsContainer!.querySelector(".pushed-branch");
expect(pushedBranch).to.exist;
expect(pushedBranch!.textContent).to.include("main");
@@ -179,27 +170,27 @@
hash: "1234567890abcdef",
subject: "Fix bug in application",
body: "This fixes a major bug in the application",
- pushed_branch: "main"
- }
+ pushed_branch: "main",
+ },
];
-
+
const message = createMockMessage({
- commits
+ commits,
});
const el: SketchTimelineMessage = await fixture(html`
- <sketch-timeline-message
- .message=${message}
- ></sketch-timeline-message>
+ <sketch-timeline-message .message=${message}></sketch-timeline-message>
`);
- const diffButton = el.shadowRoot!.querySelector(".commit-diff-button") as HTMLButtonElement;
+ const diffButton = el.shadowRoot!.querySelector(
+ ".commit-diff-button",
+ ) as HTMLButtonElement;
expect(diffButton).to.exist;
-
+
// Set up listener for the event
setTimeout(() => diffButton!.click());
const { detail } = await oneEvent(el, "show-commit-diff");
-
+
expect(detail).to.exist;
expect(detail.commitHash).to.equal("1234567890abcdef");
});
@@ -208,13 +199,13 @@
// First message of a type should show icon
const firstMessage = createMockMessage({
type: "user",
- idx: 0
+ idx: 0,
});
-
+
// Second message of same type should not show icon
const secondMessage = createMockMessage({
type: "user",
- idx: 1
+ idx: 1,
});
// Test first message (should show icon)