UIAPI

const result = await api.ui.showInformationMessage(
  'File saved successfully',
  'Open', 'Dismiss'
);
 
if (result === 'Open') {
  // Handle open action
}

await api.ui.showWarningMessage('This action cannot be undone');

await api.ui.showErrorMessage('Failed to load plugin configuration');

const actionId = await api.ui.showNotification(
  'Update available',
  'info',
  [
    { id: 'install', label: 'Install Now' },
    { id: 'later', label: 'Later' }
  ]
);
 
if (actionId === 'install') {
  // Install update
}

const name = await api.ui.showInputBox({
  title: 'Enter Name',
  prompt: 'Please enter your name',
  placeholder: 'John Doe',
  validateInput: (value) => {
    if (!value || value.trim().length === 0) {
      return 'Name cannot be empty';
    }
    return null;
  }
});
 
if (name) {
  console.log('User entered:', name);
}

const apiKey = await api.ui.showPrompt({
  title: 'API Configuration',
  message: 'Enter your API key',
  placeholder: 'sk-...'
});

const confirmed = await api.ui.showConfirm({
  title: 'Delete File',
  message: 'Are you sure you want to delete this file?',
  confirmText: 'Delete',
  cancelText: 'Cancel'
});
 
if (confirmed) {
  // Delete the file
}

const result = await api.ui.showDialog({
  title: 'Save Changes',
  message: 'Do you want to save changes?',
  type: 'warning',
  buttons: [
    { id: 'save', label: 'Save', primary: true },
    { id: 'discard', label: 'Discard' },
    { id: 'cancel', label: 'Cancel' }
  ],
  defaultButton: 'save',
  cancelButton: 'cancel',
  checkboxLabel: 'Always save automatically',
  checkboxChecked: false
});
 
if (result.buttonId === 'save') {
  // Save changes
  if (result.checkboxChecked) {
    // Enable auto-save
  }
}

const selected = await api.ui.showQuickPick(
  [
    { label: 'Option 1', description: 'First option', detail: 'More details about option 1' },
    { label: 'Option 2', description: 'Second option' },
    { label: 'Option 3', description: 'Third option' }
  ],
  {
    title: 'Select an Option',
    placeholder: 'Type to search...',
    canPickMany: false
  }
);
 
if (selected) {
  console.log('Selected:', selected.label);
}

const files = await api.ui.showOpenDialog({
  title: 'Select Files',
  canSelectMany: true,
  filters: {
    'Images': ['png', 'jpg', 'jpeg', 'gif'],
    'All Files': ['*']
  }
});
 
if (files) {
  console.log('Selected files:', files);
}

const savePath = await api.ui.showSaveDialog({
  title: 'Save Export',
  defaultUri: '/path/to/export.json',
  filters: {
    'JSON': ['json'],
    'All Files': ['*']
  }
});
 
if (savePath) {
  // Save file to savePath
}

const panel = api.ui.addPanel({
  id: 'my-panel',
  title: 'My Panel',
  position: 'sidebar-left',
  icon: 'list',
  component: MyPanelComponent,
  props: { data: initialData }
});

api.ui.removePanel('my-panel');

api.ui.updatePanel('my-panel', {
  data: updatedData,
  loading: false
});

const disposable = api.ui.registerPanel({
  id: 'my-panel',
  title: 'My Panel',
  location: 'sidebar',
  icon: 'list',
  component: MyPanelComponent,
  initialState: { data: [] }
});
 
// Later, to remove:
disposable.dispose();

const result = await api.ui.withProgress(
  {
    location: 'notification',
    title: 'Processing Files',
    cancellable: true
  },
  async (progress, token) => {
    for (let i = 0; i < 100; i++) {
      if (token.isCancellationRequested) {
        return null;
      }
 
      progress.report({
        message: `Processing file ${i + 1}/100`,
        increment: 1
      });
 
      await processFile(i);
    }
    return 'Complete';
  }
);

interface TreeDataProvider {
  getChildren(element?: TreeItem): Promise<TreeItem[]>
  getTreeItem(element: TreeItem): Promise<TreeItem>
  onDidChangeTreeData?: Event<TreeItem | undefined>
}
 
interface TreeItem {
  id: string
  label: string
  collapsibleState?: 'none' | 'collapsed' | 'expanded'
  iconPath?: string
  contextValue?: string
  command?: { command: string, arguments: any[] }
  children?: TreeItem[]
}

const provider = {
  getChildren: async (element) => {
    if (!element) {
      // Root level
      return [
        { id: 'folder1', label: 'Folder 1', collapsibleState: 'collapsed' },
        { id: 'folder2', label: 'Folder 2', collapsibleState: 'collapsed' }
      ];
    }
    // Child items
    return [
      { id: 'item1', label: 'Item 1', collapsibleState: 'none' },
      { id: 'item2', label: 'Item 2', collapsibleState: 'none' }
    ];
  },
  getTreeItem: async (element) => element
};
 
const disposable = api.ui.registerTreeDataProvider('myTreeView', provider, {
  title: 'My Tree View'
});

const statusItem = api.ui.registerStatusBarItem({
  id: 'my-status',
  text: '$(check) Ready',
  tooltip: 'Plugin is ready',
  alignment: 2, // Right
  priority: 100,
  command: 'myPlugin.showInfo'
});
 
statusItem.show();
 
// Update text
statusItem.text = '$(sync~spin) Processing...';
 
// Later
statusItem.dispose();

const output = api.ui.createOutputChannel('My Plugin');
 
output.appendLine('Plugin initialized');
output.appendLine('Processing...');
output.show(true); // Show without stealing focus
 
// Later
output.appendLine('Complete!');
output.dispose();

const webview = api.ui.registerWebviewPanel({
  id: 'my-webview',
  title: 'My Webview',
  html: `
    <!DOCTYPE html>
    <html>
      <head>
        <style>body { font-family: sans-serif; }</style>
      </head>
      <body>
        <h1>Hello from Webview</h1>
        <button id="btn">Send Message</button>
        <script>
          const vscode = acquireVsCodeApi();
          document.getElementById('btn').addEventListener('click', () => {
            vscode.postMessage({ type: 'buttonClicked' });
          });
        </script>
      </body>
    </html>
  `
});
 
// Listen for messages from webview
webview.onDidReceiveMessage((message) => {
  if (message.type === 'buttonClicked') {
    console.log('Button clicked in webview');
  }
});
 
// Send message to webview
webview.postMessage({ type: 'update', data: 'New data' });

const disposable = api.ui.registerMenu({
  id: 'my-menu',
  label: 'My Menu Item',
  group: 'navigation',
  order: 1,
  command: 'myPlugin.action',
  icon: 'settings'
});

const disposable = api.ui.registerToolbar({
  id: 'my-toolbar',
  title: 'My Toolbar',
  location: 'editor',
  items: [
    { command: 'myPlugin.action1', icon: 'play', tooltip: 'Action 1' },
    { command: 'myPlugin.action2', icon: 'stop', tooltip: 'Action 2' }
  ]
});

const terminal = api.ui.createTerminal({
  name: 'My Plugin',
  cwd: '/path/to/project'
});
 
terminal.show();
terminal.sendText('npm install');

// Panel events
api.ui.on('panel_added', ({ id, panel }) => {});
api.ui.on('panel_removed', ({ id }) => {});
api.ui.on('panel_updated', ({ id, props }) => {});
 
// Output channel events
api.ui.on('output-channel-created', ({ name }) => {});
api.ui.on('output-channel-update', ({ name, lines }) => {});
api.ui.on('output-channel-show', ({ name }) => {});
api.ui.on('output-channel-hide', ({ name }) => {});
 
// Progress events
api.ui.on('progress-start', ({ id, title }) => {});
api.ui.on('progress-update', ({ id, message, percentage }) => {});
api.ui.on('progress-end', ({ id }) => {});
 
// Tree provider events
api.ui.on('tree-provider-registered', ({ viewId, provider }) => {});
api.ui.on('tree-provider-unregistered', ({ viewId }) => {});
 
// Webview events
api.ui.on('webview-registered', ({ panelId, panel }) => {});
api.ui.on('webview-disposed', ({ panelId }) => {});

const action = await api.ui.showInformationMessage(
  'Configuration updated',
  'Reload Now', 'Later'
);

await api.ui.withProgress(
  { title: 'Loading...', cancellable: true },
  async (progress, token) => {
    // Your task
  }
);

export function deactivate() {
  statusItem.dispose();
  outputChannel.dispose();
  panelDisposable.dispose();
}