@nextclaw/ui 0.12.8 → 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/server-path/use-server-path-read.ts

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchServerPathRead } from '@/api/server-path';
+
+export function useServerPathRead(params: {
+  path?: string | null;
+  basePath?: string | null;
+  enabled?: boolean;
+}) {
+  const normalizedPath = params.path?.trim() ?? '';
+  return useQuery({
+    queryKey: ['server-path-read', normalizedPath, params.basePath ?? null],
+    queryFn: () =>
+      fetchServerPathRead({
+        path: normalizedPath,
+        basePath: params.basePath,
+      }),
+    enabled: (params.enabled ?? true) && normalizedPath.length > 0,
+    staleTime: 0,
+  });
+}

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/chat-message.ts

@@ -24,6 +24,17 @@ function truncateText(value: string, maxChars = 2400): string {
   return `${value.slice(0, maxChars)}\n…`;
 }
 
+function truncateInlineText(value: string, maxChars = 120): string {
+  const normalized = value.replace(/\s+/g, ' ').trim();
+  if (normalized.length <= maxChars) {
+    return normalized;
+  }
+  if (maxChars <= 1) {
+    return '…';
+  }
+  return `${normalized.slice(0, maxChars - 1)}…`;
+}
+
 export function stringifyUnknown(value: unknown): string {
   if (typeof value === 'string') {
     return value;
@@ -64,7 +75,7 @@ export function summarizeToolArgs(args: unknown): string | undefined {
   const parsed = parseArgsObject(args);
   if (!parsed) {
     const text = stringifyUnknown(args).trim();
-    return text ? truncateText(text, 120) : undefined;
+    return text ? truncateInlineText(text, 120) : undefined;
   }
 
   const items: string[] = [];
@@ -80,9 +91,9 @@ export function summarizeToolArgs(args: unknown): string | undefined {
     }
   }
   if (items.length > 0) {
-    return items.join(' · ');
+    return truncateInlineText(items.join(' · '), 120);
   }
-  return truncateText(stringifyUnknown(parsed), 140);
+  return truncateInlineText(stringifyUnknown(parsed), 140);
 }
 
 function toToolName(value: unknown): string {

package/src/lib/i18n.chat.ts

@@ -43,9 +43,20 @@ export const CHAT_LABELS: Record<string, { zh: string; en: string }> = {
   chatHistoryLoading: { zh: '加载会话历史中...', en: 'Loading session history...' },
   chatNoMessages: { zh: '暂无消息，发送一条开始对话。', en: 'No messages yet. Send one to start.' },
   chatBackToParent: { zh: '返回父会话', en: 'Back to parent' },
+  chatSessionOpenChildSessions: { zh: '查看子会话', en: 'View child sessions' },
   chatChildSessionLoading: { zh: '正在加载子会话…', en: 'Loading child session…' },
   chatChildSessionEmpty: { zh: '子会话还没有消息。', en: 'No child session messages yet.' },
-  chatChildSessionClosePanel: { zh: '关闭子会话侧栏', en: 'Close child session panel' },
+  chatWorkspaceClosePanel: { zh: '关闭工作区侧栏', en: 'Close workspace panel' },
+  chatWorkspaceChildSessions: { zh: '子会话', en: 'Child sessions' },
+  chatWorkspaceOpenFiles: { zh: '打开的文件', en: 'Open files' },
+  chatWorkspacePreview: { zh: '预览', en: 'Preview' },
+  chatWorkspaceDiff: { zh: 'Diff', en: 'Diff' },
+  chatWorkspaceCloseFile: { zh: '关闭文件', en: 'Close file' },
+  chatWorkspaceLoadingFile: { zh: '正在加载文件…', en: 'Loading file…' },
+  chatWorkspacePreviewUnsupported: { zh: '该文件暂不支持在侧栏预览。', en: 'This file is not supported in the sidebar preview yet.' },
+  chatWorkspacePreviewEmpty: { zh: '当前没有可显示的文件内容。', en: 'No file content is available for preview.' },
+  chatWorkspaceDiffEmpty: { zh: '当前没有可显示的 diff 内容。', en: 'No diff content is available.' },
+  chatWorkspacePreviewTruncated: { zh: '内容已截断', en: 'Preview truncated' },
   chatSessionUnread: { zh: '会话有未读更新', en: 'Session has unread updates' },
   chatTyping: { zh: 'Agent 正在思考...', en: 'Agent is thinking...' },
   chatInputPlaceholder: { zh: '输入消息，输入 / 选择技能，Enter 发送，Shift + Enter 换行', en: 'Type a message, type / to select skills, Enter to send, Shift + Enter for newline' },