feat(web): migrate launcher to modular web frontend/backend and improve management UX (#1275)

* refactor: remove the legacy picoclaw-launcher

* feat: create initial web frontend and backend structure

* feat(packaging): add desktop entry for PicoClaw Launcher (#1062)

- Add .desktop file with Terminal=true, named "PicoClaw Launcher"
- Install to /usr/share/applications/ for app menu visibility
- Add 512x512 PNG icon to /usr/share/icons/hicolor/

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* `make dev`: If you haven't built it before, you need to run `build` first.

* feat(web): comprehensive web UI and backend refactoring
This commit introduces a major overhaul of both the frontend web UI and the Go backend API, transitioning to a highly modular architecture and integrating new core features.
Backend:
- Refactored monolithic API endpoints into domain-specific modules (config, gateway, log, models, pico, session).
- Cleaned up obsolete files (`server.go`, `status.go`, WebSocket handlers) and outdated tests.
- Implemented Gateway process lifecycle management (start/stop/restart) and real-time log streaming.
Frontend:
- Integrated Shadcn UI components to establish a modern, consistent design system.
- Introduced a new application layout featuring a responsive sidebar (`app-sidebar`) and header.
- Implemented internationalization (i18n) with initial support for English and Chinese.
- Restructured API clients, hooks, and Zustand stores into logical domains.
- Added new management pages for Settings, Logs, Models, Providers, and Credentials.
- Upgraded the Pico chat interface with session history management and dynamic model selection.
Build & Config:
- Updated frontend dependencies, Vite configuration, and lockfiles.
- Refined routing setup and overarching application stylesheets.

* feat(web): enhance model management, sorting, and deletion logic
- Implement model sorting in UI (default > configured > unconfigured)
- Prevent deletion of default models in the frontend
- Update backend to clear default settings when a model is deleted
- Add existence validation when setting a default model via API
- Group models in chat UI by type (API Key, OAuth, Local)
- Conditionally display model selector in chat based on configuration status

* refactor(web): refactor chat page into modular components/hooks and update i18n

- split chat route into dedicated chat components (page, composer, empty state, messages, history, model selector)
- extract model/session logic into use-chat-models and use-session-history hooks
- update chat locale keys in en/zh and add empty-state/history-related translations

* refactor(models): refactor models page into modular components and improve UX

- split /models route into dedicated components (page, provider section, card, add/edit sheets, delete dialog)
- add provider grouping/sorting, provider labels/icons, and a no-default hint in the models page
- add "Set as default model" toggle to add/edit flows with safer defaults
- introduce shared form helpers and new UI primitives (field, label, switch)
- update i18n strings (en/zh) for models and gateway header text usage
- apply minor UI polish (models nav icon, separator client directive)

* fix(web): add SPA index fallback for embedded frontend routes

Serve existing static assets as-is, keep /api/* and missing asset paths returning 404, and add tests for SPA fallback behavior on refresh.

* fix(frontend/chat): normalize message timestamp units to prevent invalid far-future dates

* chore: delete TestSPARouteFallsBackToIndex

* feat: update build for web-based launcher (#1186)

- Makefile: add build-launcher target (builds frontend + Go backend)
- GoReleaser: point picoclaw-launcher build to web/backend, add frontend
  build hook, restore winres hook with updated paths
- Restore icon.ico and winres config from main for Windows builds

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* feat(credentials): add multi-provider OAuth credential management

- add backend `/api/oauth/*` endpoints for provider status, browser/device-code/token login, flow query/polling, and logout
- extend API handler with OAuth flow/state tracking and route registration, plus OAuth unit tests
- implement frontend credentials page/components for OpenAI, Anthropic, and Google Antigravity login/logout
- add OAuth API client and `useCredentialsPage` hook, with new EN/ZH i18n strings

* chore: remove placeholder index.html from dist (#1188)

The .gitkeep is sufficient for go:embed to find the dist directory.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* fix(frontend): polish model and credential UX; remove Providers nav

- remove the Providers item from sidebar navigation and locale keys
- simplify chat composer by dropping attach/voice action buttons
- support ReactNode titles in credential cards and add provider brand icons
- refine sheet header/footer styling and device-code footer button hierarchy
- disable “Set default” when a model is unconfigured or already default

* feat(web): Update  config page (#1173)

* feat(web): Update  config page

* fix(web): useEffect resets editorValue whenever config changes

* fix(web): react-hooks/set-state-in-effect error & pnpm lint #1173

* feat(web): add channel management page for web console (#1190)

* feat(web): add channel management page for web console

Add a complete channel management UI that allows users to configure
messaging channels (Telegram, Discord, Slack, Feishu, etc.) directly
from the web console instead of manually editing config.json.

Backend: GET/PUT/PATCH API endpoints for listing, updating, and
toggling channels with secret field masking.

Frontend: Channel cards grid with enable/disable toggles, per-channel
configuration sheets with dedicated forms for major platforms and a
generic fallback for others.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix(web/channels): move channels to own sidebar group and fix sheet padding

- Channels now has its own navigation group instead of being under Services
- Fix edit sheet form content padding (px-1 -> px-4) to match header/footer
- Fix naked return lint error in extractChannelInfo

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* fix(web): harden channel config updates and resolve frontend lint issues

- validate channel PUT/PATCH updates before saving and return structured validation errors
- require `enabled` in toggle requests to avoid silent false defaults
- support editing `allow_origins` in the generic channel form and parse string/array inputs on backend
- replace channel form `any` usage with `ChannelConfig` (`Record<string, unknown>`) and add safe value helpers
- add i18n strings for allow-origins fields and apply related frontend formatting cleanups

* fix(frontend): prevent false "Invalid JSON" errors in config editor

* feat: add startup readiness checks and propagate start availability to UI

- add gateway precondition validation for default model and credentials
- auto-start gateway on backend boot when conditions are met
- include gateway_start_allowed and gateway_start_reason in status updates
- prevent frontend start actions when gateway cannot be started

* feat(web): revamp channel config UX with catalog-based routing

- replace legacy channel management endpoints with a backend channel catalog API
- switch frontend channel updates to PATCH /api/config and per-channel config pages
- add dynamic channel items in the sidebar with support for expand/collapse
- migrate /channels to nested routes (/channels/$name) and remove old card/sheet flow
- improve channel forms with clearer hints, required/error states, and reusable switch cards
- fix Discord mention-only toggle to read/write group_trigger.mention_only

* refactor(frontend): move shared-form to components and unify default-model switch with SwitchCardField

* fix(frontend): improve model form validation and unify secret placeholder handling

- block duplicate model aliases when adding a model (with localized error messages)
- share masked secret placeholder logic across model and channel forms
- refresh gateway state after setting the default model
- apply minor UI cleanup to provider icon rendering

* feat(web): add visual system config and launcher/autostart controls

- add launcher config model and persistence (`launcher-config.json`) for port/public/CIDR settings
- add system APIs for launch-at-login and launcher parameters
- apply CIDR-based access-control middleware to backend HTTP routes
- split config routing into visual config and raw JSON config pages
- add frontend system API client and visual config sections for runtime/devices/launcher
- expand i18n strings (en/zh) for new config UI
- improve sidebar active matching and session ID generation fallback

* refactor(frontend): remove i18n fallback strings and drop providers route

- Replace `t(key, defaultValue)` calls with key-only translations across UI pages
- Clean up locale files by pruning unused keys and adding missing shared keys
- Remove the obsolete `/providers` page and update generated route tree

* fix(backend): correct gateway status detection on Windows

* fix(repo): keep web backend dist placeholder tracked

---------

Co-authored-by: Guoguo <16666742+imguoguo@users.noreply.github.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Dihubopen <dihubcn@gmail.com>
Co-authored-by: Dihubopen <130813726+Dihubopen@users.noreply.github.com>
This commit is contained in:
wenjie
2026-03-09 19:42:03 +08:00
committed by GitHub
parent ead22368bd
commit e55b3b7a8d
164 changed files with 24081 additions and 4227 deletions
+65
View File
@@ -0,0 +1,65 @@
// API client for channels navigation and channel-specific config flows.
export type ChannelConfig = Record<string, unknown>
export type AppConfig = Record<string, unknown>
export interface SupportedChannel {
name: string
display_name?: string
config_key: string
variant?: string
}
interface ChannelsCatalogResponse {
channels: SupportedChannel[]
}
interface ConfigActionResponse {
status: string
errors?: string[]
}
const BASE_URL = ""
async function request<T>(path: string, options?: RequestInit): Promise<T> {
const res = await fetch(`${BASE_URL}${path}`, options)
if (!res.ok) {
let message = `API error: ${res.status} ${res.statusText}`
try {
const body = (await res.json()) as {
error?: string
errors?: string[]
status?: string
}
if (Array.isArray(body.errors) && body.errors.length > 0) {
message = body.errors.join("; ")
} else if (typeof body.error === "string" && body.error.trim() !== "") {
message = body.error
}
} catch {
// Keep default fallback message if response body is not JSON.
}
throw new Error(message)
}
return res.json() as Promise<T>
}
export async function getChannelsCatalog(): Promise<ChannelsCatalogResponse> {
return request<ChannelsCatalogResponse>("/api/channels/catalog")
}
export async function getAppConfig(): Promise<AppConfig> {
return request<AppConfig>("/api/config")
}
export async function patchAppConfig(
patch: Record<string, unknown>,
): Promise<ConfigActionResponse> {
return request<ConfigActionResponse>("/api/config", {
method: "PATCH",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(patch),
})
}
export type { ChannelsCatalogResponse, ConfigActionResponse }
+62
View File
@@ -0,0 +1,62 @@
// API client for gateway process management.
interface GatewayStatusResponse {
gateway_status: "running" | "starting" | "stopped" | "error"
gateway_start_allowed?: boolean
gateway_start_reason?: string
pid?: number
logs?: string[]
log_total?: number
log_run_id?: number
[key: string]: unknown
}
interface GatewayActionResponse {
status: string
pid?: number
}
const BASE_URL = ""
async function request<T>(path: string, options?: RequestInit): Promise<T> {
const res = await fetch(`${BASE_URL}${path}`, options)
if (!res.ok) {
throw new Error(`API error: ${res.status} ${res.statusText}`)
}
return res.json() as Promise<T>
}
export async function getGatewayStatus(options?: {
log_offset?: number
log_run_id?: number
}): Promise<GatewayStatusResponse> {
const params = new URLSearchParams()
if (options?.log_offset !== undefined) {
params.set("log_offset", options.log_offset.toString())
}
if (options?.log_run_id !== undefined) {
params.set("log_run_id", options.log_run_id.toString())
}
const queryString = params.toString() ? `?${params.toString()}` : ""
return request<GatewayStatusResponse>(`/api/gateway/status${queryString}`)
}
export async function startGateway(): Promise<GatewayActionResponse> {
return request<GatewayActionResponse>("/api/gateway/start", {
method: "POST",
})
}
export async function stopGateway(): Promise<GatewayActionResponse> {
return request<GatewayActionResponse>("/api/gateway/stop", {
method: "POST",
})
}
export async function restartGateway(): Promise<GatewayActionResponse> {
return request<GatewayActionResponse>("/api/gateway/restart", {
method: "POST",
})
}
export type { GatewayStatusResponse, GatewayActionResponse }
+91
View File
@@ -0,0 +1,91 @@
import { refreshGatewayState } from "@/store/gateway"
// API client for model list management.
export interface ModelInfo {
index: number
model_name: string
model: string
api_base?: string
api_key: string
proxy?: string
auth_method?: string
// Advanced fields
connect_mode?: string
workspace?: string
rpm?: number
max_tokens_field?: string
request_timeout?: number
thinking_level?: string
// Meta
configured: boolean
is_default: boolean
}
interface ModelsListResponse {
models: ModelInfo[]
total: number
default_model: string
}
interface ModelActionResponse {
status: string
index?: number
default_model?: string
}
const BASE_URL = ""
async function request<T>(path: string, options?: RequestInit): Promise<T> {
const res = await fetch(`${BASE_URL}${path}`, options)
if (!res.ok) {
throw new Error(`API error: ${res.status} ${res.statusText}`)
}
return res.json() as Promise<T>
}
export async function getModels(): Promise<ModelsListResponse> {
return request<ModelsListResponse>("/api/models")
}
export async function addModel(
model: Partial<ModelInfo>,
): Promise<ModelActionResponse> {
return request<ModelActionResponse>("/api/models", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(model),
})
}
export async function updateModel(
index: number,
model: Partial<ModelInfo>,
): Promise<ModelActionResponse> {
return request<ModelActionResponse>(`/api/models/${index}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(model),
})
}
export async function deleteModel(index: number): Promise<ModelActionResponse> {
return request<ModelActionResponse>(`/api/models/${index}`, {
method: "DELETE",
})
}
export async function setDefaultModel(
modelName: string,
): Promise<ModelActionResponse> {
const response = await request<ModelActionResponse>("/api/models/default", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ model_name: modelName }),
})
void refreshGatewayState()
return response
}
export type { ModelsListResponse, ModelActionResponse }
+102
View File
@@ -0,0 +1,102 @@
export type OAuthProvider = "openai" | "anthropic" | "google-antigravity"
export type OAuthMethod = "browser" | "device_code" | "token"
export interface OAuthProviderStatus {
provider: OAuthProvider
display_name: string
methods: OAuthMethod[]
logged_in: boolean
status: "connected" | "expired" | "needs_refresh" | "not_logged_in"
auth_method?: string
expires_at?: string
account_id?: string
email?: string
project_id?: string
}
export interface OAuthFlowState {
flow_id: string
provider: OAuthProvider
method: OAuthMethod
status: "pending" | "success" | "error" | "expired"
expires_at?: string
error?: string
user_code?: string
verify_url?: string
interval?: number
}
export interface OAuthLoginRequest {
provider: OAuthProvider
method: OAuthMethod
token?: string
}
export interface OAuthLoginResponse {
status: string
provider: OAuthProvider
method: OAuthMethod
flow_id?: string
auth_url?: string
user_code?: string
verify_url?: string
interval?: number
expires_at?: string
}
interface OAuthProvidersResponse {
providers: OAuthProviderStatus[]
}
const BASE_URL = ""
async function request<T>(path: string, options?: RequestInit): Promise<T> {
const res = await fetch(`${BASE_URL}${path}`, options)
if (!res.ok) {
const message = await res.text()
throw new Error(message || `API error: ${res.status} ${res.statusText}`)
}
return res.json() as Promise<T>
}
export async function getOAuthProviders(): Promise<OAuthProvidersResponse> {
return request<OAuthProvidersResponse>("/api/oauth/providers")
}
export async function loginOAuth(
payload: OAuthLoginRequest,
): Promise<OAuthLoginResponse> {
return request<OAuthLoginResponse>("/api/oauth/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
})
}
export async function getOAuthFlow(flowID: string): Promise<OAuthFlowState> {
return request<OAuthFlowState>(
`/api/oauth/flows/${encodeURIComponent(flowID)}`,
)
}
export async function pollOAuthFlow(flowID: string): Promise<OAuthFlowState> {
return request<OAuthFlowState>(
`/api/oauth/flows/${encodeURIComponent(flowID)}/poll`,
{
method: "POST",
},
)
}
export async function logoutOAuth(
provider: OAuthProvider,
): Promise<{ status: string; provider: OAuthProvider }> {
return request<{ status: string; provider: OAuthProvider }>(
"/api/oauth/logout",
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ provider }),
},
)
}
+38
View File
@@ -0,0 +1,38 @@
// API client for Pico Channel configuration.
interface PicoTokenResponse {
token: string
ws_url: string
enabled: boolean
}
interface PicoSetupResponse {
token: string
ws_url: string
enabled: boolean
changed: boolean
}
const BASE_URL = ""
async function request<T>(path: string, options?: RequestInit): Promise<T> {
const res = await fetch(`${BASE_URL}${path}`, options)
if (!res.ok) {
throw new Error(`API error: ${res.status} ${res.statusText}`)
}
return res.json() as Promise<T>
}
export async function getPicoToken(): Promise<PicoTokenResponse> {
return request<PicoTokenResponse>("/api/pico/token")
}
export async function regenPicoToken(): Promise<PicoTokenResponse> {
return request<PicoTokenResponse>("/api/pico/token", { method: "POST" })
}
export async function setupPico(): Promise<PicoSetupResponse> {
return request<PicoSetupResponse>("/api/pico/setup", { method: "POST" })
}
export type { PicoTokenResponse, PicoSetupResponse }
+50
View File
@@ -0,0 +1,50 @@
// Sessions API — list and retrieve chat session history
export interface SessionSummary {
id: string
preview: string
message_count: number
created: string
updated: string
}
export interface SessionDetail {
id: string
messages: { role: "user" | "assistant"; content: string }[]
summary: string
created: string
updated: string
}
export async function getSessions(
offset: number = 0,
limit: number = 20,
): Promise<SessionSummary[]> {
const params = new URLSearchParams({
offset: offset.toString(),
limit: limit.toString(),
})
const res = await fetch(`/api/sessions?${params.toString()}`)
if (!res.ok) {
throw new Error(`Failed to fetch sessions: ${res.status}`)
}
return res.json()
}
export async function getSessionHistory(id: string): Promise<SessionDetail> {
const res = await fetch(`/api/sessions/${encodeURIComponent(id)}`)
if (!res.ok) {
throw new Error(`Failed to fetch session ${id}: ${res.status}`)
}
return res.json()
}
export async function deleteSession(id: string): Promise<void> {
const res = await fetch(`/api/sessions/${encodeURIComponent(id)}`, {
method: "DELETE",
})
if (!res.ok) {
throw new Error(`Failed to delete session ${id}: ${res.status}`)
}
}
+62
View File
@@ -0,0 +1,62 @@
export interface AutoStartStatus {
enabled: boolean
supported: boolean
platform: string
message?: string
}
export interface LauncherConfig {
port: number
public: boolean
allowed_cidrs: string[]
}
async function request<T>(path: string, options?: RequestInit): Promise<T> {
const res = await fetch(path, options)
if (!res.ok) {
let message = `API error: ${res.status} ${res.statusText}`
try {
const body = (await res.json()) as {
error?: string
errors?: string[]
}
if (Array.isArray(body.errors) && body.errors.length > 0) {
message = body.errors.join("; ")
} else if (typeof body.error === "string" && body.error.trim() !== "") {
message = body.error
}
} catch {
// Keep fallback error message when response body is not JSON.
}
throw new Error(message)
}
return res.json() as Promise<T>
}
export async function getAutoStartStatus(): Promise<AutoStartStatus> {
return request<AutoStartStatus>("/api/system/autostart")
}
export async function setAutoStartEnabled(
enabled: boolean,
): Promise<AutoStartStatus> {
return request<AutoStartStatus>("/api/system/autostart", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ enabled }),
})
}
export async function getLauncherConfig(): Promise<LauncherConfig> {
return request<LauncherConfig>("/api/system/launcher-config")
}
export async function setLauncherConfig(
payload: LauncherConfig,
): Promise<LauncherConfig> {
return request<LauncherConfig>("/api/system/launcher-config", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
})
}