Refactor ToolCallSidePanel to KortixComputer with Actions, Files, and… by Logrui · Pull Request #14 · Logrui/suna

Logrui · 2025-12-07T22:08:54Z

… Browser tabs.

Replaced ToolCallSidePanel with KortixComputer implementation from upstream/PRODUCTION.
Added support for 'Actions', 'Files', and 'Browser' tabs.
Integrated FileBrowserView and FileViewerView for full file system access.
Implemented BrowserTakeover component for full-screen VNC browser control.
Updated BrowserToolView header to support 'Use Browser' takeover action.
Added kortix-computer-store for managing tab and file selection state.
Updated dependencies for file rendering and markdown support.

… Browser tabs. - Replaced ToolCallSidePanel with KortixComputer implementation from upstream/PRODUCTION. - Added support for 'Actions', 'Files', and 'Browser' tabs. - Integrated `FileBrowserView` and `FileViewerView` for full file system access. - Implemented `BrowserTakeover` component for full-screen VNC browser control. - Updated `BrowserToolView` header to support 'Use Browser' takeover action. - Added `kortix-computer-store` for managing tab and file selection state. - Updated dependencies for file rendering and markdown support.

vercel · 2025-12-07T22:08:59Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
suna	Error			Dec 9, 2025 9:43pm

Copilot

Pull request overview

This PR refactors the ToolCallSidePanel component into a more comprehensive KortixComputer interface with dedicated tabs for Actions, Files, and Browser views. The changes include:

Complete redesign of the side panel with tab-based navigation (Actions/Files/Browser)
New state management store for coordinating tab and file selection state
Full file system browser with version history and restore capabilities
Integrated file viewer with editing support for multiple formats
Browser takeover mode for full-screen VNC control
Enhanced file renderers with improved format detection and rendering
Unified markdown rendering system with consistent styling

Key Changes

Replaced ToolCallSidePanel with KortixComputer implementation featuring tabbed interface
Added kortix-computer-store for centralized state management across views
Implemented comprehensive file browsing with FileBrowserView and FileViewerView
Added BrowserTakeover component for immersive browser control
Enhanced XLSX renderer with proper format detection to avoid vulnerable libraries where possible
Created unified markdown rendering component with consistent styling
Refactored billing hooks to use consolidated useAccountState pattern

Reviewed changes

Copilot reviewed 36 out of 37 changed files in this pull request and generated 19 comments.

Show a summary per file

File	Description
`kortix-computer-store.ts`	New Zustand store managing view state, file navigation, and unsaved content
`url-autolink.ts`	Utility for auto-linking plain URLs in markdown with comprehensive TLD support
`site-config.ts`	Centralized site configuration with pricing and footer links
`use-download-restriction.ts`	New hook for restricting downloads on free tier with upgrade prompts
`use-thread-billing.ts`	Refactored to use unified `useAccountState` instead of separate billing queries
`FileDownloadButton.tsx`	Reusable download/export button with format options for markdown files
`BrowserToolView.tsx`	Updated with takeover button and Next.js Image component
`tool-call-side-panel.tsx`	Major refactor to KortixComputer with Actions/Files/Browser tabs
`FileBrowserView.tsx`	New file browser with version history and workspace navigation
`FileViewerView.tsx`	Comprehensive file viewer with editing, version control, and restore
`BrowserTakeover.tsx`	Full-screen browser control with floating controls
`unified-markdown.tsx`	New unified markdown renderer with consistent styling and auto-linking
`xlsx-renderer.tsx`	Enhanced with format detection using secure libraries for XLSX
`pptx-renderer.tsx`	New PPTX renderer using react-doc-viewer
`pdf-renderer.tsx`	Improved with responsive scaling and keyboard navigation

Files not reviewed (1)

frontend/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-07T22:12:52Z

+import { processUnicodeContent, getFileTypeFromExtension, getLanguageFromExtension } from './utils';
+


Unused imports getFileTypeFromExtension, getLanguageFromExtension, processUnicodeContent.

Suggested change

import { processUnicodeContent, getFileTypeFromExtension, getLanguageFromExtension } from './utils';

Copilot · 2025-12-07T22:12:52Z

+import {
+  Bold,
+  Italic,
+  Underline as UnderlineIcon,
+  Strikethrough,
+  List,
+  ListOrdered,
+  Quote,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  Link as LinkIcon,
+  Image as ImageIcon,
+  Table as TableIcon,
+  Undo,
+  Redo,
+  ChevronDown,
+  Minus,
+  ListTodo,
+  Check,
+  Loader2,
+  AlertCircle,
+  Save,
+  Type,
+  Download,
+  FileText,
+  FileType,
+  FileCode,
+  RotateCcw,
+  Upload,
+  Link2,
+  Plus,
+  Trash2,
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  Columns,
+  Rows,
+} from 'lucide-react';


Unused import Plus.

Copilot · 2025-12-07T22:12:52Z

  const [pageNumber, setPageNumber] = useState<number>(1);
-  const [scale, setScale] = useState<number>(1.0);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+  const [isLoading, setIsLoading] = useState(true);


Unused variable isLoading.

Suggested change

const [isLoading, setIsLoading] = useState(true);

Copilot · 2025-12-07T22:12:52Z

+  X,
+  ChevronLeft,
+  ChevronRight,
+  Maximize2,


Unused imports Maximize2, X.

Suggested change

X,

ChevronLeft,

ChevronRight,

Maximize2,

ChevronLeft,

ChevronRight,

Copilot · 2025-12-07T22:12:53Z

+import {
+  File,
+  Folder,
+  Upload,
+  Download,
+  ChevronRight,
+  Home,
+  Loader,
+  FileText,
+  Presentation,
+  ChevronDown,
+  AlertTriangle,
+} from 'lucide-react';


Unused import ChevronRight.

Copilot · 2025-12-07T22:12:55Z

+  }, [toolCalls]);
+
+  useEffect(() => {
+    const hadSnapshots = toolCallSnapshots.length > 0;


Unused variable hadSnapshots.

Suggested change

const hadSnapshots = toolCallSnapshots.length > 0;

Copilot · 2025-12-07T22:12:55Z

+    }
+  }, [currentIndex, toolCallSnapshots.length, isInitialized, navigationMode]);
+
+  const { safeInternalIndex, currentSnapshot, currentToolCall, totalCalls, latestIndex, completedToolCalls, totalCompletedCalls } = useMemo(() => {


Unused variable currentSnapshot.

Suggested change

const { safeInternalIndex, currentSnapshot, currentToolCall, totalCalls, latestIndex, completedToolCalls, totalCompletedCalls } = useMemo(() => {

const { safeInternalIndex, currentToolCall, totalCalls, latestIndex, completedToolCalls, totalCompletedCalls } = useMemo(() => {

Copilot · 2025-12-07T22:12:55Z

-const FLOATING_LAYOUT_ID = 'tool-panel-float';
-const CONTENT_LAYOUT_ID = 'tool-panel-content';
+const FLOATING_LAYOUT_ID = 'kortix-computer-float';
+const CONTENT_LAYOUT_ID = 'kortix-computer-content';


Unused variable CONTENT_LAYOUT_ID.

Suggested change

const CONTENT_LAYOUT_ID = 'kortix-computer-content';

Copilot · 2025-12-07T22:12:56Z

+        {isOpen && (
+          <motion.div
+            key="sidepanel"
+            layoutId={FLOATING_LAYOUT_ID}
+            initial={disableInitialAnimation ? { opacity: 1 } : { opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{
+              opacity: { duration: disableInitialAnimation ? 0 : 0.15 },
+              layout: {
+                type: "spring",
+                stiffness: 400,
+                damping: 35
+              }
+            }}
+            className="m-4 h-[calc(100%-2rem)] w-[calc(100%-2rem)] max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] border rounded-3xl flex flex-col z-30 overflow-hidden"
+            style={{
+              contain: 'strict',
+            }}
+          >
+            <div className="flex-1 flex flex-col overflow-hidden bg-card max-w-full max-h-full min-w-0 min-h-0" style={{ contain: 'strict' }}>
+              {renderContent()}
+            </div>
+            {activeView === 'tools' && (displayTotalCalls > 1 || (isCurrentToolStreaming && totalCompletedCalls > 0)) && (
+              <NavigationControls
+                displayIndex={displayIndex}
+                displayTotalCalls={displayTotalCalls}
+                safeInternalIndex={safeInternalIndex}
+                latestIndex={latestIndex}
+                isLiveMode={isLiveMode}
+                agentStatus={agentStatus}
+                onPrevious={navigateToPrevious}
+                onNext={navigateToNext}
+                onSliderChange={handleSliderChange}
+                onJumpToLive={jumpToLive}
+                onJumpToLatest={jumpToLatest}
+                isMobile={false}
+              />
+            )}
+          </motion.div>
+        )}


This use of variable 'isOpen' always evaluates to true.

Suggested change

{isOpen && (

<motion.div

key="sidepanel"

layoutId={FLOATING_LAYOUT_ID}

initial={disableInitialAnimation ? { opacity: 1 } : { opacity: 0 }}

animate={{ opacity: 1 }}

exit={{ opacity: 0 }}

transition={{

opacity: { duration: disableInitialAnimation ? 0 : 0.15 },

layout: {

type: "spring",

stiffness: 400,

damping: 35

}

}}

className="m-4 h-[calc(100%-2rem)] w-[calc(100%-2rem)] max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] border rounded-3xl flex flex-col z-30 overflow-hidden"

style={{

contain: 'strict',

}}

>

<div className="flex-1 flex flex-col overflow-hidden bg-card max-w-full max-h-full min-w-0 min-h-0" style={{ contain: 'strict' }}>

{renderContent()}

</div>

{activeView === 'tools' && (displayTotalCalls > 1 || (isCurrentToolStreaming && totalCompletedCalls > 0)) && (

<NavigationControls

displayIndex={displayIndex}

displayTotalCalls={displayTotalCalls}

safeInternalIndex={safeInternalIndex}

latestIndex={latestIndex}

isLiveMode={isLiveMode}

agentStatus={agentStatus}

onPrevious={navigateToPrevious}

onNext={navigateToNext}

onSliderChange={handleSliderChange}

onJumpToLive={jumpToLive}

onJumpToLatest={jumpToLatest}

isMobile={false}

/>

)}

</motion.div>

)}

<motion.div

key="sidepanel"

layoutId={FLOATING_LAYOUT_ID}

initial={disableInitialAnimation ? { opacity: 1 } : { opacity: 0 }}

animate={{ opacity: 1 }}

exit={{ opacity: 0 }}

transition={{

opacity: { duration: disableInitialAnimation ? 0 : 0.15 },

layout: {

type: "spring",

stiffness: 400,

damping: 35

}

}}

className="m-4 h-[calc(100%-2rem)] w-[calc(100%-2rem)] max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] border rounded-3xl flex flex-col z-30 overflow-hidden"

style={{

contain: 'strict',

}}

>

<div className="flex-1 flex flex-col overflow-hidden bg-card max-w-full max-h-full min-w-0 min-h-0" style={{ contain: 'strict' }}>

{renderContent()}

</div>

{activeView === 'tools' && (displayTotalCalls > 1 || (isCurrentToolStreaming && totalCompletedCalls > 0)) && (

<NavigationControls

displayIndex={displayIndex}

displayTotalCalls={displayTotalCalls}

safeInternalIndex={safeInternalIndex}

latestIndex={latestIndex}

isLiveMode={isLiveMode}

agentStatus={agentStatus}

onPrevious={navigateToPrevious}

onNext={navigateToNext}

onSliderChange={handleSliderChange}

onJumpToLive={jumpToLive}

onJumpToLatest={jumpToLatest}

isMobile={false}

/>

)}

</motion.div>

Copilot · 2025-12-07T22:12:56Z

+  if (!isOpen) {
+    return null;
+  }
+


This negation always evaluates to false.

Suggested change

if (!isOpen) {

return null;

}

…hread with upstream/PRODUCTION

…ipting

…ith upstream/PRODUCTION

Added two detailed documents analyzing the upstream architectural improvements: 1. UPSTREAM_ARCHITECTURAL_CHANGES_SUMMARY.md - Detailed explanation of 5 major architectural changes - System prompt reduction (<200 lines) - Dynamic tool loading with caching - Parallel MCP initialization with Redis - Performance improvements (3-5x faster startup) - Migration strategy in 5 phases - Breaking changes and risk assessment 2. UPSTREAM_FILES_TO_UPDATE_CHECKLIST.md - File-by-file update checklist - Organized by priority (Critical → Low) - Specific code changes for each file - Verification steps - Common issues and solutions Key Findings: - 135 backend files changed in upstream - Major refactor: backend/agent/ → backend/core/ - Tool schemas moved from system prompt to function calling API - Pre-computed schema caching for instant tool registration - Parallel operations for faster agent startup - Expected performance: 3-5x faster (1-2s → 200-400ms) These documents provide complete implementation guidance for merging upstream changes into our self-hosted fork.

… update-PROD)

…defined sandbox_tuple variable

…e2EfMbfDVsksp7gy docs: comprehensive analysis of upstream/main architectural changes

Logrui self-assigned this Dec 7, 2025

Copilot AI review requested due to automatic review settings December 7, 2025 22:08

Copilot started reviewing on behalf of Logrui December 7, 2025 22:09 View session

Copilot AI reviewed Dec 7, 2025

View reviewed changes

vercel Bot had a problem deploying to Preview December 7, 2025 22:13 Failure

cleaup for agent-permissions-system integration

602a249

vercel Bot had a problem deploying to Preview December 7, 2025 23:06 Failure

synced with frontend

fd68ebc

vercel Bot had a problem deploying to Preview December 7, 2025 23:29 Failure

Logrui and others added 15 commits December 7, 2025 19:49

checkpoint before replacing the entirety of frontend\src\components\t…

5fdda1c

…hread with upstream/PRODUCTION

partial sync with upstream production for thread folder minus chat input

12ee567

.upstream-syncing workflow creation - WIP

7c57c12

portkit creation checkpoint

cc31319

portkit creation checkpoint - scripts

fa08edb

portkit creation checkpoint - scripts

ec6a2bc

checkpoint portkit development

263b052

checkpoint portkit development

0a399fb

renamed scan-registry to update-registry script

36aedd8

custom feature tagging testing

4837853

feat(portkit): enhance research tooling and workflows with robust scr…

ee46f38

…ipting

feat: merge sandbox proxy api and document browser agent

c6a5f09

manually merged frontend\src\hooks\messages from upstream/PRODUCTION

aa85c7a

bug fixes for legacy browser tool view on frontend and synced tools w…

b471cb2

…ith upstream/PRODUCTION

Logrui force-pushed the kortix-computer-tabs-v2 branch from ce40200 to b471cb2 Compare December 9, 2025 07:46

backend fixes

5879f75

vercel Bot had a problem deploying to Preview December 9, 2025 07:51 Failure

Add missing upstream workflows (mobile-eas-update, mobile-testflight,…

15a53d2

… update-PROD)

bugfixes: fix 500 error in sandbox file content endpoint caused by un…

2b46405

…defined sandbox_tuple variable

vercel Bot had a problem deploying to Preview December 9, 2025 09:46 Failure

Merge pull request #15 from Logrui/claude/sync-upstream-main-01QXvb6Q…

4a1d12d

…e2EfMbfDVsksp7gy docs: comprehensive analysis of upstream/main architectural changes

vercel Bot had a problem deploying to Preview December 9, 2025 21:43 Failure

railway-app Bot temporarily deployed to suna-kortix / stable-custom December 11, 2025 11:50 Inactive

railway-app Bot temporarily deployed to suna-kortix / prior-to-v1-api December 13, 2025 05:32 Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor ToolCallSidePanel to KortixComputer with Actions, Files, and…#14

Refactor ToolCallSidePanel to KortixComputer with Actions, Files, and…#14
Logrui wants to merge 22 commits intoadvanced-workflowsfrom
kortix-computer-tabs-v2

Logrui commented Dec 7, 2025

Uh oh!

vercel Bot commented Dec 7, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		import { processUnicodeContent, getFileTypeFromExtension, getLanguageFromExtension } from './utils';

	const { safeInternalIndex, currentSnapshot, currentToolCall, totalCalls, latestIndex, completedToolCalls, totalCompletedCalls } = useMemo(() => {
	const { safeInternalIndex, currentToolCall, totalCalls, latestIndex, completedToolCalls, totalCompletedCalls } = useMemo(() => {

Conversation

Logrui commented Dec 7, 2025

Uh oh!

vercel Bot commented Dec 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel Bot commented Dec 7, 2025 •

edited

Loading