Add support for previewing saved context symbols on click

- enable previewing 'saved context' symbol by showing those files in a way they're later attached to prompt (markdown preview)

├── README.md
├── apps
│   └── editor
│       └── src
│           ├── commands
│           │   └── generate-commit-message-commands
│           │       └── utils
│           │           └── build-commit-message-prompt.ts
│           ├── context
│           │   └── providers
│           │       └── workspace
│           │           └── modules
│           │               └── token-calculator.ts
│           ├── features
│           │   ├── context-restoration
│           │   │   ├── index.ts
│           │   │   └── utils
│           │   │       ├── context-file-utils.ts
│           │   │       ├── create-context-description.ts
│           │   │       ├── file-contexts.ts
│           │   │       ├── global-storage-utils.ts
│           │   │       ├── resolve-context-paths.ts
│           │   │       ├── resolve-paths.ts
│           │   │       └── select-context-paths.ts
│           │   └── search-files
│           │       ├── search-modes
│           │       │   └── perform-intelligent-search-mode.ts
│           │       └── utils
│           │           └── search-files-by-intelligent.ts
│           ├── types
│           │   └── context.ts
│           ├── utils
│           │   ├── files-collector.ts
│           │   └── prompt-builder.ts
│           └── views
│               ├── prompt
│               │   ├── backend
│               │   │   ├── message-handlers
│               │   │   │   ├── handle-patch-repair.ts
│               │   │   │   ├── handle-preview-saved-context-symbol.ts
│               │   │   │   ├── handle-preview-skill-symbol.ts
│               │   │   │   ├── handle-voice-input.ts
│               │   │   │   ├── index.ts
│               │   │   │   └── utils
│               │   │   │       ├── build-prompt-payload.ts
│               │   │   │       └── patch-repair-utils.ts
│               │   │   ├── prompt-view-provider.ts
│               │   │   └── utils
│               │   │       └── symbols
│               │   │           ├── git
│               │   │           │   └── replace-git-symbols.ts
│               │   │           ├── replace-symbols.ts
│               │   │           ├── saved-context
│               │   │           │   └── replace-saved-context-symbol.ts
│               │   │           └── skill
│               │   │               └── replace-skill-symbol.ts
│               │   ├── frontend
│               │   │   └── Main
│               │   │       └── MainView
│               │   │           ├── MainView.tsx
│               │   │           └── components
│               │   │               └── PromptAttachments
│               │   │                   └── PromptAttachments.tsx
│               │   └── types
│               │       └── messages.ts
│               ├── settings
│               │   ├── backend
│               │   │   ├── message-handlers
│               │   │   │   └── handle-hash-sign-quick-pick.ts
│               │   │   └── settings-view-provider.ts
│               │   ├── frontend
│               │   │   ├── Home
│               │   │   │   └── sections
│               │   │   │       └── GeneralSection.tsx
│               │   │   ├── Settings.tsx
│               │   │   └── forms
│               │   │       └── EditTemplateForm
│               │   │           ├── EditTemplateForm.module.scss
│               │   │           ├── EditTemplateForm.tsx
│               │   │           └── index.ts
│               │   └── types
│               │       └── messages.ts
│               └── shared
│                   └── utils
│                       └── hash-sign-quick-pick
│                           ├── hash-sign-quick-pick.ts
│                           └── symbols
│                               ├── index.ts
│                               └── saved-context-symbol.ts
└── packages
    ├── shared
    │   └── src
    │       └── utils
    │           └── simplify-prompt-symbols
    │               └── simplify-prompt-symbols.ts
    └── ui
        └── src
            └── components
                └── editor
                    ├── common
                    │   └── prompts
                    │       ├── PromptField
                    │       │   ├── PromptField.tsx
                    │       │   ├── components
                    │       │   │   └── Footer
                    │       │   │       └── Footer.tsx
                    │       │   └── hooks
                    │       │       └── use-handlers
                    │       │           ├── handle-input-click.ts
                    │       │           └── use-handlers.ts
                    │       ├── Template
                    │       │   ├── Template.module.scss
                    │       │   └── Template.tsx
                    │       └── shared
                    │           └── symbols
                    │               ├── caret.ts
                    │               ├── get-highlighted-text.tsx
                    │               ├── index.ts
                    │               ├── position-mapping.ts
                    │               ├── prompt-symbols.module.scss
                    │               ├── reconstruct-raw-value.ts
                    │               └── use-symbol-deletion.ts
                    └── settings-view
                        └── Templates
                            └── Templates.tsx

Author: robertpiosik

apps/editor/src/views/prompt/backend/message-handlers/handle-preview-saved-context-symbol.ts

@@ -0,0 +1,32 @@
+import * as vscode from 'vscode'
+import { replace_saved_context_symbol } from '../utils/symbols/saved-context/replace-saved-context-symbol'
+import { preview_text_in_temp_file } from '../utils/preview-text-in-temp-file'
+import { PromptViewProvider } from '../prompt-view-provider'
+
+export const handle_preview_saved_context_symbol = async (params: {
+  prompt_view_provider: PromptViewProvider
+  message: { context_type: string; context_name: string }
+}) => {
+  try {
+    const instruction = `#SavedContext(${params.message.context_type} "${params.message.context_name}")`
+    const { context_definitions } = await replace_saved_context_symbol({
+      instructions: [instruction],
+      extension_context: params.prompt_view_provider.extension_context,
+      workspace_provider: params.prompt_view_provider.workspace_provider
+    })
+
+    if (context_definitions) {
+      await preview_text_in_temp_file({
+        prefix: 'cwc-context',
+        content: context_definitions.trim(),
+        extension: '.md'
+      })
+    } else {
+      vscode.window.showInformationMessage(
+        'Failed to generate context preview.'
+      )
+    }
+  } catch (error) {
+    vscode.window.showErrorMessage(`Failed to preview context: ${error}`)
+  }
+}

apps/editor/src/views/prompt/backend/message-handlers/index.ts

@@ -57,6 +57,7 @@ export * from './handle-install-browser-extension'
 export * from './handle-preview-changes-symbol'
 export * from './handle-preview-commit-symbol'
 export * from './handle-preview-skill-symbol'
+export * from './handle-preview-saved-context-symbol'
 export * from './configurations'
 export * from './handle-pick-agent'
 export * from './handle-get-completed-tasks'

apps/editor/src/views/prompt/backend/prompt-view-provider.ts

@@ -101,6 +101,7 @@ import {
   handle_clear_completed_tasks
 } from './message-handlers'
 import { handle_agentic_search } from './message-handlers/handle-agentic-search'
+import { handle_preview_saved_context_symbol } from './message-handlers/handle-preview-saved-context-symbol'
 import { SelectionState } from '../types/messages'
 import {
   EDIT_FORMAT_STATE_KEY,
@@ -895,6 +896,11 @@ export class PromptViewProvider implements vscode.WebviewViewProvider {
             await handle_preview_commit_symbol(message)
           } else if (message.command == 'PREVIEW_SKILL_SYMBOL') {
             await handle_preview_skill_symbol(message)
+          } else if (message.command == 'PREVIEW_SAVED_CONTEXT_SYMBOL') {
+            await handle_preview_saved_context_symbol({
+              prompt_view_provider: this,
+              message
+            })
           } else if (message.command == 'AGENTIC_SEARCH') {
             await handle_agentic_search(this)
           } else if (message.command == 'GET_CLI_CONFIGURATIONS') {

apps/editor/src/views/prompt/frontend/Main/Main.tsx

@@ -92,6 +92,7 @@ type Props = {
 }
 
 export const Main: React.FC<Props> = (props) => {
+  const { vscode } = props
   const [web_configurations, set_web_configurations] =
     useState<WebConfiguration[]>()
   const [
@@ -719,7 +720,21 @@ export const Main: React.FC<Props> = (props) => {
       on_preview_prompt={props.on_preview_prompt}
       on_changes_click={props.on_changes_click}
       on_commit_click={props.on_commit_click}
-      on_skill_click={props.on_skill_click}
+      on_skill_click={(agent, repo, skill_name) => {
+        post_message(vscode, {
+          command: 'PREVIEW_SKILL_SYMBOL',
+          agent,
+          repo,
+          skill_name
+        })
+      }}
+      on_saved_context_click={(context_type, context_name) => {
+        post_message(vscode, {
+          command: 'PREVIEW_SAVED_CONTEXT_SYMBOL',
+          context_type,
+          context_name
+        })
+      }}
       on_install_browser_extension={handle_install_browser_extension}
       on_agentic_search={props.on_agentic_search}
       on_clear_context={handle_clear_context}

apps/editor/src/views/prompt/frontend/Main/MainView/MainView.tsx

@@ -145,6 +145,7 @@ type Props = {
     commit_message?: string
   ) => void
   on_skill_click?: (agent: string, repo: string, skill_name: string) => void
+  on_saved_context_click?: (context_type: string, context_name: string) => void
   on_install_browser_extension: () => void
   on_agentic_search: () => void
   on_clear_context: () => void
@@ -506,6 +507,7 @@ export const MainView: React.FC<Props> = (props) => {
           on_clear_context={props.on_clear_context}
           on_commit_click={props.on_commit_click}
           on_skill_click={props.on_skill_click}
+          on_saved_context_click={props.on_saved_context_click}
           on_preview_prompt={props.on_preview_prompt}
           is_recording={props.is_recording}
           on_recording_started={props.on_recording_started}

apps/editor/src/views/prompt/types/messages.ts

@@ -591,6 +591,12 @@ export interface PreviewSkillSymbolMessage extends BaseMessage {
   skill_name: string
 }
 
+export interface PreviewSavedContextSymbolMessage extends BaseMessage {
+  command: 'PREVIEW_SAVED_CONTEXT_SYMBOL'
+  context_type: string
+  context_name: string
+}
+
 export interface AgenticSearchMessage extends BaseMessage {
   command: 'AGENTIC_SEARCH'
 }
@@ -712,6 +718,7 @@ export type FrontendMessage =
   | PreviewChangesSymbolMessage
   | PreviewCommitSymbolMessage
   | PreviewSkillSymbolMessage
+  | PreviewSavedContextSymbolMessage
   | AgenticSearchMessage
   | GetAgentConfigurationsMessage
   | ReorderAgentConfigurationsMessage

packages/ui/src/components/editor/common/prompts/PromptField/PromptField.tsx

@@ -75,6 +75,10 @@ export namespace PromptField {
       commit_message?: string
     ) => void
     on_skill_click?: (agent: string, repo: string, skill_name: string) => void
+    on_saved_context_click?: (
+      context_type: string,
+      context_name: string
+    ) => void
     on_preview_prompt?: () => void
     is_recording: boolean
     on_recording_started: () => void

packages/ui/src/components/editor/common/prompts/PromptField/hooks/use-handlers/handle-input-click.ts

@@ -75,6 +75,18 @@ export const create_handle_input_click = ({
         }
       }
 
+      const saved_context_symbol_element = text_element.closest<HTMLElement>(
+        '[data-type="saved-context-symbol"]'
+      )
+      if (saved_context_symbol_element) {
+        const context_type = saved_context_symbol_element.dataset.contextType
+        const context_name = saved_context_symbol_element.dataset.contextName
+
+        if (context_type && context_name) {
+          props.on_saved_context_click?.(context_type, context_name)
+        }
+      }
+
       const image_symbol_element = text_element.closest<HTMLElement>(
         '[data-type="image-symbol"]'
       )

packages/ui/src/components/editor/common/prompts/shared/symbols/prompt-symbols.module.scss

@@ -170,6 +170,18 @@
     content: '\eab3';
   }
 
+  &--saved-context &__text {
+    cursor: pointer;
+
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--vscode-charts-blue) 30%,
+        transparent
+      );
+    }
+  }
+
   &--pasted-lines &__icon::before {
     content: '\eac0';
   }