diff --git a/web/frontend/src/components/chat/chat-page.tsx b/web/frontend/src/components/chat/chat-page.tsx
index ebcde8981..ae705ff1b 100644
--- a/web/frontend/src/components/chat/chat-page.tsx
+++ b/web/frontend/src/components/chat/chat-page.tsx
@@ -39,7 +39,7 @@ export function ChatPage() {
const {
defaultModelName,
- hasConfiguredModels,
+ hasAvailableModels,
apiKeyModels,
oauthModels,
localModels,
@@ -94,7 +94,7 @@ export function ChatPage() {
hasScrolled ? "shadow-sm" : "shadow-none"
}`}
titleExtra={
- hasConfiguredModels && (
+ hasAvailableModels && (
{messages.length === 0 && !isTyping && (
= {
+ debug: "Debug",
+ info: "Info",
+ warn: "Warn",
+ error: "Error",
+ fatal: "Fatal",
+}
+
+function getGatewayLogLevel(config: AppConfig | undefined): GatewayLogLevel {
+ const gateway = config?.gateway
+ if (typeof gateway === "object" && gateway !== null) {
+ const logLevel = (gateway as Record).log_level
+ if (
+ typeof logLevel === "string" &&
+ LOG_LEVEL_OPTIONS.includes(logLevel as GatewayLogLevel)
+ ) {
+ return logLevel as GatewayLogLevel
+ }
+ }
+ return "warn"
+}
+
+export function LogLevelSelect() {
+ const { t } = useTranslation()
+ const queryClient = useQueryClient()
+ const [logLevel, setLogLevel] = useState("warn")
+ const [savingLogLevel, setSavingLogLevel] = useState(false)
+
+ const { data: configData } = useQuery({
+ queryKey: ["config"],
+ queryFn: getAppConfig,
+ })
+
+ useEffect(() => {
+ setLogLevel(getGatewayLogLevel(configData))
+ }, [configData])
+
+ const handleLogLevelChange = async (nextValue: string) => {
+ const nextLevel = nextValue as GatewayLogLevel
+ const previousLevel = logLevel
+ setLogLevel(nextLevel)
+ setSavingLogLevel(true)
+
+ try {
+ await patchAppConfig({
+ gateway: {
+ log_level: nextLevel,
+ },
+ })
+ await queryClient.invalidateQueries({ queryKey: ["config"] })
+ await refreshGatewayState({ force: true })
+ } catch (error) {
+ setLogLevel(previousLevel)
+ toast.error(
+ error instanceof Error
+ ? error.message
+ : t("pages.logs.log_level_error"),
+ )
+ } finally {
+ setSavingLogLevel(false)
+ }
+ }
+
+ return (
+
+
+
+
+
+ {LOG_LEVEL_OPTIONS.map((level) => (
+
+ {LOG_LEVEL_LABELS[level]}
+
+ ))}
+
+
+
+ )
+}
diff --git a/web/frontend/src/components/logs/logs-page.tsx b/web/frontend/src/components/logs/logs-page.tsx
index a4c458fa2..853da223a 100644
--- a/web/frontend/src/components/logs/logs-page.tsx
+++ b/web/frontend/src/components/logs/logs-page.tsx
@@ -1,6 +1,7 @@
import { IconTrash } from "@tabler/icons-react"
import { useTranslation } from "react-i18next"
+import { LogLevelSelect } from "@/components/logs/log-level-select"
import { LogsPanel } from "@/components/logs/logs-panel"
import { PageHeader } from "@/components/page-header"
import { Button } from "@/components/ui/button"
@@ -17,15 +18,19 @@ export function LogsPage() {
-
+
+
}
/>
diff --git a/web/frontend/src/components/models/edit-model-sheet.tsx b/web/frontend/src/components/models/edit-model-sheet.tsx
index d1cba6719..52e2d8d9d 100644
--- a/web/frontend/src/components/models/edit-model-sheet.tsx
+++ b/web/frontend/src/components/models/edit-model-sheet.tsx
@@ -133,9 +133,10 @@ export function EditModelSheet({
}
const isOAuth = model?.auth_method === "oauth"
- const apiKeyPlaceholder = model?.configured
+ const hasSavedAPIKey = Boolean(model?.api_key)
+ const apiKeyPlaceholder = hasSavedAPIKey
? maskedSecretPlaceholder(
- model.api_key,
+ model?.api_key ?? "",
t("models.field.apiKeyPlaceholderSet"),
)
: t("models.field.apiKeyPlaceholder")
@@ -161,7 +162,7 @@ export function EditModelSheet({
{model.model_name}
@@ -127,14 +127,14 @@ export function ModelCard({
OAuth
- ) : model.configured && model.api_key ? (
+ ) : status === "available" && model.api_key ? (
) : (
- {t("models.status.unconfigured")}
+ {statusLabel}
)}
diff --git a/web/frontend/src/components/models/models-page.tsx b/web/frontend/src/components/models/models-page.tsx
index a6747c5e0..c08b3bdd6 100644
--- a/web/frontend/src/components/models/models-page.tsx
+++ b/web/frontend/src/components/models/models-page.tsx
@@ -40,7 +40,7 @@ interface ProviderGroup {
label: string
models: ModelInfo[]
hasDefault: boolean
- configuredCount: number
+ availableCount: number
}
export function ModelsPage() {
@@ -62,8 +62,8 @@ export function ModelsPage() {
const sorted = [...data.models].sort((a, b) => {
if (a.is_default && !b.is_default) return -1
if (!a.is_default && b.is_default) return 1
- if (a.configured && !b.configured) return -1
- if (!a.configured && b.configured) return 1
+ if (a.available && !b.available) return -1
+ if (!a.available && b.available) return 1
return a.model_name.localeCompare(b.model_name)
})
setModels(sorted)
@@ -107,23 +107,23 @@ export function ModelsPage() {
const providerGroups: ProviderGroup[] = Object.entries(grouped)
.map(([key, group]) => {
- const configuredCount = group.models.filter(
- (model) => model.configured,
+ const availableCount = group.models.filter(
+ (model) => model.available,
).length
return {
key,
label: group.label,
models: group.models,
hasDefault: group.models.some((model) => model.is_default),
- configuredCount,
+ availableCount,
}
})
.sort((a, b) => {
if (a.hasDefault && !b.hasDefault) return -1
if (!a.hasDefault && b.hasDefault) return 1
- if (a.configuredCount !== b.configuredCount) {
- return b.configuredCount - a.configuredCount
+ if (a.availableCount !== b.availableCount) {
+ return b.availableCount - a.availableCount
}
const aPriority = PROVIDER_PRIORITY[a.key] ?? Number.MAX_SAFE_INTEGER
diff --git a/web/frontend/src/components/skills/skills-page.tsx b/web/frontend/src/components/skills/skills-page.tsx
deleted file mode 100644
index d8eeb1d93..000000000
--- a/web/frontend/src/components/skills/skills-page.tsx
+++ /dev/null
@@ -1,319 +0,0 @@
-import {
- IconFileInfo,
- IconLoader2,
- IconPlus,
- IconTrash,
-} from "@tabler/icons-react"
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { type ChangeEvent, useRef, useState } from "react"
-import { useTranslation } from "react-i18next"
-import ReactMarkdown from "react-markdown"
-import rehypeRaw from "rehype-raw"
-import rehypeSanitize from "rehype-sanitize"
-import remarkGfm from "remark-gfm"
-import { toast } from "sonner"
-
-import {
- type SkillSupportItem,
- deleteSkill,
- getSkill,
- getSkills,
- importSkill,
-} from "@/api/skills"
-import { PageHeader } from "@/components/page-header"
-import {
- AlertDialog,
- AlertDialogAction,
- AlertDialogCancel,
- AlertDialogContent,
- AlertDialogDescription,
- AlertDialogFooter,
- AlertDialogHeader,
- AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { Button } from "@/components/ui/button"
-import {
- Card,
- CardContent,
- CardDescription,
- CardHeader,
- CardTitle,
-} from "@/components/ui/card"
-import {
- Sheet,
- SheetContent,
- SheetDescription,
- SheetHeader,
- SheetTitle,
-} from "@/components/ui/sheet"
-
-export function SkillsPage() {
- const { t } = useTranslation()
- const queryClient = useQueryClient()
- const importInputRef = useRef
(null)
- const [selectedSkill, setSelectedSkill] = useState(
- null,
- )
- const [skillPendingDelete, setSkillPendingDelete] =
- useState(null)
-
- const { data, isLoading, error } = useQuery({
- queryKey: ["skills"],
- queryFn: getSkills,
- })
- const {
- data: selectedSkillDetail,
- isLoading: isSkillDetailLoading,
- error: skillDetailError,
- } = useQuery({
- queryKey: ["skills", selectedSkill?.name],
- queryFn: () => getSkill(selectedSkill!.name),
- enabled: selectedSkill !== null,
- })
-
- const importMutation = useMutation({
- mutationFn: async (file: File) => importSkill(file),
- onSuccess: () => {
- toast.success(t("pages.agent.skills.import_success"))
- void queryClient.invalidateQueries({ queryKey: ["skills"] })
- },
- onError: (err) => {
- toast.error(
- err instanceof Error
- ? err.message
- : t("pages.agent.skills.import_error"),
- )
- },
- })
-
- const deleteMutation = useMutation({
- mutationFn: async (name: string) => deleteSkill(name),
- onSuccess: (_, deletedName) => {
- toast.success(t("pages.agent.skills.delete_success"))
- setSkillPendingDelete(null)
- if (
- selectedSkill?.name === deletedName &&
- selectedSkill.source === "workspace"
- ) {
- setSelectedSkill(null)
- }
- void queryClient.invalidateQueries({ queryKey: ["skills"] })
- },
- onError: (err) => {
- toast.error(
- err instanceof Error
- ? err.message
- : t("pages.agent.skills.delete_error"),
- )
- },
- })
-
- const handleImportClick = () => {
- importInputRef.current?.click()
- }
-
- const handleImportFileChange = (event: ChangeEvent) => {
- const file = event.target.files?.[0]
- if (!file) return
- importMutation.mutate(file)
- event.target.value = ""
- }
-
- return (
-
-
-
- {importMutation.isPending ? (
-
-
- }
- />
-
-
-
- {isLoading ? (
-
- {t("labels.loading")}
-
- ) : error ? (
-
- {t("pages.agent.load_error")}
-
- ) : (
-
-
- {t("pages.agent.skills.description")}
-
-
- {data?.skills.length ? (
-
- {data.skills.map((skill) => (
-
-
-
-
-
- {skill.name}
-
-
- {skill.description ||
- t("pages.agent.skills.no_description")}
-
-
-
- setSelectedSkill(skill)}
- title={t("pages.agent.skills.view")}
- >
-
- {skill.source === "workspace" ? (
- setSkillPendingDelete(skill)}
- title={t("pages.agent.skills.delete")}
- >
-
- ) : null}
-
-
-
-
- {t("pages.agent.skills.path")}
-
-
- {skill.path}
-
-
-
- ))}
-
-
- {t("pages.agent.skills.empty")}
-
-
- )}
-
- )}
-
-
{
- if (!open) setSelectedSkill(null)
- }}
- >
-
-
-
- {selectedSkill?.name || t("pages.agent.skills.viewer_title")}
-
-
- {selectedSkill?.description ||
- t("pages.agent.skills.viewer_description")}
-
-
-
-
- {isSkillDetailLoading ? (
-
- {t("pages.agent.skills.loading_detail")}
-
- ) : skillDetailError ? (
-
- {t("pages.agent.skills.load_detail_error")}
-
- ) : selectedSkillDetail ? (
-
-
-
- {selectedSkillDetail.content}
-
-
-
- ) : null}
-
-
-
- {
- if (!open) setSkillPendingDelete(null)
- }}
- >
-
-
-
- {t("pages.agent.skills.delete_title")}
-
-
- {t("pages.agent.skills.delete_description", {
- name: skillPendingDelete?.name,
- })}
-
-
-
-
- {t("common.cancel")}
-
- {
- if (skillPendingDelete)
- deleteMutation.mutate(skillPendingDelete.name)
- }}
- >
- {deleteMutation.isPending ? (
-
-
-
-
- ()
- for (const item of data.tools) {
- const list = buckets.get(item.category) ?? []
- list.push(item)
- buckets.set(item.category, list)
- }
- return Array.from(buckets.entries())
- })()
-
- return (
-
-
-
-
-
- {isLoading ? (
-
- {t("labels.loading")}
-
- ) : error ? (
-
- {t("pages.agent.load_error")}
-
- ) : (
-
-
- {t("pages.agent.tools.description")}
-
-
- {data?.tools.length ? (
- 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 nextEnabled = tool.status !== "enabled"
-
- return (
-
-
-
-
-
- {tool.name}
-
-
- {tool.description}
-
-
-
-
- toggleMutation.mutate({
- name: tool.name,
- enabled: nextEnabled,
- })
- }
- >
- {isPending ? (
-
-
-
-
-
- {t("pages.agent.tools.config_key", {
- key: tool.config_key,
- })}
-
- {reasonText ? (
-
- {reasonText}
-
- ) : null}
-
-
- )
- })}
-
-
-
- {t("pages.agent.tools.empty")}
-
-
- )}
-
- )}
-
-
-
- {t(`pages.agent.tools.status.${status}`)}
-
- )
-}
diff --git a/web/frontend/src/components/tour/tour-guide.tsx b/web/frontend/src/components/tour/tour-guide.tsx
new file mode 100644
index 000000000..cc1e6e3a1
--- /dev/null
+++ b/web/frontend/src/components/tour/tour-guide.tsx
@@ -0,0 +1,242 @@
+import {
+ IconBook,
+ IconChevronLeft,
+ IconChevronRight,
+} from "@tabler/icons-react"
+import { useAtom } from "jotai"
+import { useTranslation } from "react-i18next"
+
+import { Button } from "@/components/ui/button"
+import {
+ tourAtom,
+ tourCurrentStepAtom,
+ tourIsActiveAtom,
+ type TourStep,
+ useTourActions,
+} from "@/store/tour"
+import { cn } from "@/lib/utils"
+
+interface TourStepConfig {
+ title: string
+ description: string
+ targetSelector?: string
+ position: "top" | "bottom" | "left" | "right"
+ icon?: React.ReactNode
+ offsetY?: number
+}
+
+export function TourGuide() {
+ const { t } = useTranslation()
+ const [tourState] = useAtom(tourAtom)
+ const [, setCurrentStep] = useAtom(tourCurrentStepAtom)
+ const [, setIsActive] = useAtom(tourIsActiveAtom)
+ const { goToNextStep, goToPrevStep } = useTourActions()
+
+ if (!tourState.isActive || tourState.currentStep === "completed") {
+ return null
+ }
+
+ const steps: Record = {
+ welcome: {
+ title: t("tour.welcome.title"),
+ description: t("tour.welcome.description"),
+ position: "bottom",
+ },
+ models: {
+ title: t("tour.models.title"),
+ description: t("tour.models.description"),
+ targetSelector: "[data-tour='models-nav']",
+ position: "right",
+ },
+ gateway: {
+ title: t("tour.gateway.title"),
+ description: t("tour.gateway.description"),
+ targetSelector: "[data-tour='gateway-button']",
+ position: "left",
+ offsetY: 60,
+ },
+ docs: {
+ title: t("tour.docs.title"),
+ description: t("tour.docs.description"),
+ targetSelector: "[data-tour='docs-button']",
+ position: "left",
+ icon:
+ ) : (
+
+ )}
+
+ {targetElement && (
+
+ )}
+
+
+
+ {currentConfig.icon}
+
{currentConfig.title}
+
+
+
+ {currentConfig.description}
+
+
+
+
+ {currentStepIndex + 1} / {totalSteps}
+
+
+
+ {currentStepIndex > 0 && (
+
+
+ )}
+
+ {currentStepIndex === totalSteps - 1
+ ? t("tour.finish")
+ : t("tour.next")}
+ {currentStepIndex < totalSteps - 1 && (
+
+
+
+
+ {currentStepIndex < totalSteps - 1 && (
+
+ {t("tour.skip")}
+
+ )}
+
) {
+ return ) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+ & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+
+ {children}
+ {showCloseButton && (
+
+
+ Close
+
+
+ )}
+
+
+ )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogFooter({
+ className,
+ showCloseButton = false,
+ children,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showCloseButton?: boolean
+}) {
+ return (
+
+ {children}
+ {showCloseButton && (
+
+ Close
+
+ )}
+
+ )
+}
+
+function DialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
)
}
diff --git a/web/frontend/src/routes/agent.tsx b/web/frontend/src/routes/agent.tsx
index 78104de5b..149d095cd 100644
--- a/web/frontend/src/routes/agent.tsx
+++ b/web/frontend/src/routes/agent.tsx
@@ -15,7 +15,7 @@ function AgentLayout() {
})
if (pathname === "/agent") {
- return (
+ null,
+ )
+
+ React.useEffect(() => {
+ let cancelled = false
+ void getLauncherAuthStatus()
+ .then((s) => {
+ if (cancelled || s.authenticated || !s.token_help) {
+ return
+ }
+ setTokenHelp(s.token_help)
+ })
+ .catch(() => {
+ /* ignore; login form still usable */
+ })
+ return () => {
+ cancelled = true
+ }
+ }, [])
+
+ const loginWithToken = React.useCallback(
+ async (tokenValue: string) => {
+ setError("")
+ setSubmitting(true)
+ try {
+ const ok = await postLauncherDashboardLogin(tokenValue)
+ if (ok) {
+ globalThis.location.assign("/")
+ return
+ }
+ setError(t("launcherLogin.errorInvalid"))
+ } catch {
+ setError(t("launcherLogin.errorNetwork"))
+ } finally {
+ setSubmitting(false)
+ }
+ },
+ [t],
+ )
+
+ const onSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ await loginWithToken(token)
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ i18n.changeLanguage("en")}>
+ English
+
+ i18n.changeLanguage("zh")}>
+ 简体中文
+
+
+
+ toggleTheme()}
+ aria-label={theme === "dark" ? "Light mode" : "Dark mode"}
+ >
+ {theme === "dark" ? (
+
+
+
+
+
+
+ {t("launcherLogin.title")}
+ {t("launcherLogin.description")}
+
+
+
+ {tokenHelp ? (
+
+
+ {t("launcherLogin.helpTitle")}
+
+
+ {tokenHelp.console_stdout ? (
+ {t("launcherLogin.helpConsole")}
+ ) : null}
+ {tokenHelp.tray_copy_menu ? (
+ {t("launcherLogin.helpTray")}
+ ) : null}
+ {tokenHelp.log_file ? (
+
+ {t("launcherLogin.helpLogFile", {
+ path: tokenHelp.log_file,
+ })}
+
+ ) : null}
+ {tokenHelp.env_var_name ? (
+
+ {t("launcherLogin.helpEnv", {
+ env: tokenHelp.env_var_name,
+ })}
+
+ ) : null}
+
+
+
+
+
(
+ STORAGE_KEY,
+ DEFAULT_TOUR_STATE,
+)
+
+export const tourIsActiveAtom = atom(
+ (get) => get(tourAtom).isActive,
+ (get, set, isActive: boolean) => {
+ set(tourAtom, { ...get(tourAtom), isActive })
+ },
+)
+
+export const tourCurrentStepAtom = atom(
+ (get) => get(tourAtom).currentStep,
+ (get, set, step: TourStep) => {
+ set(tourAtom, { ...get(tourAtom), currentStep: step })
+ },
+)
+
+export function useTourActions() {
+ const goToNextStep = (currentStep: TourStep): TourStep => {
+ const steps: TourStep[] = [
+ "welcome",
+ "models",
+ "gateway",
+ "docs",
+ "completed",
+ ]
+ const currentIndex = steps.indexOf(currentStep)
+ if (currentIndex < steps.length - 1) {
+ return steps[currentIndex + 1]
+ }
+ return "completed"
+ }
+
+ const goToPrevStep = (currentStep: TourStep): TourStep => {
+ const steps: TourStep[] = [
+ "welcome",
+ "models",
+ "gateway",
+ "docs",
+ "completed",
+ ]
+ const currentIndex = steps.indexOf(currentStep)
+ if (currentIndex > 0) {
+ return steps[currentIndex - 1]
+ }
+ return currentStep
+ }
+
+ return { goToNextStep, goToPrevStep }
+}
-**Option 2 : Installation APK (bientôt disponible)**
+**Option 2 : Installation APK**
-Un APK Android autonome avec WebUI intégré est en développement. Restez à l'écoute !
+Téléchargez l'APK depuis [picoclaw.io](https://picoclaw.io/download/) et installez-le directement. Pas besoin de Termux !