ujiro99 · ujiro99 · May 3, 2026 · Apr 22, 2026 · May 1, 2026 · May 1, 2026
diff --git a/packages/extension/.env.development b/packages/extension/.env.development
@@ -0,0 +1 @@
+VITE_NEW_HUB_URL=http://localhost:3000
diff --git a/packages/extension/public/_locales/de/messages.json b/packages/extension/public/_locales/de/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "Duplizieren"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Mit Hub teilen"
+  },
   "Option_remove_title": {
     "message": "Dies löschen?"
   },

diff --git a/packages/extension/public/_locales/en/messages.json b/packages/extension/public/_locales/en/messages.json
@@ -741,6 +741,10 @@
   "Option_copy_tooltip": {
     "message": "Duplicate"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Share to Hub",
+    "description": "Tooltip for the share button in the command list. Opens the new Selection Command Hub in a new tab with the command pre-filled."
+  },
   "Option_remove_title": {
     "message": "Delete this?"
   },

diff --git a/packages/extension/public/_locales/es/messages.json b/packages/extension/public/_locales/es/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "Duplicar"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Compartir en Hub"
+  },
   "Option_remove_title": {
     "message": "¿Eliminar esto?"
   },

diff --git a/packages/extension/public/_locales/fr/messages.json b/packages/extension/public/_locales/fr/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "Dupliquer"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Partager sur Hub"
+  },
   "Option_remove_title": {
     "message": "Supprimer ceci ?"
   },

diff --git a/packages/extension/public/_locales/hi/messages.json b/packages/extension/public/_locales/hi/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "डुप्लिकेट"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Hub पर साझा करें"
+  },
   "Option_remove_title": {
     "message": "क्या आप वाकई इसे हटाना चाहते हैं?"
   },

diff --git a/packages/extension/public/_locales/id/messages.json b/packages/extension/public/_locales/id/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "Duplikat"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Bagikan ke Hub"
+  },
   "Option_remove_title": {
     "message": "Hapus ini?"
   },

diff --git a/packages/extension/public/_locales/it/messages.json b/packages/extension/public/_locales/it/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "Duplica"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Condividi su Hub"
+  },
   "Option_remove_title": {
     "message": "Sei sicuro di voler eliminare questo?"
   },

diff --git a/packages/extension/public/_locales/ja/messages.json b/packages/extension/public/_locales/ja/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "コピー"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Hubに共有"
+  },
   "Option_remove_title": {
     "message": "削除しますか？"
   },

diff --git a/packages/extension/public/_locales/ko/messages.json b/packages/extension/public/_locales/ko/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "복제"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Hub에 공유"
+  },
   "Option_remove_title": {
     "message": "이것을 삭제하시겠습니까?"
   },

diff --git a/packages/extension/public/_locales/ms/messages.json b/packages/extension/public/_locales/ms/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "Duplikat"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Kongsi ke Hub"
+  },
   "Option_remove_title": {
     "message": "Padam ini?"
   },

diff --git a/packages/extension/public/_locales/pt_BR/messages.json b/packages/extension/public/_locales/pt_BR/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "Duplicar"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Compartilhar no Hub"
+  },
   "Option_remove_title": {
     "message": "Excluir isto?"
   },

diff --git a/packages/extension/public/_locales/pt_PT/messages.json b/packages/extension/public/_locales/pt_PT/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "Duplicar"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Partilhar no Hub"
+  },
   "Option_remove_title": {
     "message": "Eliminar isto?"
   },

diff --git a/packages/extension/public/_locales/ru/messages.json b/packages/extension/public/_locales/ru/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "Дублировать"
   },
+  "Option_shareButton_tooltip": {
+    "message": "Поделиться в Hub"
+  },
   "Option_remove_title": {
     "message": "Вы уверены, что хотите удалить это?"
   },

diff --git a/packages/extension/public/_locales/zh_CN/messages.json b/packages/extension/public/_locales/zh_CN/messages.json
@@ -740,6 +740,9 @@
   "Option_copy_tooltip": {
     "message": "复制"
   },
+  "Option_shareButton_tooltip": {
+    "message": "分享到 Hub"
+  },
   "Option_remove_title": {
     "message": "您确定要删除吗？"
   },

diff --git a/packages/extension/src/components/option/ShareButton.tsx b/packages/extension/src/components/option/ShareButton.tsx
@@ -0,0 +1,64 @@
+import { useState, useRef } from "react"
+import { Share } from "lucide-react"
+import { Tooltip } from "@/components/Tooltip"
+import { cn } from "@/lib/utils"
+import { t } from "@/services/i18n"
+import { shareCommandToHub } from "@/services/hubShare"
+import { NEW_HUB_SHAREABLE_OPEN_MODES, COMMAND_SOURCE_TYPE } from "@/const"
+import type { SelectionCommand } from "@/types"
+
+const VALID_SOURCE_TYPES = new Set([
+  COMMAND_SOURCE_TYPE.SELF_CREATED,
+  COMMAND_SOURCE_TYPE.SELF_UPDATED,
+  COMMAND_SOURCE_TYPE.UNKNOWN,
+])
+
+type Props = {
+  command: SelectionCommand
+}
+
+export const ShareButton = ({ command }: Props) => {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const [status, setStatus] = useState<"idle" | "sent" | "error">("idle")
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const ok = shareCommandToHub(command)
+    setStatus(ok ? "sent" : "error")
+    setTimeout(() => setStatus("idle"), 2000)
+  }
+
+  if (
+    !NEW_HUB_SHAREABLE_OPEN_MODES.has(command.openMode) ||
+    !VALID_SOURCE_TYPES.has(command.sourceType ?? COMMAND_SOURCE_TYPE.UNKNOWN)
+  ) {
+    return null
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        disabled={status !== "idle"}
+        className={cn(
+          "outline-gray-200 p-2 rounded-md transition hover:bg-green-100 hover:scale-125 group/share-btn",
+          "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none",
+        )}
+        onClick={handleClick}
+        ref={buttonRef}
+      >
+        <Share
+          className={cn(
+            "stroke-gray-500 group-hover/share-btn:stroke-green-600",
+            status === "error" && "stroke-red-500",
+          )}
+          size={16}
+        />
+      </button>
+      <Tooltip
+        positionElm={buttonRef.current}
+        text={t("Option_shareButton_tooltip")}
+      />
+    </>
+  )
+}
diff --git a/packages/extension/src/components/option/editor/CommandEditDialog.tsx b/packages/extension/src/components/option/editor/CommandEditDialog.tsx
@@ -93,6 +93,7 @@ import {
   commandSchema,
   CommandSchemaType,
   isPageActionType,
+  isAiPromptType,
 } from "@/types/schema"
 import type {
   SelectionCommand,
@@ -358,6 +359,17 @@ const CommandEditDialogInner = ({
     defaultValue: "",
   })
 
+  const pageActionOption = useWatch({
+    control: form.control,
+    name: "pageActionOption",
+  })
+
+  const aiPromptPrompt = useWatch({
+    control: form.control,
+    name: "aiPromptOption.prompt",
+    defaultValue: "",
+  })
+
   const iconUrlSrc = searchUrl || startUrl
 
   const openPageActionRecorder = async () => {
@@ -450,6 +462,35 @@ const CommandEditDialogInner = ({
     }
   }, [])
 
+  useEffect(() => {
+    if (!initialized) return
+    if (!isUpdate) return
+    if (command.sourceType === COMMAND_SOURCE_TYPE.SELF_CREATED) return
+    if (getValues("sourceType") === COMMAND_SOURCE_TYPE.SELF_UPDATED) return
+
+    const changed =
+      (isSearchType(command) && searchUrl !== command.searchUrl) ||
+      (isPageActionType(command) &&
+        JSON.stringify(pageActionOption) !==
+          JSON.stringify(command.pageActionOption)) ||
+      (isAiPromptType(command) &&
+        aiPromptPrompt !== command.aiPromptOption.prompt)
+
+    if (changed) {
+      setValue("sourceType", COMMAND_SOURCE_TYPE.SELF_UPDATED)
+      setValue("sourceId", COMMAND_SOURCE_ID.SELF_UPDATED)
+    }
+  }, [
+    initialized,
+    isUpdate,
+    searchUrl,
+    pageActionOption,
+    aiPromptPrompt,
+    command,
+    getValues,
+    setValue,
+  ])
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogPortal>

diff --git a/packages/extension/src/components/option/editor/CommandList.tsx b/packages/extension/src/components/option/editor/CommandList.tsx
@@ -27,13 +27,7 @@ import {
 } from "@/types/schema"
 
 import { ANALYTICS_EVENTS, sendEvent } from "@/services/analytics"
-import {
-  SCREEN,
-  COMMAND_TYPE,
-  OPEN_MODE_TYPE_MAP,
-  COMMAND_SOURCE_TYPE,
-  COMMAND_SOURCE_ID,
-} from "@/const"
+import { SCREEN, COMMAND_TYPE, OPEN_MODE_TYPE_MAP } from "@/const"
 import type { Command, CommandFolder, SelectionCommand } from "@/types"
 
 // Imported services and hooks
@@ -254,8 +248,6 @@ export const CommandList = ({ control }: CommandListProps) => {
     const cmd = commandArray.fields[index]
     cmd.id = crypto.randomUUID()
     cmd.title = title
-    cmd.sourceType = COMMAND_SOURCE_TYPE.SELF_CREATED
-    cmd.sourceId = COMMAND_SOURCE_ID.SELF_CREATED
     commandArray.insert(index + 1, cmd)
   }
 

diff --git a/packages/extension/src/components/option/editor/CommandTreeRenderer.tsx b/packages/extension/src/components/option/editor/CommandTreeRenderer.tsx
@@ -3,9 +3,10 @@ import { SortableItem } from "@/components/option/SortableItem"
 import { EditButton } from "@/components/option/EditButton"
 import { CopyButton } from "@/components/option/CopyButton"
 import { RemoveButton } from "@/components/option/RemoveButton"
+import { ShareButton } from "@/components/option/ShareButton"
 import { MenuImage } from "@/components/menu/MenuImage"
 import type { FlattenNode } from "@/services/option/commandTree"
-import type { CommandFolder } from "@/types"
+import type { CommandFolder, SelectionCommand } from "@/types"
 import {
   isCommand,
   isFolder,
@@ -68,6 +69,9 @@ export const CommandTreeRenderer: React.FC<Props> = ({
               </div>
             </div>
             <div className="flex gap-0.5 items-center">
+              {isCommand(field.content) && (
+                <ShareButton command={field.content} />
+              )}
               {isPageActionCommand(field.content) && (
                 <CopyButton
                   srcTitle={field.content.title}

diff --git a/packages/extension/src/const.ts b/packages/extension/src/const.ts
@@ -322,6 +322,38 @@ export const HUB_URL = isDebug
   ? "http://localhost:3000"
   : "https://ujiro99.github.io/selection-command"
 
+export const NEW_HUB_URL =
+  import.meta.env?.VITE_NEW_HUB_URL ?? "https://selection-command-hub.pages.dev"
+
+export const NEW_HUB_SUPPORTED_LOCALES = [
+  "de",
+  "en",
+  "es",
+  "fr",
+  "hi",
+  "id",
+  "it",
+  "ja",
+  "ko",
+  "ms",
+  "pt-PT",
+  "pt-BR",
+  "ru",
+  "zh-CN",
+] as const
+
+export type NewHubLocale = (typeof NEW_HUB_SUPPORTED_LOCALES)[number]
+
+export const NEW_HUB_SHAREABLE_OPEN_MODES: ReadonlySet<string> = new Set([
+  OPEN_MODE.POPUP,
+  OPEN_MODE.TAB,
+  OPEN_MODE.WINDOW,
+  OPEN_MODE.BACKGROUND_TAB,
+  OPEN_MODE.SIDE_PANEL,
+  OPEN_MODE.PAGE_ACTION,
+  OPEN_MODE.AI_PROMPT,
+])
+
 export const PAGE_ACTION_MAX = 12 // 10 actions + 1 start + 1 end
 
 export const PAGE_ACTION_TIMEOUT = 5000
@@ -340,13 +372,15 @@ export const COMMAND_USAGE = {
 export enum COMMAND_SOURCE_TYPE {
   DEFAULT = "default",
   SELF_CREATED = "selfCreated",
+  SELF_UPDATED = "selfUpdated",
   HUB_COMMUNITY = "hubCommunity",
   UNKNOWN = "unknown",
 }
 
 export const COMMAND_SOURCE_ID = {
   DEFAULT: "019db873-cc03-7484-86f1-2d349389ea2b",
   SELF_CREATED: "019db8a1-4021-7ae7-8a5d-474bf132e8ff",
+  SELF_UPDATED: "019de776-d3ea-76af-99fe-340ae9bab54d",
 }
 
 export const SHORTCUT_PLACEHOLDER = "_placeholder_"