feat: add hybrid editor with tabbed source/preview for CALM files

[Copilot]

Implements a custom editor that displays CALM architecture files with Source and Preview tabs in a single editor window, replacing the side-by-side panel workflow.

Implementation

Custom Editor Provider

• Created CalmHybridEditorProvider implementing VS Code's CustomTextEditorProvider
• Registers for **/calm/**/*.{json,yaml,yml} file patterns with priority: "option"
• Inline HTML generation with embedded JavaScript for tab switching
• Two-way sync: webview textarea → document edits, document changes → webview updates

Preview Generation

• Parses CALM models via existing ModelService
• Renders structured summaries: nodes (limit 10), relationships (limit 5), flows (limit 5)
• Helper method renderArraySection<T>() reduces duplication across model element types
• Try-catch around parsing with fallback to raw content display

User Access

• Command: calm.openHybridEditor
• Keybinding: Ctrl+Shift+H / Cmd+Shift+H
• Context menu for JSON/YAML files
• Configuration: calm.editor.defaultMode enum ["classic", "hybrid"]

Code Changes

// New custom editor provider
export class CalmHybridEditorProvider implements vscode.CustomTextEditorProvider {
    async resolveCustomTextEditor(
        document: vscode.TextDocument,
        webviewPanel: vscode.WebviewPanel,
        _token: vscode.CancellationToken
    ): Promise<void> {
        // Configure webview with inline HTML containing tabs
        webviewPanel.webview.html = this.getHybridEditorHtml(webviewPanel.webview)
        
        // Bi-directional sync
        webviewPanel.webview.onDidReceiveMessage(...)
        vscode.workspace.onDidChangeTextDocument(...)
    }
}

Files Added

• src/features/hybrid-editor/calm-hybrid-editor-provider.ts (370 lines)
• src/features/hybrid-editor/calm-hybrid-editor-provider.spec.ts (unit tests)
• src/commands/open-hybrid-editor-command.ts

Files Modified

• package.json: Added customEditors, command, keybindings, configuration
• src/calm-extension-controller.ts: Register provider on activation
• README.md: Usage documentation

Preview Behavior

Preview tab shows parsed model structure:

• Nodes (10): Lists first 10 with unique-id and node-type
• Relationships (5): Lists first 5 with unique-id and connection type
• Flows (5): Lists first 5 with unique-id
• Parse errors display friendly message with raw content fallback

Classic preview (Ctrl+Shift+C) remains unchanged for full Mermaid diagram rendering.

Original prompt

Go ahead with the hybrid approach

[Chronological Review: The conversation began with a user request regarding the VS Code extension's ability to preview CALM documents. The user inquired if the preview could be integrated as a tab within the same document as the editor. The user then decided to proceed with a hybrid approach, indicating a preference for a combined view of the JSON and the preview.]

[Intent Mapping:

1. User Request: "Would it be possible for the preview to be a tab on the same document as the editor so you're looking at the JSON or the preview, not both?" - The user is seeking a more integrated viewing experience within the VS Code extension.
2. User Decision: "Go ahead with the hybrid approach" - The user has chosen to implement a hybrid solution for the preview functionality.]

[Technical Inventory:

• Technology: VS Code Extension
• Purpose: To enhance the user experience by allowing simultaneous viewing of JSON and preview in a tabbed format.]

[Code Archaeology: No specific files or code changes were discussed in detail during this segment.]

[Progress Assessment:

• Completed Tasks: User has made a decision to proceed with a hybrid approach for the preview functionality.
• Partially Complete Work: Implementation details for the hybrid approach are pending.]

[Context Validation: All necessary context for continuing the work on the VS Code extension's preview functionality is captured, including user preferences and decisions.]

[Recent Commands Analysis:

• Last Agent Commands: The user issued commands related to the design of the preview functionality within the VS Code extension.
• Tool Results Summary: No specific tool results were generated as the conversation focused on user requests and decisions.
• Pre-Summary State: The agent was actively discussing the integration of the preview functionality when the token budget was exceeded.
• Operation Context: The commands were executed to clarify the user's intent regarding the preview feature, aligning with the overall goal of improving the VS Code extension.]

1. Conversation Overview: - Primary Objectives: - "Would it be possible for the preview to be a tab on the same document as the editor so you're looking at the JSON or the preview, not both?" - User seeks an integrated preview experience. - "Go ahead with the hybrid approach" - User decides to implement a hybrid solution for the preview functionality. - Session Context: The conversation focused on enhancing the VS Code extension's preview capabilities for CALM documents, leading to a decision on a hybrid approach. - User Intent Evolution: The user initially sought a specific feature and then opted for a broader hybrid solution.

2. Technical Foundation:

• Core Technology: VS Code Extension - A tool to enhance user interaction with CALM documents.

3. Codebase Status:

• No specific files or code changes were discussed in detail.

4. Problem Resolution:

• Issues Encountered: None explicitly mentioned.
• Solutions Implemented: User's decision to proceed with a hybrid approach is a step towards resolving the preview functionality issue.

5. Progress Tracking:

• Completed Tasks: User has decided on a hybrid approach.
• Partially Complete Work: Implementation details for the hybrid approach are still pending.

6. Active Work State:

• Current Focus: Discussing the integration of the preview functionality within the VS Code extension.
• Recent Context: User expressed a desire for a tabbed preview experience and confirmed the hybrid approach.
• Immediate Context: The user was clarifying their preferences for the preview feature before the summary was triggered.

7. Recent Operations:

• Last Agent Commands: User commands related to the preview functionality design.
• Tool Results Summary: No specific tool results were generated.
• Pre-Summary State: The agent was discussing the preview functionality when the token budget was exceeded.
• Operation Context: The commands were aimed at refining the user experience for the VS Code extension.

8. Continuation Plan:

• Pending Task: Implementation of the hybrid approach for the preview functionality.
• Next Action: Further discussions or coding efforts to define how the hybrid approach will be executed in the VS Code extension.

TITLE: Implementing a hybrid preview approach for VS Code extension

Created from VS Code via the GitHub Pull Request extension.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.