Initial public release

packages/i18n/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@browser-skill/i18n",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./react": {
+      "import": "./src/react.tsx",
+      "default": "./src/react.tsx"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "dependencies": {
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.2",
+    "react-i18next": "^15.3.4"
+  }
+}

packages/i18n/src/chrome-storage-sync.ts

@@ -0,0 +1,72 @@
+import type { i18n as I18nType } from "i18next";
+
+const STORAGE_KEY = "i18nextLng";
+
+interface ChromeStorageLocal {
+  get(
+    keys: string | string[] | Record<string, unknown>,
+    callback: (items: Record<string, unknown>) => void,
+  ): void;
+  set(items: Record<string, unknown>, callback?: () => void): void;
+}
+
+interface StorageChange {
+  newValue?: unknown;
+}
+
+declare const chrome:
+  | {
+      storage?: {
+        local?: ChromeStorageLocal;
+        onChanged?: {
+          addListener: (
+            callback: (changes: Record<string, StorageChange>, areaName: string) => void,
+          ) => void;
+        };
+      };
+    }
+  | undefined;
+
+function getChromeLocal(): ChromeStorageLocal | undefined {
+  return typeof chrome !== "undefined" ? chrome.storage?.local : undefined;
+}
+
+/** Avoid page-origin localStorage; use extension storage + navigator only. */
+export function getLanguageDetectionOptions(): {
+  order: string[];
+  caches: string[];
+} {
+  return {
+    order: ["navigator"],
+    caches: [],
+  };
+}
+
+/** Load persisted locale and keep popup/content scripts in sync via chrome.storage. */
+export function bindChromeStorageLanguageSync(i18n: I18nType): void {
+  const storage = getChromeLocal();
+  if (!storage) {
+    return;
+  }
+
+  storage.get(STORAGE_KEY, (items) => {
+    const saved = items[STORAGE_KEY];
+    if (typeof saved === "string" && saved !== i18n.language) {
+      void i18n.changeLanguage(saved);
+    }
+  });
+
+  i18n.on("languageChanged", (lng) => {
+    storage.set({ [STORAGE_KEY]: lng });
+  });
+
+  chrome?.storage?.onChanged?.addListener((changes, area) => {
+    if (area !== "local" || !(STORAGE_KEY in changes)) {
+      return;
+    }
+    const next = changes[STORAGE_KEY]?.newValue;
+    if (typeof next === "string" && next !== i18n.language) {
+      void i18n.changeLanguage(next);
+    }
+  });
+}

packages/i18n/src/i18n.ts

@@ -0,0 +1,44 @@
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+
+import { bindChromeStorageLanguageSync, getLanguageDetectionOptions } from "./chrome-storage-sync";
+import enUSCommon from "./locales/en-US/common.json";
+import enUSExtension from "./locales/en-US/extension.json";
+import zhCNCommon from "./locales/zh-CN/common.json";
+import zhCNExtension from "./locales/zh-CN/extension.json";
+
+const resources = {
+  "zh-CN": {
+    common: zhCNCommon,
+    extension: zhCNExtension,
+  },
+  "en-US": {
+    common: enUSCommon,
+    extension: enUSExtension,
+  },
+} as const;
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: "zh-CN",
+    defaultNS: "common",
+    ns: ["common", "extension"],
+
+    interpolation: {
+      escapeValue: false,
+    },
+
+    detection: getLanguageDetectionOptions(),
+
+    react: {
+      useSuspense: false,
+    },
+  });
+
+bindChromeStorageLanguageSync(i18n);
+
+export default i18n;

packages/i18n/src/index.ts

@@ -0,0 +1,4 @@
+import i18n from "./i18n";
+import "./types";
+
+export { i18n };

packages/i18n/src/locales/en-US/common.json

@@ -0,0 +1,6 @@
+{
+  "app": {
+    "name": "browser-skill",
+    "description": "Drive your logged-in browser from AI agents via the bsk CLI"
+  }
+}

packages/i18n/src/locales/en-US/extension.json

@@ -0,0 +1,72 @@
+{
+  "popup": {
+    "brandCategory": "Browser Automation",
+    "brandName": "BrowserSkill",
+    "stateLabel": {
+      "disconnected": "Disconnected",
+      "connecting": "Connecting…",
+      "connected": "Connected",
+      "version_skew": "Protocol mismatch",
+      "disabled": "Connection off"
+    },
+    "stateDetail": {
+      "disconnected": "Open BrowserSkill to connect.",
+      "connecting": "Connecting to BrowserSkill…",
+      "connected": "Ready for automation tasks.",
+      "version_skew": "Some features may be unavailable."
+    },
+    "stateBadge": {
+      "disconnected": "Standby",
+      "connecting": "Igniting",
+      "connected": "Ready",
+      "version_skew": "Action needed",
+      "disabled": "Off"
+    },
+    "connectionToggleTitle": "BrowserSkill connection",
+    "versionSkewWarning": "Extension protocol v{{extensionProtocol}}, daemon v{{daemonProtocol}}.",
+    "upgradeAvailable": "Upgradable",
+    "labelTitle": "Browser alias",
+    "labelDescription": "Distinguish multiple browser instances.",
+    "labelPlaceholder": "e.g. Personal Chrome",
+    "runtimeTitle": "Runtime",
+    "daemonVersion": "daemon v{{version}}",
+    "extensionVersion": "extension v{{version}}",
+    "extensionVersionHint": "Extension version",
+    "daemonVersionHint": "bsk version",
+    "protocolVersion": "protocol v{{version}}",
+    "extensionProtocol": "extension protocol v{{version}}",
+    "daemonProtocol": "daemon protocol v{{version}}",
+    "instanceTitle": "Instance ID",
+    "instanceDescription": "Unique connection identifier for this browser",
+    "copy": "Copy",
+    "copied": "Copied",
+    "copyInstanceId": "Copy instance ID"
+  },
+  "controlOverlay": {
+    "status": "Agent controlling",
+    "interrupt": "Interrupt",
+    "interrupting": "Interrupting…"
+  },
+  "borrowConfirmation": {
+    "title": "Allow tab borrow?",
+    "titleInactive": "Agent wants to borrow a tab",
+    "body": "An AI agent wants to move this tab into its workspace. You can deny or allow the borrow.",
+    "targetTab": "Target tab:",
+    "autoAllow": "Auto-allowing in {{count}}s",
+    "deny": "Deny",
+    "allow": "Allow",
+    "notificationTitle": "BrowserSkill: Agent wants to borrow a tab",
+    "notificationBody": "Approve or deny the borrow of \"{{tabTitle}}\" in your browser."
+  },
+  "helpRequest": {
+    "title": "Agent needs your help",
+    "noteLabel": "Optional note back to the agent",
+    "notePlaceholder": "Add a note for the agent (optional)",
+    "continue": "Continue",
+    "cancel": "Cancel",
+    "collapse": "Collapse",
+    "expand": "Expand",
+    "dragHandle": "Drag to move",
+    "notificationTitle": "BrowserSkill: Agent needs your help"
+  }
+}

packages/i18n/src/locales/zh-CN/common.json

@@ -0,0 +1,6 @@
+{
+  "app": {
+    "name": "browser-skill",
+    "description": "通过 bsk CLI 让 AI Agent 驱动你已登录的浏览器"
+  }
+}

packages/i18n/src/locales/zh-CN/extension.json

@@ -0,0 +1,72 @@
+{
+  "popup": {
+    "brandCategory": "Browser Automation",
+    "brandName": "BrowserSkill",
+    "stateLabel": {
+      "disconnected": "未连接",
+      "connecting": "连接中…",
+      "connected": "已连接",
+      "version_skew": "协议不一致",
+      "disabled": "连接已关闭"
+    },
+    "stateDetail": {
+      "disconnected": "请先打开 BrowserSkill。",
+      "connecting": "正在连接 BrowserSkill…",
+      "connected": "可接收自动化任务。",
+      "version_skew": "部分能力可能不可用。"
+    },
+    "stateBadge": {
+      "disconnected": "Standby",
+      "connecting": "Igniting",
+      "connected": "Ready",
+      "version_skew": "Action needed",
+      "disabled": "Off"
+    },
+    "connectionToggleTitle": "BrowserSkill 连接",
+    "versionSkewWarning": "扩展协议 v{{extensionProtocol}}，daemon 协议 v{{daemonProtocol}}。",
+    "upgradeAvailable": "可升级",
+    "labelTitle": "浏览器别名",
+    "labelDescription": "用于区分多个浏览器实例。",
+    "labelPlaceholder": "例如：个人 Chrome",
+    "runtimeTitle": "运行版本",
+    "daemonVersion": "daemon v{{version}}",
+    "extensionVersion": "扩展 v{{version}}",
+    "extensionVersionHint": "扩展版本",
+    "daemonVersionHint": "bsk 版本",
+    "protocolVersion": "协议 v{{version}}",
+    "extensionProtocol": "扩展协议 v{{version}}",
+    "daemonProtocol": "daemon 协议 v{{version}}",
+    "instanceTitle": "实例 ID",
+    "instanceDescription": "本浏览器的唯一连接标识",
+    "copy": "复制",
+    "copied": "已复制",
+    "copyInstanceId": "复制实例 ID"
+  },
+  "controlOverlay": {
+    "status": "Agent 正在控制",
+    "interrupt": "中断",
+    "interrupting": "中断中…"
+  },
+  "borrowConfirmation": {
+    "title": "允许借用标签页？",
+    "titleInactive": "Agent 请求借用标签页",
+    "body": "AI Agent 希望将此标签页移入工作区。您可以拒绝或允许借用。",
+    "targetTab": "目标标签页：",
+    "autoAllow": "{{count}} 秒后自动允许",
+    "deny": "拒绝",
+    "allow": "允许",
+    "notificationTitle": "BrowserSkill：Agent 请求借用标签页",
+    "notificationBody": "请在浏览器中允许或拒绝对「{{tabTitle}}」的借用。"
+  },
+  "helpRequest": {
+    "title": "Agent 需要你的帮助",
+    "noteLabel": "给 Agent 的备注（可选）",
+    "notePlaceholder": "给 Agent 留言（可选）",
+    "continue": "继续",
+    "cancel": "取消",
+    "collapse": "折叠",
+    "expand": "展开",
+    "dragHandle": "拖动以移动",
+    "notificationTitle": "BrowserSkill：Agent 需要你的帮助"
+  }
+}

packages/i18n/src/react.tsx

@@ -0,0 +1,22 @@
+import type { KeyPrefix } from "i18next";
+import {
+  type FallbackNs,
+  I18nextProvider,
+  Trans as TransBase,
+  type UseTranslationOptions,
+  useTranslation as useTranslationBase,
+} from "react-i18next";
+import "./types";
+
+type BrowserSkillNamespace = "common" | "extension";
+
+/** Re-export with `const Ns` so `t()` keys are scoped to the namespace you pass. */
+export function useTranslation<
+  const Ns extends BrowserSkillNamespace | undefined = undefined,
+  const KPrefix extends KeyPrefix<FallbackNs<Ns>> = undefined,
+>(ns?: Ns, options?: UseTranslationOptions<KPrefix>) {
+  return useTranslationBase(ns, options);
+}
+
+export const Trans = TransBase;
+export { I18nextProvider };

packages/i18n/src/types.ts

@@ -0,0 +1,13 @@
+import "i18next";
+import type zhCNCommon from "./locales/zh-CN/common.json";
+import type zhCNExtension from "./locales/zh-CN/extension.json";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    defaultNS: "common";
+    resources: {
+      common: typeof zhCNCommon;
+      extension: typeof zhCNExtension;
+    };
+  }
+}

packages/ui/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@browser-skill/ui",
+  "version": "0.1.0-dev.0",
+  "private": true,
+  "type": "module",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./styles": "./src/styles/tailwind.css"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0"
+  }
+}

packages/ui/src/components/ui/badge.tsx

@@ -0,0 +1,33 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return (
+    <span data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

packages/ui/src/components/ui/button.tsx

@@ -0,0 +1,49 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium outline-none transition-all disabled:pointer-events-none disabled:opacity-50 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline:
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 gap-1.5 px-3",
+        lg: "h-10 px-6",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants>) {
+  return (
+    <button
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

packages/ui/src/components/ui/card.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-5 rounded-2xl border py-5 shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-5 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm leading-relaxed", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("px-5", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="card-footer" className={cn("flex items-center px-5", className)} {...props} />
+  );
+}
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

packages/ui/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "border-input bg-background/70 text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-xl border px-3 py-1 text-sm shadow-xs outline-none transition-[background,border-color,box-shadow]",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

packages/ui/src/components/ui/label.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Label({ className, ...props }: React.ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "text-foreground text-sm font-medium leading-none select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

packages/ui/src/index.ts

@@ -0,0 +1,14 @@
+export { Badge, badgeVariants } from "./components/ui/badge";
+export { Button, buttonVariants } from "./components/ui/button";
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./components/ui/card";
+export { Input } from "./components/ui/input";
+export { Label } from "./components/ui/label";
+export { cn } from "./lib/utils";

packages/ui/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

packages/ui/src/styles/tailwind.css

@@ -0,0 +1,90 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  color-scheme: light dark;
+  --background: oklch(0.99 0.005 50);
+  --foreground: oklch(0.14 0.03 50);
+  --card: oklch(0.995 0.003 50 / 0.82);
+  --card-foreground: oklch(0.14 0.03 50);
+  --primary: oklch(0.62 0.22 45);
+  --primary-foreground: oklch(0.99 0.01 50);
+  --secondary: oklch(0.96 0.04 65);
+  --secondary-foreground: oklch(0.25 0.08 65);
+  --muted: oklch(0.96 0.01 50);
+  --muted-foreground: oklch(0.55 0.04 50);
+  --accent: oklch(0.96 0.04 65);
+  --accent-foreground: oklch(0.25 0.08 65);
+  --destructive: oklch(0.6 0.25 25);
+  --destructive-foreground: oklch(0.99 0.01 50);
+  --border: oklch(0.9 0.025 60);
+  --input: oklch(0.9 0.025 60);
+  --ring: oklch(0.62 0.22 45);
+  --radius: 0.75rem;
+}
+
+.dark {
+  --background: oklch(0.2 0.02 50);
+  --foreground: oklch(0.98 0.01 50);
+  --card: oklch(0.24 0.02 50 / 0.82);
+  --card-foreground: oklch(0.98 0.01 50);
+  --primary: oklch(0.7 0.18 45);
+  --primary-foreground: oklch(0.14 0.03 50);
+  --secondary: oklch(0.32 0.03 60);
+  --secondary-foreground: oklch(0.98 0.01 50);
+  --muted: oklch(0.3 0.02 50);
+  --muted-foreground: oklch(0.75 0.03 50);
+  --accent: oklch(0.32 0.03 60);
+  --accent-foreground: oklch(0.98 0.01 50);
+  --destructive: oklch(0.45 0.2 25);
+  --destructive-foreground: oklch(0.98 0.01 50);
+  --border: oklch(0.35 0.02 60);
+  --input: oklch(0.35 0.02 60);
+  --ring: oklch(0.7 0.18 45);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  html,
+  body,
+  #root {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+    @apply bg-background text-foreground;
+  }
+}