From b73d92a258ea14e7c3325398d65053c6c6309f3a Mon Sep 17 00:00:00 2001
From: elasticdotventures <brianh@elastic.ventures>
Date: Mon, 21 Sep 2026 13:16:48 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20terminal=20command=20execution=20broken?=
 =?UTF-8?q?=20=E2=80=94=20store=20never=20initialised=20+=20hints=20disabl?=
 =?UTF-8?q?ed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- vue-web-terminal default export is the component, not the plugin;
  app.use(component) silently skips install(), so initStore() never runs.
  Every command hit getStore() → 'store must be initialized' and swallowed
  the success callback. Switch to createTerminal().app.use().

- useSocketStoreWithOut(app) was called unconditionally, registering a
  socket Pinia store even when VITE_TERMINAL_WS_URL is unset (production).
  Guard behind the env-var check; call setupStore(app) directly for Pinia.

- enable-example-hint was false, disabling the command autocomplete
  dropdown entirely. Set to true so users can discover and select commands.
---
 src/components/TheXTerm.vue |  2 +-
 src/main.ts                 | 23 +++++++++++++++++------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/TheXTerm.vue b/src/components/TheXTerm.vue
index bc91ed9..ba53419 100644
--- a/src/components/TheXTerm.vue
+++ b/src/components/TheXTerm.vue
@@ -17,7 +17,7 @@ FILE: src/components/TheXTerm.vue
     @before-execute-command="onBeforeExecuteCommand"
     @exec-cmd="onExecCmd"
     :show-header="false"
-    :enable-example-hint="false"
+    :enable-example-hint="true"
     title="👋🏻"
     theme="dark">
   </Terminal>
diff --git a/src/main.ts b/src/main.ts
index e046883..bea6ab0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,8 +7,11 @@ import App from './App.vue'
 import VueGtag from "vue-gtag-next";
 import { VueCookieNext } from 'vue-cookie-next';
 import VueNativeSock from "vue-native-websocket-vue3";
-import Terminal from 'vue-web-terminal';
+// @ts-expect-error — vue-web-terminal ships createTerminal but its .d.ts
+// references an unresolvable ~/ path; the runtime export is fine.
+import { createTerminal } from 'vue-web-terminal';
 
+import { setupStore } from "./store/pinia/store";
 import { useSocketStoreWithOut } from "./store/pinia/useSocketStore";
 
 // 🤓: https://github.com/eladcandroid/v-idle-3
@@ -19,9 +22,6 @@ const app = createApp(App);
 app.config.unwrapInjectedRef = true
 */
 
-// Set up Pinia store before mounting
-useSocketStoreWithOut(app);
-
 app.use(VueCookieNext);
 
 app.use(VueGtag, {
@@ -29,11 +29,22 @@ app.use(VueGtag, {
   isEnabled: false,
 });
 
-// Register vue-web-terminal (required for TerminalApi to work)
-app.use(Terminal);
+// Register vue-web-terminal — must use createTerminal() so initStore() runs.
+// The default export is the component itself (no install method), so
+// app.use(defaultExport) silently skips store init, causing
+// "The store must be initialized before reading" on every command.
+app.use(createTerminal());
+
+// Pinia must always be installed — useMainStore() in App.vue needs it.
+setupStore(app);
 
+// Only initialise the socket store and websocket plugin when the env var is set.
+// Without this guard, useSocketStoreWithOut() registers a Pinia store that
+// reads socket state before the plugin is installed, throwing
+// "The store must be initialized before reading" and breaking command execution.
 const terminalWebSocketUrl = import.meta.env.VITE_TERMINAL_WS_URL;
 if (terminalWebSocketUrl) {
+  useSocketStoreWithOut(app);
   app.use(VueNativeSock, terminalWebSocketUrl, {
     // 启用pinia集成 | enable pinia integration
     // store: piniaSocketStore(),