From 673596eb06259b32759e3e800ed4ea4af81da423 Mon Sep 17 00:00:00 2001
From: bebiksior <bebiks.priv@gmail.com>
Date: Sun, 16 Aug 2026 12:19:14 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Add=20keyboard=20shortcuts=20HU?=
 =?UTF-8?q?D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #31
---
 .../components/ShortcutsDialog/Container.vue  | 81 +++++++++++++++++++
 .../src/components/ShortcutsDialog/index.ts   |  1 +
 .../layouts/AuthenticatedLayout/Container.vue | 13 +++
 3 files changed, 95 insertions(+)
 create mode 100644 packages/frontend/src/components/ShortcutsDialog/Container.vue
 create mode 100644 packages/frontend/src/components/ShortcutsDialog/index.ts

diff --git a/packages/frontend/src/components/ShortcutsDialog/Container.vue b/packages/frontend/src/components/ShortcutsDialog/Container.vue
new file mode 100644
index 0000000..5dee54f
--- /dev/null
+++ b/packages/frontend/src/components/ShortcutsDialog/Container.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { useEventListener } from "@vueuse/core";
+import Dialog from "primevue/dialog";
+import { computed } from "vue";
+
+const visible = defineModel<boolean>("visible", { default: false });
+
+const props = defineProps<{
+  canSearchInstances: boolean;
+}>();
+
+const modKey = /Mac|iPhone|iPad/i.test(navigator.userAgent) ? "⌘" : "Ctrl";
+
+const shortcuts = computed(() => [
+  ...(props.canSearchInstances
+    ? [{ label: "Search instances", keys: [modKey, "K"] }]
+    : []),
+  { label: "Save changes", keys: [modKey, "S"] },
+  { label: "Close dialog or panel", keys: ["Esc"] },
+  { label: "Show keyboard shortcuts", keys: ["Shift", "?"] },
+]);
+
+const isEditableTarget = (target: EventTarget | null) => {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+
+  return (
+    target.isContentEditable ||
+    target.closest("input, textarea, select, [contenteditable='true']") !== null
+  );
+};
+
+useEventListener(document, "keydown", (event) => {
+  if (
+    event.key !== "?" ||
+    !event.shiftKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    event.altKey ||
+    isEditableTarget(event.target)
+  ) {
+    return;
+  }
+
+  event.preventDefault();
+  visible.value = true;
+});
+</script>
+
+<template>
+  <Dialog
+    v-model:visible="visible"
+    modal
+    dismissable-mask
+    :draggable="false"
+    header="Keyboard shortcuts"
+    :style="{ width: 'min(26rem, calc(100vw - 2rem))' }"
+  >
+    <dl class="flex flex-col gap-1">
+      <div
+        v-for="item in shortcuts"
+        :key="item.label"
+        class="flex min-h-8 items-center justify-between gap-6"
+      >
+        <dt class="text-sm text-surface-700 dark:text-surface-200">
+          {{ item.label }}
+        </dt>
+        <dd class="flex shrink-0 items-center gap-1.5">
+          <kbd
+            v-for="key in item.keys"
+            :key="key"
+            class="inline-flex h-7 min-w-7 items-center justify-center whitespace-nowrap rounded-md border border-surface-200 bg-surface-50 px-2 text-xs font-medium leading-none text-surface-700 shadow-sm dark:border-surface-700 dark:bg-surface-800 dark:text-surface-200"
+          >
+            {{ key }}
+          </kbd>
+        </dd>
+      </div>
+    </dl>
+  </Dialog>
+</template>
diff --git a/packages/frontend/src/components/ShortcutsDialog/index.ts b/packages/frontend/src/components/ShortcutsDialog/index.ts
new file mode 100644
index 0000000..9c39cd3
--- /dev/null
+++ b/packages/frontend/src/components/ShortcutsDialog/index.ts
@@ -0,0 +1 @@
+export { default as ShortcutsDialog } from "./Container.vue";
diff --git a/packages/frontend/src/layouts/AuthenticatedLayout/Container.vue b/packages/frontend/src/layouts/AuthenticatedLayout/Container.vue
index 9c3ee11..a9b2038 100644
--- a/packages/frontend/src/layouts/AuthenticatedLayout/Container.vue
+++ b/packages/frontend/src/layouts/AuthenticatedLayout/Container.vue
@@ -6,6 +6,7 @@ import { useRouter } from "vue-router";
 import { useAuthStore } from "../../stores/auth";
 import { useThemeStore } from "../../stores/theme";
 import { CommandPalette } from "@/components/CommandPalette";
+import { ShortcutsDialog } from "@/components/ShortcutsDialog";
 import { UserNoticeDialog } from "@/components/UserNoticeDialog";
 import { config } from "@/config";
 
@@ -13,6 +14,7 @@ const authStore = useAuthStore();
 const themeStore = useThemeStore();
 const router = useRouter();
 const menu = ref();
+const shortcutsVisible = ref(false);
 
 const goSettings = async () => {
   await router.push({ name: "settings" });
@@ -40,6 +42,13 @@ const menuItems = computed(() => {
     : [];
 
   const linkItems = [
+    {
+      label: "Keyboard shortcuts",
+      icon: "pi pi-question-circle",
+      command: () => {
+        shortcutsVisible.value = true;
+      },
+    },
     {
       label: "API Docs",
       icon: "pi pi-book",
@@ -91,6 +100,10 @@ const goLogin = async () => {
 <template>
   <UserNoticeDialog />
   <CommandPalette v-if="authStore.hasSession" />
+  <ShortcutsDialog
+    v-model:visible="shortcutsVisible"
+    :can-search-instances="authStore.hasSession"
+  />
   <div class="flex h-dvh flex-col bg-surface-0 dark:bg-surface-800">
     <nav class="bg-surface-0 dark:bg-surface-800 shrink-0">
       <div class="mx-auto px-3 sm:px-6">

From 3302944c99acb27bfbc7132b74e2e0939dc97b81 Mon Sep 17 00:00:00 2001
From: bebiksior <bebiks.priv@gmail.com>
Date: Sun, 16 Aug 2026 12:25:33 +0200
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=A7=B9=20Remove=20unused=20preference?=
 =?UTF-8?q?s=20export?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/stores/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/frontend/src/stores/index.ts b/packages/frontend/src/stores/index.ts
index f46a769..7825b41 100644
--- a/packages/frontend/src/stores/index.ts
+++ b/packages/frontend/src/stores/index.ts
@@ -3,5 +3,4 @@ export { useAssistantModelStore } from "./assistantModel";
 export { useResponseEditorStore } from "./responseEditor";
 export { useAgentsStore } from "./agents";
 export { useBuilderStore, DEFAULT_TEMPLATE, formatResponse } from "./builder";
-export { useInstanceDetailPreferencesStore } from "./instanceDetailPreferences";
 export { useThemeStore } from "./theme";