feat(terminal): added terminal context menu (#2692)

waleedlatif1 · waleedlatif1 · commit e672467edefd · 2026-01-07T20:40:29.000-08:00
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-context-menu/chunk-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-context-menu/chunk-context-menu.tsx
@@ -1,6 +1,12 @@
 'use client'
 
-import { Popover, PopoverAnchor, PopoverContent, PopoverItem } from '@/components/emcn'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDivider,
+  PopoverItem,
+} from '@/components/emcn'
 
 interface ChunkContextMenuProps {
   isOpen: boolean
@@ -102,6 +108,7 @@ export function ChunkContextMenu({
       <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
         {hasChunk ? (
           <>
+            {/* Navigation */}
             {!isMultiSelect && onOpenInNewTab && (
               <PopoverItem
                 onClick={() => {
@@ -112,6 +119,9 @@ export function ChunkContextMenu({
                 Open in new tab
               </PopoverItem>
             )}
+            {!isMultiSelect && onOpenInNewTab && <PopoverDivider />}
+
+            {/* Edit and copy actions */}
             {!isMultiSelect && onEdit && (
               <PopoverItem
                 onClick={() => {
@@ -132,6 +142,9 @@ export function ChunkContextMenu({
                 Copy content
               </PopoverItem>
             )}
+            {!isMultiSelect && (onEdit || onCopyContent) && <PopoverDivider />}
+
+            {/* State toggle */}
             {onToggleEnabled && (
               <PopoverItem
                 disabled={disableToggleEnabled}
@@ -143,6 +156,9 @@ export function ChunkContextMenu({
                 {getToggleLabel()}
               </PopoverItem>
             )}
+
+            {/* Destructive action */}
+            {onToggleEnabled && onDelete && <PopoverDivider />}
             {onDelete && (
               <PopoverItem
                 disabled={disableDelete}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/document-context-menu/document-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/document-context-menu/document-context-menu.tsx
@@ -1,6 +1,12 @@
 'use client'
 
-import { Popover, PopoverAnchor, PopoverContent, PopoverItem } from '@/components/emcn'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDivider,
+  PopoverItem,
+} from '@/components/emcn'
 
 interface DocumentContextMenuProps {
   isOpen: boolean
@@ -107,6 +113,7 @@ export function DocumentContextMenu({
       <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
         {hasDocument ? (
           <>
+            {/* Navigation */}
             {!isMultiSelect && onOpenInNewTab && (
               <PopoverItem
                 onClick={() => {
@@ -117,6 +124,9 @@ export function DocumentContextMenu({
                 Open in new tab
               </PopoverItem>
             )}
+            {!isMultiSelect && onOpenInNewTab && <PopoverDivider />}
+
+            {/* Edit and view actions */}
             {!isMultiSelect && onRename && (
               <PopoverItem
                 onClick={() => {
@@ -137,6 +147,9 @@ export function DocumentContextMenu({
                 View tags
               </PopoverItem>
             )}
+            {!isMultiSelect && (onRename || (hasTags && onViewTags)) && <PopoverDivider />}
+
+            {/* State toggle */}
             {onToggleEnabled && (
               <PopoverItem
                 disabled={disableToggleEnabled}
@@ -148,6 +161,9 @@ export function DocumentContextMenu({
                 {getToggleLabel()}
               </PopoverItem>
             )}
+
+            {/* Destructive action */}
+            {onToggleEnabled && onDelete && <PopoverDivider />}
             {onDelete && (
               <PopoverItem
                 disabled={disableDelete}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-base-context-menu/knowledge-base-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-base-context-menu/knowledge-base-context-menu.tsx
@@ -1,6 +1,12 @@
 'use client'
 
-import { Popover, PopoverAnchor, PopoverContent, PopoverItem } from '@/components/emcn'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDivider,
+  PopoverItem,
+} from '@/components/emcn'
 
 interface KnowledgeBaseContextMenuProps {
   /**
@@ -104,6 +110,7 @@ export function KnowledgeBaseContextMenu({
         }}
       />
       <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
+        {/* Navigation */}
         {showOpenInNewTab && onOpenInNewTab && (
           <PopoverItem
             onClick={() => {
@@ -114,6 +121,9 @@ export function KnowledgeBaseContextMenu({
             Open in new tab
           </PopoverItem>
         )}
+        {showOpenInNewTab && onOpenInNewTab && <PopoverDivider />}
+
+        {/* View and copy actions */}
         {showViewTags && onViewTags && (
           <PopoverItem
             onClick={() => {
@@ -134,6 +144,9 @@ export function KnowledgeBaseContextMenu({
             Copy ID
           </PopoverItem>
         )}
+        {((showViewTags && onViewTags) || onCopyId) && <PopoverDivider />}
+
+        {/* Edit action */}
         {showEdit && onEdit && (
           <PopoverItem
             disabled={disableEdit}
@@ -145,6 +158,9 @@ export function KnowledgeBaseContextMenu({
             Edit
           </PopoverItem>
         )}
+
+        {/* Destructive action */}
+        {showEdit && onEdit && showDelete && onDelete && <PopoverDivider />}
         {showDelete && onDelete && (
           <PopoverItem
             disabled={disableDelete}
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-row-context-menu/log-row-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-row-context-menu/log-row-context-menu.tsx
@@ -1,7 +1,13 @@
 'use client'
 
 import type { RefObject } from 'react'
-import { Popover, PopoverAnchor, PopoverContent, PopoverItem } from '@/components/emcn'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDivider,
+  PopoverItem,
+} from '@/components/emcn'
 import type { WorkflowLog } from '@/stores/logs/filters/types'
 
 interface LogRowContextMenuProps {
@@ -50,7 +56,7 @@ export function LogRowContextMenu({
         }}
       />
       <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
-        {/* Copy Execution ID */}
+        {/* Copy action */}
         <PopoverItem
           disabled={!hasExecutionId}
           onClick={() => {
@@ -61,7 +67,8 @@ export function LogRowContextMenu({
           Copy Execution ID
         </PopoverItem>
 
-        {/* Open Workflow */}
+        {/* Navigation */}
+        <PopoverDivider />
         <PopoverItem
           disabled={!hasWorkflow}
           onClick={() => {
@@ -72,7 +79,8 @@ export function LogRowContextMenu({
           Open Workflow
         </PopoverItem>
 
-        {/* Filter by Workflow - only show when not already filtered by this workflow */}
+        {/* Filter actions */}
+        <PopoverDivider />
         {!isFilteredByThisWorkflow && (
           <PopoverItem
             disabled={!hasWorkflow}
@@ -84,8 +92,6 @@ export function LogRowContextMenu({
             Filter by Workflow
           </PopoverItem>
         )}
-
-        {/* Clear All Filters - show when any filters are active */}
         {hasActiveFilters && (
           <PopoverItem
             onClick={() => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/index.ts
@@ -1 +1,3 @@
+export { LogRowContextMenu } from './log-row-context-menu'
+export { OutputContextMenu } from './output-context-menu'
 export { PrettierOutput } from './prettier-output'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/log-row-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/log-row-context-menu.tsx
@@ -0,0 +1,145 @@
+'use client'
+
+import type { RefObject } from 'react'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDivider,
+  PopoverItem,
+} from '@/components/emcn'
+import type { ConsoleEntry } from '@/stores/terminal'
+
+interface ContextMenuPosition {
+  x: number
+  y: number
+}
+
+interface TerminalFilters {
+  blockIds: Set<string>
+  statuses: Set<'error' | 'info'>
+  runIds: Set<string>
+}
+
+interface LogRowContextMenuProps {
+  isOpen: boolean
+  position: ContextMenuPosition
+  menuRef: RefObject<HTMLDivElement | null>
+  onClose: () => void
+  entry: ConsoleEntry | null
+  filters: TerminalFilters
+  onFilterByBlock: (blockId: string) => void
+  onFilterByStatus: (status: 'error' | 'info') => void
+  onFilterByRunId: (runId: string) => void
+  onClearFilters: () => void
+  onClearConsole: () => void
+  hasActiveFilters: boolean
+}
+
+/**
+ * Context menu for terminal log rows (left side).
+ * Displays filtering options based on the selected row's properties.
+ */
+export function LogRowContextMenu({
+  isOpen,
+  position,
+  menuRef,
+  onClose,
+  entry,
+  filters,
+  onFilterByBlock,
+  onFilterByStatus,
+  onFilterByRunId,
+  onClearFilters,
+  onClearConsole,
+  hasActiveFilters,
+}: LogRowContextMenuProps) {
+  const hasRunId = entry?.executionId != null
+
+  const isBlockFiltered = entry ? filters.blockIds.has(entry.blockId) : false
+  const entryStatus = entry?.success ? 'info' : 'error'
+  const isStatusFiltered = entry ? filters.statuses.has(entryStatus) : false
+  const isRunIdFiltered = entry?.executionId ? filters.runIds.has(entry.executionId) : false
+
+  return (
+    <Popover
+      open={isOpen}
+      onOpenChange={onClose}
+      variant='secondary'
+      size='sm'
+      colorScheme='inverted'
+    >
+      <PopoverAnchor
+        style={{
+          position: 'fixed',
+          left: `${position.x}px`,
+          top: `${position.y}px`,
+          width: '1px',
+          height: '1px',
+        }}
+      />
+      <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
+        {/* Clear filters at top when active */}
+        {hasActiveFilters && (
+          <>
+            <PopoverItem
+              onClick={() => {
+                onClearFilters()
+                onClose()
+              }}
+            >
+              Clear All Filters
+            </PopoverItem>
+            {entry && <PopoverDivider />}
+          </>
+        )}
+
+        {/* Filter actions */}
+        {entry && (
+          <>
+            <PopoverItem
+              showCheck={isBlockFiltered}
+              onClick={() => {
+                onFilterByBlock(entry.blockId)
+                onClose()
+              }}
+            >
+              Filter by Block
+            </PopoverItem>
+            <PopoverItem
+              showCheck={isStatusFiltered}
+              onClick={() => {
+                onFilterByStatus(entryStatus)
+                onClose()
+              }}
+            >
+              Filter by Status
+            </PopoverItem>
+            {hasRunId && (
+              <PopoverItem
+                showCheck={isRunIdFiltered}
+                onClick={() => {
+                  onFilterByRunId(entry.executionId!)
+                  onClose()
+                }}
+              >
+                Filter by Run ID
+              </PopoverItem>
+            )}
+          </>
+        )}
+
+        {/* Destructive action */}
+        {(entry || hasActiveFilters) && <PopoverDivider />}
+        <PopoverItem
+          onClick={() => {
+            onClearConsole()
+            onClose()
+          }}
+        >
+          Clear Console
+        </PopoverItem>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-context-menu.tsx
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx

Original file line number	Diff line number	Diff line change
`@@ -1 +1,3 @@`
	`1`	`+export { LogRowContextMenu } from './log-row-context-menu'`
	`2`	`+export { OutputContextMenu } from './output-context-menu'`
`1`	`3`	`export { PrettierOutput } from './prettier-output'`