feat: add terminal-preview linking functionality

frontend/app/view/preview/preview.tsx

@@ -44,6 +44,8 @@ import { createRef, memo, useCallback, useEffect, useMemo, useState } from "reac
 import { CSVView } from "./csvview";
 import { DirectoryPreview } from "./directorypreview";
 import "./preview.scss";
+import { useTerminalPreviewSync } from "./sync";
+import { toggleTerminalPreviewLink } from "./sync";
 
 const MaxFileSize = 1024 * 1024 * 10; // 10MB
 const MaxCSVSize = 1024 * 1024 * 1; // 1MB
@@ -172,6 +174,7 @@ export class PreviewModel implements ViewModel {
     refreshCallback: () => void;
     directoryKeyDownHandler: (waveEvent: WaveKeyboardEvent) => boolean;
     codeEditKeyDownHandler: (waveEvent: WaveKeyboardEvent) => boolean;
+    isUpdatingFromTerminal: boolean;
 
     constructor(blockId: string, nodeModel: BlockNodeModel) {
         this.viewType = "preview";
@@ -450,6 +453,7 @@ export class PreviewModel implements ViewModel {
         });
 
         this.noPadding = atom(true);
+        this.isUpdatingFromTerminal = false;
     }
 
     markdownShowTocToggle() {
@@ -528,6 +532,26 @@ export class PreviewModel implements ViewModel {
         const blockOref = WOS.makeORef("block", this.blockId);
         await services.ObjectService.UpdateObjectMeta(blockOref, updateMeta);
 
+        const linkedTerminalId = blockMeta?.["preview:linked_terminal"];
+        if (linkedTerminalId && !this.isUpdatingFromTerminal) {
+            const fileInfo = await RpcApi.FileInfoCommand(TabRpcClient, {
+                info: {
+                    path: await this.formatRemoteUri(newPath, globalStore.get),
+                },
+            });
+            if (fileInfo?.isdir) {
+                const terminalBlockRef = WOS.makeORef("block", linkedTerminalId);
+                await services.ObjectService.UpdateObjectMeta(terminalBlockRef, {
+                    "cmd:cwd": fileInfo.dir
+                });
+
+                await RpcApi.ControllerInputCommand(TabRpcClient, {
+                    blockid: linkedTerminalId,
+                    inputdata64: btoa(`cd "${fileInfo.dir}"\n`),
+                });
+            }
+        }
+
         // Clear the saved file buffers
         globalStore.set(this.fileContentSaved, null);
         globalStore.set(this.newFileContent, null);
@@ -685,6 +709,29 @@ export class PreviewModel implements ViewModel {
                     await navigator.clipboard.writeText(fileInfo.name);
                 }),
         });
+
+        menuItems.push({ type: "separator" });
+        menuItems.push({
+            label: "Link to Terminal (from clipboard)",
+            click: () =>
+                fireAndForget(async () => {
+                    const terminalId = await navigator.clipboard.readText();
+                    if (!terminalId) return;
+                    await toggleTerminalPreviewLink(terminalId, this.blockId);
+                }),
+        });
+
+        menuItems.push({
+            label: "Unlink from Terminal",
+            click: () =>
+                fireAndForget(async () => {
+                    const linkedTerminalId = globalStore.get(this.blockAtom)?.meta?.["preview:linked_terminal"];
+                    if (linkedTerminalId) {
+                        await toggleTerminalPreviewLink(linkedTerminalId, this.blockId);
+                    }
+                }),
+        });
+
         const mimeType = jotaiLoadableValue(globalStore.get(this.fileMimeTypeLoadable), "");
         if (mimeType == "directory") {
             menuItems.push({
@@ -1024,6 +1071,8 @@ function PreviewView({
     model: PreviewModel;
 }) {
     const connStatus = useAtomValue(model.connStatus);
+    useTerminalPreviewSync(model);
+
     if (connStatus?.status != "connected") {
         return null;
     }

frontend/app/view/preview/sync.ts

@@ -0,0 +1,81 @@
+// Copyright 2025, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { atoms, globalStore } from "@/store/global";
+import * as WOS from "@/store/wos";
+import { PreviewModel } from "./preview";
+import * as React from "react";
+import { useAtomValue } from "jotai";
+import { ObjectService } from "@/store/services";
+
+declare module "@/store/wos" {
+    interface MetaType {
+        "preview:linked_terminal"?: string | null;
+        "cmd:cwd"?: string;
+    }
+}
+
+/**
+ * Synchronizes the Terminal's current working directory with the Preview's directory.
+ * This is used when the Terminal and Preview panes are linked.
+ */
+export function useTerminalPreviewSync(previewModel: PreviewModel) {
+    const blockData = useAtomValue(previewModel.blockAtom);
+    const linkedTerminalId = blockData?.meta?.["preview:linked_terminal"];
+
+    React.useEffect(() => {
+        if (!linkedTerminalId) {
+            return;
+        }
+
+        const terminalBlockAtom = WOS.getWaveObjectAtom(WOS.makeORef("block", linkedTerminalId));
+        const unsubscribe = globalStore.sub(terminalBlockAtom, () => {
+            const terminalBlock = globalStore.get(terminalBlockAtom);
+            const terminalCwd = terminalBlock?.meta?.["cmd:cwd"];
+            if (terminalCwd) {
+                previewModel.isUpdatingFromTerminal = true;
+                previewModel.goHistory(terminalCwd)
+                    .catch(console.error)
+                    .finally(() => {
+                        previewModel.isUpdatingFromTerminal = false;
+                    });
+            }
+        });
+
+        return () => {
+            unsubscribe();
+            previewModel.isUpdatingFromTerminal = false;
+        };
+    }, [linkedTerminalId, previewModel]);
+}
+
+/**
+ * Links or unlinks a Terminal and Preview pane for directory synchronization
+ */
+export async function toggleTerminalPreviewLink(terminalId: string, previewId: string) {
+    const previewBlockRef = WOS.makeORef("block", previewId);
+    const previewBlock = globalStore.get(WOS.getWaveObjectAtom(previewBlockRef));
+
+    if (previewBlock?.meta?.["preview:linked_terminal"] === terminalId) {
+        await ObjectService.UpdateObjectMeta(previewBlockRef, {
+            "preview:linked_terminal": null
+        });
+        return;
+    }
+
+    await ObjectService.UpdateObjectMeta(previewBlockRef, {
+        "preview:linked_terminal": terminalId
+    });
+
+    const terminalBlock = globalStore.get(WOS.getWaveObjectAtom(WOS.makeORef("block", terminalId)));
+    const terminalCwd = terminalBlock?.meta?.["cmd:cwd"];
+    if (terminalCwd) {
+        const previewModel = new PreviewModel(previewId, null);
+        previewModel.isUpdatingFromTerminal = true;
+        try {
+            await previewModel.goHistory(terminalCwd);
+        } finally {
+            previewModel.isUpdatingFromTerminal = false;
+        }
+    }
+}

frontend/types/gotypes.d.ts

@@ -495,6 +495,7 @@ declare global {
         "frame:title"?: string;
         "frame:icon"?: string;
         "frame:text"?: string;
+        "preview:linked_terminal"?: string;
         "cmd:*"?: boolean;
         cmd?: string;
         "cmd:interactive"?: boolean;

pkg/waveobj/metaconsts.go

@@ -37,6 +37,8 @@ const (
 	MetaKey_FrameIcon                        = "frame:icon"
 	MetaKey_FrameText                        = "frame:text"
 
+	MetaKey_PreviewLinkedTerminal            = "preview:linked_terminal"
+
 	MetaKey_CmdClear                         = "cmd:*"
 	MetaKey_Cmd                              = "cmd"
 	MetaKey_CmdInteractive                   = "cmd:interactive"

pkg/waveobj/wtypemeta.go

@@ -36,6 +36,10 @@ type MetaTSType struct {
 	FrameIcon              string `json:"frame:icon,omitempty"`
 	FrameText              string `json:"frame:text,omitempty"`
 
+	// Preview options
+	PreviewLinkedTerminal string `json:"preview:linked_terminal,omitempty"`
+
+	// Command options
 	CmdClear            bool     `json:"cmd:*,omitempty"`
 	Cmd                 string   `json:"cmd,omitempty"`
 	CmdInteractive      bool     `json:"cmd:interactive,omitempty"`