Gitiles
Code Review Sign In
code.v1.dodo.cloud / sketch / af2d7e3940d063e4e5dfed2abed69c698f9b04fc / . / loop / webui / src / web-components / demo / sketch-tool-calls.demo.html
blob: 7bedf11f33b20a6e5486b9af9ac82c22fa34b824 [file] [log] [blame]
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]1<html>
2 <head>
3 <title>sketch-tool-calls demo</title>
4 <link rel="stylesheet" href="demo.css" />
5
Pokey Rulee2a8c2f2025-04-23 15:09:25 +0100[diff] [blame]6 <script type="module" src="../sketch-tool-calls.ts"
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]7 ></script>
8
9 <script>
10 const toolCalls = [
11 [
12 {
13 name: "bash",
14 input: JSON.stringify({
Sean McCulloughec3ad1a2025-04-18 13:55:16 -0700[diff] [blame]15 command:
16 "docker ps -a --format '{{.ID}} {{.Image }} {{.Names}}' | grep sketch | awk '{print $1 }' | xargs -I {} docker rm {} && docker image prune -af",
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]17 }),
18 },
19 ],
20 [
21 {
22 name: "bash",
23 input: JSON.stringify({
24 command: "ls -a",
25 }),
26 result_message: {
27 type: "tool",
28 tool_result: ".\n..",
29 },
30 },
31 ],
32 [
33 {
34 name: "bash",
35 input: JSON.stringify({
36 command: "sleep 200",
37 }),
38 result_message: {
39 type: "tool",
40 tool_error: "the user canceled this operation",
41 },
42 },
43 ],
44 [
45 {
46 name: "title",
47 input: JSON.stringify({
48 title: "a new title for this sketch",
49 }),
50 },
51 ],
52 [
53 {
54 name: "codereview",
55 input: "{}",
56 tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
57 result_message: {
58 type: "tool",
59 end_of_turn: false,
60 content: "",
61 tool_name: "codereview",
62 input: "{}",
63 tool_result: "OK",
64 tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
65 timestamp: "2025-04-14T16:33:17.575759565Z",
66 conversation_id: "xsa-8hw0",
67 start_time: "2025-04-14T16:33:07.11793816Z",
68 end_time: "2025-04-14T16:33:17.57575719Z",
69 elapsed: 10457819031,
70 idx: 45,
71 },
72 },
73 ],
74 [
75 {
76 name: "codereview",
77 input: "{}",
78 tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
79 result_message: {
80 type: "tool",
81 end_of_turn: false,
82 content: "",
83 tool_name: "codereview",
84 input: "{}",
85 tool_result: "Not OK",
86 tool_call_id: "toolu_01WT5qQwHZgdogfKhkD8R9PZ",
87 timestamp: "2025-04-14T16:33:17.575759565Z",
88 conversation_id: "xsa-8hw0",
89 start_time: "2025-04-14T16:33:07.11793816Z",
90 end_time: "2025-04-14T16:33:17.57575719Z",
91 elapsed: 10457819031,
92 idx: 45,
93 },
94 },
95 ],
96 [
97 {
98 name: "think",
99 input:
100 '{"thoughts":"I\'m going to inspect a few key components to understand their purpose and relationships:\\n1. sketch-app-shell.ts - Appears to be the main container component\\n2. sketch-timeline.ts - Likely manages the chat timeline\\n3. sketch-view-mode-select.ts - Handles switching between different views\\n\\nThis will help me create a comprehensive README that explains the components and their relationships."}',
101 tool_call_id: "toolu_01R1g5mQVgKxEJZFNp9QGvUr",
102 result_message: {
103 type: "tool",
104 end_of_turn: false,
105 content: "",
106 tool_name: "think",
107 input:
108 '{"thoughts":"I\'m going to inspect a few key components to understand their purpose and relationships:\\n1. sketch-app-shell.ts - Appears to be the main container component\\n2. sketch-timeline.ts - Likely manages the chat timeline\\n3. sketch-view-mode-select.ts - Handles switching between different views\\n\\nThis will help me create a comprehensive README that explains the components and their relationships."}',
109 tool_result: "recorded",
110 tool_call_id: "toolu_01R1g5mQVgKxEJZFNp9QGvUr",
111 timestamp: "2025-04-14T16:32:14.12647133Z",
112 conversation_id: "xsa-8hw0",
113 start_time: "2025-04-14T16:32:14.126454329Z",
114 end_time: "2025-04-14T16:32:14.126468539Z",
115 elapsed: 14209,
116 idx: 18,
117 },
118 },
119 ],
120 [
121 {
122 name: "patch",
123 input:
124 '{"path":"/app/loop/webui/src/web-components/README.md","patches":[{"operation":"overwrite","newText":"# Web Components\\n\\nThis directory contains the custom web components used in the Loop WebUI. These components are built using the [Lit](https://lit.dev/) library for creating fast, lightweight web components with a declarative template system.\\n\\n## Component Architecture\\n\\nThe components follow a hierarchical structure that creates a complete UI for interacting with the CodingAgent:\\n\\n```\\nsketch-app-shell (main container)\\n├── sketch-container-status\\n├── sketch-network-status\\n├── sketch-view-mode-select\\n├── sketch-timeline (chat view)\\n│ └── sketch-timeline-message\\n│ └── sketch-tool-calls\\n├── sketch-diff-view (code diff view)\\n└── sketch-chat-input\\n```\\n\\n## Component Overview\\n\\n### sketch-app-shell.ts\\nThe main container component that orchestrates the entire UI. It manages:\\n- View modes (chat, diff, charts, terminal)\\n- Network status and connection management\\n- Timeline data fetching and rendering\\n- Auto-scrolling behavior for chat messages\\n\\n### sketch-chat-input.ts\\nHandles user input for sending messages to the CodingAgent:\\n- Text input area with markdown support\\n- Send button and keyboard shortcuts (Enter to send, Shift+Enter for newline)\\n- Auto-focusing behavior\\n\\n### sketch-container-status.ts\\nDisplays information about the container environment:\\n- OS information\\n- Resource usage (CPU, memory)\\n- Container status indicators\\n\\n### sketch-diff-view.ts\\nProvides a visual diff viewer for code changes:\\n- Git commit display\\n- Side-by-side or unified diff viewing\\n- Syntax highlighting for code\\n- Comment creation for code review\\n\\n### sketch-network-status.ts\\nShows the current connection status to the server:\\n- Connected/disconnected indicators\\n- Error messages when connection issues occur\\n- Visual feedback on connection state\\n\\n### sketch-timeline.ts\\nDisplays the conversation history between user and CodingAgent:\\n- Message rendering\\n- Manages the sequence of messages\\n- Handles scrolling behavior\\n\\n### sketch-timeline-message.ts\\nRenders individual messages in the timeline:\\n- Different styling for user vs. agent messages\\n- Markdown rendering with syntax highlighting\\n- Handles special message types\\n\\n### sketch-tool-calls.ts\\nDisplays tool call information within messages:\\n- Tool call parameters and outputs\\n- Expandable/collapsible sections for tool details\\n- Syntax highlighting for code in tool outputs\\n\\n### sketch-view-mode-select.ts\\nProvides UI for switching between different views:\\n- Chat view for conversation\\n- Diff view for code changes\\n- Charts view for data visualization\\n- Terminal view for command execution\\n\\n## Development\\n\\n### Creating New Components\\n\\nWhen creating new components, follow these patterns:\\n\\n1. Use the `@customElement` decorator to define the component\\n2. Encapsulate styles using the static `styles` property\\n3. Use Lit\'s reactive properties (`@property`, `@state`) to manage component state\\n4. Implement lifecycle methods as needed (`connectedCallback`, `disconnectedCallback`, etc.)\\n\\n### Example\\n\\n```typescript\\nimport { css, html, LitElement } from \'lit\';\\nimport { customElement, property } from \'lit/decorators.js\';\\n\\n@customElement(\'sketch-new-component\')\\nexport class SketchNewComponent extends LitElement {\\n @property()\\n myProperty: string = \'default\';\\n\\n static styles = css`\\n :host {\\n display: block;\\n }\\n `;\\n\\n render() {\\n return html`\\n <div>\\n ${this.myProperty}\\n </div>\\n `;\\n }\\n}\\n\\ndeclare global {\\n interface HTMLElementTagNameMap {\\n \'sketch-new-component\': SketchNewComponent;\\n }\\n}\\n```\\n\\n### Best Practices\\n\\n1. Maintain a single responsibility for each component\\n2. Use properties and events for parent-child communication\\n3. Document the purpose and API of each component\\n4. Write tests for components where possible\\n5. Keep styles encapsulated within components\\n6. Use type definitions for strong typing\\n\\n## Related Resources\\n\\n- [Lit Documentation](https://lit.dev/docs/)\\n- [Web Components Introduction](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\\n- See `/app/loop/webui/readme.md` for more information on the Loop WebUI project\\n"}]}',
125 tool_call_id: "toolu_01TNhLX2AWkZwsu2KCLKrpju",
126 result_message: {
127 type: "tool",
128 end_of_turn: false,
129 content: "",
130 tool_name: "patch",
131 input:
132 '{"path":"/app/loop/webui/src/web-components/README.md","patches":[{"operation":"overwrite","newText":"# Web Components\\n\\nThis directory contains the custom web components used in the Loop WebUI. These components are built using the [Lit](https://lit.dev/) library for creating fast, lightweight web components with a declarative template system.\\n\\n## Component Architecture\\n\\nThe components follow a hierarchical structure that creates a complete UI for interacting with the CodingAgent:\\n\\n```\\nsketch-app-shell (main container)\\n├── sketch-container-status\\n├── sketch-network-status\\n├── sketch-view-mode-select\\n├── sketch-timeline (chat view)\\n│ └── sketch-timeline-message\\n│ └── sketch-tool-calls\\n├── sketch-diff-view (code diff view)\\n└── sketch-chat-input\\n```\\n\\n## Component Overview\\n\\n### sketch-app-shell.ts\\nThe main container component that orchestrates the entire UI. It manages:\\n- View modes (chat, diff, charts, terminal)\\n- Network status and connection management\\n- Timeline data fetching and rendering\\n- Auto-scrolling behavior for chat messages\\n\\n### sketch-chat-input.ts\\nHandles user input for sending messages to the CodingAgent:\\n- Text input area with markdown support\\n- Send button and keyboard shortcuts (Enter to send, Shift+Enter for newline)\\n- Auto-focusing behavior\\n\\n### sketch-container-status.ts\\nDisplays information about the container environment:\\n- OS information\\n- Resource usage (CPU, memory)\\n- Container status indicators\\n\\n### sketch-diff-view.ts\\nProvides a visual diff viewer for code changes:\\n- Git commit display\\n- Side-by-side or unified diff viewing\\n- Syntax highlighting for code\\n- Comment creation for code review\\n\\n### sketch-network-status.ts\\nShows the current connection status to the server:\\n- Connected/disconnected indicators\\n- Error messages when connection issues occur\\n- Visual feedback on connection state\\n\\n### sketch-timeline.ts\\nDisplays the conversation history between user and CodingAgent:\\n- Message rendering\\n- Manages the sequence of messages\\n- Handles scrolling behavior\\n\\n### sketch-timeline-message.ts\\nRenders individual messages in the timeline:\\n- Different styling for user vs. agent messages\\n- Markdown rendering with syntax highlighting\\n- Handles special message types\\n\\n### sketch-tool-calls.ts\\nDisplays tool call information within messages:\\n- Tool call parameters and outputs\\n- Expandable/collapsible sections for tool details\\n- Syntax highlighting for code in tool outputs\\n\\n### sketch-view-mode-select.ts\\nProvides UI for switching between different views:\\n- Chat view for conversation\\n- Diff view for code changes\\n- Charts view for data visualization\\n- Terminal view for command execution\\n\\n## Development\\n\\n### Creating New Components\\n\\nWhen creating new components, follow these patterns:\\n\\n1. Use the `@customElement` decorator to define the component\\n2. Encapsulate styles using the static `styles` property\\n3. Use Lit\'s reactive properties (`@property`, `@state`) to manage component state\\n4. Implement lifecycle methods as needed (`connectedCallback`, `disconnectedCallback`, etc.)\\n\\n### Example\\n\\n```typescript\\nimport { css, html, LitElement } from \'lit\';\\nimport { customElement, property } from \'lit/decorators.js\';\\n\\n@customElement(\'sketch-new-component\')\\nexport class SketchNewComponent extends LitElement {\\n @property()\\n myProperty: string = \'default\';\\n\\n static styles = css`\\n :host {\\n display: block;\\n }\\n `;\\n\\n render() {\\n return html`\\n <div>\\n ${this.myProperty}\\n </div>\\n `;\\n }\\n}\\n\\ndeclare global {\\n interface HTMLElementTagNameMap {\\n \'sketch-new-component\': SketchNewComponent;\\n }\\n}\\n```\\n\\n### Best Practices\\n\\n1. Maintain a single responsibility for each component\\n2. Use properties and events for parent-child communication\\n3. Document the purpose and API of each component\\n4. Write tests for components where possible\\n5. Keep styles encapsulated within components\\n6. Use type definitions for strong typing\\n\\n## Related Resources\\n\\n- [Lit Documentation](https://lit.dev/docs/)\\n- [Web Components Introduction](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\\n- See `/app/loop/webui/readme.md` for more information on the Loop WebUI project\\n"}]}',
133 tool_result: "- Applied all patches\n",
134 tool_call_id: "toolu_01TNhLX2AWkZwsu2KCLKrpju",
135 timestamp: "2025-04-14T16:32:47.10299854Z",
136 conversation_id: "xsa-8hw0",
137 start_time: "2025-04-14T16:32:47.101660683Z",
138 end_time: "2025-04-14T16:32:47.102994206Z",
139 elapsed: 1333524,
140 idx: 34,
141 },
142 },
143 ],
144 [
145 {
146 name: "done",
147 input:
148 '{"checklist_items":{"code_reviewed":{"status":"yes","description":"If any commits were made, the codereview tool was run and its output was addressed.","comments":"Since this commit only adds a documentation file (README.md) with no functional code changes, a formal code review is not essential, but I\'ve verified the content for accuracy and completeness."},"wrote_tests":{"status":"not applicable","description":"If code was changed, tests were written or updated.","comments":"No code was changed; only documentation was added. The README file is purely informational and doesn\'t require tests."},"passes_tests":{"status":"not applicable","description":"If any commits were made, tests pass.","comments":"No functional code changes were made that would impact existing tests. The addition of a README file is a documentation-only change."},"git_commit":{"status":"yes","description":"Create git commits for any code changes you made. Match the style of recent commit messages. Include \'Co-Authored-By: sketch\' and the original user prompt. Use GIT_AUTHOR_NAME=\\"Sean McCullough\\" GIT_AUTHOR_EMAIL=\\"banksean@gmail.com\\" (not git config).","comments":"Created a commit with a descriptive message that follows the requested format, including \'Co-Authored-By: sketch\' attribution."}}}',
149 tool_call_id: "toolu_01HPgWQJF1aF9LUqkdDKWeES",
150 result_message: {
151 type: "tool",
152 end_of_turn: false,
153 content: "",
154 tool_name: "done",
155 input:
156 '{"checklist_items":{"code_reviewed":{"status":"yes","description":"If any commits were made, the codereview tool was run and its output was addressed.","comments":"Since this commit only adds a documentation file (README.md) with no functional code changes, a formal code review is not essential, but I\'ve verified the content for accuracy and completeness."},"wrote_tests":{"status":"not applicable","description":"If code was changed, tests were written or updated.","comments":"No code was changed; only documentation was added. The README file is purely informational and doesn\'t require tests."},"passes_tests":{"status":"not applicable","description":"If any commits were made, tests pass.","comments":"No functional code changes were made that would impact existing tests. The addition of a README file is a documentation-only change."},"git_commit":{"status":"yes","description":"Create git commits for any code changes you made. Match the style of recent commit messages. Include \'Co-Authored-By: sketch\' and the original user prompt. Use GIT_AUTHOR_NAME=\\"Sean McCullough\\" GIT_AUTHOR_EMAIL=\\"banksean@gmail.com\\" (not git config).","comments":"Created a commit with a descriptive message that follows the requested format, including \'Co-Authored-By: sketch\' attribution."}}}',
157 tool_result:
158 "codereview tool has not been run for commit 0b1f45dc17fbe7800f5164993ec99d6564256787",
159 tool_error: true,
160 tool_call_id: "toolu_01HPgWQJF1aF9LUqkdDKWeES",
161 timestamp: "2025-04-14T16:33:04.639179373Z",
162 conversation_id: "xsa-8hw0",
163 start_time: "2025-04-14T16:33:04.616273148Z",
164 end_time: "2025-04-14T16:33:04.639173456Z",
165 elapsed: 22900309,
166 idx: 43,
167 },
168 },
169 ],
170 ];
171 document.addEventListener("DOMContentLoaded", () => {
172 toolCalls.forEach((calls) => {
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]173 const toolCallsEl = document.createElement("sketch-tool-calls");
174 toolCallsEl.toolCalls = calls;
175 document.body.append(toolCallsEl);
176 });
177 });
178 </script>
179 </head>
180 <body>
181 <h1>sketch-tool-calls demo</h1>
182
183 <sketch-tool-calls></sketch-tool-calls>
184 </body>
185</html>