Add sidePanel open mode

.claude/settings.local.json

@@ -2,13 +2,13 @@
   "permissions": {
     "allow": [
       "Bash(cat:*)",
+      "Bash(curl:*)",
       "Bash(do echo \"=== $lang ===\")",
       "Bash(do)",
       "Bash(done)",
       "Bash(echo:*)",
       "Bash(find:*)",
       "Bash(for lang in de en es fr hi id it ja ko ms pt_BR pt_PT ru zh_CN)",
-      "Bash(for lang in de en es fr hi id it ko ms pt_BR pt_PT ru zh_CN)",
       "Bash(gh api:*)",
       "Bash(gh pr:*)",
       "Bash(grep:*)",
@@ -17,24 +17,29 @@
       "Bash(mkdir:*)",
       "Bash(mv:*)",
       "Bash(node:*)",
-      "Bash(pkill:*)",
+      "Bash(npx tsx:*)",
       "Bash(rg:*)",
       "Bash(rm:*)",
       "Bash(sed:*)",
       "Bash(tsc:*)",
       "Bash(yarn add:*)",
       "Bash(yarn build)",
+      "Bash(yarn build:*)",
       "Bash(yarn eslint:*)",
       "Bash(yarn lint)",
       "Bash(yarn lint:*)",
+      "Bash(yarn list:*)",
       "Bash(yarn test:*)",
+      "Bash(yarn test:run:*)",
       "Bash(yarn tsc)",
       "Bash(yarn tsc:*)",
       "Bash(yarn workspace @selection-command/extension:*)",
       "Bash(yarn workspace @selection-command/hub:*)",
+      "WebFetch(domain:api.github.com)",
       "WebFetch(domain:developer.chrome.com)",
       "WebFetch(domain:docs.dndkit.com)",
       "WebFetch(domain:github.com)",
+      "WebFetch(domain:raw.githubusercontent.com)",
       "WebFetch(domain:react-hook-form.com)",
       "WebFetch(domain:stackoverflow.com)",
       "WebFetch(domain:www.npmjs.com)",
@@ -45,6 +50,7 @@
       "mcp__serena__find_referencing_symbols",
       "mcp__serena__find_symbol",
       "mcp__serena__get_symbols_overview",
+      "mcp__serena__initial_instructions",
       "mcp__serena__insert_after_symbol",
       "mcp__serena__list_dir",
       "mcp__serena__onboarding",
@@ -54,9 +60,7 @@
       "mcp__serena__think_about_collected_information",
       "mcp__serena__think_about_task_adherence",
       "mcp__serena__think_about_whether_you_are_done",
-      "mcp__serena__write_memory",
-      "Bash(yarn build:*)",
-      "mcp__serena__initial_instructions"
+      "mcp__serena__write_memory"
     ],
     "deny": []
   }

.gitignore

@@ -22,6 +22,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.git
 
 npm-debug.log*
 yarn-debug.log*

.serena/project.yml

@@ -1,10 +1,3 @@
-# language of the project (csharp, python, rust, java, typescript, go, cpp, or ruby)
-#  * For C, use cpp
-#  * For JavaScript, use typescript
-# Special requirements:
-#  * csharp: Requires the presence of a .sln file in the project folder.
-language: typescript
-
 # whether to use the project's gitignore file to ignore files
 # Added on 2025-04-07
 ignore_all_files_in_gitignore: true
@@ -63,5 +56,61 @@ excluded_tools: []
 # initial prompt for the project. It will always be given to the LLM upon activating the project
 # (contrary to the memories, which are loaded on demand).
 initial_prompt: ""
-
+# the name by which the project can be referenced within Serena
 project_name: "selection-command"
+
+# list of mode names to that are always to be included in the set of active modes
+# The full set of modes to be activated is base_modes + default_modes.
+# If the setting is undefined, the base_modes from the global configuration (serena_config.yml) apply.
+# Otherwise, this setting overrides the global configuration.
+# Set this to [] to disable base modes for this project.
+# Set this to a list of mode names to always include the respective modes for this project.
+base_modes:
+
+# list of mode names that are to be activated by default.
+# The full set of modes to be activated is base_modes + default_modes.
+# If the setting is undefined, the default_modes from the global configuration (serena_config.yml) apply.
+# Otherwise, this overrides the setting from the global configuration (serena_config.yml).
+# This setting can, in turn, be overridden by CLI parameters (--mode).
+default_modes:
+
+# list of tools to include that would otherwise be disabled (particularly optional tools that are disabled by default)
+included_optional_tools: []
+
+# fixed set of tools to use as the base tool set (if non-empty), replacing Serena's default set of tools.
+# This cannot be combined with non-empty excluded_tools or included_optional_tools.
+fixed_tools: []
+
+# the encoding used by text files in the project
+# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings
+encoding: utf-8
+
+# list of languages for which language servers are started; choose from:
+#   al                  bash                clojure             cpp                 csharp
+#   csharp_omnisharp    dart                elixir              elm                 erlang
+#   fortran             fsharp              go                  groovy              haskell
+#   java                julia               kotlin              lua                 markdown
+#   matlab              nix                 pascal              perl                php
+#   powershell          python              python_jedi         r                   rego
+#   ruby                ruby_solargraph     rust                scala               swift
+#   terraform           toml                typescript          typescript_vts      vue
+#   yaml                zig
+#   (This list may be outdated. For the current list, see values of Language enum here:
+#   https://github.com/oraios/serena/blob/main/src/solidlsp/ls_config.py
+#   For some languages, there are alternative language servers, e.g. csharp_omnisharp, ruby_solargraph.)
+# Note:
+#   - For C, use cpp
+#   - For JavaScript, use typescript
+#   - For Free Pascal/Lazarus, use pascal
+# Special requirements:
+#   Some languages require additional setup/installations.
+#   See here for details: https://oraios.github.io/serena/01-about/020_programming-languages.html#language-servers
+# When using multiple languages, the first language server that supports a given file will be used for that file.
+# The first language is the default language and the respective language server will be used as a fallback.
+# Note that when using the JetBrains backend, language servers are not used and this list is correspondingly ignored.
+languages:
+- typescript
+
+# override of the corresponding setting in serena_config.yml, see the documentation there.
+# If null or missing, the value from the global config is used.
+symbol_info_budget:

docs/design/side-pane-link.md

@@ -0,0 +1,52 @@
+## 1. 対象範囲
+
+- selection command から開かれた **side panel 内の画面遷移** を、実際のブラウザナビゲーションではなく「side panel の URL 差し替え」として扱う。
+- 実装対象:
+  - side panel 内で動作する content script
+  - service worker（background）
+  - side panel 表示状態を持つ BgData（状態管理層）
+
+---
+
+## 2. side panel 上かどうかの判定要件
+
+- 「この content script が side panel 上で動いているか」を判定するための条件:
+  - BgData が保持する「side panel を表示中の tabId リスト」に、現在のタブ ID が含まれていること。
+  - かつ、以下のいずれかを満たすこと:
+    - 現在の URL が「side panel 用 URL」であると判定できる。
+    - side panel とメインコンテンツが同じ URL を表示している場合は、ウィンドウ位置やレイアウト情報から「side panel 側」であることを判定すること。
+
+---
+
+## 3. side panel 内でのページ遷移フック要件（content script）
+
+- side panel 上で動作していると判定できた場合のみ、遷移フックを有効化する。
+- フック対象:
+  - ユーザーのリンククリックなど、ページ遷移を引き起こす操作。
+  - ただし、`target="_blank"` など、意図的に別タブ・ウィンドウで開くことを指定されている場合はフックを無効化する
+- フック時の挙動:
+  - ブラウザ標準のページ遷移は発生させない（キャンセルする）。
+  - 遷移先 URL を取得し、service worker に「side panel の URL 更新要求」として通知する。
+
+---
+
+## 4. service worker による side panel URL 更新要件
+
+- content script からの「side panel の URL 更新要求」を受け取ったら、以下を行う:
+  - 対象 tabId が「side panel 表示中タブリスト」に含まれていることを確認する。
+  - 対象の side panel の URL を更新するための API を呼び出し、side panel の表示内容を遷移先 URL に切り替える。
+- URL 更新後の状態管理:
+  - BgData 上で、その tabId の side panel に紐づく「現在 URL」を更新する。
+  - 必要に応じて、履歴やその他の管理情報も更新できるようにしておく。
+
+---
+
+## 5. 状態管理要件（BgData）
+
+- 少なくとも以下の情報を持つ:
+  - side panel を表示中の tabId の集合（リストまたはセット）。
+  - 各 tabId ごとの side panel の現在 URL（＋必要に応じて追加情報）。
+- 更新タイミング（例）:
+  - side panel オープン／クローズ時。
+  - service worker が URL 更新 API を呼び出したタイミング。
+  - タブクローズ時など、不要になった状態のクリア。

packages/extension/manifest.json

@@ -31,7 +31,8 @@
     "contextMenus",
     "declarativeNetRequest",
     "clipboardRead",
-    "system.display"
+    "system.display",
+    "sidePanel"
   ],
   "host_permissions": ["http://*/*", "https://*/*"],
   "web_accessible_resources": [

packages/extension/package.json

@@ -50,7 +50,7 @@
     "react-multi-progress": "^1.3.0",
     "react-textarea-autosize": "^8.5.3",
     "react-transition-group": "^4.4.5",
-    "sonner": "github:ujiro99/sonner",
+    "sonner": "git+https://github.com/ujiro99/sonner.git",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^11.1.0",
@@ -59,7 +59,7 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.30",
     "@testing-library/dom": "^10.4.0",
-    "@types/chrome": "^0.0.293",
+    "@types/chrome": "^0.1.36",
     "@types/jest": "^29.5.11",
     "@types/platform": "^1.3.6",
     "@types/react-transition-group": "^4.4.10",

packages/extension/public/_locales/de/messages.json

@@ -281,6 +281,9 @@
   "Option_openMode_api": {
     "message": "API"
   },
+  "Option_openMode_sidePanel": {
+    "message": "Seitenpanel"
+  },
   "Option_openMode_linkPopup": {
     "message": "Link-Popup"
   },
@@ -545,9 +548,15 @@
   "Option_userStyles_option_border_color": {
     "message": "Rahmenfarbe"
   },
+  "Option_userStyles_option_font_color": {
+    "message": "Schriftfarbe"
+  },
   "Option_userStyles_desc_border_color": {
     "message": "Geben Sie die Rahmenfarbe des Menüs an. Standard: #F3F4F6"
   },
+  "Option_userStyles_desc_font_color": {
+    "message": "Geben Sie die Schriftfarbe an. Standard: #0F172A"
+  },
   "Option_userStyles_option_font_scale": {
     "message": "Schriftgrößen-Skalierung"
   },
@@ -905,6 +914,9 @@
   "Option_openMode_backgroundTab_desc": {
     "message": "Tab im Hintergrund öffnen.<wbr>Rechts vom aktuellen Tab anzeigen."
   },
+  "Option_openMode_sidePanel_desc": {
+    "message": "Im Seitenpanel öffnen."
+  },
   "Option_title_desc": {
     "message": "Wird als Befehlstitel angezeigt."
   },

packages/extension/public/_locales/en/messages.json

@@ -281,6 +281,9 @@
   "Option_openMode_backgroundTab": {
     "message": "Background Tab"
   },
+  "Option_openMode_sidePanel": {
+    "message": "Side Panel"
+  },
   "Option_openMode_api": {
     "message": "API"
   },
@@ -587,9 +590,15 @@
   "Option_userStyles_option_border_color": {
     "message": "Border Color"
   },
+  "Option_userStyles_option_font_color": {
+    "message": "Font color"
+  },
   "Option_userStyles_desc_border_color": {
     "message": "Specify the border color of the menu. Default: #F3F4F6"
   },
+  "Option_userStyles_desc_font_color": {
+    "message": "Specify font color. Default: #0F172A"
+  },
   "Option_userStyles_option_font_scale": {
     "message": "Font size scaling"
   },
@@ -953,6 +962,9 @@
   "Option_openMode_backgroundTab_desc": {
     "message": "Open tab in background.<wbr>Show to the right of current tab."
   },
+  "Option_openMode_sidePanel_desc": {
+    "message": "Open in side panel."
+  },
   "Option_title_desc": {
     "message": "Displayed as the command title."
   },

packages/extension/public/_locales/es/messages.json

@@ -281,6 +281,9 @@
   "Option_openMode_api": {
     "message": "API"
   },
+  "Option_openMode_sidePanel": {
+    "message": "Panel lateral"
+  },
   "Option_openMode_linkPopup": {
     "message": "Emergente de Enlace"
   },
@@ -545,9 +548,15 @@
   "Option_userStyles_option_border_color": {
     "message": "Color del Borde"
   },
+  "Option_userStyles_option_font_color": {
+    "message": "Color de fuente"
+  },
   "Option_userStyles_desc_border_color": {
     "message": "Especifique el color del borde del menú. Predeterminado: #F3F4F6"
   },
+  "Option_userStyles_desc_font_color": {
+    "message": "Especificar el color de fuente. Predeterminado: #0F172A"
+  },
   "Option_userStyles_option_font_scale": {
     "message": "Escala de tamaño de fuente"
   },
@@ -905,6 +914,9 @@
   "Option_openMode_backgroundTab_desc": {
     "message": "Abrir pestaña en segundo plano.<wbr>Mostrar a la derecha de la pestaña actual."
   },
+  "Option_openMode_sidePanel_desc": {
+    "message": "Abrir en panel lateral."
+  },
   "Option_title_desc": {
     "message": "Se muestra como el título del comando."
   },

packages/extension/public/_locales/fr/messages.json

@@ -281,6 +281,9 @@
   "Option_openMode_api": {
     "message": "API"
   },
+  "Option_openMode_sidePanel": {
+    "message": "Panneau latéral"
+  },
   "Option_openMode_linkPopup": {
     "message": "Pop-up de Lien"
   },
@@ -545,9 +548,15 @@
   "Option_userStyles_option_border_color": {
     "message": "Couleur de la Bordure"
   },
+  "Option_userStyles_option_font_color": {
+    "message": "Couleur de police"
+  },
   "Option_userStyles_desc_border_color": {
     "message": "Spécifiez la couleur de la bordure du menu. Par défaut : #F3F4F6"
   },
+  "Option_userStyles_desc_font_color": {
+    "message": "Spécifier la couleur de police. Par défaut: #0F172A"
+  },
   "Option_userStyles_option_font_scale": {
     "message": "Échelle de taille de police"
   },
@@ -905,6 +914,9 @@
   "Option_openMode_backgroundTab_desc": {
     "message": "Ouvrir l'onglet en arrière-plan.<wbr>Afficher à droite de l'onglet actuel."
   },
+  "Option_openMode_sidePanel_desc": {
+    "message": "Ouvrir dans le panneau latéral."
+  },
   "Option_title_desc": {
     "message": "Affiché comme titre de commande."
   },