@eclipse-lyra/extension-howto-system 0.0.0

package/dist/howto-extension-8r07TyoY.js

@@ -0,0 +1,1375 @@
+import { subscribe, TOPIC_CONTRIBUTEIONS_CHANGED, contributionRegistry, createLogger, TOPIC_WORKSPACE_CHANGED, TOPIC_WORKSPACE_CONNECTED, watchSignal, activeEditorSignal, partDirtySignal, workspaceService, File, appLoaderService, appSettings, LyraWidget, toastError, commandRegistry, rootContext, registerAll, publish, TOOLBAR_BOTTOM_END } from "@eclipse-lyra/core";
+import { TOPIC_AICONFIG_CHANGED, KEY_AI_CONFIG } from "@eclipse-lyra/extension-ai-system/api";
+import { css, nothing, html } from "lit";
+import { state, customElement } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
+const logger$1 = createLogger("HowToService");
+const HOWTO_CONTRIBUTION_TARGET = "system.howtos";
+class HowToService {
+  constructor() {
+    this.contributions = /* @__PURE__ */ new Map();
+    this.loadContributions();
+    subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event) => {
+      if (event.target === HOWTO_CONTRIBUTION_TARGET) {
+        this.loadContributions();
+      }
+    });
+  }
+  /**
+   * Load contributions from the contribution registry
+   */
+  loadContributions() {
+    const contributions = contributionRegistry.getContributions(HOWTO_CONTRIBUTION_TARGET);
+    this.contributions.clear();
+    for (const contribution of contributions) {
+      if (!contribution.id) {
+        logger$1.warn("HowTo contribution missing id, skipping");
+        continue;
+      }
+      if (!contribution.label) {
+        const title2 = typeof contribution.title === "function" ? contribution.title() : contribution.title;
+        contribution.label = title2;
+      }
+      if (!contribution.steps || contribution.steps.length === 0) {
+        logger$1.warn(`HowTo contribution "${contribution.id}" has no steps, skipping`);
+        continue;
+      }
+      const stepIds = /* @__PURE__ */ new Set();
+      for (const step of contribution.steps) {
+        if (stepIds.has(step.id)) {
+          logger$1.warn(`HowTo contribution "${contribution.id}" has duplicate step ID: "${step.id}"`);
+          continue;
+        }
+        stepIds.add(step.id);
+      }
+      this.contributions.set(contribution.id, contribution);
+      const title = typeof contribution.title === "function" ? contribution.title() : contribution.title;
+      logger$1.debug(`Loaded HowTo contribution: ${title} (${contribution.id})`);
+    }
+    logger$1.info(`Loaded ${this.contributions.size} HowTo contributions`);
+  }
+  /**
+   * Get a HowTo Contribution by ID
+   * 
+   * @param contributionId The ID of the contribution
+   * @returns The contribution or undefined if not found
+   */
+  getContribution(contributionId) {
+    return this.contributions.get(contributionId);
+  }
+  /**
+   * Get all registered HowTo Contributions
+   * 
+   * @returns Array of all contributions
+   */
+  getAllContributions() {
+    return Array.from(this.contributions.values());
+  }
+  /**
+   * Get HowTo Contributions by category
+   * 
+   * @param category The category to filter by
+   * @returns Array of contributions in the category
+   */
+  getContributionsByCategory(category) {
+    return Array.from(this.contributions.values()).filter((contrib) => contrib.category === category);
+  }
+  /**
+   * Check if a contribution exists
+   * 
+   * @param contributionId The ID of the contribution
+   * @returns True if the contribution exists
+   */
+  hasContribution(contributionId) {
+    return this.contributions.has(contributionId);
+  }
+}
+const howToService = new HowToService();
+const ONBOARDING_FILE_NAME = "welcome.txt";
+async function getOnboardingFilePath() {
+  const workspace = await workspaceService.getWorkspace();
+  if (!workspace) return null;
+  const folders = await workspaceService.getFolders();
+  if (folders.length === 0) return null;
+  const firstFolderName = folders[0].name;
+  return `${firstFolderName}/${ONBOARDING_FILE_NAME}`;
+}
+function isEditorContentProvider$1(editor) {
+  return editor && typeof editor.getFilePath === "function";
+}
+async function isWorkspaceSelected() {
+  return workspaceService.isConnected();
+}
+async function onboardingFileExists() {
+  const path = await getOnboardingFilePath();
+  if (!path) return false;
+  const workspace = await workspaceService.getWorkspace();
+  if (!workspace) return false;
+  try {
+    const resource = await workspace.getResource(path);
+    return resource instanceof File;
+  } catch {
+    return false;
+  }
+}
+function isOnboardingFileOpen() {
+  const activeEditor = activeEditorSignal.get();
+  if (!activeEditor || !isEditorContentProvider$1(activeEditor)) {
+    return false;
+  }
+  const filePath = activeEditor.getFilePath();
+  return filePath === ONBOARDING_FILE_NAME || filePath?.endsWith("/" + ONBOARDING_FILE_NAME) === true;
+}
+function isActiveEditorClean() {
+  if (!isOnboardingFileOpen()) return false;
+  const activeEditor = activeEditorSignal.get();
+  if (!activeEditor) return false;
+  return activeEditor.isDirty() === false;
+}
+function isOnboardingFileClosed() {
+  return !isOnboardingFileOpen();
+}
+function getAppName$1() {
+  const currentApp = appLoaderService.getCurrentApp();
+  return currentApp?.name || "AppSpace";
+}
+const onboardingContribution = {
+  id: "appspace.onboarding",
+  title: () => `Welcome to ${getAppName$1()}`,
+  description: () => `Get started with ${getAppName$1()} by learning the basics of workspace and file management`,
+  icon: "graduation-cap",
+  // label will be set from title in howto-service.ts
+  label: "",
+  category: "Getting Started",
+  initialize: (context) => {
+    const cleanups = [];
+    subscribe(TOPIC_WORKSPACE_CHANGED, () => {
+      context.requestUpdate();
+    });
+    subscribe(TOPIC_WORKSPACE_CONNECTED, () => {
+      context.requestUpdate();
+    });
+    cleanups.push(
+      watchSignal(activeEditorSignal, () => {
+        context.requestUpdate();
+      })
+    );
+    cleanups.push(
+      watchSignal(partDirtySignal, () => {
+        context.requestUpdate();
+      })
+    );
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  },
+  steps: [
+    {
+      id: "create-text-file",
+      title: "Create welcome.txt",
+      description: `Create a new text file called "welcome.txt" in your workspace. If you don't have a workspace selected, choose one first.`,
+      preCondition: async () => {
+        return await isWorkspaceSelected();
+      },
+      postCondition: async () => {
+        return await onboardingFileExists();
+      },
+      command: "touch",
+      commandParams: async () => {
+        const path = await getOnboardingFilePath();
+        return path ? {
+          path,
+          contents: "Welcome to AppSpace!\n\nThis is your first file. You can edit it and save your changes."
+        } : {};
+      }
+    },
+    {
+      id: "open-text-file",
+      title: "Open welcome.txt",
+      description: 'Open the "welcome.txt" file in the editor.',
+      preCondition: async () => {
+        return await onboardingFileExists();
+      },
+      postCondition: () => {
+        return isOnboardingFileOpen();
+      },
+      command: "open_editor",
+      commandParams: async () => {
+        const path = await getOnboardingFilePath();
+        return path ? { path } : {};
+      }
+    },
+    {
+      id: "edit-and-save",
+      title: "Type something and save",
+      description: "Type some text in the editor to modify the file, then save it using Ctrl+S or the save button.",
+      preCondition: () => {
+        return isOnboardingFileOpen();
+      },
+      postCondition: () => {
+        return isActiveEditorClean();
+      }
+      // No command - user manually edits and saves
+    },
+    {
+      id: "close-text-file",
+      title: "Close the file",
+      description: "Close the editor tab by clicking the X button on the tab.",
+      preCondition: () => {
+        return isOnboardingFileOpen();
+      },
+      postCondition: () => {
+        return isOnboardingFileClosed();
+      }
+      // No command - user manually closes the tab
+    }
+  ]
+};
+contributionRegistry.registerContribution(HOWTO_CONTRIBUTION_TARGET, onboardingContribution);
+const AI_CONFIG_EDITOR_KEY = ".system.ai-config";
+function isEditorContentProvider(editor) {
+  return editor && typeof editor.getFilePath === "function";
+}
+function isAIConfigEditorOpen() {
+  const activeEditor = activeEditorSignal.get();
+  if (!activeEditor || !isEditorContentProvider(activeEditor)) {
+    return false;
+  }
+  const filePath = activeEditor.getFilePath();
+  return filePath === AI_CONFIG_EDITOR_KEY;
+}
+async function isLLMProviderConfigured() {
+  try {
+    const config = await appSettings.get(KEY_AI_CONFIG);
+    if (!config || !config.defaultProvider) {
+      return false;
+    }
+    const defaultProvider = config.providers?.find((p) => p.name === config.defaultProvider);
+    if (!defaultProvider) {
+      return false;
+    }
+    return !!defaultProvider.apiKey && defaultProvider.apiKey.trim() !== "";
+  } catch {
+    return false;
+  }
+}
+function isAIConfigEditorDirty() {
+  const activeEditor = activeEditorSignal.get();
+  if (!activeEditor || !isEditorContentProvider(activeEditor)) {
+    return false;
+  }
+  const filePath = activeEditor.getFilePath();
+  if (filePath !== AI_CONFIG_EDITOR_KEY) {
+    return false;
+  }
+  return activeEditor.isDirty() === true;
+}
+function isAIConfigEditorSaved() {
+  if (!isAIConfigEditorOpen()) {
+    return false;
+  }
+  return !isAIConfigEditorDirty();
+}
+function isAIConfigEditorClosed() {
+  return !isAIConfigEditorOpen();
+}
+async function hasTypedInChat() {
+  try {
+    const sessions = await appSettings.get("aiChatSessions");
+    if (!sessions || typeof sessions !== "object") {
+      return false;
+    }
+    for (const sessionId in sessions) {
+      const session = sessions[sessionId];
+      if (session?.history && Array.isArray(session.history)) {
+        const hasUserMessage = session.history.some(
+          (msg) => msg.role === "user" && msg.content && msg.content.trim() !== ""
+        );
+        if (hasUserMessage) {
+          return true;
+        }
+      }
+    }
+    return false;
+  } catch {
+    return false;
+  }
+}
+function getAppName() {
+  const currentApp = appLoaderService.getCurrentApp();
+  return currentApp?.name || "AppSpace";
+}
+const aiSetupContribution = {
+  id: "appspace.ai-setup",
+  title: () => `Set up AI in ${getAppName()}`,
+  description: () => `Configure an LLM provider to enable AI chat features in ${getAppName()}`,
+  icon: "robot",
+  label: "",
+  category: "Getting Started",
+  initialize: (context) => {
+    const cleanups = [];
+    cleanups.push(
+      watchSignal(activeEditorSignal, () => {
+        context.requestUpdate();
+      })
+    );
+    cleanups.push(
+      watchSignal(partDirtySignal, () => {
+        context.requestUpdate();
+      })
+    );
+    subscribe(TOPIC_AICONFIG_CHANGED, () => {
+      context.requestUpdate();
+    });
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  },
+  steps: [
+    {
+      id: "open-ai-settings",
+      title: "Open AI Settings",
+      description: "Open the AI settings editor by clicking the robot icon in the toolbar or using the command palette.",
+      preCondition: () => true,
+      // Always available
+      postCondition: () => isAIConfigEditorOpen(),
+      command: "open_ai_config"
+    },
+    {
+      id: "configure-llm-provider",
+      title: "Configure LLM Provider",
+      description: "Select a provider as default and enter an API key. Make sure to save your changes using Ctrl+S or the save button.",
+      preCondition: () => isAIConfigEditorOpen(),
+      postCondition: async () => {
+        const configured = await isLLMProviderConfigured();
+        const saved = isAIConfigEditorSaved();
+        return configured && saved;
+      }
+      // No command - user manually configures in the editor
+    },
+    {
+      id: "save-and-close",
+      title: "Save and Close",
+      description: "Save your changes (if not already saved) and close the AI settings editor tab.",
+      preCondition: () => isAIConfigEditorOpen(),
+      postCondition: () => isAIConfigEditorClosed()
+      // No command - user manually saves and closes the tab
+    },
+    {
+      id: "type-in-chat",
+      title: "Type in Chat",
+      description: "Open the AI chat view (if not already open) and type a message to test your AI configuration.",
+      preCondition: async () => await isLLMProviderConfigured(),
+      postCondition: async () => await hasTypedInChat()
+      // No command - user manually types in chat
+    }
+  ]
+};
+contributionRegistry.registerContribution(HOWTO_CONTRIBUTION_TARGET, aiSetupContribution);
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const TOPIC_SHOW_HOWTO_PANEL = "howto/show-panel";
+const TOPIC_TOGGLE_HOWTO_PANEL = "howto/toggle-panel";
+const SETTINGS_KEY = "howto-panel";
+const DEFAULT_POSITION = { x: 100, y: 100 };
+const DEFAULT_PANEL_SIZE = { width: 400, height: 300 };
+let LyraHowToPanel = class extends LyraWidget {
+  constructor() {
+    super(...arguments);
+    this.contributions = [];
+    this.activeContributionId = null;
+    this.stepStates = /* @__PURE__ */ new Map();
+    this.isMinimized = false;
+    this.isVisible = false;
+    this.positionX = DEFAULT_POSITION.x;
+    this.positionY = DEFAULT_POSITION.y;
+    this.isDragging = false;
+    this.dragPreviewPosition = null;
+    this.dragStartPosition = { x: 0, y: 0 };
+    this.panelRef = createRef();
+    this.handleDragStart = (e) => {
+      const target = e.target;
+      if (this.isDragTarget(target) || !this.panelRef.value) {
+        return;
+      }
+      const rect = this.panelRef.value.getBoundingClientRect();
+      this.dragStartPosition = {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      };
+      this.isDragging = true;
+      this.dragPreviewPosition = { x: this.positionX, y: this.positionY };
+      this.requestUpdate();
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    this.handleDragMove = (e) => {
+      if (!this.isDragging || !this.dragPreviewPosition) {
+        return;
+      }
+      const bounds = this.getViewportBounds();
+      const newX = Math.max(0, Math.min(e.clientX - this.dragStartPosition.x, bounds.maxX));
+      const newY = Math.max(0, Math.min(e.clientY - this.dragStartPosition.y, bounds.maxY));
+      if (this.dragPreviewPosition.x !== newX || this.dragPreviewPosition.y !== newY) {
+        this.dragPreviewPosition = { x: newX, y: newY };
+        this.requestUpdate();
+      }
+    };
+    this.handleDragEnd = async () => {
+      if (!this.isDragging || !this.dragPreviewPosition) {
+        return;
+      }
+      this.isDragging = false;
+      const previewPos = this.dragPreviewPosition;
+      this.dragPreviewPosition = null;
+      this.positionX = previewPos.x;
+      this.positionY = previewPos.y;
+      await this.saveSettings();
+      this.requestUpdate();
+    };
+  }
+  async doBeforeUI() {
+    this.loadContributions();
+    subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event) => {
+      if (event.target === HOWTO_CONTRIBUTION_TARGET) {
+        this.loadContributions();
+        this.requestUpdate();
+      }
+    });
+    subscribe(TOPIC_SHOW_HOWTO_PANEL, () => this.showPanel());
+    subscribe(TOPIC_TOGGLE_HOWTO_PANEL, () => this.toggleVisibility());
+    await this.loadSettings();
+    const hasWorkspace = workspaceService.isConnected();
+    if (!hasWorkspace && this.isVisible === false) {
+      const settings = await appSettings.getDialogSetting(SETTINGS_KEY);
+      if (!settings || settings.visible === void 0) {
+        this.isVisible = true;
+        await this.saveSettings();
+      }
+    }
+    subscribe(TOPIC_WORKSPACE_CONNECTED, () => {
+      const checkAutoHide = async () => {
+        const settings = await appSettings.getDialogSetting(SETTINGS_KEY);
+        if (!settings || settings.visible === void 0) ;
+      };
+      checkAutoHide();
+    });
+  }
+  doInitUI() {
+    this.boundHandleDragMove = this.handleDragMove.bind(this);
+    this.boundHandleDragEnd = this.handleDragEnd.bind(this);
+    document.addEventListener("mousemove", this.boundHandleDragMove);
+    document.addEventListener("mouseup", this.boundHandleDragEnd);
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+  }
+  loadContributions() {
+    this.contributions = howToService.getAllContributions();
+  }
+  async loadSettings() {
+    const settings = await appSettings.getDialogSetting(SETTINGS_KEY);
+    if (settings) {
+      if (settings.position) {
+        this.positionX = settings.position.x || DEFAULT_POSITION.x;
+        this.positionY = settings.position.y || DEFAULT_POSITION.y;
+      }
+      if (settings.visible !== void 0) {
+        this.isVisible = settings.visible;
+      }
+    }
+  }
+  async saveSettings() {
+    await appSettings.setDialogSetting(SETTINGS_KEY, {
+      position: { x: this.positionX, y: this.positionY },
+      visible: this.isVisible
+    });
+  }
+  isDragTarget(target) {
+    return !!(target.closest(".header-actions") || target.closest("wa-button"));
+  }
+  getViewportBounds() {
+    const panelWidth = this.panelRef.value?.offsetWidth || DEFAULT_PANEL_SIZE.width;
+    const panelHeight = this.panelRef.value?.offsetHeight || DEFAULT_PANEL_SIZE.height;
+    return {
+      maxX: window.innerWidth - panelWidth,
+      maxY: window.innerHeight - panelHeight
+    };
+  }
+  async startHowTo(contributionId) {
+    const contribution = howToService.getContribution(contributionId);
+    if (!contribution) {
+      toastError(`HowTo "${contributionId}" not found`);
+      return;
+    }
+    this.cleanupHowTo();
+    this.activeContributionId = contributionId;
+    this.isMinimized = false;
+    const states = contribution.steps.map((step) => ({
+      step,
+      status: "pending"
+    }));
+    this.stepStates.set(contributionId, states);
+    if (contribution.initialize) {
+      const context = {
+        requestUpdate: () => this.recheckActiveStepConditions(),
+        contributionId
+      };
+      this.howtoCleanup = contribution.initialize(context) || void 0;
+    }
+    this.requestUpdate();
+    await this.checkPreConditions(contributionId, 0);
+  }
+  cleanupHowTo() {
+    if (this.howtoCleanup) {
+      this.howtoCleanup();
+      this.howtoCleanup = void 0;
+    }
+  }
+  getStepState(contributionId, stepIndex) {
+    const states = this.stepStates.get(contributionId);
+    return states && stepIndex < states.length ? states[stepIndex] : null;
+  }
+  async checkPreConditions(contributionId, stepIndex) {
+    const state2 = this.getStepState(contributionId, stepIndex);
+    if (!state2) return;
+    if (!state2.step.preCondition) {
+      state2.preConditionMet = true;
+      this.requestUpdate();
+      return;
+    }
+    try {
+      state2.preConditionMet = await state2.step.preCondition();
+      this.requestUpdate();
+    } catch (error) {
+      console.error(`Pre-condition check failed for step ${state2.step.id}:`, error);
+      state2.preConditionMet = false;
+      this.requestUpdate();
+    }
+  }
+  async checkPostConditions(contributionId, stepIndex) {
+    const state2 = this.getStepState(contributionId, stepIndex);
+    if (!state2) return;
+    if (!state2.step.postCondition) {
+      this.completeStep(contributionId, stepIndex);
+      return;
+    }
+    try {
+      const result = await state2.step.postCondition();
+      state2.postConditionMet = result;
+      state2.status = result ? "completed" : "failed";
+      if (result) {
+        this.activateNextStep(contributionId, stepIndex);
+      }
+      this.requestUpdate();
+    } catch (error) {
+      console.error(`Post-condition check failed for step ${state2.step.id}:`, error);
+      state2.postConditionMet = false;
+      state2.status = "failed";
+      this.requestUpdate();
+    }
+  }
+  completeStep(contributionId, stepIndex) {
+    const state2 = this.getStepState(contributionId, stepIndex);
+    if (!state2) return;
+    state2.status = "completed";
+    this.activateNextStep(contributionId, stepIndex);
+    this.requestUpdate();
+  }
+  async activateNextStep(contributionId, stepIndex) {
+    const states = this.stepStates.get(contributionId);
+    if (!states || stepIndex + 1 >= states.length) return;
+    const nextState = states[stepIndex + 1];
+    nextState.status = "active";
+    await this.checkPreConditions(contributionId, stepIndex + 1);
+  }
+  /**
+   * Re-checks conditions for active and pending steps when workspace or editor state changes
+   */
+  async recheckActiveStepConditions() {
+    if (!this.activeContributionId) return;
+    const states = this.stepStates.get(this.activeContributionId);
+    if (!states) return;
+    const activeStepIndex = states.findIndex((state2) => state2.status === "active");
+    if (activeStepIndex !== -1) {
+      const activeState = states[activeStepIndex];
+      const step = activeState.step;
+      if (step.postCondition) {
+        try {
+          const result = await step.postCondition();
+          if (result && activeState.status === "active") {
+            await this.checkPostConditions(this.activeContributionId, activeStepIndex);
+            return;
+          }
+        } catch (error) {
+        }
+      }
+    }
+    for (let i = 0; i < states.length; i++) {
+      const state2 = states[i];
+      if (state2.status === "pending" && state2.step.preCondition) {
+        await this.checkPreConditions(this.activeContributionId, i);
+      }
+    }
+    this.requestUpdate();
+  }
+  async executeStep(contributionId, stepIndex) {
+    const state2 = this.getStepState(contributionId, stepIndex);
+    if (!state2) return;
+    if (!await this.validatePreConditions(state2, contributionId, stepIndex)) {
+      return;
+    }
+    state2.status = "active";
+    this.requestUpdate();
+    if (state2.step.command && !await this.executeStepCommand(state2)) {
+      return;
+    }
+    await this.checkPostConditions(contributionId, stepIndex);
+  }
+  async validatePreConditions(state2, contributionId, stepIndex) {
+    if (!state2.step.preCondition) {
+      return true;
+    }
+    if (state2.preConditionMet === void 0 || state2.preConditionMet === false) {
+      await this.checkPreConditions(contributionId, stepIndex);
+    }
+    if (state2.preConditionMet !== true) {
+      toastError(`Pre-conditions not met for step: ${state2.step.title}`);
+      return false;
+    }
+    return true;
+  }
+  async executeStepCommand(state2) {
+    if (!state2.step.command) {
+      return true;
+    }
+    try {
+      const rawParams = state2.step.commandParams;
+      const params = typeof rawParams === "function" ? await rawParams() : rawParams || {};
+      const execContext = commandRegistry.createExecutionContext(params);
+      await commandRegistry.execute(state2.step.command, execContext);
+      return true;
+    } catch (error) {
+      console.error(`Failed to execute command for step ${state2.step.id}:`, error);
+      toastError(`Failed to execute step: ${state2.step.title}`);
+      state2.status = "failed";
+      this.requestUpdate();
+      return false;
+    }
+  }
+  async runStepCommand(contributionId, stepIndex) {
+    const state2 = this.getStepState(contributionId, stepIndex);
+    if (!state2 || !state2.step.command) {
+      return;
+    }
+    if (state2.step.preCondition) {
+      const preConditionMet = await state2.step.preCondition();
+      if (!preConditionMet) {
+        toastError(`Pre-conditions not met for step: ${state2.step.title}`);
+        return;
+      }
+    }
+    const success = await this.executeStepCommand(state2);
+    if (success) {
+      await this.checkPostConditions(contributionId, stepIndex);
+    }
+  }
+  skipStep(contributionId, stepIndex) {
+    const state2 = this.getStepState(contributionId, stepIndex);
+    if (!state2 || !state2.step.optional) return;
+    state2.status = "skipped";
+    this.activateNextStep(contributionId, stepIndex);
+    this.requestUpdate();
+  }
+  closeHowTo() {
+    this.cleanupHowTo();
+    this.activeContributionId = null;
+    this.stepStates.clear();
+    this.requestUpdate();
+  }
+  toggleMinimize() {
+    this.isMinimized = !this.isMinimized;
+    this.requestUpdate();
+  }
+  async showPanel() {
+    this.isVisible = true;
+    this.isMinimized = false;
+    await this.saveSettings();
+    this.requestUpdate();
+  }
+  async hidePanel() {
+    this.isVisible = false;
+    await this.saveSettings();
+    this.requestUpdate();
+  }
+  async toggleVisibility() {
+    if (this.isVisible) {
+      await this.hidePanel();
+    } else {
+      await this.showPanel();
+    }
+  }
+  renderStep(state2, index, contributionId) {
+    const { step, status, preConditionMet, postConditionMet } = state2;
+    const isActive = status === "active";
+    const isCompleted = status === "completed";
+    const isFailed = status === "failed";
+    const isPending = status === "pending";
+    const isSkipped = status === "skipped";
+    return html`
+            <div class="step ${status}" ?data-active=${isActive}>
+                <div class="step-header">
+                    <div class="step-number">${index + 1}</div>
+                    <div class="step-title">${step.title}</div>
+                    <div class="step-status">
+                        ${step.command ? html`
+                            <wa-button 
+                                size="small" 
+                                appearance="plain" 
+                                @click=${(e) => {
+      e.stopPropagation();
+      this.runStepCommand(contributionId, index);
+    }}
+                                title="Run step command"
+                            >
+                                <wa-icon name="play"></wa-icon>
+                            </wa-button>
+                        ` : nothing}
+                        ${isCompleted ? html`<wa-icon name="check-circle" class="status-icon completed"></wa-icon>` : nothing}
+                        ${isFailed ? html`<wa-icon name="xmark-circle" class="status-icon failed"></wa-icon>` : nothing}
+                        ${isSkipped ? html`<wa-icon name="minus-circle" class="status-icon skipped"></wa-icon>` : nothing}
+                        ${isPending ? html`<wa-icon name="circle" class="status-icon pending"></wa-icon>` : nothing}
+                        ${isActive ? html`<wa-icon name="play-circle" class="status-icon active"></wa-icon>` : nothing}
+                    </div>
+                </div>
+                <div class="step-description">${step.description}</div>
+                ${step.preCondition && preConditionMet !== void 0 ? html`
+                    <div class="condition pre-condition ${preConditionMet ? "met" : "not-met"}">
+                        <wa-icon name="${preConditionMet ? "check" : "xmark"}"></wa-icon>
+                        <span>Pre-condition: ${preConditionMet ? "Met" : "Not met"}</span>
+                    </div>
+                ` : nothing}
+                ${step.postCondition && postConditionMet !== void 0 ? html`
+                    <div class="condition post-condition ${postConditionMet ? "met" : "not-met"}">
+                        <wa-icon name="${postConditionMet ? "check" : "xmark"}"></wa-icon>
+                        <span>Post-condition: ${postConditionMet ? "Met" : "Not met"}</span>
+                    </div>
+                ` : nothing}
+                ${isActive && step.optional ? html`
+                    <div class="step-actions">
+                        <wa-button size="small" appearance="outline" @click=${() => this.skipStep(contributionId, index)}>
+                            <wa-icon name="forward"></wa-icon>
+                            Skip
+                        </wa-button>
+                    </div>
+                ` : nothing}
+            </div>
+        `;
+  }
+  render() {
+    if (!this.isVisible) {
+      return nothing;
+    }
+    const activeContribution = this.activeContributionId ? howToService.getContribution(this.activeContributionId) : null;
+    const activeStepStates = this.activeContributionId ? this.stepStates.get(this.activeContributionId) || [] : [];
+    return html`
+            ${this.dragPreviewPosition ? html`
+                <div 
+                    class="howto-panel-drag-preview"
+                style=${styleMap({
+      left: `${this.dragPreviewPosition.x}px`,
+      top: `${this.dragPreviewPosition.y}px`,
+      width: `${this.panelRef.value?.offsetWidth || DEFAULT_PANEL_SIZE.width}px`,
+      height: `${this.panelRef.value?.offsetHeight || DEFAULT_PANEL_SIZE.height}px`,
+      display: "block",
+      visibility: "visible"
+    })}
+                ></div>
+            ` : nothing}
+            <div 
+                class="howto-panel ${this.isMinimized ? "minimized" : ""} ${this.dragPreviewPosition ? "dragging" : ""}"
+                style=${styleMap({
+      left: `${this.positionX}px`,
+      top: `${this.positionY}px`,
+      transform: "translateZ(0)"
+    })}
+                ${ref(this.panelRef)}
+            >
+                <div class="panel-header" @mousedown=${this.handleDragStart}>
+                    <div class="header-title">
+                        <wa-icon name="list-check"></wa-icon>
+                        <span>HowTo Workflows</span>
+                    </div>
+                    <div class="header-actions" @mousedown=${(e) => e.stopPropagation()}>
+                        <wa-button 
+                            size="small" 
+                            appearance="plain" 
+                            @click=${this.toggleMinimize}
+                            title="${this.isMinimized ? "Expand" : "Minimize"}"
+                        >
+                            <wa-icon name="${this.isMinimized ? "chevron-up" : "chevron-down"}"></wa-icon>
+                        </wa-button>
+                        <wa-button 
+                            size="small" 
+                            appearance="plain" 
+                            @click=${this.hidePanel}
+                            title="Hide Panel"
+                        >
+                            <wa-icon name="xmark"></wa-icon>
+                        </wa-button>
+                    </div>
+                </div>
+                
+                ${!this.isMinimized ? html`
+                    <div class="panel-content">
+                        ${activeContribution ? html`
+                            <div class="active-workflow">
+                                <div class="workflow-header">
+                                    <div class="workflow-title-section">
+                                        <h3>${typeof activeContribution.title === "function" ? activeContribution.title() : activeContribution.title}</h3>
+                                        ${activeContribution.description ? html`
+                                            <p class="workflow-description">${typeof activeContribution.description === "function" ? activeContribution.description() : activeContribution.description}</p>
+                                        ` : nothing}
+                                    </div>
+                                    <wa-button 
+                                        size="small" 
+                                        appearance="plain" 
+                                        @click=${this.closeHowTo}
+                                        title="Close HowTo"
+                                    >
+                                        <wa-icon name="xmark"></wa-icon>
+                                    </wa-button>
+                                </div>
+                                <div class="steps-list">
+                                    ${activeStepStates.map(
+      (state2, index) => this.renderStep(state2, index, this.activeContributionId)
+    )}
+                                </div>
+                            </div>
+                        ` : html`
+                            <div class="workflows-list">
+                                <h3>Available Workflows</h3>
+                                ${this.contributions.length === 0 ? html`
+                                    <div class="empty-state">
+                                        <wa-icon name="list-check" style="font-size: 2em; opacity: 0.5; margin-bottom: 12px;"></wa-icon>
+                                        <p>No HowTo workflows available yet.</p>
+                                        <p style="font-size: 0.9em; opacity: 0.7;">Extensions can register workflows via the contribution registry.</p>
+                                    </div>
+                                ` : this.contributions.map((contrib) => {
+      const title = typeof contrib.title === "function" ? contrib.title() : contrib.title;
+      const description = contrib.description ? typeof contrib.description === "function" ? contrib.description() : contrib.description : null;
+      return html`
+                                    <div class="workflow-item" @click=${() => this.startHowTo(contrib.id)}>
+                                        ${contrib.icon ? html`
+                                            <wa-icon name="${contrib.icon}"></wa-icon>
+                                        ` : html`
+                                            <wa-icon name="list-check"></wa-icon>
+                                        `}
+                                        <div class="workflow-info">
+                                            <div class="workflow-title">${title}</div>
+                                            ${description ? html`
+                                                <div class="workflow-desc">${description}</div>
+                                            ` : nothing}
+                                            <div class="workflow-meta">${contrib.steps.length} step${contrib.steps.length !== 1 ? "s" : ""}</div>
+                                        </div>
+                                    </div>
+                                `;
+    })}
+                            </div>
+                        `}
+                    </div>
+                ` : nothing}
+            </div>
+        `;
+  }
+};
+LyraHowToPanel.styles = css`
+        :host {
+            display: block;
+            position: fixed;
+            z-index: 10000;
+            pointer-events: none;
+        }
+
+        .howto-panel-drag-preview {
+            position: fixed !important;
+            border: 3px dashed var(--wa-color-primary-50, #0066cc) !important;
+            background: var(--wa-color-primary-05, rgba(0, 102, 204, 0.05)) !important;
+            border-radius: var(--wa-border-radius-medium, 8px);
+            z-index: 10001 !important;
+            pointer-events: none !important;
+            opacity: 0.8 !important;
+            box-sizing: border-box;
+            display: block !important;
+            visibility: visible !important;
+            min-width: 100px;
+            min-height: 100px;
+        }
+
+        :host-context(.wa-light) .howto-panel-drag-preview {
+            background: var(--wa-color-primary-95);
+            border-color: var(--wa-color-primary-50);
+        }
+
+        .howto-panel {
+            position: fixed !important;
+            width: 400px;
+            max-height: 600px;
+            background: var(--wa-color-surface-raised, var(--wa-color-neutral-05));
+            border: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-loud, var(--wa-color-neutral-25));
+            border-radius: var(--wa-border-radius-medium, 8px);
+            box-shadow: var(--wa-shadow-large, 0 8px 24px rgba(0, 0, 0, 0.8));
+            pointer-events: all;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        :host-context(.wa-light) .howto-panel {
+            background: var(--wa-color-surface-raised, var(--wa-color-neutral-95));
+            border-color: var(--wa-color-neutral-border-loud, var(--wa-color-neutral-75));
+            box-shadow: var(--wa-shadow-large, 0 8px 24px rgba(0, 0, 0, 0.2));
+        }
+
+        .howto-panel.minimized {
+            max-height: auto;
+        }
+
+        .howto-panel.dragging {
+            opacity: 0.5;
+        }
+
+        .panel-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: var(--wa-spacing-medium, 12px) var(--wa-spacing-large, 16px);
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-10));
+            border-bottom: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-loud, var(--wa-color-neutral-25));
+            cursor: move;
+            user-select: none;
+        }
+
+        :host-context(.wa-light) .panel-header {
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-90));
+            border-bottom-color: var(--wa-color-neutral-border-loud, var(--wa-color-neutral-75));
+        }
+
+        .header-title {
+            display: flex;
+            align-items: center;
+            gap: var(--wa-spacing-small, 8px);
+            font-weight: 600;
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-90));
+        }
+
+        :host-context(.wa-light) .header-title {
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-10));
+        }
+
+        .header-actions {
+            display: flex;
+            gap: var(--wa-spacing-x-small, 4px);
+        }
+
+        .panel-content {
+            flex: 1;
+            overflow-y: auto;
+            padding: var(--wa-spacing-large, 16px);
+        }
+
+        .workflows-list h3 {
+            margin: 0 0 var(--wa-spacing-medium, 12px) 0;
+            font-size: var(--wa-font-size-medium, 14px);
+            font-weight: 600;
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-80));
+        }
+
+        :host-context(.wa-light) .workflows-list h3 {
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-20));
+        }
+
+        .workflow-item {
+            display: flex;
+            align-items: flex-start;
+            gap: var(--wa-spacing-medium, 12px);
+            padding: var(--wa-spacing-medium, 12px);
+            margin-bottom: var(--wa-spacing-small, 8px);
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-10));
+            border: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-subtle, var(--wa-color-neutral-20));
+            border-radius: var(--wa-border-radius-small, 6px);
+            cursor: pointer;
+            transition: all var(--wa-transition-medium, 0.2s);
+        }
+
+        :host-context(.wa-light) .workflow-item {
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-90));
+            border-color: var(--wa-color-neutral-border-subtle, var(--wa-color-neutral-80));
+        }
+
+        .workflow-item:hover {
+            background: var(--wa-color-mix-hover, var(--wa-color-neutral-15));
+            border-color: var(--wa-color-neutral-border-loud, var(--wa-color-neutral-30));
+        }
+
+        :host-context(.wa-light) .workflow-item:hover {
+            background: var(--wa-color-mix-hover, var(--wa-color-neutral-85));
+            border-color: var(--wa-color-neutral-border-loud, var(--wa-color-neutral-70));
+        }
+
+        .workflow-info {
+            flex: 1;
+        }
+
+        .workflow-title {
+            font-weight: 600;
+            margin-bottom: var(--wa-spacing-x-small, 4px);
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-90));
+        }
+
+        :host-context(.wa-light) .workflow-title {
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-10));
+        }
+
+        .workflow-desc {
+            font-size: var(--wa-font-size-small, 12px);
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-70));
+            margin-bottom: var(--wa-spacing-x-small, 4px);
+        }
+
+        :host-context(.wa-light) .workflow-desc {
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-30));
+        }
+
+        .workflow-meta {
+            font-size: var(--wa-font-size-x-small, 11px);
+            color: var(--wa-color-text-quiet, var(--wa-color-neutral-60));
+        }
+
+        :host-context(.wa-light) .workflow-meta {
+            color: var(--wa-color-text-quiet, var(--wa-color-neutral-40));
+        }
+
+        .active-workflow {
+            display: flex;
+            flex-direction: column;
+            gap: var(--wa-spacing-large, 16px);
+        }
+
+        .workflow-header {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: var(--wa-spacing-medium, 12px);
+            margin-bottom: var(--wa-spacing-medium, 12px);
+        }
+
+        .workflow-title-section {
+            flex: 1;
+        }
+
+        .workflow-header h3 {
+            margin: 0 0 var(--wa-spacing-small, 8px) 0;
+            font-size: var(--wa-font-size-large, 16px);
+            font-weight: 600;
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-90));
+        }
+
+        :host-context(.wa-light) .workflow-header h3 {
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-10));
+        }
+
+        .workflow-description {
+            margin: 0;
+            font-size: var(--wa-font-size-medium, 13px);
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-70));
+        }
+
+        :host-context(.wa-light) .workflow-description {
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-30));
+        }
+
+        .steps-list {
+            display: flex;
+            flex-direction: column;
+            gap: var(--wa-spacing-medium, 12px);
+        }
+
+        .step {
+            padding: var(--wa-spacing-medium, 12px);
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-10));
+            border: var(--wa-border-width-s, 1px) solid var(--wa-color-neutral-border-subtle, var(--wa-color-neutral-20));
+            border-radius: var(--wa-border-radius-small, 6px);
+            transition: all var(--wa-transition-medium, 0.2s);
+        }
+
+        :host-context(.wa-light) .step {
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-90));
+            border-color: var(--wa-color-neutral-border-subtle, var(--wa-color-neutral-80));
+        }
+
+        .step[data-active="true"] {
+            border-color: var(--wa-color-primary-50);
+            background: var(--wa-color-primary-05);
+        }
+
+        :host-context(.wa-light) .step[data-active="true"] {
+            background: var(--wa-color-primary-95);
+            border-color: var(--wa-color-primary-50);
+        }
+
+        .step.completed {
+            border-color: var(--wa-color-success-50);
+            background: var(--wa-color-success-05);
+        }
+
+        :host-context(.wa-light) .step.completed {
+            background: var(--wa-color-success-95);
+            border-color: var(--wa-color-success-50);
+        }
+
+        .step.failed {
+            border-color: var(--wa-color-danger-50);
+            background: var(--wa-color-danger-05);
+        }
+
+        :host-context(.wa-light) .step.failed {
+            background: var(--wa-color-danger-95);
+            border-color: var(--wa-color-danger-50);
+        }
+
+        .step-header {
+            display: flex;
+            align-items: center;
+            gap: var(--wa-spacing-medium, 12px);
+            margin-bottom: var(--wa-spacing-small, 8px);
+        }
+
+        .step-number {
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-20));
+            border-radius: 50%;
+            font-size: var(--wa-font-size-small, 12px);
+            font-weight: 600;
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-80));
+        }
+
+        :host-context(.wa-light) .step-number {
+            background: var(--wa-color-surface-lowered, var(--wa-color-neutral-80));
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-20));
+        }
+
+        .step-title {
+            flex: 1;
+            font-weight: 600;
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-90));
+        }
+
+        :host-context(.wa-light) .step-title {
+            color: var(--wa-color-text-normal, var(--wa-color-neutral-10));
+        }
+
+        .step-status {
+            display: flex;
+            align-items: center;
+            gap: var(--wa-spacing-small, 8px);
+        }
+
+        .status-icon {
+            width: 20px;
+            height: 20px;
+        }
+
+        .status-icon.completed {
+            color: var(--wa-color-success-50);
+        }
+
+        .status-icon.failed {
+            color: var(--wa-color-danger-50);
+        }
+
+        .status-icon.skipped {
+            color: var(--wa-color-neutral-50);
+        }
+
+        .status-icon.active {
+            color: var(--wa-color-primary-50);
+        }
+
+        .status-icon.pending {
+            color: var(--wa-color-neutral-50);
+        }
+
+        .step-description {
+            font-size: var(--wa-font-size-medium, 13px);
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-70));
+            margin-bottom: var(--wa-spacing-small, 8px);
+            line-height: 1.4;
+        }
+
+        :host-context(.wa-light) .step-description {
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-30));
+        }
+
+        .condition {
+            display: flex;
+            align-items: center;
+            gap: var(--wa-spacing-x-small, 6px);
+            font-size: var(--wa-font-size-small, 12px);
+            padding: var(--wa-spacing-x-small, 6px) var(--wa-spacing-small, 8px);
+            border-radius: var(--wa-border-radius-x-small, 4px);
+            margin-bottom: var(--wa-spacing-small, 8px);
+        }
+
+        .condition.met {
+            background: var(--wa-color-success-10);
+            color: var(--wa-color-success-70);
+        }
+
+        :host-context(.wa-light) .condition.met {
+            background: var(--wa-color-success-90);
+            color: var(--wa-color-success-30);
+        }
+
+        .condition.not-met {
+            background: var(--wa-color-danger-10);
+            color: var(--wa-color-danger-70);
+        }
+
+        :host-context(.wa-light) .condition.not-met {
+            background: var(--wa-color-danger-90);
+            color: var(--wa-color-danger-30);
+        }
+
+        .step-actions {
+            display: flex;
+            gap: var(--wa-spacing-small, 8px);
+            margin-top: var(--wa-spacing-small, 8px);
+        }
+
+        .empty-state {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: var(--wa-spacing-x-large, 40px) var(--wa-spacing-large, 20px);
+            text-align: center;
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-70));
+        }
+
+        :host-context(.wa-light) .empty-state {
+            color: var(--wa-color-text-subtle, var(--wa-color-neutral-30));
+        }
+
+        .empty-state p {
+            margin: var(--wa-spacing-small, 8px) 0;
+        }
+    `;
+__decorateClass([
+  state()
+], LyraHowToPanel.prototype, "contributions", 2);
+__decorateClass([
+  state()
+], LyraHowToPanel.prototype, "activeContributionId", 2);
+__decorateClass([
+  state()
+], LyraHowToPanel.prototype, "stepStates", 2);
+__decorateClass([
+  state()
+], LyraHowToPanel.prototype, "isMinimized", 2);
+__decorateClass([
+  state()
+], LyraHowToPanel.prototype, "isVisible", 2);
+__decorateClass([
+  state()
+], LyraHowToPanel.prototype, "positionX", 2);
+__decorateClass([
+  state()
+], LyraHowToPanel.prototype, "positionY", 2);
+__decorateClass([
+  state()
+], LyraHowToPanel.prototype, "dragPreviewPosition", 2);
+LyraHowToPanel = __decorateClass([
+  customElement("lyra-howto-panel")
+], LyraHowToPanel);
+const logger = createLogger("HowToExtension");
+function howToExtension(context) {
+  logger.info("HowTo system extension loaded");
+  rootContext.put("howToService", howToService);
+  const ensurePanelInDOM = () => {
+    if (document.querySelector("lyra-howto-panel")) {
+      return;
+    }
+    const panel = document.createElement("lyra-howto-panel");
+    document.body.appendChild(panel);
+    logger.info("HowTo panel added to DOM");
+  };
+  if (document.body) {
+    requestAnimationFrame(() => {
+      ensurePanelInDOM();
+    });
+  } else {
+    const checkDOM = () => {
+      if (document.body) {
+        ensurePanelInDOM();
+      } else {
+        requestAnimationFrame(checkDOM);
+      }
+    };
+    requestAnimationFrame(checkDOM);
+  }
+  registerAll({
+    command: {
+      id: "howto.show-panel",
+      name: "Show HowTo Panel",
+      description: "Shows the HowTo workflows panel",
+      icon: "list-check",
+      parameters: []
+    },
+    handler: {
+      execute: () => {
+        publish(TOPIC_SHOW_HOWTO_PANEL, null);
+      }
+    }
+  });
+  registerAll({
+    command: {
+      id: "howto.toggle-panel",
+      name: "Toggle HowTo Panel",
+      description: "Toggles the visibility of the HowTo workflows panel",
+      icon: "list-check",
+      keyBinding: "CTRL+SHIFT+H",
+      parameters: []
+    },
+    handler: {
+      execute: () => {
+        publish(TOPIC_TOGGLE_HOWTO_PANEL, null);
+      }
+    },
+    contribution: {
+      target: TOOLBAR_BOTTOM_END,
+      icon: "list-check",
+      label: "HowTo"
+    }
+  });
+  logger.info("HowTo system extension initialized");
+}
+export {
+  HOWTO_CONTRIBUTION_TARGET,
+  howToExtension as default,
+  howToService
+};
+//# sourceMappingURL=howto-extension-8r07TyoY.js.map