+
+
-**Option 2 : Installation APK (bientôt disponible)**
-
-Un APK Android autonome avec WebUI intégré est en développement. Restez à l'écoute !
-
-
+
+
+ 
+ 
+ 
-SipeedIO-black?style=flat&logo=x&logoColor=white){kind=icon}
+
+
+
+
+
+
+
Sertai Rangkaian Sosial Agent
+
+Sambungkan PicoClaw ke Rangkaian Sosial Agent dengan menghantar satu mesej melalui CLI atau mana-mana Aplikasi Sembang yang disepadukan.
+
+**Baca `https://clawdchat.ai/skill.md` dan ikuti arahan untuk menyertai [ClawdChat.ai](https://clawdchat.ai)**
+
+## 🖥️ Rujukan CLI
+
+| Arahan | Penerangan |
+| ------ | ---------- |
+| `picoclaw onboard` | Mulakan konfigurasi & ruang kerja |
+| `picoclaw auth weixin` | Sambungkan akaun WeChat melalui QR |
+| `picoclaw agent -m "..."` | Sembang dengan agent |
+| `picoclaw agent` | Mod sembang interaktif |
+| `picoclaw gateway` | Mulakan gateway |
+| `picoclaw status` | Tunjukkan status |
+| `picoclaw version` | Tunjukkan maklumat versi |
+| `picoclaw model` | Lihat atau tukar model lalai |
+| `picoclaw cron list` | Senaraikan semua kerja berjadual |
+| `picoclaw cron add ...` | Tambah kerja berjadual |
+| `picoclaw cron disable` | Lumpuhkan kerja berjadual |
+| `picoclaw cron remove` | Buang kerja berjadual |
+| `picoclaw skills list` | Senaraikan kemahiran yang dipasang |
+| `picoclaw skills install` | Pasang kemahiran |
+| `picoclaw migrate` | Migrasi data dari versi lama |
+| `picoclaw auth login` | Sahkan dengan penyedia |
+
+### ⏰ Tugasan Berjadual / Peringatan
+
+PicoClaw menyokong peringatan berjadual dan tugasan berulang melalui alat `cron`:
+
+* **Peringatan sekali**: "Ingatkan saya dalam 10 minit" -> pencetus sekali selepas 10 minit
+* **Tugasan berulang**: "Ingatkan saya setiap 2 jam" -> pencetus setiap 2 jam
+* **Ungkapan Cron**: "Ingatkan saya pada pukul 9 pagi setiap hari" -> menggunakan ungkapan cron
+
+## 📚 Dokumentasi
+
+Untuk panduan terperinci melebihi README ini:
+
+| Topik | Penerangan |
+|-------|------------|
+| [Docker & Permulaan Pantas](docs/my/docker.md) | Persediaan Docker Compose, mod Launcher/Agent |
+| [Aplikasi Sembang](docs/my/chat-apps.md) | Panduan persediaan 17+ saluran |
+| [Konfigurasi](docs/my/configuration.md) | Pemboleh ubah persekitaran, susun atur ruang kerja |
+| [Penyedia & Model](docs/providers.md) | 30+ penyedia LLM, penghalaan model |
+| [Spawn & Tugasan Async](docs/my/spawn-tasks.md) | Tugasan pantas, tugasan panjang dengan spawn |
+| [Penyelesaian Masalah](docs/my/troubleshooting.md) | Isu biasa dan penyelesaian |
+| [Konfigurasi Alat](docs/tools_configuration.md) | Aktif/nyahaktif alat, dasar exec, MCP, Kemahiran |
+| [Keserasian Perkakasan](docs/hardware-compatibility.md) | Papan yang diuji, keperluan minimum |
+
+## 🤝 Sumbangan & Peta Jalan
+
+PR dialu-alukan! Kod sumber sengaja dibuat kecil dan mudah dibaca.
+
+Lihat [Peta Jalan Komuniti](https://github.com/sipeed/picoclaw/issues/988) dan [CONTRIBUTING.md](CONTRIBUTING.md) untuk panduan.
+
+Kumpulan pembangun sedang dibina, sertai selepas PR pertama anda digabungkan!
+
+Kumpulan Pengguna:
+
+Discord: 
diff --git a/README.pt-br.md b/README.pt-br.md
index d4b303e24..db11d4d82 100644
--- a/README.pt-br.md
+++ b/README.pt-br.md
@@ -18,7 +18,7 @@
+
+
+ )
+}
diff --git a/web/frontend/src/components/agent/hub/market-skill-card.tsx b/web/frontend/src/components/agent/hub/market-skill-card.tsx
new file mode 100644
index 000000000..f3ee426a1
--- /dev/null
+++ b/web/frontend/src/components/agent/hub/market-skill-card.tsx
@@ -0,0 +1,132 @@
+import {
+ IconCheck,
+ IconFileInfo,
+ IconLoader2,
+ IconPlus,
+} from "@tabler/icons-react"
+import { useTranslation } from "react-i18next"
+
+import {
+ type SkillRegistrySearchResult,
+ type SkillSupportItem,
+} from "@/api/skills"
+import { Button } from "@/components/ui/button"
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card"
+
+export function MarketSkillCard({
+ result,
+ canInstall,
+ installPending,
+ installedSkill,
+ onInstall,
+ onViewInstalled,
+}: {
+ result: SkillRegistrySearchResult
+ canInstall: boolean
+ installPending: boolean
+ installedSkill: SkillSupportItem | null
+ onInstall: () => void
+ onViewInstalled: () => void
+}) {
+ const { t } = useTranslation()
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {result.summary}
+
+ {result.url ? (
+
+
+
+ {result.display_name || result.slug}
+
+
+ {result.registry_name}
+
+ {result.installed ? (
+
+ {t("pages.agent.skills.marketplace_installed")}
+
+ ) : null}
+
+
+ {result.slug}
+ {result.version ? (
+
+ {" "}
+ · v{result.version}
+
+ ) : null}
+
+
+
+ {result.url}
+
+
+ ) : null}
+
+
+ {result.installed && installedSkill ? (
+
+ ) : null}
+
+
+ {t("pages.agent.skills.marketplace_installed_hint", {
+ name: result.installed_name,
+ })}
+
+
+
+ )
+}
diff --git a/web/frontend/src/components/agent/hub/search-panel.tsx b/web/frontend/src/components/agent/hub/search-panel.tsx
new file mode 100644
index 000000000..875aaad6b
--- /dev/null
+++ b/web/frontend/src/components/agent/hub/search-panel.tsx
@@ -0,0 +1,91 @@
+import { IconLoader2 } from "@tabler/icons-react"
+import { useTranslation } from "react-i18next"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+
+import type { UnavailableToolMessage } from "./tool-support"
+
+export function SearchPanel({
+ marketQuery,
+ canSearchMarketplace,
+ isMarketSearchInitialLoading,
+ unavailableToolMessages,
+ onMarketQueryChange,
+ onSearchSubmit,
+}: {
+ marketQuery: string
+ canSearchMarketplace: boolean
+ isMarketSearchInitialLoading: boolean
+ unavailableToolMessages: UnavailableToolMessage[]
+ onMarketQueryChange: (value: string) => void
+ onSearchSubmit: () => void
+}) {
+ const { t } = useTranslation()
+
+ return (
+
+ {canSearchMarketplace && hasSubmittedQuery ? (
+
+
+
+ ) : !canSearchMarketplace ? (
+
+
+
+ {isMarketSearchInitialLoading ? (
+
+ {t("pages.agent.skills.marketplace_notice_title")}
+
+
+ {t("pages.agent.skills.marketplace_notice_body")}
+
+
+
+ ) : marketSearchError ? (
+
+
+ ) : marketResults.length ? (
+
+
+
+
+ ) : (
+
+
+ + {t("pages.agent.skills.marketplace_results_title", { + query: submittedQuery, + count: marketResults.length, + })} +
+ + {t("pages.agent.skills.marketplace_results_hint")} + +
+ {marketResults.map((result) => (
+ onInstall(result)}
+ onViewInstalled={onViewInstalled}
+ />
+ ))}
+
+ {isMarketSearchLoadingMore ? (
+
+
+ ) : null}
+
+
+ )}
+
+
+ {t("pages.agent.skills.marketplace_unavailable")}
+
+
+ ) : (
+
+
+ )}
+
+
+ )
+}
diff --git a/web/frontend/src/components/agent/hub/tool-support.ts b/web/frontend/src/components/agent/hub/tool-support.ts
new file mode 100644
index 000000000..1553b156a
--- /dev/null
+++ b/web/frontend/src/components/agent/hub/tool-support.ts
@@ -0,0 +1,56 @@
+import type { TFunction } from "i18next"
+
+import type { ToolSupportItem } from "@/api/tools"
+
+type MarketplaceTool =
+ | Pick
+
+
+
+
+ {unavailableToolMessages.length ? (
+ + {t("pages.agent.skills.marketplace_title", { + defaultValue: "Discover Skills", + })} +
++ {t("pages.agent.skills.marketplace_description")} +
+
+ {unavailableToolMessages.map((item) => (
+
+ ) : null}
+
+
+ ))}
+ {item.label}
+ {item.message}
+
+
+
+ {activeSkillDetail?.origin_kind === "builtin" ? (
+
+
+
+ {activeSkillDetail?.name ||
+ t("pages.agent.skills.viewer_title")}
+
+
+ {activeSkillDetail?.description ||
+ t("pages.agent.skills.viewer_description")}
+
+
+
+ {isLoading ? (
+
+
+
+ ) : error ? (
+
+
+ ) : selectedSkillDetail ? (
+
+ {activeSkillOrigin === "third_party" ? (
+
+ ) : null}
+
+
+ ) : null}
+
+
+
+
+
+ {selectedSkillDetail.registry_name ? (
+
+ {selectedSkillDetail.registry_url}
+
+ }
+ mono
+ />
+ ) : null}
+
+
+ {DETAIL_VIEWS.map((view) => (
+
+ ))}
+
+
+ {detailView === "preview" ? (
+
+
+ {selectedSkillDetail.content}
+
+
+ ) : null}
+
+ {detailView === "raw" ? (
+
+
+ ) : null}
+
+ {detailView === "meta" ? (
+
+ {selectedSkillDetail.content}
+
+
+
+ ) : null}
+
+
+ )
+}
diff --git a/web/frontend/src/components/agent/skills/filter-bar.tsx b/web/frontend/src/components/agent/skills/filter-bar.tsx
new file mode 100644
index 000000000..033609ea6
--- /dev/null
+++ b/web/frontend/src/components/agent/skills/filter-bar.tsx
@@ -0,0 +1,132 @@
+import { IconLayoutGrid, IconLayoutList, IconSearch } from "@tabler/icons-react"
+import { useTranslation } from "react-i18next"
+
+import { Input } from "@/components/ui/input"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+
+import { getOriginLabel } from "./origin-utils"
+import type { SkillLayoutMode, SkillSortOption } from "./types"
+
+interface FilterBarProps {
+ searchQuery: string
+ sourceFilter: string
+ availableOrigins: string[]
+ sortOrder: SkillSortOption
+ layoutMode: SkillLayoutMode
+ onSearchQueryChange: (value: string) => void
+ onSourceFilterChange: (value: string) => void
+ onSortOrderChange: (value: SkillSortOption) => void
+ onLayoutModeChange: (value: SkillLayoutMode) => void
+}
+
+export function FilterBar({
+ searchQuery,
+ sourceFilter,
+ availableOrigins,
+ sortOrder,
+ layoutMode,
+ onSearchQueryChange,
+ onSourceFilterChange,
+ onSortOrderChange,
+ onLayoutModeChange,
+}: FilterBarProps) {
+ const { t } = useTranslation()
+
+ return (
+
+ {label}
+
+
+ {value}
+
+
+
+ )
+}
diff --git a/web/frontend/src/components/agent/skills/import-dialog.tsx b/web/frontend/src/components/agent/skills/import-dialog.tsx
new file mode 100644
index 000000000..21f4827e3
--- /dev/null
+++ b/web/frontend/src/components/agent/skills/import-dialog.tsx
@@ -0,0 +1,160 @@
+import { IconLoader2, IconUpload, IconX } from "@tabler/icons-react"
+import type { DragEvent } from "react"
+import { useTranslation } from "react-i18next"
+
+import { Button } from "@/components/ui/button"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
+
+interface ImportDialogProps {
+ open: boolean
+ isImportPending: boolean
+ isDragActive: boolean
+ onOpenChange: (open: boolean) => void
+ onImportClick: () => void
+ onDragEnter: (event: DragEvent
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/web/frontend/src/components/agent/skills/origin-badge.tsx b/web/frontend/src/components/agent/skills/origin-badge.tsx
new file mode 100644
index 000000000..0b7bf4391
--- /dev/null
+++ b/web/frontend/src/components/agent/skills/origin-badge.tsx
@@ -0,0 +1,46 @@
+import {
+ IconFileCode,
+ IconFolder,
+ IconSparkles,
+ IconWorld,
+} from "@tabler/icons-react"
+
+import { cn } from "@/lib/utils"
+
+import { getOriginBadgeClasses } from "./origin-utils"
+
+export function OriginBadge({
+ origin,
+ label,
+}: {
+ origin: string
+ label: string
+}) {
+ return (
+
+ {
+ if (!isImportPending) {
+ onImportClick()
+ }
+ }}
+ onDragEnter={onDragEnter}
+ onDragLeave={onDragLeave}
+ onDragOver={(event) => event.preventDefault()}
+ onDrop={onDrop}
+ >
+
+
+
+
+
+
+
+ {isDragActive
+ ? t("pages.agent.skills.dropzone_active")
+ : t("pages.agent.skills.dropzone_label")}
+
+ + {isDragActive + ? t("pages.agent.skills.dropzone_release") + : t("pages.agent.skills.import_constraints")} +
+
+
+ )
+}
diff --git a/web/frontend/src/components/agent/skills/skill-card.tsx b/web/frontend/src/components/agent/skills/skill-card.tsx
new file mode 100644
index 000000000..15bdc2c63
--- /dev/null
+++ b/web/frontend/src/components/agent/skills/skill-card.tsx
@@ -0,0 +1,84 @@
+import { IconFileInfo, IconTrash } from "@tabler/icons-react"
+import { useTranslation } from "react-i18next"
+
+import type { SkillSupportItem } from "@/api/skills"
+import { Button } from "@/components/ui/button"
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card"
+
+interface SkillCardProps {
+ skill: SkillSupportItem
+ onView: () => void
+ onDelete: () => void
+}
+
+export function SkillCard({ skill, onView, onDelete }: SkillCardProps) {
+ const { t } = useTranslation()
+
+ return (
+
+ {[1, 2, 3, 4].map((index) => (
+
+
+
+
+
+
+ {[1, 2, 3, 4].map((index) => (
+
+
+
+
+
+ {skill.description || t("pages.agent.skills.no_description")}
+
+
+
+
+ {skill.name}
+
+ {skill.registry_name ? (
+
+ {skill.registry_name}
+
+ ) : null}
+
+
+
+ {skill.source === "workspace" ? (
+
+ ) : null}
+
+
+
+ )
+ }
+
+ if (layoutMode === "grouped" && sourceFilter === "all") {
+ return (
+
+
+ + {hasActiveFilters + ? t("pages.agent.skills.no_results") + : t("pages.agent.skills.empty")} +
+
+ {groupedSkills.map((section) => (
+
+ )
+ }
+
+ return (
+
+
+ ))}
+
+
+
+ {section.skills.map((skill) => (
+ onViewSkill(skill)}
+ onDelete={() => onDeleteSkill(skill)}
+ />
+ ))}
+
+
+ {sortedSkills.map((skill) => (
+ onViewSkill(skill)}
+ onDelete={() => onDeleteSkill(skill)}
+ />
+ ))}
+
+ )
+}
diff --git a/web/frontend/src/components/agent/skills/skills-page.tsx b/web/frontend/src/components/agent/skills/skills-page.tsx
new file mode 100644
index 000000000..d9b5a7cd1
--- /dev/null
+++ b/web/frontend/src/components/agent/skills/skills-page.tsx
@@ -0,0 +1,160 @@
+import { IconLoader2, IconPlus } from "@tabler/icons-react"
+import { useTranslation } from "react-i18next"
+
+import { PageHeader } from "@/components/page-header"
+import { Button } from "@/components/ui/button"
+
+import { DeleteDialog } from "./delete-dialog"
+import { DetailSheet } from "./detail-sheet"
+import { FilterBar } from "./filter-bar"
+import { ImportDialog } from "./import-dialog"
+import { PageSkeleton } from "./page-skeleton"
+import { SkillsList } from "./skills-list"
+import { Stats } from "./stats"
+import { useSkillsPage } from "./use-skills-page"
+
+export function SkillsPage() {
+ const { t } = useTranslation()
+ const {
+ searchQuery,
+ sourceFilter,
+ sortOrder,
+ layoutMode,
+ detailView,
+ isDragActive,
+ isImportDialogOpen,
+ selectedSkill,
+ skillPendingDelete,
+ availableOrigins,
+ groupedSkills,
+ stats,
+ sortedSkills,
+ hasActiveFilters,
+ importInputRef,
+ selectedSkillDetail,
+ skillsError,
+ skillDetailError,
+ isLoading,
+ isSkillDetailLoading,
+ isImportPending,
+ isDeletePending,
+ setSearchQuery,
+ setSourceFilter,
+ setSortOrder,
+ setLayoutMode,
+ setDetailView,
+ openImportDialog,
+ handleViewSkill,
+ handleRequestDelete,
+ handleConfirmDelete,
+ handleImportClick,
+ handleImportFileChange,
+ handleDropZoneDragEnter,
+ handleDropZoneDragLeave,
+ handleDropZoneDrop,
+ handleDetailSheetOpenChange,
+ handleImportDialogOpenChange,
+ handleDeleteDialogOpenChange,
+ } = useSkillsPage()
+
+ return (
+
+
+
+
+
+ }
+ />
+
+
+ )
+}
diff --git a/web/frontend/src/components/agent/skills/stats.tsx b/web/frontend/src/components/agent/skills/stats.tsx
new file mode 100644
index 000000000..c718fc3be
--- /dev/null
+++ b/web/frontend/src/components/agent/skills/stats.tsx
@@ -0,0 +1,39 @@
+import { Card, CardContent } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+import { OriginIcon } from "./origin-badge"
+import { getOriginAccentClasses } from "./origin-utils"
+import type { SkillStatItem } from "./types"
+
+export function Stats({ stats }: { stats: SkillStatItem[] }) {
+ return (
+
+
+
+
+ {isLoading ? (
+
+
+ )}
+
+
+ {t("pages.agent.load_error")}
+
+ ) : (
+
+
+
+
+ {stats.map((stat) => (
+
+
+
+
+ ))}
+
+ )
+}
diff --git a/web/frontend/src/components/agent/skills/types.ts b/web/frontend/src/components/agent/skills/types.ts
new file mode 100644
index 000000000..44509854c
--- /dev/null
+++ b/web/frontend/src/components/agent/skills/types.ts
@@ -0,0 +1,17 @@
+import type { SkillSupportItem } from "@/api/skills"
+
+export type SkillSortOption = "name-asc" | "name-desc" | "source"
+export type SkillLayoutMode = "grouped" | "grid"
+export type SkillDetailView = "preview" | "raw" | "meta"
+
+export interface SkillGroupSection {
+ origin: string
+ skills: SkillSupportItem[]
+}
+
+export interface SkillStatItem {
+ key: string
+ origin: string
+ label: string
+ count: number
+}
diff --git a/web/frontend/src/components/agent/skills/use-skills-page.ts b/web/frontend/src/components/agent/skills/use-skills-page.ts
new file mode 100644
index 000000000..7cf4a01ad
--- /dev/null
+++ b/web/frontend/src/components/agent/skills/use-skills-page.ts
@@ -0,0 +1,339 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import {
+ type ChangeEvent,
+ type DragEvent,
+ startTransition,
+ useDeferredValue,
+ useMemo,
+ useRef,
+ useState,
+} from "react"
+import { useTranslation } from "react-i18next"
+import { toast } from "sonner"
+
+import {
+ type SkillSupportItem,
+ deleteSkill,
+ getSkill,
+ getSkills,
+ importSkill,
+} from "@/api/skills"
+
+import {
+ compareSkills,
+ getOriginLabel,
+ getSkillOriginKind,
+ sortOrigins,
+} from "./origin-utils"
+import type {
+ SkillDetailView,
+ SkillGroupSection,
+ SkillLayoutMode,
+ SkillSortOption,
+ SkillStatItem,
+} from "./types"
+
+const MAX_IMPORT_FILE_SIZE = 1 << 20
+
+export function useSkillsPage() {
+ const { t } = useTranslation()
+ const queryClient = useQueryClient()
+ const importInputRef = useRef
+
+
+ {stat.label}
+
+
+ {stat.count}
+
+
+
+
+
+ )
+}
+
+function ToolStatusBadge({ status }: { status: ToolSupportItem["status"] }) {
+ const { t } = useTranslation()
+
+ return (
+
+ {t(`pages.agent.tools.status.${status}`)}
+
+ )
+}
diff --git a/web/frontend/src/components/app-header.tsx b/web/frontend/src/components/app-header.tsx
index 4f0688008..fa1b5a488 100644
--- a/web/frontend/src/components/app-header.tsx
+++ b/web/frontend/src/components/app-header.tsx
@@ -163,6 +163,7 @@ export function AppHeader() {
variant="destructive"
size="icon-sm"
className="size-8"
+ data-tour="gateway-button"
onClick={handleGatewayToggle}
disabled={gwLoading}
aria-label={t("header.gateway.action.stop")}
@@ -178,6 +179,7 @@ export function AppHeader() {
isStarting || isRestarting || isStopping ? "secondary" : "default"
}
size="sm"
+ data-tour="gateway-button"
className={`h-8 gap-2 px-3 ${
isStopped ? "bg-green-500 text-white hover:bg-green-600" : ""
}`}
@@ -209,7 +211,13 @@ export function AppHeader() {
/>
{/* Docs Link */}
-
+
+
+ {/* Header & Description */}
+
+
+
+
+ ) : isLoading ? (
+ // Skeleton Loading State
+
+
+
+
+ ) : (
+ // Tool Categories list
+
+
+ {/* Filters Toolbar */}
+
+
+ {/* Content Area */}
+ {error ? (
+
+
+
+
+
+ + {t("pages.agent.load_error")} +
+
+ {[1, 2].map((groupIndex) => (
+
+ ) : totalFilteredCount === 0 ? (
+ // Empty State
+
+
+ ))}
+
+ {[1, 2, 3, 4].map((itemIndex) => (
+
+
+
+
+
+
+ ))}
+
+
+
+ + {data?.tools.length === 0 + ? t("pages.agent.tools.empty") + : t("pages.agent.tools.no_results")} +
+ {data?.tools.length !== 0 && ( ++ Try adjusting your search criteria or status filters. +
+ )} +
+ {groupedTools.map(([category, items]) => (
+
+ )}
+
+
+ ))}
+ + {t(`pages.agent.tools.categories.${category}`)} +
+
+ {items.map((tool) => {
+ const reasonText = tool.reason_code
+ ? t(`pages.agent.tools.reasons.${tool.reason_code}`)
+ : ""
+ const isPending =
+ toggleMutation.isPending &&
+ toggleMutation.variables?.name === tool.name
+ const isEnabled = tool.status === "enabled"
+ const isDisabled = tool.status === "disabled"
+ const isBlocked = tool.status === "blocked"
+
+ return (
+
+
+
+ {reasonText && (
+
+
+ )}
+
+ )
+ })}
+
+
+
+
+
+ {tool.description}
+
+
+
+
+ {tool.name}
+
+
+
+
+ toggleMutation.mutate({
+ name: tool.name,
+ enabled: checked,
+ })
+ }
+ />
+
+
+ {reasonText}
+
+