@cryptiklemur/lattice 1.2.0 → 1.4.0

package/client/src/components/workspace/SplitPane.tsx

@@ -0,0 +1,81 @@
+import React, { useRef, useCallback, useEffect, useState } from "react";
+
+interface SplitPaneProps {
+  direction: "horizontal" | "vertical";
+  ratio: number;
+  onRatioChange: (ratio: number) => void;
+  children: [React.ReactNode, React.ReactNode];
+}
+
+export function SplitPane({ direction, ratio, onRatioChange, children }: SplitPaneProps) {
+  var containerRef = useRef<HTMLDivElement>(null);
+  var [isDragging, setIsDragging] = useState(false);
+
+  var handleMouseDown = useCallback(function (e: React.MouseEvent) {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  useEffect(function () {
+    if (!isDragging) return;
+
+    function handleMouseMove(e: MouseEvent) {
+      var container = containerRef.current;
+      if (!container) return;
+      var rect = container.getBoundingClientRect();
+      var newRatio: number;
+      if (direction === "horizontal") {
+        newRatio = (e.clientX - rect.left) / rect.width;
+      } else {
+        newRatio = (e.clientY - rect.top) / rect.height;
+      }
+      onRatioChange(newRatio);
+    }
+
+    function handleMouseUp() {
+      setIsDragging(false);
+    }
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return function () {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, direction, onRatioChange]);
+
+  var isHorizontal = direction === "horizontal";
+  var firstSize = (ratio * 100) + "%";
+  var secondSize = ((1 - ratio) * 100) + "%";
+
+  return (
+    <div
+      ref={containerRef}
+      className={"flex h-full w-full overflow-hidden " + (isHorizontal ? "flex-row" : "flex-col")}
+      style={isDragging ? { userSelect: "none" } : undefined}
+    >
+      <div
+        className="overflow-hidden"
+        style={isHorizontal ? { width: firstSize, height: "100%" } : { height: firstSize, width: "100%" }}
+      >
+        {children[0]}
+      </div>
+      <div
+        onMouseDown={handleMouseDown}
+        className={
+          "flex-shrink-0 bg-base-300 transition-colors " +
+          (isHorizontal
+            ? "w-1 cursor-col-resize hover:bg-primary/30"
+            : "h-1 cursor-row-resize hover:bg-primary/30") +
+          (isDragging ? " bg-primary/30" : "")
+        }
+      />
+      <div
+        className="overflow-hidden"
+        style={isHorizontal ? { width: secondSize, height: "100%" } : { height: secondSize, width: "100%" }}
+      >
+        {children[1]}
+      </div>
+    </div>
+  );
+}

package/client/src/components/workspace/TabBar.tsx

@@ -0,0 +1,185 @@
+import { useState, useEffect, useRef } from "react";
+import { X, Columns2, Rows2, MessageSquare, FolderOpen, TerminalSquare, StickyNote, Calendar } from "lucide-react";
+import { useWorkspace } from "../../hooks/useWorkspace";
+import type { Tab, TabType } from "../../stores/workspace";
+
+interface TabBarProps {
+  paneId?: string;
+  isActivePane?: boolean;
+}
+
+interface ContextMenuState {
+  tabId: string;
+  x: number;
+  y: number;
+}
+
+var TAB_ICONS: Record<TabType, typeof MessageSquare> = {
+  chat: MessageSquare,
+  files: FolderOpen,
+  terminal: TerminalSquare,
+  notes: StickyNote,
+  tasks: Calendar,
+};
+
+export function TabBar({ paneId, isActivePane }: TabBarProps) {
+  var workspace = useWorkspace();
+  var [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  var menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(function () {
+    if (!contextMenu) return;
+
+    function handleClickOutside(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setContextMenu(null);
+      }
+    }
+
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        setContextMenu(null);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [contextMenu]);
+
+  var paneTabs: Tab[];
+  var activeTabId: string;
+
+  if (paneId) {
+    var pane = workspace.panes.find(function (p) { return p.id === paneId; });
+    if (!pane) return null;
+    paneTabs = pane.tabIds.map(function (id) {
+      return workspace.tabs.find(function (t) { return t.id === id; });
+    }).filter(function (t): t is Tab { return t != null; });
+    activeTabId = pane.activeTabId;
+  } else {
+    paneTabs = workspace.tabs;
+    activeTabId = workspace.activeTabId;
+  }
+
+  var shouldShow = paneTabs.length > 1 || (paneTabs[0]?.closeable ?? false);
+
+  function handleTabClick(tabId: string) {
+    if (paneId) {
+      workspace.setPaneActiveTab(paneId, tabId);
+    } else {
+      workspace.setActiveTab(tabId);
+    }
+  }
+
+  function handleCloseTab(tabId: string) {
+    workspace.closeTab(tabId);
+  }
+
+  function handleContextMenu(e: React.MouseEvent, tabId: string) {
+    e.preventDefault();
+    if (workspace.panes.length >= 2) return;
+    var contextPane = paneId
+      ? workspace.panes.find(function (p) { return p.id === paneId; })
+      : workspace.panes[0];
+    if (!contextPane || contextPane.tabIds.length < 2) return;
+    var menuWidth = 160;
+    var menuHeight = 80;
+    var x = e.clientX;
+    var y = e.clientY;
+    if (x + menuWidth > window.innerWidth) x = window.innerWidth - menuWidth - 8;
+    if (y + menuHeight > window.innerHeight) y = window.innerHeight - menuHeight - 8;
+    setContextMenu({ tabId, x, y });
+  }
+
+  function handleSplit(direction: "horizontal" | "vertical") {
+    if (!contextMenu) return;
+    workspace.splitPane(contextMenu.tabId, direction);
+    setContextMenu(null);
+  }
+
+  return (
+    <>
+      <div
+        className={
+          "flex items-stretch bg-base-200 overflow-x-auto flex-shrink-0 order-1 sm:order-none" +
+          (shouldShow ? " border-b border-t sm:border-t-0 border-base-content/15" : "") +
+          (isActivePane && shouldShow ? " sm:border-t-2 sm:border-t-primary/40" : "")
+        }
+        style={{
+          maxHeight: shouldShow ? "3rem" : "0",
+          opacity: shouldShow ? 1 : 0,
+          overflow: shouldShow ? undefined : "hidden",
+          transition: "max-height 0.2s ease, opacity 0.15s ease",
+        }}
+      >
+        {paneTabs.map(function (tab) {
+          var isActive = tab.id === activeTabId;
+          var Icon = TAB_ICONS[tab.type] || MessageSquare;
+          return (
+            <div
+              key={tab.id}
+              role="tab"
+              tabIndex={0}
+              aria-selected={isActive}
+              onClick={function () { handleTabClick(tab.id); }}
+              onKeyDown={function (e) {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleTabClick(tab.id);
+                }
+              }}
+              onContextMenu={function (e) { handleContextMenu(e, tab.id); }}
+              className={
+                "flex items-center gap-2 px-4 py-2.5 text-[13px] font-mono border-r border-base-content/10 transition-colors whitespace-nowrap flex-shrink-0 outline-none cursor-pointer select-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-inset " +
+                (isActive
+                  ? "bg-base-100 text-base-content border-b-2 border-b-primary"
+                  : "text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30")
+              }
+            >
+              <Icon size={14} className={isActive ? "text-primary" : ""} />
+              <span>{tab.label}</span>
+              {tab.closeable && (
+                <button
+                  aria-label={"Close " + tab.label + " tab"}
+                  onClick={function (e) {
+                    e.stopPropagation();
+                    handleCloseTab(tab.id);
+                  }}
+                  className="ml-0.5 p-1 rounded hover:bg-base-content/15 text-base-content/30 hover:text-base-content/60 outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+                >
+                  <X size={12} />
+                </button>
+              )}
+            </div>
+          );
+        })}
+      </div>
+      {contextMenu && (
+        <div
+          ref={menuRef}
+          className="fixed z-50 bg-base-300 border border-base-content/15 rounded-lg shadow-lg py-1 min-w-[160px]"
+          style={{ left: contextMenu.x, top: contextMenu.y }}
+        >
+          <button
+            onClick={function () { handleSplit("horizontal"); }}
+            className="flex items-center gap-2 w-full px-3 py-1.5 text-[12px] font-mono text-base-content/80 hover:bg-base-content/15 hover:text-base-content transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+          >
+            <Columns2 size={14} />
+            Split Right
+          </button>
+          <button
+            onClick={function () { handleSplit("vertical"); }}
+            className="flex items-center gap-2 w-full px-3 py-1.5 text-[12px] font-mono text-base-content/80 hover:bg-base-content/15 hover:text-base-content transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
+          >
+            <Rows2 size={14} />
+            Split Down
+          </button>
+        </div>
+      )}
+    </>
+  );
+}

package/client/src/components/workspace/TaskCard.tsx

@@ -0,0 +1,158 @@
+import { useState } from "react";
+import { ChevronDown, ChevronRight, Pencil, Trash2 } from "lucide-react";
+import cronstrue from "cronstrue";
+import type { ScheduledTask } from "@lattice/shared";
+
+interface TaskCardProps {
+  task: ScheduledTask;
+  onToggle: (taskId: string) => void;
+  onEdit: (task: ScheduledTask) => void;
+  onDelete: (taskId: string) => void;
+  disabled?: boolean;
+}
+
+function formatTime(ms: number | null): string {
+  if (!ms) return "—";
+  return new Date(ms).toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function humanCron(expr: string): string {
+  try {
+    return cronstrue.toString(expr, { use24HourTimeFormat: true });
+  } catch {
+    return expr;
+  }
+}
+
+export function TaskCard(props: TaskCardProps) {
+  var { task, onToggle, onEdit, onDelete, disabled } = props;
+  var [expanded, setExpanded] = useState(false);
+  var [confirming, setConfirming] = useState(false);
+
+  function handleToggleExpand(e: React.MouseEvent) {
+    e.stopPropagation();
+    setExpanded(function (prev) { return !prev; });
+  }
+
+  function handleDelete(e: React.MouseEvent) {
+    e.stopPropagation();
+    if (confirming) {
+      onDelete(task.id);
+    } else {
+      setConfirming(true);
+    }
+  }
+
+  function handleCancelDelete(e: React.MouseEvent) {
+    e.stopPropagation();
+    setConfirming(false);
+  }
+
+  function handleEdit(e: React.MouseEvent) {
+    e.stopPropagation();
+    onEdit(task);
+  }
+
+  function handleToggle(e: React.MouseEvent) {
+    e.stopPropagation();
+    onToggle(task.id);
+  }
+
+  return (
+    <div className="bg-base-200 border border-base-content/15 rounded-lg overflow-hidden">
+      <div
+        tabIndex={0}
+        role="button"
+        className="flex items-center gap-2.5 px-3 py-2.5 cursor-pointer hover:bg-base-300/50 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200"
+        onClick={handleToggleExpand}
+        onKeyDown={function (e) {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setExpanded(function (prev) { return !prev; });
+          }
+        }}
+        aria-expanded={expanded}
+      >
+        <span className="text-base-content/40 flex-shrink-0">
+          {expanded ? <ChevronDown className="!size-3.5" /> : <ChevronRight className="!size-3.5" />}
+        </span>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className={`text-[13px] font-medium truncate ${task.enabled ? "text-base-content" : "text-base-content/40"}`}>
+              {task.name}
+            </span>
+          </div>
+          <div className="text-[11px] text-base-content/40 truncate mt-0.5">
+            {humanCron(task.cron)}
+          </div>
+        </div>
+        <label className="swap flex-shrink-0" onClick={disabled ? undefined : handleToggle}>
+          <input
+            type="checkbox"
+            className="toggle toggle-primary toggle-xs"
+            checked={task.enabled}
+            disabled={disabled}
+            onChange={function () {}}
+          />
+        </label>
+      </div>
+
+      {expanded && (
+        <div className="px-3 pb-3 border-t border-base-content/15 bg-base-100/50">
+          <div className="pt-2.5 space-y-2">
+            <div>
+              <span className="text-[11px] text-base-content/40 uppercase tracking-wider">Prompt</span>
+              <p className="text-[12px] text-base-content/80 mt-0.5 whitespace-pre-wrap break-words leading-relaxed">
+                {task.prompt}
+              </p>
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <div>
+                <span className="text-[11px] text-base-content/40 uppercase tracking-wider">Last Run</span>
+                <p className="text-[12px] text-base-content/70 mt-0.5">{formatTime(task.lastRunAt)}</p>
+              </div>
+              <div>
+                <span className="text-[11px] text-base-content/40 uppercase tracking-wider">Next Run</span>
+                <p className="text-[12px] text-base-content/70 mt-0.5">{formatTime(task.nextRunAt)}</p>
+              </div>
+            </div>
+            {!disabled && (
+              <div className="flex items-center gap-1.5 pt-1">
+                <button
+                  onClick={handleEdit}
+                  className="btn btn-ghost btn-xs border border-base-content/15 text-base-content/70 gap-1 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200"
+                >
+                  <Pencil className="!size-3" />
+                  Edit
+                </button>
+                {confirming ? (
+                  <div className="flex gap-1.5">
+                    <button onClick={handleDelete} className="btn btn-error btn-xs outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200">
+                      Confirm Delete
+                    </button>
+                    <button onClick={handleCancelDelete} className="btn btn-ghost btn-xs border border-base-content/15 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200">
+                      Cancel
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    onClick={handleDelete}
+                    className="btn btn-ghost btn-xs border border-base-content/15 text-base-content/50 outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1 focus-visible:ring-offset-base-200"
+                    aria-label="Delete task"
+                  >
+                    <Trash2 className="!size-3" />
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/client/src/components/workspace/TaskEditModal.tsx

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import { X } from "lucide-react";
+import cronstrue from "cronstrue";
+import type { ScheduledTask } from "@lattice/shared";
+
+interface TaskEditModalProps {
+  task: ScheduledTask | null;
+  projectSlug: string;
+  onSave: (data: { name: string; prompt: string; cron: string }) => void;
+  onClose: () => void;
+}
+
+function getCronPreview(expr: string): string {
+  if (!expr.trim()) return "";
+  try {
+    return cronstrue.toString(expr.trim(), { use24HourTimeFormat: true });
+  } catch {
+    return "Invalid cron expression";
+  }
+}
+
+export function TaskEditModal(props: TaskEditModalProps) {
+  var { task, onSave, onClose } = props;
+  var [name, setName] = useState(task ? task.name : "");
+  var [prompt, setPrompt] = useState(task ? task.prompt : "");
+  var [cron, setCron] = useState(task ? task.cron : "0 9 * * 1-5");
+
+  var cronPreview = getCronPreview(cron);
+  var cronValid = cronPreview !== "Invalid cron expression" && cronPreview !== "";
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim() || !prompt.trim() || !cronValid) return;
+    onSave({ name: name.trim(), prompt: prompt.trim(), cron: cron.trim() });
+  }
+
+  function handleBackdrop(e: React.MouseEvent<HTMLDivElement>) {
+    if (e.target === e.currentTarget) onClose();
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      onClick={handleBackdrop}
+    >
+      <div className="bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-md mx-4">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15">
+          <span className="text-[14px] font-semibold text-base-content">
+            {task ? "Edit Task" : "New Scheduled Task"}
+          </span>
+          <button
+            onClick={onClose}
+            className="btn btn-ghost btn-xs btn-square text-base-content/50"
+          >
+            <X size={14} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-5 space-y-4">
+          <div className="space-y-1.5">
+            <label className="text-[12px] font-semibold text-base-content/40 uppercase tracking-wider">Name</label>
+            <input
+              type="text"
+              className="w-full h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+              placeholder="Daily standup summary"
+              value={name}
+              onChange={function (e) { setName(e.target.value); }}
+              autoFocus
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <label className="text-[12px] font-semibold text-base-content/40 uppercase tracking-wider">Prompt</label>
+            <textarea
+              className="w-full px-3 py-2.5 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] min-h-[96px] resize-y leading-relaxed focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+              placeholder="Summarize yesterday's work and create a plan for today..."
+              value={prompt}
+              onChange={function (e) { setPrompt(e.target.value); }}
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <label className="text-[12px] font-semibold text-base-content/40 uppercase tracking-wider">Cron Expression</label>
+            <input
+              type="text"
+              className={`w-full h-9 px-3 bg-base-300 border rounded-xl text-base-content text-[13px] font-mono focus:border-primary focus-visible:outline-none transition-colors duration-[120ms] ${cron.trim() && !cronValid ? "border-error" : "border-base-content/15"}`}
+              placeholder="0 9 * * 1-5"
+              value={cron}
+              onChange={function (e) { setCron(e.target.value); }}
+            />
+            {cron.trim() && (
+              <p className={`text-[11px] mt-1 ${cronValid ? "text-primary/80" : "text-error"}`}>
+                {cronPreview}
+              </p>
+            )}
+          </div>
+
+          <div className="flex gap-2 pt-1">
+            <button
+              type="submit"
+              className="btn btn-primary btn-sm flex-1"
+              disabled={!name.trim() || !prompt.trim() || !cronValid}
+            >
+              {task ? "Save Changes" : "Create Task"}
+            </button>
+            <button type="button" onClick={onClose} className="btn btn-ghost btn-sm border border-base-content/15">
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/client/src/components/{panels/Terminal.tsx → workspace/TerminalInstance.tsx}

@@ -1,10 +1,12 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { Terminal as XTerm } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
+import { SearchAddon } from "@xterm/addon-search";
 import "@xterm/xterm/css/xterm.css";
 import { useWebSocket } from "../../hooks/useWebSocket";
-import type { ServerMessage, TerminalCreatedMessage, TerminalOutputMessage } from "@lattice/shared";
+import { useSidebar } from "../../hooks/useSidebar";
+import type { ServerMessage, TerminalCreatedMessage, TerminalOutputMessage, TerminalExitedMessage } from "@lattice/shared";
 
 function getXtermTheme(): Record<string, string> {
   var root = document.documentElement;
@@ -39,13 +41,19 @@ function getXtermTheme(): Record<string, string> {
   };
 }
 
-export function Terminal() {
+interface TerminalInstanceProps {
+  instanceId: string;
+  visible: boolean;
+}
+
+export function TerminalInstance({ instanceId, visible }: TerminalInstanceProps) {
   var containerRef = useRef<HTMLDivElement | null>(null);
   var xtermRef = useRef<XTerm | null>(null);
   var fitAddonRef = useRef<FitAddon | null>(null);
+  var searchAddonRef = useRef<SearchAddon | null>(null);
   var termIdRef = useRef<string | null>(null);
+  var { activeProjectSlug } = useSidebar();
   var { send, subscribe, unsubscribe } = useWebSocket();
-  var [ready, setReady] = useState(false);
 
   useEffect(function() {
     if (!containerRef.current) {
@@ -61,20 +69,25 @@ export function Terminal() {
 
     var fitAddon = new FitAddon();
     var webLinksAddon = new WebLinksAddon();
+    var searchAddon = new SearchAddon();
+
     term.loadAddon(fitAddon);
     term.loadAddon(webLinksAddon);
+    term.loadAddon(searchAddon);
     term.open(containerRef.current);
     fitAddon.fit();
 
     xtermRef.current = term;
     fitAddonRef.current = fitAddon;
+    searchAddonRef.current = searchAddon;
 
-    send({ type: "terminal:create" });
+    var waitingForCreate = true;
 
     function onCreated(msg: ServerMessage) {
+      if (!waitingForCreate) return;
+      waitingForCreate = false;
       var created = msg as TerminalCreatedMessage;
       termIdRef.current = created.termId;
-      setReady(true);
     }
 
     function onOutput(msg: ServerMessage) {
@@ -84,8 +97,18 @@ export function Terminal() {
       }
     }
 
+    function onExited(msg: ServerMessage) {
+      var exited = msg as TerminalExitedMessage;
+      if (xtermRef.current && exited.termId === termIdRef.current) {
+        xtermRef.current.write("\r\n\x1b[31m[process exited]\x1b[0m\r\n");
+      }
+    }
+
     subscribe("terminal:created", onCreated);
     subscribe("terminal:output", onOutput);
+    subscribe("terminal:exited", onExited);
+
+    send({ type: "terminal:create", projectSlug: activeProjectSlug || undefined });
 
     term.onData(function(data: string) {
       var termId = termIdRef.current;
@@ -112,17 +135,37 @@ export function Terminal() {
     return function() {
       unsubscribe("terminal:created", onCreated);
       unsubscribe("terminal:output", onOutput);
+      unsubscribe("terminal:exited", onExited);
       resizeObserver.disconnect();
       term.dispose();
       xtermRef.current = null;
       fitAddonRef.current = null;
+      searchAddonRef.current = null;
     };
   }, []);
 
+  useEffect(function() {
+    if (visible && fitAddonRef.current) {
+      var timer = setTimeout(function() {
+        if (fitAddonRef.current) {
+          fitAddonRef.current.fit();
+          var termId = termIdRef.current;
+          var dim = fitAddonRef.current.proposeDimensions();
+          if (termId && dim) {
+            send({ type: "terminal:resize", termId: termId, cols: dim.cols, rows: dim.rows });
+          }
+        }
+      }, 50);
+      return function() { clearTimeout(timer); };
+    }
+  }, [visible]);
+
   return (
     <div
       ref={containerRef}
-      className="w-full h-full min-h-[200px] overflow-hidden bg-base-100"
+      className="w-full h-full overflow-hidden bg-base-100"
+      style={{ display: visible ? "block" : "none" }}
+      data-instance-id={instanceId}
     />
   );
 }