Context Panel & File Explorer
Relevant source files
The following files were used as context for generating this wiki page:
The Context Panel and File Explorer serve as the primary inspection interface within the OpenWork session environment. This system provides users with real-time visibility into the "working context" of an active agentic task, including current files, active plugins, Model Context Protocol (MCP) servers, and available skills. Its primary purpose is to ensure transparency by showing exactly what resources the agent is utilizing to achieve a specific outcome.
The component is designed to be "slick and fluid," following the project's focus on premium UX for both technical and non-technical users. It operates as a thin layer over OpenCode primitives, mapping session data directly to a collapsible, interactive sidebar that supports local and remote workspace configurations.
Sources: PRODUCT.md:33-40, ARCHITECTURE.md:21-25, packages/app/src/app/components/session/context-panel.tsx:116-125
Architecture and Components
The Context Panel is implemented as a functional SolidJS component that manages five distinct sections: Working Files (Context), Plugins, MCP Servers, Skills, and Authorized Folders. It receives its state via props from the parent session view, which synchronizes with the OpenCode server events.
Component Logic Flow
The following diagram illustrates how the Context Panel processes data to render the UI.
The diagram shows the data flow from the main Session Page into the ContextPanel, where specialized utility functions process files, skills, and statuses for display.
Sources: packages/app/src/app/components/session/context-panel.tsx:11-28, packages/app/pr/context-panel-ux.md:124-140
Key Sections and Functionality
| Section | Description | Key Features |
|---|---|---|
| Context | Lists "Working Files" currently in use by the agent. | Smart path shortening, clickable file opening. |
| Plugins | Displays active OpenCode plugins. | Humanized labels, plugin version stripping. |
| MCP | Lists connected Model Context Protocol servers. | Status indicators (dot colors), URL/Command details. |
| Skills | Displays available agent skills. | Trigger-phrase subtitles, humanized skill names. |
| Authorized Folders | Shows folders the user has granted access to. | Native folder icon display, path truncation. |
Sources: packages/app/src/app/components/session/context-panel.tsx:125-275, packages/app/pr/context-panel-ux.md:10-25
File Explorer & Smart Paths
The File Explorer within the context panel uses "Smarter file path display" to handle duplicate basenames in different directories. If two files share the same name (e.g., skill.md in different folders), the system calculates the minimal unique path segments needed to differentiate them.
Path Resolution Logic
The system applies toWorkspaceRelative to ensure paths are clean and relative to the project root. The getSmartFileName function then determines the display label:
- Extract the basename.
- If the basename is unique among all working files, show only the basename.
- If duplicates exist, incrementally add parent directory segments until a unique path is formed.
const getSmartFileName = (files: string[], file: string): string => {
const segments = splitPathSegments(file);
const basename = segments[segments.length - 1] ?? file;
const duplicates = files.filter((candidate) => {
const candidateSegments = splitPathSegments(candidate);
return (candidateSegments[candidateSegments.length - 1] ?? candidate) === basename;
});
if (duplicates.length <= 1) return basename;
// Find minimum segments for uniqueness
for (let i = 2; i <= segments.length; i += 1) {
const shortPath = segments.slice(-i).join("/");
const isUnique = duplicates.every((candidate) => {
if (candidate === file) return true;
const candidateSegments = splitPathSegments(candidate);
return candidateSegments.slice(-i).join("/") !== shortPath;
});
if (isUnique) return shortPath;
}
return file;
};
Sources: packages/app/src/app/components/session/context-panel.tsx:78-103, packages/app/pr/context-panel-ux.md:52-85
Interaction and UI State
Files are rendered as buttons. In local workspaces, clicking a file invokes onFileClick, which triggers the @tauri-apps/plugin-opener to open or reveal the file in the host OS. This feature is disabled or shows a toast for remote workspaces.
The UI also enforces default collapsed states to prevent information overload, keeping only "Skills", "Artifacts", and "Progress" expanded by default.
Sources: packages/app/src/app/components/session/session.tsx:110-130, packages/app/pr/context-panel-ux.md:27-44, packages/app/src/app/components/session/context-panel.tsx:142-160
Skill and Plugin Display
The panel enhances the visibility of extensibility features by humanizing technical names. For example, a plugin named @org/opencode-plugin-git is humanized to "Git".
Skill Trigger phrases
A critical UX improvement involves showing "Trigger Phrases" instead of generic descriptions for skills. This allows users to see exactly what natural language phrases will activate a specific capability.
MCP Status Management
Model Context Protocol (MCP) servers are monitored via a status map. Each server entry displays a status dot indicating its current connectivity state.
| Status | Dot Color | Description |
|---|---|---|
connected | Green | Server is active and responding. |
needs_auth | Amber | Server requires OAuth or API credentials. |
needs_client_registration | Amber | Server requires client registration. |
failed | Red | Server encountered an error. |
disabled / disconnected | Gray | Server is manually disabled or unreachable. |
Sources: packages/app/src/app/components/session/context-panel.tsx:105-123, packages/app/src/app/components/session/context-panel.tsx:220-235
Summary
The Context Panel & File Explorer system in OpenWork provides an essential audit trail and resource overview for agentic sessions. By implementing smart path resolution, interactive file management, and clear status indicators for MCPs and skills, it bridges the gap between complex OpenCode engine states and a user-friendly product experience. This ensures that users, whether technical "Bobs" or non-technical "Susans," can maintain a clear mental model of the agent's environment and tools.