@nextclaw/ui 0.12.9 → 0.12.10

package/src/components/remote/remote-access-page.tsx

@@ -0,0 +1,248 @@
+import { PageHeader, PageLayout } from "@/components/layout/page-layout";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { NoticeCard } from "@/components/ui/notice-card";
+import { StatusDot } from "@/components/ui/status-dot";
+import { useRemoteStatus } from "@/hooks/useRemoteAccess";
+import { formatDateTime, t } from "@/lib/i18n";
+import { useAppPresenter } from "@/presenter/app-presenter-context";
+import { resolveRemoteWebBase } from "@/remote/remote-access.query";
+import { buildRemoteAccessFeedbackView } from "@/remote/remote-access-feedback.service";
+import { useRemoteAccessStore } from "@/remote/stores/remote-access.store";
+import { Laptop, RefreshCcw, SquareArrowOutUpRight } from "lucide-react";
+import { useEffect, useMemo } from "react";
+
+function KeyValueRow(props: {
+  label: string;
+  value?: string | number | null;
+  muted?: boolean;
+}) {
+  const { label, muted, value: rawValue } = props;
+  const value =
+    rawValue === undefined || rawValue === null || rawValue === ""
+      ? "-"
+      : String(rawValue);
+  return (
+    <div className="flex items-start justify-between gap-4 py-2 text-sm">
+      <span className="text-gray-500">{label}</span>
+      <span
+        className={
+          muted ? "text-right text-gray-500" : "text-right text-gray-900"
+        }
+      >
+        {value}
+      </span>
+    </div>
+  );
+}
+
+export function RemoteAccessPage() {
+  const presenter = useAppPresenter();
+  const remoteStatus = useRemoteStatus();
+  const status = remoteStatus.data;
+  const actionLabel = useRemoteAccessStore((state) => state.actionLabel);
+  const feedbackView = useMemo(
+    () => buildRemoteAccessFeedbackView(status),
+    [status],
+  );
+  const busy = Boolean(actionLabel);
+  const deviceName =
+    status?.runtime?.deviceName?.trim() ||
+    status?.settings.deviceName?.trim() ||
+    t("remoteDeviceNameAuto");
+  const canOpenDeviceList = Boolean(
+    status?.account.loggedIn && resolveRemoteWebBase(status),
+  );
+  const { hero: heroView, issueHint } = feedbackView;
+
+  useEffect(() => {
+    presenter.remoteAccessManager.syncStatus(status);
+  }, [presenter, status]);
+
+  if (remoteStatus.isLoading && !status) {
+    return <div className="p-8 text-gray-400">{t("remoteLoading")}</div>;
+  }
+
+  return (
+    <PageLayout className="space-y-6">
+      <PageHeader
+        title={t("remotePageTitle")}
+        description={t("remotePageDescription")}
+      />
+
+      <div className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
+        <Card>
+          <CardHeader className="space-y-4">
+            <div className="flex flex-wrap items-center gap-3">
+              <CardTitle>{heroView.title}</CardTitle>
+              <StatusDot
+                status={heroView.badgeStatus}
+                label={heroView.badgeLabel}
+              />
+            </div>
+            <CardDescription>{heroView.description}</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-5">
+            <NoticeCard tone="neutral">
+              <KeyValueRow
+                label={t("remoteSignedInAccount")}
+                value={status?.account.email}
+              />
+              <KeyValueRow label={t("remoteDeviceName")} value={deviceName} />
+              <KeyValueRow
+                label={t("remoteConnectionStatus")}
+                value={heroView.badgeLabel}
+              />
+              <KeyValueRow
+                label={t("remoteLastConnectedAt")}
+                value={
+                  status?.runtime?.lastConnectedAt
+                    ? formatDateTime(status.runtime.lastConnectedAt)
+                    : "-"
+                }
+                muted
+              />
+            </NoticeCard>
+
+            <div className="flex flex-wrap gap-3">
+              {feedbackView.primaryAction ? (
+                <Button
+                  onClick={() => {
+                    if (feedbackView.primaryAction?.kind === "reauthorize") {
+                      void presenter.remoteAccessManager.reauthorizeRemoteAccess(
+                        status,
+                      );
+                      return;
+                    }
+                    if (feedbackView.primaryAction?.kind === "repair") {
+                      void presenter.remoteAccessManager.repairRemoteAccess(
+                        status,
+                      );
+                      return;
+                    }
+                    void presenter.remoteAccessManager.enableRemoteAccess(
+                      status,
+                    );
+                  }}
+                  disabled={busy}
+                >
+                  {feedbackView.primaryAction.showRefreshIcon ? (
+                    <RefreshCcw className="mr-2 h-4 w-4" />
+                  ) : null}
+                  {actionLabel || feedbackView.primaryAction.label}
+                </Button>
+              ) : null}
+
+              <Button
+                variant="outline"
+                onClick={() => void presenter.accountManager.openNextClawWeb()}
+                disabled={busy || !canOpenDeviceList}
+              >
+                <SquareArrowOutUpRight className="mr-2 h-4 w-4" />
+                {t("remoteOpenDeviceList")}
+              </Button>
+
+              {status?.settings.enabled ? (
+                <Button
+                  variant="outline"
+                  onClick={() =>
+                    void presenter.remoteAccessManager.disableRemoteAccess(
+                      status,
+                    )
+                  }
+                  disabled={busy}
+                >
+                  {t("remoteDisable")}
+                </Button>
+              ) : null}
+            </div>
+
+            {feedbackView.shouldShowIssueHint && issueHint ? (
+              <NoticeCard
+                tone="warning"
+                title={issueHint.title}
+                description={issueHint.body}
+              />
+            ) : null}
+
+            <p className="text-xs text-gray-500">{t("remoteOpenWebHint")}</p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Laptop className="h-4 w-4 text-primary" />
+              {t("remoteDeviceSectionTitle")}
+            </CardTitle>
+            <CardDescription>
+              {t("remoteDeviceSectionDescription")}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-5">
+            <div className="flex flex-wrap gap-2">
+              <StatusDot
+                status={status?.account.loggedIn ? "ready" : "inactive"}
+                label={
+                  status?.account.loggedIn
+                    ? t("remoteAccountConnected")
+                    : t("remoteAccountNotConnected")
+                }
+              />
+              <StatusDot
+                status={status?.settings.enabled ? "active" : "inactive"}
+                label={
+                  status?.settings.enabled
+                    ? t("remoteEnabled")
+                    : t("remoteStateDisabled")
+                }
+              />
+              <StatusDot
+                status={status?.service.running ? "active" : "inactive"}
+                label={
+                  status?.service.running
+                    ? t("remoteServiceRunning")
+                    : t("remoteServiceStopped")
+                }
+              />
+            </div>
+
+            <NoticeCard tone="neutral">
+              <KeyValueRow label={t("remoteDeviceName")} value={deviceName} />
+              <KeyValueRow
+                label={t("remoteConnectionStatus")}
+                value={heroView.badgeLabel}
+              />
+              <KeyValueRow
+                label={t("remoteLastConnectedAt")}
+                value={
+                  status?.runtime?.lastConnectedAt
+                    ? formatDateTime(status.runtime.lastConnectedAt)
+                    : "-"
+                }
+                muted
+              />
+            </NoticeCard>
+
+            <NoticeCard
+              tone="neutral"
+              borderStyle="dashed"
+              description={
+                status?.account.loggedIn
+                  ? t("remoteOpenWebHint")
+                  : t("remoteStatusNeedsSignInDescription")
+              }
+              className="text-sm"
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </PageLayout>
+  );
+}

package/src/components/ui/notice-card.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const noticeCardVariants = cva("rounded-2xl border px-4 py-3", {
+  variants: {
+    tone: {
+      neutral: "border-gray-200 bg-gray-50 text-gray-900",
+      success: "border-emerald-200 bg-emerald-50 text-emerald-900",
+      warning: "border-amber-200 bg-amber-50 text-amber-900",
+      danger: "border-rose-200 bg-rose-50 text-rose-700",
+      info: "border-primary/20 bg-primary/10 text-primary",
+    },
+    borderStyle: {
+      solid: "",
+      dashed: "border-dashed",
+    },
+  },
+  defaultVariants: {
+    tone: "neutral",
+    borderStyle: "solid",
+  },
+});
+
+const titleClassMap: Record<
+  NonNullable<VariantProps<typeof noticeCardVariants>["tone"]>,
+  string
+> = {
+  neutral: "text-gray-900",
+  success: "text-emerald-800",
+  warning: "text-amber-900",
+  danger: "text-rose-700",
+  info: "text-primary",
+};
+
+const descriptionClassMap: Record<
+  NonNullable<VariantProps<typeof noticeCardVariants>["tone"]>,
+  string
+> = {
+  neutral: "text-gray-600",
+  success: "text-emerald-700",
+  warning: "text-amber-800",
+  danger: "text-rose-700",
+  info: "text-primary/90",
+};
+
+export interface NoticeCardProps
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
+    VariantProps<typeof noticeCardVariants> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+export const NoticeCard = React.forwardRef<HTMLDivElement, NoticeCardProps>(
+  (
+    {
+      className,
+      tone = "neutral",
+      borderStyle = "solid",
+      title,
+      description,
+      icon,
+      actions,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const resolvedTone = tone ?? "neutral";
+    const hasHeader =
+      Boolean(title) ||
+      Boolean(description) ||
+      Boolean(icon) ||
+      Boolean(actions);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          noticeCardVariants({ tone: resolvedTone, borderStyle }),
+          className,
+        )}
+        {...props}
+      >
+        {hasHeader ? (
+          <div className="flex items-start justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <div className="flex items-start gap-2">
+                {icon ? <div className="mt-0.5 shrink-0">{icon}</div> : null}
+                <div className="min-w-0 flex-1">
+                  {title ? (
+                    <p
+                      className={cn(
+                        "text-sm font-medium",
+                        titleClassMap[resolvedTone],
+                      )}
+                    >
+                      {title}
+                    </p>
+                  ) : null}
+                  {description ? (
+                    <p
+                      className={cn(
+                        title ? "mt-1" : "",
+                        "text-sm leading-6",
+                        descriptionClassMap[resolvedTone],
+                      )}
+                    >
+                      {description}
+                    </p>
+                  ) : null}
+                </div>
+              </div>
+            </div>
+            {actions ? <div className="shrink-0">{actions}</div> : null}
+          </div>
+        ) : null}
+        {children ? (
+          <div className={cn(hasHeader ? "mt-3" : "")}>{children}</div>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+NoticeCard.displayName = "NoticeCard";

package/src/components/ui/setting-row.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const settingRowVariants = cva(
+  "flex items-start justify-between gap-4 rounded-xl border p-4",
+  {
+    variants: {
+      tone: {
+        default: "border-gray-200 bg-white",
+        muted: "border-gray-200 bg-gray-50",
+      },
+    },
+    defaultVariants: {
+      tone: "default",
+    },
+  },
+);
+
+export interface SettingRowProps
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
+    VariantProps<typeof settingRowVariants> {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  control?: React.ReactNode;
+}
+
+export const SettingRow = React.forwardRef<HTMLDivElement, SettingRowProps>(
+  (
+    { className, tone, title, description, control, children, ...props },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      className={cn(settingRowVariants({ tone }), className)}
+      {...props}
+    >
+      <div className="min-w-0 flex-1 space-y-2">
+        <div className="text-sm font-medium text-gray-900">{title}</div>
+        {description ? (
+          <p className="text-sm leading-6 text-gray-500">{description}</p>
+        ) : null}
+        {children}
+      </div>
+      {control ? <div className="shrink-0">{control}</div> : null}
+    </div>
+  ),
+);
+
+SettingRow.displayName = "SettingRow";

package/src/components/ui/tag-chip.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const tagChipVariants = cva(
+  "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium",
+  {
+    variants: {
+      tone: {
+        subtle: "border-gray-200 bg-gray-50 text-gray-600",
+        neutral: "border-gray-200 bg-white text-gray-600",
+        success: "border-emerald-200 bg-emerald-50 text-emerald-700",
+        warning: "border-amber-200 bg-amber-50 text-amber-800",
+        danger: "border-rose-200 bg-rose-50 text-rose-600",
+        info: "border-primary/20 bg-primary/10 text-primary",
+      },
+    },
+    defaultVariants: {
+      tone: "subtle",
+    },
+  },
+);
+
+export interface TagChipProps
+  extends
+    React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof tagChipVariants> {}
+
+export const TagChip = React.forwardRef<HTMLSpanElement, TagChipProps>(
+  ({ className, tone, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(tagChipVariants({ tone }), className)}
+      {...props}
+    />
+  ),
+);
+
+TagChip.displayName = "TagChip";

package/src/components/ui/textarea.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      className={cn(
+        "flex min-h-28 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-300 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+
+Textarea.displayName = "Textarea";

package/src/hooks/useConfig.ts

@@ -185,7 +185,8 @@ export function useUpdateChannel() {
       updateChannel(channel, data as Parameters<typeof updateChannel>[1]),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['config'] });
-      toast.success(t('configSavedApplied'));
+      queryClient.invalidateQueries({ queryKey: ['config-meta'] });
+      toast.success(t('configSavedApplying'));
     },
     onError: (error: Error) => {
       toast.error(t('configSaveFailed') + ': ' + error.message);

package/src/index.css

@@ -59,6 +59,30 @@
     background: hsl(var(--gray-400));
   }
 
+  .workspace-horizontal-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--gray-300) / 0.38) transparent;
+    scrollbar-gutter: stable;
+  }
+
+  .workspace-horizontal-scrollbar::-webkit-scrollbar {
+    width: 3px;
+    height: 2px;
+  }
+
+  .workspace-horizontal-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .workspace-horizontal-scrollbar::-webkit-scrollbar-thumb {
+    background: hsl(var(--gray-300) / 0.38);
+    border-radius: 999px;
+  }
+
+  .workspace-horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--gray-400) / 0.48);
+  }
+
   /* ========================================
      GLASSMORPHISM
      ======================================== */

package/src/lib/app-resource-uri.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { resolveAppResourceUri } from "@/lib/app-resource-uri";
+
+describe("resolveAppResourceUri", () => {
+  it("maps app resource uris to public app paths", () => {
+    expect(resolveAppResourceUri("app://runtime-icons/codex-openai.svg")).toBe(
+      "/runtime-icons/codex-openai.svg",
+    );
+  });
+
+  it("passes through ordinary image src values for compatibility", () => {
+    expect(resolveAppResourceUri("https://example.com/icon.png")).toBe(
+      "https://example.com/icon.png",
+    );
+  });
+
+  it("rejects app resource uris that escape the app resource directory", () => {
+    expect(resolveAppResourceUri("app://../icon.png")).toBeNull();
+  });
+});

package/src/lib/app-resource-uri.ts

@@ -0,0 +1,29 @@
+const APP_RESOURCE_URI_PREFIX = "app://";
+
+function normalizeAppResourcePath(value: string): string | null {
+  const normalized = value.trim().replace(/^\/+/, "");
+  if (!normalized) {
+    return null;
+  }
+  const segments = normalized.split("/");
+  if (
+    segments.some((segment) => segment.trim().length === 0 || segment === "." || segment === "..")
+  ) {
+    return null;
+  }
+  return segments.join("/");
+}
+
+export function resolveAppResourceUri(uri: string): string | null {
+  const normalized = uri.trim();
+  if (!normalized) {
+    return null;
+  }
+  if (!normalized.startsWith(APP_RESOURCE_URI_PREFIX)) {
+    return normalized;
+  }
+  const appResourcePath = normalizeAppResourcePath(
+    normalized.slice(APP_RESOURCE_URI_PREFIX.length),
+  );
+  return appResourcePath ? `/${appResourcePath}` : null;
+}

package/src/lib/i18n.remote.ts

@@ -5,7 +5,7 @@ export const REMOTE_LABELS: Record<string, { zh: string; en: string }> = {
     en: 'Make this device appear in your NextClaw Platform device list and open it from the web.'
   },
   remoteOpenWeb: { zh: '前往 NextClaw Web', en: 'Open NextClaw Web' },
-  remoteOpenDeviceList: { zh: '查看我的设备', en: 'View My Devices' },
+  remoteOpenDeviceList: { zh: '前往 NextClaw Web', en: 'Open NextClaw Web' },
   remoteOpenWebHint: {
     zh: '开启后，这台设备会出现在 NextClaw Web 中，你可以在那里点击打开并继续使用。',
     en: 'Once enabled, this device appears in NextClaw Web, where you can open it and keep working.'

package/src/lib/i18n.runtime-control.ts

@@ -75,6 +75,37 @@ export const RUNTIME_CONTROL_LABELS: Record<string, { zh: string; en: string }>
   runtimeControlRestartService: { zh: '重启服务', en: 'Restart Service' },
   runtimeControlStopService: { zh: '停止服务', en: 'Stop Service' },
   runtimeControlRestartApp: { zh: '重启应用', en: 'Restart App' },
+  runtimeControlPendingRestartTitle: { zh: '待重启', en: 'Pending Restart' },
+  runtimeControlPendingRestartDescription: {
+    zh: '这次改动已经保存，但系统不会自动重启。请在你方便的时候手动重启，重启完成后该提示会自动清空。',
+    en: 'These changes are saved, but the system will not restart automatically. Restart manually when you are ready, and this notice clears after the restart finishes.'
+  },
+  runtimeControlPendingRestartPaths: { zh: '待生效项', en: 'Changes Waiting For Restart' },
+  runtimeStatusLoadingTitle: { zh: '读取状态中', en: 'Loading status' },
+  runtimeStatusLoadingDescription: {
+    zh: '正在读取当前系统状态。',
+    en: 'Loading the current system status.'
+  },
+  runtimeStatusHealthyTitle: { zh: '系统正常', en: 'System healthy' },
+  runtimeStatusHealthyDescription: {
+    zh: '当前没有需要你立即处理的系统动作。',
+    en: 'There is no system action that needs your attention right now.'
+  },
+  runtimeStatusPendingRestartTitle: { zh: '待重启', en: 'Restart required' },
+  runtimeStatusPendingRestartDescription: {
+    zh: '这些改动已经保存，但不会自动重启。你可以在这里查看原因，并在方便的时候手动重启。',
+    en: 'These changes are saved, but the system will not restart automatically. Review the reason here and restart when you are ready.'
+  },
+  runtimeStatusPendingRestartReasonItem: {
+    zh: '{path} 改动将在重启后生效。',
+    en: 'Changes in {path} will apply after restart.'
+  },
+  runtimeStatusActionHint: {
+    zh: '准备好时再执行',
+    en: 'Run when you are ready'
+  },
+  runtimeStatusRestartAction: { zh: '立即重启', en: 'Restart now' },
+  runtimeStatusRestartingAction: { zh: '重启中...', en: 'Restarting...' },
   runtimeControlStartingServiceHelp: {
     zh: '正在启动 NextClaw 服务，页面可能会在服务恢复后重新连接。',
     en: 'Starting the NextClaw service. The page may reconnect after the service becomes available.'

package/src/lib/i18n.ts

@@ -497,22 +497,19 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
 
   // Remote & Status
   ...REMOTE_LABELS,
-
-  // Action labels
   actionConfigure: { zh: '配置', en: 'Configure' },
   actionAddProvider: { zh: '添加提供商', en: 'Add Provider' },
   actionEnable: { zh: '启用', en: 'Enable' },
-
-  // Messages
   configSaved: { zh: '配置已保存', en: 'Configuration saved' },
+  configSavedApplying: { zh: '配置已保存，正在应用', en: 'Configuration saved, applying changes' },
   configSavedApplied: { zh: '配置已保存并已应用', en: 'Configuration saved and applied' },
   configSaveFailed: { zh: '保存配置失败', en: 'Failed to save configuration' },
   configReloaded: { zh: '配置已重载', en: 'Configuration reloaded' },
   configReloadFailed: { zh: '重载配置失败', en: 'Failed to reload configuration' },
-  feishuVerifySuccess: {
-    zh: '验证成功，请到飞书开放平台完成事件订阅与发布后再开始使用。',
-    en: 'Verified. Please finish Feishu event subscription and app publishing before using.'
-  },
+  channelConfigApplying: { zh: '渠道配置正在应用', en: 'Channel configuration is applying' },
+  channelConfigApplied: { zh: '渠道配置已应用', en: 'Channel configuration applied' },
+  channelConfigApplyFailed: { zh: '渠道配置应用失败', en: 'Failed to apply channel configuration' },
+  feishuVerifySuccess: { zh: '验证成功，请到飞书开放平台完成事件订阅与发布后再开始使用。', en: 'Verified. Please finish Feishu event subscription and app publishing before using.' },
   feishuVerifyFailed: { zh: '验证失败', en: 'Verification failed' },
   enterTag: { zh: '输入后按回车...', en: 'Type and press Enter...' },
   headerName: { zh: 'Header 名称', en: 'Header Name' },