skaband: create forked app shell for /newsessions with shared base
Factor out shared components from sketch/webui app shell and create
newsessions-specific version under skaband with pinned topbar/textarea layout.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s9fcdda62becc98f9k
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index f37d9c9..9d0f2f6 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -1,999 +1,17 @@
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { ConnectionStatus, DataManager } from "../data";
-import { AgentMessage, GitLogEntry, State } from "../types";
-import { aggregateAgentMessages } from "./aggregateAgentMessages";
-import { SketchTailwindElement } from "./sketch-tailwind-element";
-
-import "./sketch-chat-input";
-import "./sketch-container-status";
-
-import "./sketch-diff2-view";
-import { SketchDiff2View } from "./sketch-diff2-view";
-import { DefaultGitDataService } from "./git-data-service";
-import "./sketch-monaco-view";
-import "./sketch-network-status";
-import "./sketch-call-status";
-import "./sketch-terminal";
-import "./sketch-timeline";
-import "./sketch-view-mode-select";
-import "./sketch-todo-panel";
-
-import { createRef, ref } from "lit/directives/ref.js";
-import { SketchChatInput } from "./sketch-chat-input";
-
-type ViewMode = "chat" | "diff2" | "terminal";
+import { html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { ref } from "lit/directives/ref.js";
+import { SketchAppShellBase } from "./sketch-app-shell-base";
@customElement("sketch-app-shell")
-export class SketchAppShell extends SketchTailwindElement {
- // Current view mode (chat, diff, terminal)
- @state()
- viewMode: ViewMode = "chat";
-
- // Current commit hash for diff view
- @state()
- currentCommitHash: string = "";
-
- // Last commit information
- @state()
-
- // Reference to the container status element
- containerStatusElement: any = null;
-
- // Note: CSS styles have been converted to Tailwind classes applied directly to HTML elements
- // since this component now extends SketchTailwindElement which disables shadow DOM
-
- // Override createRenderRoot to apply host styles for proper sizing while still using light DOM
- createRenderRoot() {
- // Use light DOM like SketchTailwindElement but still apply host styles
- const style = document.createElement("style");
- style.textContent = `
- sketch-app-shell {
- display: block;
- width: 100%;
- height: 100vh;
- max-width: 100%;
- box-sizing: border-box;
- overflow: hidden;
- }
- `;
-
- // Add the style to the document head if not already present
- if (!document.head.querySelector("style[data-sketch-app-shell]")) {
- style.setAttribute("data-sketch-app-shell", "");
- document.head.appendChild(style);
- }
-
- return this;
- }
-
- // Header bar: Network connection status details
- @property()
- connectionStatus: ConnectionStatus = "disconnected";
-
- // Track if the last commit info has been copied
- @state()
- // lastCommitCopied moved to sketch-container-status
-
- // Track notification preferences
- @state()
- notificationsEnabled: boolean = false;
-
- // Track if the window is focused to control notifications
- @state()
- private _windowFocused: boolean = document.hasFocus();
-
- // Track if the todo panel should be visible
- @state()
- private _todoPanelVisible: boolean = false;
-
- // Store scroll position for the chat view to preserve it when switching tabs
- @state()
- private _chatScrollPosition: number = 0;
-
- // ResizeObserver for tracking chat input height changes
- private chatInputResizeObserver: ResizeObserver | null = null;
-
- @property()
- connectionErrorMessage: string = "";
-
- // Chat messages
- @property({ attribute: false })
- messages: AgentMessage[] = [];
-
- @property()
- set slug(value: string) {
- const oldValue = this._slug;
- this._slug = value;
- this.requestUpdate("slug", oldValue);
- // Update document title when slug property changes
- this.updateDocumentTitle();
- }
-
- get slug(): string {
- return this._slug;
- }
-
- private _slug: string = "";
-
- private dataManager = new DataManager();
-
- @property({ attribute: false })
- containerState: State = {
- state_version: 2,
- slug: "",
- os: "",
- message_count: 0,
- hostname: "",
- working_dir: "",
- initial_commit: "",
- outstanding_llm_calls: 0,
- outstanding_tool_calls: [],
- session_id: "",
- ssh_available: false,
- ssh_error: "",
- in_container: false,
- first_message_index: 0,
- diff_lines_added: 0,
- diff_lines_removed: 0,
- };
-
- // Mutation observer to detect when new messages are added
- private mutationObserver: MutationObserver | null = null;
-
- constructor() {
- super();
-
- // Reference to the container status element
- this.containerStatusElement = null;
-
- // Binding methods to this
- this._handleViewModeSelect = this._handleViewModeSelect.bind(this);
- this._handlePopState = this._handlePopState.bind(this);
- this._handleShowCommitDiff = this._handleShowCommitDiff.bind(this);
- this._handleMutlipleChoiceSelected =
- this._handleMutlipleChoiceSelected.bind(this);
- this._handleStopClick = this._handleStopClick.bind(this);
- this._handleEndClick = this._handleEndClick.bind(this);
- this._handleNotificationsToggle =
- this._handleNotificationsToggle.bind(this);
- this._handleWindowFocus = this._handleWindowFocus.bind(this);
- this._handleWindowBlur = this._handleWindowBlur.bind(this);
-
- // Load notification preference from localStorage
- try {
- const savedPref = localStorage.getItem("sketch-notifications-enabled");
- if (savedPref !== null) {
- this.notificationsEnabled = savedPref === "true";
- }
- } catch (error) {
- console.error("Error loading notification preference:", error);
- }
- }
-
- // See https://lit.dev/docs/components/lifecycle/
- connectedCallback() {
- super.connectedCallback();
-
- // Get reference to the container status element
- setTimeout(() => {
- this.containerStatusElement =
- this.shadowRoot?.getElementById("container-status");
- }, 0);
-
- // Initialize client-side nav history.
- const url = new URL(window.location.href);
- const mode = url.searchParams.get("view") || "chat";
- window.history.replaceState({ mode }, "", url.toString());
-
- this.toggleViewMode(mode as ViewMode, false);
- // Add popstate event listener to handle browser back/forward navigation
- window.addEventListener("popstate", this._handlePopState);
-
- // Add event listeners
- window.addEventListener("view-mode-select", this._handleViewModeSelect);
- window.addEventListener("show-commit-diff", this._handleShowCommitDiff);
-
- // Add window focus/blur listeners for controlling notifications
- window.addEventListener("focus", this._handleWindowFocus);
- window.addEventListener("blur", this._handleWindowBlur);
- window.addEventListener(
- "multiple-choice-selected",
- this._handleMutlipleChoiceSelected,
- );
-
- // register event listeners
- this.dataManager.addEventListener(
- "dataChanged",
- this.handleDataChanged.bind(this),
- );
- this.dataManager.addEventListener(
- "connectionStatusChanged",
- this.handleConnectionStatusChanged.bind(this),
- );
-
- // Set initial document title
- this.updateDocumentTitle();
-
- // Initialize the data manager
- this.dataManager.initialize();
-
- // Process existing messages for commit info
- if (this.messages && this.messages.length > 0) {
- // Update last commit info via container status component
- setTimeout(() => {
- if (this.containerStatusElement) {
- this.containerStatusElement.updateLastCommitInfo(this.messages);
- }
- }, 100);
- }
-
- // Check if todo panel should be visible on initial load
- this.checkTodoPanelVisibility();
-
- // Set up ResizeObserver for chat input to update todo panel height
- this.setupChatInputObserver();
- }
-
- // See https://lit.dev/docs/components/lifecycle/
- disconnectedCallback() {
- super.disconnectedCallback();
- window.removeEventListener("popstate", this._handlePopState);
-
- // Remove event listeners
- window.removeEventListener("view-mode-select", this._handleViewModeSelect);
- window.removeEventListener("show-commit-diff", this._handleShowCommitDiff);
- window.removeEventListener("focus", this._handleWindowFocus);
- window.removeEventListener("blur", this._handleWindowBlur);
- window.removeEventListener(
- "multiple-choice-selected",
- this._handleMutlipleChoiceSelected,
- );
-
- // unregister data manager event listeners
- this.dataManager.removeEventListener(
- "dataChanged",
- this.handleDataChanged.bind(this),
- );
- this.dataManager.removeEventListener(
- "connectionStatusChanged",
- this.handleConnectionStatusChanged.bind(this),
- );
-
- // Disconnect mutation observer if it exists
- if (this.mutationObserver) {
- this.mutationObserver.disconnect();
- this.mutationObserver = null;
- }
-
- // Disconnect chat input resize observer if it exists
- if (this.chatInputResizeObserver) {
- this.chatInputResizeObserver.disconnect();
- this.chatInputResizeObserver = null;
- }
- }
-
- updateUrlForViewMode(mode: ViewMode): void {
- // Get the current URL without search parameters
- const url = new URL(window.location.href);
-
- // Clear existing parameters
- url.search = "";
-
- // Only add view parameter if not in default chat view
- if (mode !== "chat") {
- url.searchParams.set("view", mode);
- const diff2View = this.shadowRoot?.querySelector(
- "sketch-diff2-view",
- ) as SketchDiff2View;
-
- // If in diff2 view and there's a commit hash, include that too
- if (mode === "diff2" && diff2View?.commit) {
- url.searchParams.set("commit", diff2View.commit);
- }
- }
-
- // Update the browser history without reloading the page
- window.history.pushState({ mode }, "", url.toString());
- }
-
- private _handlePopState(event: PopStateEvent) {
- if (event.state && event.state.mode) {
- this.toggleViewMode(event.state.mode, false);
- } else {
- this.toggleViewMode("chat", false);
- }
- }
-
- /**
- * Handle view mode selection event
- */
- private _handleViewModeSelect(event: CustomEvent) {
- const mode = event.detail.mode as "chat" | "diff2" | "terminal";
- this.toggleViewMode(mode, true);
- }
-
- /**
- * Handle show commit diff event
- */
- private _handleShowCommitDiff(event: CustomEvent) {
- const { commitHash } = event.detail;
- if (commitHash) {
- this.showCommitDiff(commitHash);
- }
- }
-
- private _handleMultipleChoice(event: CustomEvent) {
- window.console.log("_handleMultipleChoice", event);
- this._sendChat;
- }
-
- private _handleDiffComment(event: CustomEvent) {
- // Empty stub required by the event binding in the template
- // Actual handling occurs at global level in sketch-chat-input component
- }
- /**
- * Listen for commit diff event
- * @param commitHash The commit hash to show diff for
- */
- private showCommitDiff(commitHash: string): void {
- // Store the commit hash
- this.currentCommitHash = commitHash;
-
- this.toggleViewMode("diff2", true);
-
- this.updateComplete.then(() => {
- const diff2View = this.shadowRoot?.querySelector("sketch-diff2-view");
- if (diff2View) {
- (diff2View as SketchDiff2View).refreshDiffView();
- }
- });
- }
-
- /**
- * Toggle between different view modes: chat, diff2, terminal
- */
- private toggleViewMode(mode: ViewMode, updateHistory: boolean): void {
- // Don't do anything if the mode is already active
- if (this.viewMode === mode) return;
-
- // Store scroll position if we're leaving the chat view
- if (this.viewMode === "chat" && this.scrollContainerRef.value) {
- // Only store scroll position if we actually have meaningful content
- const scrollTop = this.scrollContainerRef.value.scrollTop;
- const scrollHeight = this.scrollContainerRef.value.scrollHeight;
- const clientHeight = this.scrollContainerRef.value.clientHeight;
-
- // Store position only if we have scrollable content and have actually scrolled
- if (scrollHeight > clientHeight && scrollTop > 0) {
- this._chatScrollPosition = scrollTop;
- }
- }
-
- // Update the view mode
- this.viewMode = mode;
-
- if (updateHistory) {
- // Update URL with the current view mode
- this.updateUrlForViewMode(mode);
- }
-
- // Wait for DOM update to complete
- this.updateComplete.then(() => {
- // Handle scroll position restoration for chat view
- if (
- mode === "chat" &&
- this.scrollContainerRef.value &&
- this._chatScrollPosition > 0
- ) {
- // Use requestAnimationFrame to ensure DOM is ready
- requestAnimationFrame(() => {
- if (this.scrollContainerRef.value) {
- // Double-check that we're still in chat mode and the container is available
- if (
- this.viewMode === "chat" &&
- this.scrollContainerRef.value.isConnected
- ) {
- this.scrollContainerRef.value.scrollTop =
- this._chatScrollPosition;
- }
- }
- });
- }
-
- // Handle diff2 view specific logic
- if (mode === "diff2") {
- // Refresh git/recentlog when Monaco diff view is opened
- // This ensures branch information is always up-to-date, as branches can change frequently
- const diff2ViewComp = this.querySelector("sketch-diff2-view");
- if (diff2ViewComp) {
- (diff2ViewComp as SketchDiff2View).refreshDiffView();
- }
- }
-
- // Update view mode buttons
- const viewModeSelect = this.querySelector("sketch-view-mode-select");
- if (viewModeSelect) {
- const event = new CustomEvent("update-active-mode", {
- detail: { mode },
- bubbles: true,
- composed: true,
- });
- viewModeSelect.dispatchEvent(event);
- }
- });
- }
-
- /**
- * Updates the document title based on current slug and connection status
- */
- private updateDocumentTitle(): void {
- let docTitle = `sk: ${this.slug || "untitled"}`;
-
- // Add red circle emoji if disconnected
- if (this.connectionStatus === "disconnected") {
- docTitle += " 🔴";
- }
-
- document.title = docTitle;
- }
-
- // Check and request notification permission if needed
- private async checkNotificationPermission(): Promise<boolean> {
- // Check if the Notification API is supported
- if (!("Notification" in window)) {
- console.log("This browser does not support notifications");
- return false;
- }
-
- // Check if permission is already granted
- if (Notification.permission === "granted") {
- return true;
- }
-
- // If permission is not denied, request it
- if (Notification.permission !== "denied") {
- const permission = await Notification.requestPermission();
- return permission === "granted";
- }
-
- return false;
- }
-
- // Handle notifications toggle click
- private _handleNotificationsToggle(): void {
- this.notificationsEnabled = !this.notificationsEnabled;
-
- // If enabling notifications, check permissions
- if (this.notificationsEnabled) {
- this.checkNotificationPermission();
- }
-
- // Save preference to localStorage
- try {
- localStorage.setItem(
- "sketch-notifications-enabled",
- String(this.notificationsEnabled),
- );
- } catch (error) {
- console.error("Error saving notification preference:", error);
- }
- }
-
- // Handle window focus event
- private _handleWindowFocus(): void {
- this._windowFocused = true;
- }
-
- // Handle window blur event
- private _handleWindowBlur(): void {
- this._windowFocused = false;
- }
-
- // Get the last user or agent message (ignore system messages like commit, error, etc.)
- // For example, when Sketch notices a new commit, it'll send a message,
- // but it's still idle!
- private getLastUserOrAgentMessage(): AgentMessage | null {
- for (let i = this.messages.length - 1; i >= 0; i--) {
- const message = this.messages[i];
- if (message.type === "user" || message.type === "agent") {
- return message;
- }
- }
- return null;
- }
-
- // Show notification for message with EndOfTurn=true
- private async showEndOfTurnNotification(
- message: AgentMessage,
- ): Promise<void> {
- // Don't show notifications if they're disabled
- if (!this.notificationsEnabled) return;
-
- // Don't show notifications if the window is focused
- if (this._windowFocused) return;
-
- // Check if we have permission to show notifications
- const hasPermission = await this.checkNotificationPermission();
- if (!hasPermission) return;
-
- // Only show notifications for agent messages with end_of_turn=true and no parent_conversation_id
- if (
- message.type !== "agent" ||
- !message.end_of_turn ||
- message.parent_conversation_id
- )
- return;
-
- // Create a title that includes the sketch slug
- const notificationTitle = `Sketch: ${this.slug || "untitled"}`;
-
- // Extract the beginning of the message content (first 100 chars)
- const messagePreview = message.content
- ? message.content.substring(0, 100) +
- (message.content.length > 100 ? "..." : "")
- : "Agent has completed its turn";
-
- // Create and show the notification
- try {
- new Notification(notificationTitle, {
- body: messagePreview,
- icon: "https://sketch.dev/favicon.ico", // Use sketch.dev favicon for notification
- });
- } catch (error) {
- console.error("Error showing notification:", error);
- }
- }
-
- // Check if todo panel should be visible based on latest todo content from messages or state
- private checkTodoPanelVisibility(): void {
- // Find the latest todo content from messages first
- let latestTodoContent = "";
- for (let i = this.messages.length - 1; i >= 0; i--) {
- const message = this.messages[i];
- if (message.todo_content !== undefined) {
- latestTodoContent = message.todo_content || "";
- break;
- }
- }
-
- // If no todo content found in messages, check the current state
- if (latestTodoContent === "" && this.containerState?.todo_content) {
- latestTodoContent = this.containerState.todo_content;
- }
-
- // Parse the todo data to check if there are any actual todos
- let hasTodos = false;
- if (latestTodoContent.trim()) {
- try {
- const todoData = JSON.parse(latestTodoContent);
- hasTodos = todoData.items && todoData.items.length > 0;
- } catch (error) {
- // Invalid JSON, treat as no todos
- hasTodos = false;
- }
- }
-
- this._todoPanelVisible = hasTodos;
-
- // Update todo panel content if visible
- if (hasTodos) {
- const todoPanel = this.shadowRoot?.querySelector(
- "sketch-todo-panel",
- ) as any;
- if (todoPanel && todoPanel.updateTodoContent) {
- todoPanel.updateTodoContent(latestTodoContent);
- }
- }
- }
-
- private handleDataChanged(eventData: {
- state: State;
- newMessages: AgentMessage[];
- }): void {
- const { state, newMessages } = eventData;
-
- // Update state if we received it
- if (state) {
- // Ensure we're using the latest call status to prevent indicators from being stuck
- if (
- state.outstanding_llm_calls === 0 &&
- state.outstanding_tool_calls.length === 0
- ) {
- // Force reset containerState calls when nothing is reported as in progress
- state.outstanding_llm_calls = 0;
- state.outstanding_tool_calls = [];
- }
-
- this.containerState = state;
- this.slug = state.slug || "";
-
- // Update document title when sketch slug changes
- this.updateDocumentTitle();
- }
-
- // Update messages
- const oldMessageCount = this.messages.length;
- this.messages = aggregateAgentMessages(this.messages, newMessages);
-
- // If new messages were added and we're in chat view, reset stored scroll position
- // so the timeline can auto-scroll to bottom for new content
- if (this.messages.length > oldMessageCount && this.viewMode === "chat") {
- // Only reset if we were near the bottom (indicating user wants to follow new messages)
- if (this.scrollContainerRef.value) {
- const scrollTop = this.scrollContainerRef.value.scrollTop;
- const scrollHeight = this.scrollContainerRef.value.scrollHeight;
- const clientHeight = this.scrollContainerRef.value.clientHeight;
- const isNearBottom = scrollTop + clientHeight >= scrollHeight - 50; // 50px tolerance
-
- if (isNearBottom) {
- this._chatScrollPosition = 0; // Reset stored position to allow auto-scroll
- }
- }
- }
-
- // Process new messages to find commit messages
- // Update last commit info via container status component
- if (this.containerStatusElement) {
- this.containerStatusElement.updateLastCommitInfo(newMessages);
- }
-
- // Check for agent messages with end_of_turn=true and show notifications
- if (newMessages && newMessages.length > 0) {
- for (const message of newMessages) {
- if (
- message.type === "agent" &&
- message.end_of_turn &&
- !message.parent_conversation_id
- ) {
- this.showEndOfTurnNotification(message);
- break; // Only show one notification per batch of messages
- }
- }
- }
-
- // Check if todo panel should be visible after agent loop iteration
- this.checkTodoPanelVisibility();
-
- // Ensure chat input observer is set up when new data comes in
- if (!this.chatInputResizeObserver) {
- this.setupChatInputObserver();
- }
- }
-
- private handleConnectionStatusChanged(
- status: ConnectionStatus,
- errorMessage?: string,
- ): void {
- this.connectionStatus = status;
- this.connectionErrorMessage = errorMessage || "";
-
- // Update document title when connection status changes
- this.updateDocumentTitle();
- }
-
- private async _handleStopClick(): Promise<void> {
- try {
- const response = await fetch("cancel", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({ reason: "user requested cancellation" }),
- });
-
- if (!response.ok) {
- const errorData = await response.text();
- throw new Error(
- `Failed to stop operation: ${response.status} - ${errorData}`,
- );
- }
-
- // Stop request sent
- } catch (error) {
- console.error("Error stopping operation:", error);
- }
- }
-
- private async _handleEndClick(event?: Event): Promise<void> {
- if (event) {
- event.preventDefault();
- event.stopPropagation();
- }
-
- // Show confirmation dialog
- const confirmed = window.confirm(
- "Ending the session will shut down the underlying container. Are you sure?",
- );
- if (!confirmed) return;
-
- try {
- const response = await fetch("end", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({ reason: "user requested end of session" }),
- });
-
- if (!response.ok) {
- const errorData = await response.text();
- throw new Error(
- `Failed to end session: ${response.status} - ${errorData}`,
- );
- }
-
- // After successful response, redirect to messages view
- // Extract the session ID from the URL
- const currentUrl = window.location.href;
- // The URL pattern should be like https://sketch.dev/s/cs71-8qa6-1124-aw79/
- const urlParts = currentUrl.split("/");
- let sessionId = "";
-
- // Find the session ID in the URL (should be after /s/)
- for (let i = 0; i < urlParts.length; i++) {
- if (urlParts[i] === "s" && i + 1 < urlParts.length) {
- sessionId = urlParts[i + 1];
- break;
- }
- }
-
- if (sessionId) {
- // Create the messages URL
- const messagesUrl = `/messages/${sessionId}`;
- // Redirect to messages view
- window.location.href = messagesUrl;
- }
-
- // End request sent - connection will be closed by server
- } catch (error) {
- console.error("Error ending session:", error);
- }
- }
-
- async _handleMutlipleChoiceSelected(e: CustomEvent) {
- const chatInput = this.shadowRoot?.querySelector(
- "sketch-chat-input",
- ) as SketchChatInput;
- if (chatInput) {
- if (chatInput.content && chatInput.content.trim() !== "") {
- chatInput.content += "\n\n";
- }
- chatInput.content += e.detail.responseText;
- chatInput.focus();
- // Adjust textarea height to accommodate new content
- requestAnimationFrame(() => {
- if (chatInput.adjustChatSpacing) {
- chatInput.adjustChatSpacing();
- }
- });
- }
- }
-
- async _sendChat(e: CustomEvent) {
- console.log("app shell: _sendChat", e);
- e.preventDefault();
- e.stopPropagation();
- const message = e.detail.message?.trim();
- if (message == "") {
- return;
- }
- try {
- // Always switch to chat view when sending a message so user can see processing
- if (this.viewMode !== "chat") {
- this.toggleViewMode("chat", true);
- }
-
- // Send the message to the server
- const response = await fetch("chat", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({ message }),
- });
-
- if (!response.ok) {
- const errorData = await response.text();
- throw new Error(`Server error: ${response.status} - ${errorData}`);
- }
- } catch (error) {
- console.error("Error sending chat message:", error);
- const statusText = document.getElementById("statusText");
- if (statusText) {
- statusText.textContent = "Error sending message";
- }
- }
- }
-
- private scrollContainerRef = createRef<HTMLElement>();
-
- /**
- * Set up ResizeObserver to monitor chat input height changes
- */
- private setupChatInputObserver(): void {
- // Wait for DOM to be ready
- this.updateComplete.then(() => {
- const chatInputElement = this.shadowRoot?.querySelector("#chat-input");
- if (chatInputElement && !this.chatInputResizeObserver) {
- this.chatInputResizeObserver = new ResizeObserver((entries) => {
- for (const entry of entries) {
- this.updateTodoPanelHeight(entry.contentRect.height);
- }
- });
-
- this.chatInputResizeObserver.observe(chatInputElement);
-
- // Initial height calculation
- const rect = chatInputElement.getBoundingClientRect();
- this.updateTodoPanelHeight(rect.height);
- }
- });
- }
-
- /**
- * Update the CSS custom property that controls todo panel bottom position
- */
- private updateTodoPanelHeight(chatInputHeight: number): void {
- // Add some padding (20px) between todo panel and chat input
- const bottomOffset = chatInputHeight;
-
- // Update the CSS custom property on the host element
- this.style.setProperty("--chat-input-height", `${bottomOffset}px`);
- }
-
+export class SketchAppShell extends SketchAppShellBase {
render() {
return html`
<!-- Main container: flex column, full height, system font, hidden overflow-x -->
<div
class="block font-sans text-gray-800 leading-relaxed h-screen w-full relative overflow-x-hidden flex flex-col"
>
- <!-- Top banner: flex row, space between, border bottom, shadow -->
- <div
- id="top-banner"
- class="flex self-stretch justify-between items-center px-5 pr-8 mb-0 border-b border-gray-200 gap-5 bg-white shadow-md w-full h-12"
- >
- <!-- Title container -->
- <div
- class="flex flex-col whitespace-nowrap overflow-hidden text-ellipsis max-w-[30%] md:max-w-1/2 sm:max-w-[60%] py-1.5"
- >
- <h1
- class="text-lg md:text-base sm:text-sm font-semibold m-0 min-w-24 whitespace-nowrap overflow-hidden text-ellipsis"
- >
- ${this.containerState?.skaband_addr
- ? html`<a
- href="${this.containerState.skaband_addr}"
- target="_blank"
- rel="noopener noreferrer"
- class="text-inherit no-underline transition-opacity duration-200 ease-in-out flex items-center gap-2 hover:opacity-80 hover:underline"
- >
- <img
- src="${this.containerState.skaband_addr}/sketch.dev.png"
- alt="sketch"
- class="w-5 h-5 md:w-[18px] md:h-[18px] sm:w-4 sm:h-4 rounded-sm"
- />
- sketch
- </a>`
- : html`sketch`}
- </h1>
- <h2
- class="m-0 p-0 text-gray-600 text-sm font-normal italic whitespace-nowrap overflow-hidden text-ellipsis"
- >
- ${this.slug}
- </h2>
- </div>
-
- <!-- Container status info moved above tabs -->
- <sketch-container-status
- .state=${this.containerState}
- id="container-status"
- ></sketch-container-status>
-
- <!-- Last Commit section moved to sketch-container-status -->
-
- <!-- Views section with tabs -->
- <sketch-view-mode-select
- .diffLinesAdded=${this.containerState?.diff_lines_added || 0}
- .diffLinesRemoved=${this.containerState?.diff_lines_removed || 0}
- ></sketch-view-mode-select>
-
- <!-- Control buttons and status -->
- <div
- class="flex items-center mb-0 flex-nowrap whitespace-nowrap flex-shrink-0 gap-4 pl-4 mr-12"
- >
- <button
- id="stopButton"
- class="bg-red-600 hover:bg-red-700 disabled:bg-red-300 disabled:cursor-not-allowed disabled:opacity-70 text-white border-none px-2.5 py-1 xl:px-1.5 rounded cursor-pointer text-xs mr-1.5 flex items-center gap-1.5 transition-colors"
- ?disabled=${(this.containerState?.outstanding_llm_calls || 0) ===
- 0 &&
- (this.containerState?.outstanding_tool_calls || []).length === 0}
- >
- <svg
- class="w-4 h-4"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- >
- <rect x="6" y="6" width="12" height="12" />
- </svg>
- <span class="xl:hidden">Stop</span>
- </button>
- <button
- id="endButton"
- class="bg-gray-600 hover:bg-gray-700 disabled:bg-gray-400 disabled:cursor-not-allowed disabled:opacity-70 text-white border-none px-2.5 py-1 xl:px-1.5 rounded cursor-pointer text-xs mr-1.5 flex items-center gap-1.5 transition-colors"
- @click=${this._handleEndClick}
- >
- <svg
- class="w-4 h-4"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- fill="none"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- >
- <path d="M18 6L6 18" />
- <path d="M6 6l12 12" />
- </svg>
- <span class="xl:hidden">End</span>
- </button>
-
- <div
- class="flex items-center text-xs mr-2.5 cursor-pointer"
- @click=${this._handleNotificationsToggle}
- title="${this.notificationsEnabled
- ? "Disable"
- : "Enable"} notifications when the agent completes its turn"
- >
- <div
- class="w-5 h-5 relative inline-flex items-center justify-center"
- >
- <!-- Bell SVG icon -->
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="16"
- height="16"
- fill="currentColor"
- viewBox="0 0 16 16"
- class="${!this.notificationsEnabled ? "relative z-10" : ""}"
- >
- <path
- d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"
- />
- </svg>
- ${!this.notificationsEnabled
- ? html`<div
- class="absolute w-0.5 h-6 bg-red-600 rotate-45 origin-center"
- ></div>`
- : ""}
- </div>
- </div>
-
- <sketch-call-status
- .agentState=${this.containerState?.agent_state}
- .llmCalls=${this.containerState?.outstanding_llm_calls || 0}
- .toolCalls=${this.containerState?.outstanding_tool_calls || []}
- .isIdle=${(() => {
- const lastUserOrAgentMessage = this.getLastUserOrAgentMessage();
- return lastUserOrAgentMessage
- ? lastUserOrAgentMessage.end_of_turn &&
- !lastUserOrAgentMessage.parent_conversation_id
- : true;
- })()}
- .isDisconnected=${this.connectionStatus === "disconnected"}
- ></sketch-call-status>
-
- <sketch-network-status
- connection=${this.connectionStatus}
- error=${this.connectionErrorMessage}
- ></sketch-network-status>
- </div>
- </div>
+ ${this.renderTopBanner()}
<!-- Main content area: scrollable, flex-1 -->
<div
@@ -1009,130 +27,14 @@
? "max-w-none w-full m-0 px-5"
: "max-w-6xl w-[calc(100%-40px)] mx-auto"} relative pb-2.5 pt-2.5 flex flex-col h-full"
>
- <!-- Chat View -->
- <div
- class="chat-view ${this.viewMode === "chat"
- ? "view-active flex flex-col"
- : "hidden"} w-full h-full"
- >
- <div
- class="${this._todoPanelVisible && this.viewMode === "chat"
- ? "mr-[400px] xl:mr-[350px] lg:mr-[300px] md:mr-0 w-[calc(100%-400px)] xl:w-[calc(100%-350px)] lg:w-[calc(100%-300px)] md:w-full"
- : "mr-0"} flex-1 flex flex-col w-full h-full transition-[margin-right] duration-200 ease-in-out"
- >
- <sketch-timeline
- .messages=${this.messages}
- .scrollContainer=${this.scrollContainerRef}
- .agentState=${this.containerState?.agent_state}
- .llmCalls=${this.containerState?.outstanding_llm_calls || 0}
- .toolCalls=${this.containerState?.outstanding_tool_calls ||
- []}
- .firstMessageIndex=${this.containerState
- ?.first_message_index || 0}
- .state=${this.containerState}
- .dataManager=${this.dataManager}
- ></sketch-timeline>
- </div>
- </div>
-
- <!-- Todo panel positioned outside the main flow - only visible in chat view -->
- <div
- class="${this._todoPanelVisible && this.viewMode === "chat"
- ? "block"
- : "hidden"} fixed top-12 right-4 w-[400px] xl:w-[350px] lg:w-[300px] md:hidden z-[100] transition-[bottom] duration-200 ease-in-out"
- style="bottom: var(--chat-input-height, 90px); background: linear-gradient(to bottom, #fafafa 0%, #fafafa 90%, rgba(250, 250, 250, 0.5) 95%, rgba(250, 250, 250, 0.2) 100%); border-left: 1px solid #e0e0e0;"
- >
- <sketch-todo-panel
- .visible=${this._todoPanelVisible && this.viewMode === "chat"}
- ></sketch-todo-panel>
- </div>
- <!-- Diff2 View -->
- <div
- class="diff2-view ${this.viewMode === "diff2"
- ? "view-active flex-1 overflow-hidden min-h-0 flex flex-col h-full"
- : "hidden"} w-full h-full"
- >
- <sketch-diff2-view
- .commit=${this.currentCommitHash}
- .gitService=${new DefaultGitDataService()}
- @diff-comment="${this._handleDiffComment}"
- ></sketch-diff2-view>
- </div>
-
- <!-- Terminal View -->
- <div
- class="terminal-view ${this.viewMode === "terminal"
- ? "view-active flex flex-col"
- : "hidden"} w-full h-full"
- >
- <sketch-terminal></sketch-terminal>
- </div>
+ ${this.renderMainViews()}
</div>
</div>
- <!-- Chat input fixed at bottom -->
- <div
- id="chat-input"
- class="self-end w-full shadow-[0_-2px_10px_rgba(0,0,0,0.1)]"
- >
- <sketch-chat-input @send-chat="${this._sendChat}"></sketch-chat-input>
- </div>
+ ${this.renderChatInput()}
</div>
`;
}
-
- /**
- * Lifecycle callback when component is first connected to DOM
- */
- firstUpdated(): void {
- if (this.viewMode !== "chat") {
- return;
- }
-
- // Initial scroll to bottom when component is first rendered
- setTimeout(
- () => this.scrollTo({ top: this.scrollHeight, behavior: "smooth" }),
- 50,
- );
-
- // Setup stop button
- const stopButton = this.renderRoot?.querySelector(
- "#stopButton",
- ) as HTMLButtonElement;
- stopButton?.addEventListener("click", async () => {
- try {
- const response = await fetch("cancel", {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- },
- body: JSON.stringify({ reason: "User clicked stop button" }),
- });
- if (!response.ok) {
- console.error("Failed to cancel:", await response.text());
- }
- } catch (error) {
- console.error("Error cancelling operation:", error);
- }
- });
-
- // Setup end button
- const endButton = this.renderRoot?.querySelector(
- "#endButton",
- ) as HTMLButtonElement;
- // We're already using the @click binding in the HTML, so manual event listener not needed here
-
- // Process any existing messages to find commit information
- if (this.messages && this.messages.length > 0) {
- // Update last commit info via container status component
- if (this.containerStatusElement) {
- this.containerStatusElement.updateLastCommitInfo(this.messages);
- }
- }
-
- // Set up chat input height observer for todo panel
- this.setupChatInputObserver();
- }
}
declare global {