From 3499421f7a15e89156f406877213086b45b89730 Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Mon, 28 Apr 2025 03:30:34 +0000
Subject: [PATCH 1/6] feat: add Terminal component and styles

- Introduced a new Terminal component for embedding a terminal interface within the application.
- Added corresponding styles in Terminal.scss to ensure proper layout and appearance.
- Updated index.ts to export the Terminal component for accessibility within the module.
---
 src/frontend/src/pad/containers/Terminal.scss | 18 ++++++++
 src/frontend/src/pad/containers/Terminal.tsx  | 41 +++++++++++++++++++
 src/frontend/src/pad/index.ts                 |  2 +
 3 files changed, 61 insertions(+)
 create mode 100644 src/frontend/src/pad/containers/Terminal.scss
 create mode 100644 src/frontend/src/pad/containers/Terminal.tsx

diff --git a/src/frontend/src/pad/containers/Terminal.scss b/src/frontend/src/pad/containers/Terminal.scss
new file mode 100644
index 0000000..31a9462
--- /dev/null
+++ b/src/frontend/src/pad/containers/Terminal.scss
@@ -0,0 +1,18 @@
+.terminal-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.terminal-iframe {
+  flex: 1;
+  background-color: #1e1e1e;
+  height: 100%;
+  width: 100%;
+  border: 0px !important;
+  overflow: hidden;
+  border-bottom-left-radius: var(--embeddable-radius);
+  border-bottom-right-radius: var(--embeddable-radius);
+}
diff --git a/src/frontend/src/pad/containers/Terminal.tsx b/src/frontend/src/pad/containers/Terminal.tsx
new file mode 100644
index 0000000..3136b88
--- /dev/null
+++ b/src/frontend/src/pad/containers/Terminal.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { useWorkspaceState } from '../../api/hooks';
+import type { NonDeleted, ExcalidrawEmbeddableElement } from '@atyrode/excalidraw/element/types';
+import type { AppState } from '@atyrode/excalidraw/types';
+import './Terminal.scss';
+
+interface TerminalProps {
+  element: NonDeleted<ExcalidrawEmbeddableElement>;
+  appState: AppState;
+  excalidrawAPI?: any;
+}
+
+export const Terminal: React.FC<TerminalProps> = ({
+  element,
+  appState,
+  excalidrawAPI
+}) => {
+  const { data: workspaceState } = useWorkspaceState();
+  
+  const getTerminalUrl = () => {
+    if (!workspaceState) {
+      return 'https://terminal.example.dev';
+    }
+    
+    return `${workspaceState.base_url}/@${workspaceState.username}/${workspaceState.workspace_id}.${workspaceState.agent}/terminal`;
+  };
+
+  const terminalUrl = getTerminalUrl();
+
+  return (
+    <div className="terminal-container">
+      <iframe 
+        className="terminal-iframe" 
+        src={terminalUrl} 
+        title="Terminal"
+      />
+    </div>
+  );
+};
+
+export default Terminal;
diff --git a/src/frontend/src/pad/index.ts b/src/frontend/src/pad/index.ts
index e8df624..1edf88a 100644
--- a/src/frontend/src/pad/index.ts
+++ b/src/frontend/src/pad/index.ts
@@ -2,6 +2,7 @@
 export * from './controls/ControlButton';
 export * from './controls/StateIndicator';
 export * from './containers/Dashboard';
+export * from './containers/Terminal';
 export * from './buttons';
 export * from './editors';
 
@@ -9,3 +10,4 @@ export * from './editors';
 export { default as ControlButton } from './controls/ControlButton';
 export { default as StateIndicator } from './controls/StateIndicator';
 export { default as Dashboard } from './containers/Dashboard';
+export { default as Terminal } from './containers/Terminal';

From c8ea467c1f1d4495c820bf45a6e8d1d5dbd74c2a Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Mon, 28 Apr 2025 03:30:42 +0000
Subject: [PATCH 2/6] feat: integrate Terminal component into
 CustomEmbeddableRenderer

- Updated renderCustomEmbeddable function to include support for the new Terminal component.
- Added case handling for 'terminal' to render the Terminal interface when the corresponding link is detected.
- Enhanced user experience by providing additional embedding options within the application.
---
 src/frontend/src/CustomEmbeddableRenderer.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/frontend/src/CustomEmbeddableRenderer.tsx b/src/frontend/src/CustomEmbeddableRenderer.tsx
index 0fcb1c4..20792d7 100644
--- a/src/frontend/src/CustomEmbeddableRenderer.tsx
+++ b/src/frontend/src/CustomEmbeddableRenderer.tsx
@@ -9,6 +9,7 @@ import {
   ControlButton,
   HtmlEditor,
   Editor,
+  Terminal,
 } from './pad';
 import { ActionButton } from './pad/buttons';
 import "./CustomEmbeddableRenderer.scss";
@@ -20,6 +21,7 @@ export const renderCustomEmbeddable = (
 ) => {
 
   if (element.link && element.link.startsWith('!')) {
+
     let path = element.link.split('!')[1];
     let content;
     let title;
@@ -28,10 +30,15 @@ export const renderCustomEmbeddable = (
       case 'html':
         content = <HtmlEditor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
         title = "HTML Editor";
+        break;
       case 'editor':
         content = <Editor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
         title = "Code Editor";
         break;
+      case 'terminal':
+        content = <Terminal element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        title = "Terminal";
+        break;
       case 'state':
         content = <StateIndicator />;
         title = "State Indicator";

From 1e8760eca234594cd367865b9ae4271393881fce Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Mon, 28 Apr 2025 03:30:47 +0000
Subject: [PATCH 3/6] feat: add Terminal option to Main Menu

- Integrated a new Terminal item in the Main Menu for user access.
- Implemented handleTerminalClick function to create and place a terminal element in the canvas.
- Enhanced user experience by providing direct access to terminal functionality within the application.
---
 src/frontend/src/ui/MainMenu.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/ui/MainMenu.tsx b/src/frontend/src/ui/MainMenu.tsx
index ba6f1b3..8b34778 100644
--- a/src/frontend/src/ui/MainMenu.tsx
+++ b/src/frontend/src/ui/MainMenu.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import type { ExcalidrawImperativeAPI } from '@atyrode/excalidraw/types';
 import type { MainMenu as MainMenuType } from '@atyrode/excalidraw';
 
-import { LogOut, SquarePlus, LayoutDashboard, SquareCode, Eye, Coffee, Grid2x2, User, Text, ArchiveRestore, Settings } from 'lucide-react';
+import { LogOut, SquarePlus, LayoutDashboard, SquareCode, Eye, Coffee, Grid2x2, User, Text, ArchiveRestore, Settings, Terminal } from 'lucide-react';
 import { capture } from '../utils/posthog';
 import { ExcalidrawElementFactory, PlacementMode } from '../lib/ExcalidrawElementFactory';
 import { useUserProfile } from "../api/hooks";
@@ -100,6 +100,22 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
       scrollToView: true
     });
   };
+  
+  const handleTerminalClick = () => {
+    if (!excalidrawAPI) return;
+    
+    const terminalElement = ExcalidrawElementFactory.createEmbeddableElement({
+      link: "!terminal",
+      width: 800,
+      height: 500
+    });
+    
+    ExcalidrawElementFactory.placeInScene(terminalElement, excalidrawAPI, {
+      mode: PlacementMode.NEAR_VIEWPORT_CENTER,
+      bufferPercentage: 10,
+      scrollToView: true
+    });
+  };
 
   const handleCanvasBackupsClick = () => {
     setShowBackupsModal(true);
@@ -176,6 +192,12 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
         >
           Code Editor
         </MainMenu.Item>
+        <MainMenu.Item
+          icon={<Terminal />}
+          onClick={handleTerminalClick}
+        >
+          Terminal
+        </MainMenu.Item>
         <MainMenu.Item
           icon={<LayoutDashboard />}
           onClick={handleDashboardButtonClick}

From 7e431f3626d885846eca600330830bc0c98e213d Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Mon, 28 Apr 2025 03:49:28 +0000
Subject: [PATCH 4/6] feat: enhance Terminal component with connection
 management

- Added state management for terminal ID and connection info within the Terminal component.
- Implemented UUID generation for unique terminal identification.
- Updated customData handling to store and retrieve terminal connection information.
- Improved terminal URL generation logic to include reconnect parameters based on terminal ID.
- Enhanced initialization logic to ensure proper setup of terminal connection data.
---
 src/frontend/src/pad/containers/Terminal.tsx | 151 ++++++++++++++++++-
 1 file changed, 148 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/pad/containers/Terminal.tsx b/src/frontend/src/pad/containers/Terminal.tsx
index 3136b88..768e09c 100644
--- a/src/frontend/src/pad/containers/Terminal.tsx
+++ b/src/frontend/src/pad/containers/Terminal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useWorkspaceState } from '../../api/hooks';
 import type { NonDeleted, ExcalidrawEmbeddableElement } from '@atyrode/excalidraw/element/types';
 import type { AppState } from '@atyrode/excalidraw/types';
@@ -10,19 +10,164 @@ interface TerminalProps {
   excalidrawAPI?: any;
 }
 
+// Interface for terminal connection info stored in customData
+interface TerminalConnectionInfo {
+  terminalId: string;
+  baseUrl?: string;
+  username?: string;
+  workspaceId?: string;
+  agent?: string;
+}
+
 export const Terminal: React.FC<TerminalProps> = ({
   element,
   appState,
   excalidrawAPI
 }) => {
   const { data: workspaceState } = useWorkspaceState();
+  const [terminalId, setTerminalId] = useState<string | null>(null);
+  const elementIdRef = useRef(element?.id);
+  const isInitializedRef = useRef(false);
+
+  // Generate a UUID for terminal ID
+  const generateUUID = () => {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      const r = Math.random() * 16 | 0;
+      const v = c === 'x' ? r : (r & 0x3 | 0x8);
+      return v.toString(16);
+    });
+  };
+
+  // Save terminal connection info to element's customData
+  const saveConnectionInfoToCustomData = useCallback(() => {
+    if (!element || !excalidrawAPI || !workspaceState || !terminalId) return;
+    
+    try {
+      // Get all elements from the scene
+      const elements = excalidrawAPI.getSceneElements();
+      
+      // Find and update the element
+      const updatedElements = elements.map(el => {
+        if (el.id === element.id) {
+          // Create a new customData object with the terminal connection info
+          const connectionInfo: TerminalConnectionInfo = {
+            terminalId,
+            baseUrl: workspaceState.base_url,
+            username: workspaceState.username,
+            workspaceId: workspaceState.workspace_id,
+            agent: workspaceState.agent
+          };
+          
+          const customData = {
+            ...(el.customData || {}),
+            terminalConnectionInfo: connectionInfo
+          };
+          
+          return { ...el, customData };
+        }
+        return el;
+      });
+      
+      // Update the scene with the modified elements
+      excalidrawAPI.updateScene({
+        elements: updatedElements
+      });
+    } catch (error) {
+      console.error('Error saving terminal connection info:', error);
+    }
+  }, [element, excalidrawAPI, workspaceState, terminalId]);
+
+  // Generate a terminal ID if one doesn't exist
+  useEffect(() => {
+    if (terminalId) return;
+    
+    // Generate a new terminal ID
+    const newTerminalId = generateUUID();
+    setTerminalId(newTerminalId);
+  }, [terminalId]);
+  
+  // Initialize terminal connection info
+  useEffect(() => {
+    if (!element || !workspaceState || !terminalId || isInitializedRef.current) return;
+    
+    // Check if element ID has changed (indicating a new element)
+    if (element.id !== elementIdRef.current) {
+      elementIdRef.current = element.id;
+    }
+    
+    // Check if element already has terminal connection info
+    if (element.customData?.terminalConnectionInfo) {
+      const connectionInfo = element.customData.terminalConnectionInfo as TerminalConnectionInfo;
+      setTerminalId(connectionInfo.terminalId);
+    } else if (excalidrawAPI) {
+      // Save the terminal ID to customData
+      saveConnectionInfoToCustomData();
+    }
+    
+    isInitializedRef.current = true;
+  }, [element, workspaceState, terminalId, saveConnectionInfoToCustomData, excalidrawAPI]);
+
+  // Update terminal connection info when element changes
+  useEffect(() => {
+    if (!element || !workspaceState) return;
+    
+    // Check if element ID has changed (indicating a new element)
+    if (element.id !== elementIdRef.current) {
+      elementIdRef.current = element.id;
+      isInitializedRef.current = false;
+      
+      // Check if element already has terminal connection info
+      if (element.customData?.terminalConnectionInfo) {
+        const connectionInfo = element.customData.terminalConnectionInfo as TerminalConnectionInfo;
+        setTerminalId(connectionInfo.terminalId);
+      } else if (terminalId && excalidrawAPI) {
+        // Save the existing terminal ID to customData
+        saveConnectionInfoToCustomData();
+      } else if (!terminalId) {
+        // Generate a new terminal ID if one doesn't exist
+        const newTerminalId = generateUUID();
+        setTerminalId(newTerminalId);
+        
+        // Save the new terminal ID to customData if excalidrawAPI is available
+        if (excalidrawAPI) {
+          setTimeout(() => {
+            saveConnectionInfoToCustomData();
+          }, 100);
+        }
+      }
+      
+      isInitializedRef.current = true;
+    } else if (!isInitializedRef.current && terminalId && excalidrawAPI && !element.customData?.terminalConnectionInfo) {
+      // Handle the case where the element ID hasn't changed but we need to save the terminal ID
+      saveConnectionInfoToCustomData();
+      isInitializedRef.current = true;
+    }
+  }, [element, workspaceState, excalidrawAPI, terminalId, saveConnectionInfoToCustomData]);
   
+  // Effect to handle excalidrawAPI becoming available after component mount
+  useEffect(() => {
+    if (!excalidrawAPI || !element || !workspaceState || !terminalId) return;
+    
+    // Check if element already has terminal connection info
+    if (element.customData?.terminalConnectionInfo) return;
+    
+    // Save the terminal ID to customData
+    saveConnectionInfoToCustomData();
+  }, [excalidrawAPI, element, workspaceState, terminalId, saveConnectionInfoToCustomData]);
+
   const getTerminalUrl = () => {
     if (!workspaceState) {
-      return 'https://terminal.example.dev';
+      return '';
+    }
+    
+    const baseUrl = `${workspaceState.base_url}/@${workspaceState.username}/${workspaceState.workspace_id}.${workspaceState.agent}/terminal`;
+    
+    // Add reconnect parameter if terminal ID exists
+    if (terminalId) {
+      return `${baseUrl}?reconnect=${terminalId}`;
     }
     
-    return `${workspaceState.base_url}/@${workspaceState.username}/${workspaceState.workspace_id}.${workspaceState.agent}/terminal`;
+    return baseUrl;
   };
 
   const terminalUrl = getTerminalUrl();

From 477928d9ca506b52b26ceac6ee041e7a63f97fb6 Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Mon, 28 Apr 2025 03:57:06 +0000
Subject: [PATCH 5/6] feat: add showClickableHint option to customData in
 default_canvas.json

---
 src/backend/default_canvas.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/backend/default_canvas.json b/src/backend/default_canvas.json
index 3ecb6dc..e902312 100644
--- a/src/backend/default_canvas.json
+++ b/src/backend/default_canvas.json
@@ -2176,7 +2176,8 @@
             "boundElements": [],
             "backgroundColor": "#e9ecef",
             "customData": {
-                "showHyperlinkIcon": false
+                "showHyperlinkIcon": false,
+                "showClickableHint": false
             }
         }
     ]

From 918f702d7b6e369ddbabd7dc2f2ab2ee1bb6ba18 Mon Sep 17 00:00:00 2001
From: Alex TYRODE <alex@tyrode.dev>
Date: Mon, 28 Apr 2025 04:01:33 +0000
Subject: [PATCH 6/6] refactor: streamline ActionButton URL handling

- Renamed getUrl to getCodeUrl for clarity.
- Simplified URL generation logic for terminal and code targets.
- Consolidated embedding logic by directly using ExcalidrawElementFactory for creating embeddable elements.
- Improved error handling for URL determination in both embedding and opening actions.
- Enhanced debug logging for better traceability of actions.
---
 src/frontend/src/pad/buttons/ActionButton.tsx | 87 ++++++++++---------
 1 file changed, 45 insertions(+), 42 deletions(-)

diff --git a/src/frontend/src/pad/buttons/ActionButton.tsx b/src/frontend/src/pad/buttons/ActionButton.tsx
index 8d4f104..91118f5 100644
--- a/src/frontend/src/pad/buttons/ActionButton.tsx
+++ b/src/frontend/src/pad/buttons/ActionButton.tsx
@@ -280,35 +280,16 @@ const ActionButton: React.FC<ActionButtonProps> = ({
   };
   
   
-  const getUrl = () => {
+  const getCodeUrl = () => {
     if (!workspaceState) {
-      if (selectedTarget === 'terminal') {
-        return 'https://terminal.example.dev';
-      } else {
-        return 'https://vscode.example.dev';
-      }
+      return '';
     }
     
-    if (selectedTarget === 'terminal') {
-      return `${workspaceState.base_url}/@${workspaceState.username}/${workspaceState.workspace_id}.${workspaceState.agent}/terminal`;
-    } else {
-      return `${workspaceState.base_url}/@${workspaceState.username}/${workspaceState.workspace_id}.${workspaceState.agent}/apps/code-server`;
-    }
+    return `${workspaceState.base_url}/@${workspaceState.username}/${workspaceState.workspace_id}.${workspaceState.agent}/apps/code-server`;
   };
   
   // Placement logic has been moved to ExcalidrawElementFactory.placeInScene
 
-  const createEmbeddableElement = (link: string, buttonElement: HTMLElement | null = null) => {
-    return ExcalidrawElementFactory.createEmbeddableElement({
-      link,
-      width: 600,
-      height: 400,
-      strokeColor: "#1e1e1e",
-      backgroundColor: "#ffffff",
-      roughness: 1
-    });
-  };
-
   
   const executeAction = () => {
     capture('action_button_clicked', {
@@ -324,36 +305,60 @@ const ActionButton: React.FC<ActionButtonProps> = ({
         return;
       }
       
-      const baseUrl = getUrl();
+      // Determine the link to use
+      let link: string;
       
-      if (!baseUrl) {
-        console.error('Could not determine URL for embedding');
-        return;
+      if (selectedTarget === 'terminal') {
+        // For terminal, use the !terminal embed link
+        link = '!terminal';
+      } else {
+        // For code, use the code URL
+        const codeUrl = getCodeUrl();
+        if (!codeUrl) {
+          console.error('Could not determine URL for embedding');
+          return;
+        }
+        link = codeUrl;
       }
       
-      // Create element with our factory
-      const buttonElement = wrapperRef.current;
-      const newElement = createEmbeddableElement(baseUrl, buttonElement);
+      // Create element directly with ExcalidrawElementFactory
+      const newElement = ExcalidrawElementFactory.createEmbeddableElement({
+        link,
+        width: 600,
+        height: 400,
+      });
       
-      // Place the element in the scene using our new placement logic
+      // Place the element in the scene
       ExcalidrawElementFactory.placeInScene(newElement, excalidrawAPI, {
         mode: PlacementMode.NEAR_VIEWPORT_CENTER,
         bufferPercentage: 10,
         scrollToView: true
       });
       
-      console.debug(`[pad.ws] Embedded ${selectedTarget} at URL: ${baseUrl}`);
+      console.debug(`[pad.ws] Embedded ${selectedTarget}`);
       
     } else if (selectedAction === 'open-tab') {
-      const baseUrl = getUrl();
-      if (!baseUrl) {
-        console.error('Could not determine URL for opening in tab');
-        return;
+      if (selectedTarget === 'terminal') {
+        // For terminal, open the terminal URL in a new tab
+        if (!workspaceState) {
+          console.error('Workspace state not available for opening terminal in tab');
+          return;
+        }
+        
+        const terminalUrl = `${workspaceState.base_url}/@${workspaceState.username}/${workspaceState.workspace_id}.${workspaceState.agent}/terminal`;
+        console.debug(`[pad.ws] Opening terminal in new tab: ${terminalUrl}`);
+        window.open(terminalUrl, '_blank');
+      } else {
+        // For code, open the code URL in a new tab
+        const codeUrl = getCodeUrl();
+        if (!codeUrl) {
+          console.error('Could not determine URL for opening in tab');
+          return;
+        }
+        
+        console.debug(`[pad.ws] Opening ${selectedTarget} in new tab: ${codeUrl}`);
+        window.open(codeUrl, '_blank');
       }
-      
-      console.debug(`[pad.ws] Opening ${selectedTarget} in new tab from ${baseUrl}`);
-      window.open(baseUrl, '_blank');
-      
     } else if (selectedAction === 'magnet') {
       if (!workspaceState) {
         console.error('Workspace state not available for magnet link');
@@ -365,14 +370,12 @@ const ActionButton: React.FC<ActionButtonProps> = ({
       const url = workspaceState.base_url;
       const agent = workspaceState.agent;
       
-      let magnetLink = '';
-      
       if (selectedTarget === 'terminal') {
         console.error('Terminal magnet links are not supported');
         return;
       } else if (selectedTarget === 'code') {
         const prefix = selectedCodeVariant === 'cursor' ? 'cursor' : 'vscode';
-        magnetLink = `${prefix}://coder.coder-remote/open?owner=${owner}&workspace=${workspace}&url=${url}&token=&openRecent=true&agent=${agent}`;
+        const magnetLink = `${prefix}://coder.coder-remote/open?owner=${owner}&workspace=${workspace}&url=${url}&token=&openRecent=true&agent=${agent}`;
         console.debug(`[pad.ws] Opening ${selectedCodeVariant} desktop app with magnet link: ${magnetLink}`);
         window.open(magnetLink, '_blank');
       }