Local Agent Studio Extension

A Local Agent Studio (LAS) extension for Visual Studio Code. Currently the extension can visualize LAS flow directories as interactive graphs. View, navigate, and edit flow steps, functions, and transitions with an intuitive visual interface.

Features

🎯 Interactive Flow Visualization

• Graph-based visualization: View your flow as an interactive graph with nodes representing steps, functions, and endpoints
• Visual navigation: Click nodes to view details, drag to reposition, and zoom/pan to explore large flows
• Connection mapping: See how steps connect through functions and transitions

✏️ In-Place Editing

• Edit prompts: Double-click any step's prompt to edit it directly in the viewer
• ASR Biasing configuration: Configure Automatic Speech Recognition biasing settings with checkboxes
• DTMF configuration: Set up Dual-Tone Multi-Frequency settings including timeouts, max digits, and end keys
• Function integration: Add function references ({{fn:functionName}} or {{ft:functionName}}) using the function picker

📝 Change Management

• Modified nodes sidebar: Track all nodes with unsaved changes in a collapsible sidebar
• Save All / Discard All: Bulk operations to save or discard all changes at once
• Individual save/discard: Save or discard changes for individual nodes
• Visual indicators: Modified nodes are highlighted and tracked in the sidebar

🔍 Enhanced Navigation

• Search functionality: Search for nodes by name
• Node details panel: View comprehensive information about each step including:
  • Step type and configuration
  • Prompt with clickable function links
  • ASR biasing settings
  • DTMF configuration
• Function links: Click function references in prompts to open the function file

🐍 Python Language Features

• Go to Definition: Click on conv.functions.functionName or flow.functions.functionName in Python files to jump to the function definition
• Find All References: Find all places where a function is called using conv.functions.functionName or flow.functions.functionName across your entire workspace
• Hover Information: Hover over function calls to see function descriptions, parameters, and file paths
• Function Resolution: Automatically resolves global (conv) and flow-specific (flow) function references
• Smart Navigation: Seamlessly navigate between function calls and their definitions
• Precise Targeting: Only clicking on the function name (not conv, flow, or functions) triggers navigation and references

🔄 Update Management

• Automatic update checks: Extension automatically checks for updates every 24 hours
• Manual update check: Use the command palette to check for updates anytime
• Update notifications: Get notified when new versions are available with direct download links

🐛 Debug Mode

• Toggle debug mode: Enable or disable debug logging for troubleshooting
• Debug logging: View detailed debug information in the VS Code output panel

🔍 Agent Studio Linter

• Real-time diagnostics: Get instant feedback on Agent Studio coding standards as you type
• Python rules: Validates function structure, decorators, imports, and common anti-patterns
• YAML rules: Checks flow configs, steps, and topics for required fields and best practices
• Configurable: Disable specific rules per-project using a .lasrc config file
• CI/CD CLI: Run las-lint from the command line to enforce standards in your build pipeline

See Linter Documentation for full rule reference and CLI usage.

🎫 JIRA Integration

• Create JIRA tickets from branch: Automatically create JIRA tickets from your current git branch changes
• Project/component caching: Automatically remembers project and component mappings per project directory
• PR integration: Automatically finds and updates PR descriptions with JIRA ticket links
• Smart project detection: Detects project directories (e.g., goodyear-us) from changed files
• Changed files summary: Lists all changed files in the ticket description

🎨 User Experience

• VS Code theme integration: Automatically adapts to your VS Code theme
• Collapsible sidebar: Hide or show the modified nodes panel to maximize workspace
• Auto-expand on changes: Sidebar automatically appears when you make your first change
• Smart reloading: Only reloads the graph when function references change, not on every save

Requirements

• Visual Studio Code version 1.105.0 or higher
• A LAS project with the flows directory containing:
  • flow_config.yaml file
  • steps/ directory containing YAML step files
  • functions/ directory (optional) containing lambda functions

JIRA Integration Requirements

To use the JIRA ticket creation feature, you need to set the following environment variables:

• JIRA_URL (optional) - Your JIRA instance URL (defaults to https://poly-ai.atlassian.net)
• JIRA_USER (required) - Your JIRA username/email
• JIRA_API_TOKEN (required) - Your JIRA API token (create one at: https://id.atlassian.com/manage-profile/security/api-tokens)
• GITHUB_ACCESS_TOKEN (required for PR updates) - GitHub personal access token with repo permissions

Installation

Navigate to and download the latest las-extension-*.vsix file (e.g., las-extension.vsix), you can find the releases here https://github.com/PolyAI-LDN/las-extension/releases

For Cursor:

1. Go to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
2. Drag the vsix file into the view
3. The extension will be installed and you may need to reload Cursor

For Visual Studio Code:

1. Go to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
2. Click the "..." menu (three dots) in the Extensions view toolbar
3. Select "Install from VSIX..." and install the extension from the vsix file
4. The extension will be installed and you may need to reload VS Code

Alternatively, install from the command line:

code --install-extension las-extension-1.0.4.vsix

Usage

Opening a Flow

Method 1: From Explorer

• Right-click on a flow directory in the VS Code Explorer
• Select "View Flow" from the context menu

Method 2: From Command Palette

• Press Ctrl+Shift+P (or Cmd+Shift+P on macOS)
• Type "View Flow" and select the command
• Select the flow directory when prompted

Method 3: Auto-detect

• If your workspace root contains a flow_config.yaml, the extension will automatically use it

Viewing Flow Details

1. Select a node: Click on any node in the graph to view its details in the right panel
2. Navigate: Use the graph controls to zoom, pan, and fit the view
3. Search: Use the search box in the toolbar to filter nodes

Editing Steps

1. Edit prompt: Double-click on the prompt text in the details panel
2. Add functions: Click "Add Function" button to insert function references
3. Configure ASR: Toggle ASR biasing options and customize keywords
4. Configure DTMF: Set DTMF collection parameters
5. Save changes: Click "Save" in the save/discard bar, or use "Save All" in the sidebar

Managing Changes

• View modified nodes: Check the left sidebar to see all nodes with unsaved changes
• Navigate to modified node: Click any node in the sidebar to jump to it in the graph
• Save All: Click "Save All" in the sidebar header to save all modified nodes at once
• Discard All: Click "Discard All" to discard all unsaved changes (with confirmation)

Commands

The extension provides the following commands (accessible via Command Palette Ctrl+Shift+P / Cmd+Shift+P):

• LAS: View Flow - Open the flow viewer for a selected flow directory
• LAS: Check for Updates - Manually check for extension updates
• LAS: Toggle Debug Mode - Enable or disable debug logging
• LAS: Create JIRA Ticket from Branch - Create a JIRA ticket with changes from the current git branch

Keyboard Shortcuts

• Escape: Close the details panel
• Double-click node: Focus and zoom to a node
• Drag nodes: Reposition nodes in the graph

Python Function Navigation

When working with Python files in your LAS project:

1. Go to Definition:

   • Place your cursor on the function name in conv.functions.functionName or flow.functions.functionName
   • Press F12 or right-click and select "Go to Definition"
   • The extension will open the function file at the definition
   • Note: Only clicking on the function name (not conv, flow, or functions) will trigger navigation

2. Find All References:

   • Place your cursor on the function name in conv.functions.functionName or flow.functions.functionName
   • Press Shift+F12 or right-click and select "Find All References"
   • The extension will show all places where this function is called across your workspace
   • Works from both function definition files and function call sites
   • Note: Only clicking on the function name will find references

3. Hover Information:

   • Hover over the function name in conv.functions.functionName or flow.functions.functionName
   • See function description, parameters, and file path in a tooltip

Creating JIRA Tickets

The extension can automatically create JIRA tickets from your current git branch changes:

1. Set up environment variables (see Requirements section above)
2. Run the command:
   • Press Ctrl+Shift+P (or Cmd+Shift+P on macOS)
   • Type "Create JIRA Ticket from Branch" and select the command
3. Enter project and component:
   • If the extension detects a project directory (e.g., goodyear-us), it will ask for the JIRA project key and component
   • The mapping will be saved for future use in that project directory
   • If no project directory is detected, you'll be prompted to enter the project key
4. Ticket creation:
   • The extension will create a JIRA ticket with:
     • Summary: "Changes from branch: [branch-name]"
     • Description: List of all changed files
   • If a PR exists for the branch, the ticket link will be automatically added to the PR description

Note: The extension automatically detects project directories from changed files. For example, if you have changes in goodyear-us/, it will recognize this as a project directory and cache the JIRA project/component mapping for future tickets in that directory.

Project Structure

The extension expects the following directory structure:

flow-directory/
├── flow_config.yaml      # Flow configuration
├── steps/                 # Step definitions
│   ├── step1.yaml
│   ├── step2.yaml
│   └── ...
└── functions/            # Flow-specific functions (optional)
    ├── function1.py
    └── ...

Flow Config Format

name: "My Flow"
description: "Flow description"
start_step: "step_name"

Step File Format

name: "step_name"
step_type: "collect"
prompt: "Hello, this is a prompt with {{fn:functionName}}"
asr_biasing:
  is_enabled: true
  custom_keywords: ["keyword1", "keyword2"]
dtmf_config:
  is_enabled: false

Extension Settings

This extension does not currently add any VS Code settings.

Known Issues

• Large flows with many nodes may take a moment to render
• The graph layout is automatically calculated; manual positioning is preserved but may reset on reload

Release Notes

1.0.17

Latest version includes:

• No Code Steps Support: Full support for default_step type steps with visual editing
  • Parse and display conditions and transitions from No Code Steps
  • Manage extracted entities - add/remove from available project entities
  • Create and edit conditions (Go to Step / Exit Flow) with LLM labels, descriptions, and required entities
  • Condition transitions displayed with distinct yellow/amber styling in the flow graph
• Entities Management: View and edit entities defined in config/entities.yaml
  • Add new entities with name, type, and description
  • Edit existing entity properties
  • Delete entities with confirmation
• Step Management: Create and delete flow steps directly from the UI
  • Add new steps via buttons in the flow viewer (Step, Function Step, Advanced Step)
  • Function steps auto-generate Python templates with proper imports and signatures
  • Delete steps with confirmation dialog
  • Step filenames automatically converted to snake_case while preserving display names
• Condition-based Transitions: Visual distinction for condition edges in the flow graph
  • Condition transition labels styled in amber/yellow for easy identification
  • Edges correctly created when conditions reference other steps

1.0.10

• Fix bug with multiple transitions

1.0.9

Latest version includes:

• remove 24h check for auto updates

1.0.8

Latest version includes:

• JIRA Integration: Create JIRA tickets directly from your git branch changes
  • Automatically detects project and account directories based on project.yaml files
  • Dropdown selection for JIRA projects and components
  • Automatic PR description updates with JIRA ticket links
  • Project/component mapping caching per project directory
  • Automatic ticket assignment to the current user

1.0.6

Latest version includes:

• Python language features (Go to Definition, Find All References, and Hover for conv.functions and flow.functions)
• Find All References: Find all places where functions are called across your workspace
• Precise targeting: Only clicking on the function name (not conv, flow, or functions) triggers navigation
• Optimized performance for reference searching
• Automatic and manual update checking
• Debug mode toggle
• Enhanced function resolution
• Improved error handling and logging

1.0.1

• Enhanced flow visualization
• Improved change management
• Better error handling

0.0.1

Initial release of Local Agent Studio Extension with:

• Interactive flow graph visualization
• Step editing capabilities
• ASR and DTMF configuration
• Modified nodes tracking
• Save/discard functionality
• Function reference support

Development

Testing

Inside the editor, open src/extension.ts and press F5 or run the command Debug: Start Debugging from the Command Palette (⇧⌘P). This will compile and run the extension in a new Extension Development Host window.

Project Structure

src/
├── extension.ts                    # Main extension entry point
├── cli.ts                          # CLI entry point for las-lint
├── flowParser.ts                   # Flow parsing logic
├── flowViewer.html                 # Webview UI
├── pythonFunctionResolver.ts       # Python function resolution logic
├── pythonLanguageFeatures.ts       # Python language feature providers
├── linter/
│   ├── index.ts                   # Linter activation and diagnostics
│   ├── config.ts                  # .lasrc config file handling
│   ├── README.md                  # Linter rule documentation
│   └── rules/
│       ├── pythonRules.ts         # Python lint rules
│       └── yamlRules.ts           # YAML lint rules
├── utils/
│   ├── functionUtils.ts           # Utility functions
│   ├── updateChecker.ts           # Update checking logic
│   └── debug.ts                   # Debug utilities
└── webview/
    ├── webviewContent.ts           # Webview HTML generation
    └── webviewHandlers.ts          # Message handling

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

[Add your license here]

Support

For issues, feature requests, or questions, please open an issue on the GitHub repository.

Enjoy visualizing your LAS flows! 🚀