update

src/renderer/components/social/AddAccountDialog.tsx

@@ -1,19 +1,17 @@
 import { useState } from "react";
 import { motion } from "framer-motion";
-import { Plus, X } from "@phosphor-icons/react";
+import { SignIn, X } from "@phosphor-icons/react";
 import type { SocialPlatform } from "@shared/types";
-import { ActionButton, Input } from "../ui";
+import { ActionButton } from "../ui";
 import { platformConfig } from "./social-config";
 
 interface AddAccountDialogProps {
-  onAdd: (platform: SocialPlatform, accountName: string, displayName: string, requireApproval: boolean) => void;
+  onAddAndLogin: (platform: SocialPlatform, requireApproval: boolean) => void;
   onClose: () => void;
 }
 
-export function AddAccountDialog({ onAdd, onClose }: AddAccountDialogProps) {
+export function AddAccountDialog({ onAddAndLogin, onClose }: AddAccountDialogProps) {
   const [platform, setPlatform] = useState<SocialPlatform>("twitter");
-  const [accountName, setAccountName] = useState("");
-  const [displayName, setDisplayName] = useState("");
   const [requireApproval, setRequireApproval] = useState(true);
 
   return (
@@ -41,41 +39,29 @@ export function AddAccountDialog({ onAdd, onClose }: AddAccountDialogProps) {
         <div className="space-y-4">
           <div>
             <label className="mb-1.5 block text-[12px] font-medium text-muted-foreground">Platform</label>
-            <div className="grid grid-cols-3 gap-1.5">
-              {(Object.entries(platformConfig) as [SocialPlatform, typeof platformConfig.twitter][]).map(([key, config]) => (
-                <button
-                  key={key}
-                  type="button"
-                  onClick={() => setPlatform(key)}
-                  className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-[11px] font-medium transition ${
-                    platform === key
-                      ? "border-[color:var(--primary)] bg-accent text-primary"
-                      : "border-border text-muted-foreground hover:border-border"
-                  }`}
-                >
-                  <span style={{ color: config.color }}>
-                    <config.icon size={14} />
-                  </span>
-                  {config.label}
-                </button>
-              ))}
+            <div className="max-h-[240px] overflow-y-auto rounded-lg border border-border p-1.5">
+              <div className="grid grid-cols-3 gap-1.5">
+                {(Object.entries(platformConfig) as [SocialPlatform, typeof platformConfig.twitter][]).map(([key, config]) => (
+                  <button
+                    key={key}
+                    type="button"
+                    onClick={() => setPlatform(key)}
+                    className={`flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-[11px] font-medium transition ${
+                      platform === key
+                        ? "border-[color:var(--primary)] bg-accent text-primary"
+                        : "border-border text-muted-foreground hover:border-border"
+                    }`}
+                  >
+                    <span style={{ color: config.color }}>
+                      <config.icon size={14} />
+                    </span>
+                    <span className="truncate">{config.label}</span>
+                  </button>
+                ))}
+              </div>
             </div>
           </div>
 
-          <Input
-            label="Username / Handle"
-            value={accountName}
-            onChange={setAccountName}
-            placeholder={platform === "twitter" ? "elonmusk" : "your-username"}
-          />
-
-          <Input
-            label="Display Name (optional)"
-            value={displayName}
-            onChange={setDisplayName}
-            placeholder="Your display name"
-          />
-
           <div className="rounded-lg border border-border bg-muted px-4 py-3">
             <label className="flex items-center gap-3">
               <input
@@ -92,6 +78,10 @@ export function AddAccountDialog({ onAdd, onClose }: AddAccountDialogProps) {
               </div>
             </label>
           </div>
+
+          <div className="rounded-lg bg-accent px-4 py-3 text-[11px] text-muted-foreground">
+            A browser window will open for you to sign in. Your username and profile info will be detected automatically after login.
+          </div>
         </div>
 
         <div className="mt-6 flex justify-end gap-3">
@@ -103,15 +93,10 @@ export function AddAccountDialog({ onAdd, onClose }: AddAccountDialogProps) {
             Cancel
           </button>
           <ActionButton
-            label="Add Account"
-            onClick={() => {
-              if (accountName.trim()) {
-                onAdd(platform, accountName.trim(), displayName.trim(), requireApproval);
-              }
-            }}
-            icon={Plus}
+            label="Login"
+            onClick={() => onAddAndLogin(platform, requireApproval)}
+            icon={SignIn}
             tone="accent"
-            disabled={!accountName.trim()}
           />
         </div>
       </motion.div>

src/renderer/components/social/SocialPanel.tsx

@@ -13,13 +13,7 @@ interface SocialPanelProps {
   actions: BrowserActionRecord[];
   agents: Array<{ id: string; name: string }>;
   companyId: string;
-  onSave: (input: {
-    companyId: string;
-    platform: SocialPlatform;
-    accountName: string;
-    displayName: string;
-    requireApproval: boolean;
-  }) => Promise<void>;
+  onAddAndLogin: (platform: SocialPlatform, requireApproval: boolean) => Promise<void>;
   onDelete: (id: string) => Promise<void>;
   onLogin: (accountId: string) => Promise<void>;
   onOpenPath: (path: string) => Promise<void>;
@@ -31,8 +25,8 @@ export function SocialAccountsPanel({
   accounts,
   actions,
   agents,
-  companyId,
-  onSave,
+  companyId: _companyId,
+  onAddAndLogin,
   onDelete,
   onLogin,
   onOpenPath,
@@ -43,10 +37,10 @@ export function SocialAccountsPanel({
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [activeTab, setActiveTab] = useState<"accounts" | "history">("accounts");
 
-  const handleAdd = useCallback(async (platform: SocialPlatform, accountName: string, displayName: string, requireApproval: boolean) => {
-    await onSave({ companyId, platform, accountName, displayName, requireApproval });
+  const handleAddAndLogin = useCallback(async (platform: SocialPlatform, requireApproval: boolean) => {
+    await onAddAndLogin(platform, requireApproval);
     setShowAddDialog(false);
-  }, [companyId, onSave]);
+  }, [onAddAndLogin]);
 
   return (
     <div className="space-y-5">
@@ -151,7 +145,7 @@ export function SocialAccountsPanel({
       <AnimatePresence>
         {showAddDialog ? (
           <AddAccountDialog
-            onAdd={(platform, accountName, displayName, requireApproval) => void handleAdd(platform, accountName, displayName, requireApproval)}
+            onAddAndLogin={(platform, requireApproval) => void handleAddAndLogin(platform, requireApproval)}
             onClose={() => setShowAddDialog(false)}
           />
         ) : null}

src/renderer/components/social/social-config.ts

@@ -1,6 +1,5 @@
 import type { ElementType } from "react";
 import {
-  Browser,
   Camera,
   ChatCircle,
   Eye,
@@ -9,14 +8,23 @@ import {
   MagnifyingGlass,
   PaperPlaneTilt,
   UserPlus,
+  DiscordLogo,
   FacebookLogo,
   GlobeHemisphereWest,
   InstagramLogo,
   LinkedinLogo,
+  PinterestLogo,
   RedditLogo,
+  TelegramLogo,
   TiktokLogo,
+  WhatsappLogo,
   XLogo,
   YoutubeLogo,
+  ChatTeardrop,
+  MonitorPlay,
+  Notebook,
+  MusicNote,
+  Lightbulb,
 } from "@phosphor-icons/react";
 import type { SocialPlatform } from "@shared/types";
 
@@ -29,6 +37,17 @@ export const platformConfig: Record<SocialPlatform, { label: string; color: stri
   youtube: { label: "YouTube", color: "#FF0000", bgColor: "#FF000014", icon: YoutubeLogo },
   tiktok: { label: "TikTok", color: "#111315", bgColor: "#11131514", icon: TiktokLogo },
   bluesky: { label: "Bluesky", color: "#0085FF", bgColor: "#0085FF14", icon: GlobeHemisphereWest },
+  discord: { label: "Discord", color: "#5865F2", bgColor: "#5865F214", icon: DiscordLogo },
+  threads: { label: "Threads", color: "#000000", bgColor: "#00000014", icon: GlobeHemisphereWest },
+  pinterest: { label: "Pinterest", color: "#E60023", bgColor: "#E6002314", icon: PinterestLogo },
+  telegram: { label: "Telegram", color: "#26A5E4", bgColor: "#26A5E414", icon: TelegramLogo },
+  whatsapp: { label: "WhatsApp", color: "#25D366", bgColor: "#25D36614", icon: WhatsappLogo },
+  wechat: { label: "微信 WeChat", color: "#07C160", bgColor: "#07C16014", icon: ChatTeardrop },
+  weibo: { label: "微博 Weibo", color: "#E6162D", bgColor: "#E6162D14", icon: Globe },
+  xiaohongshu: { label: "小红书 RED", color: "#FE2C55", bgColor: "#FE2C5514", icon: Notebook },
+  douyin: { label: "抖音 Douyin", color: "#161823", bgColor: "#16182314", icon: MusicNote },
+  bilibili: { label: "哔哩哔哩 Bilibili", color: "#00A1D6", bgColor: "#00A1D614", icon: MonitorPlay },
+  zhihu: { label: "知乎 Zhihu", color: "#0066FF", bgColor: "#0066FF14", icon: Lightbulb },
   other: { label: "Other", color: "#6B7280", bgColor: "#6B728014", icon: GlobeHemisphereWest },
 };
 
@@ -41,6 +60,4 @@ export const actionTypeLabels: Record<string, { label: string; icon: React.Eleme
   screenshot: { label: "Screenshot", icon: Camera },
   navigate: { label: "Navigate", icon: Globe },
   search: { label: "Search", icon: MagnifyingGlass },
-  dm: { label: "Direct Message", icon: ChatCircle },
-  custom_script: { label: "Legacy Action", icon: Browser },
 };