@nextclaw/ui 0.15.10 → 0.15.11

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

@@ -1,45 +1,22 @@
-import { PageHeader, PageLayout } from "@/app/components/layout/page-layout";
-import { Button } from "@/shared/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/shared/components/ui/card";
-import { NoticeCard } from "@/shared/components/feedback/notice-card";
-import { StatusDot } from "@/shared/components/status/status-dot";
-import { useAppPresenter } from "@/app/components/app-presenter-provider";
-import {
-  buildRemoteAccessFeedbackView,
-  resolveRemoteWebBase,
-  useRemoteAccessStore,
-} from "@/features/remote";
-import { useRemoteStatus } from "@/features/remote/hooks/use-remote-access";
-import { formatDateTime, t } from "@/shared/lib/i18n";
-import { Laptop, RefreshCcw, SquareArrowOutUpRight } from "lucide-react";
-import { useEffect, useMemo } from "react";
+import { SettingsPage } from '@/shared/components/settings/settings-page';
+import { Button } from '@/shared/components/ui/button';
+import { SettingsGroup, SettingsSection } from '@/shared/components/settings/setting-row';
+import { NoticeCard } from '@/shared/components/feedback/notice-card';
+import { StatusDot } from '@/shared/components/status/status-dot';
+import { useAppPresenter } from '@/app/components/app-presenter-provider';
+import { buildRemoteAccessFeedbackView, resolveRemoteWebBase, useRemoteAccessStore } from '@/features/remote';
+import { useRemoteStatus } from '@/features/remote/hooks/use-remote-access';
+import { formatDateTime, t } from '@/shared/lib/i18n';
+import { Laptop, RefreshCcw, SquareArrowOutUpRight } from 'lucide-react';
+import { useEffect, useMemo } from 'react';
 
-function KeyValueRow(props: {
-  label: string;
-  value?: string | number | null;
-  muted?: boolean;
-}) {
+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);
+  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 className='flex items-start justify-between gap-4 py-2 text-sm'>
+      <span className='text-muted-foreground'>{label}</span>
+      <span className={muted ? 'text-right text-muted-foreground' : 'text-right text-foreground'}>{value}</span>
     </div>
   );
 }
@@ -49,18 +26,11 @@ export function RemoteAccessPage() {
   const remoteStatus = useRemoteStatus();
   const status = remoteStatus.data;
   const actionLabel = useRemoteAccessStore((state) => state.actionLabel);
-  const feedbackView = useMemo(
-    () => buildRemoteAccessFeedbackView(status),
-    [status],
-  );
+  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),
-  );
+    status?.runtime?.deviceName?.trim() || status?.settings.deviceName?.trim() || t('remoteDeviceNameAuto');
+  const canOpenDeviceList = Boolean(status?.account.loggedIn && resolveRemoteWebBase(status));
   const { hero: heroView, issueHint } = feedbackView;
 
   useEffect(() => {
@@ -68,183 +38,133 @@ export function RemoteAccessPage() {
   }, [presenter, status]);
 
   if (remoteStatus.isLoading && !status) {
-    return <div className="p-8 text-gray-400">{t("remoteLoading")}</div>;
+    return (
+      <SettingsPage title={t('remotePageTitle')} description={t('remotePageDescription')}>
+        <div className='text-sm text-muted-foreground'>{t('remoteLoading')}</div>
+      </SettingsPage>
+    );
   }
 
   return (
-    <PageLayout className="space-y-6">
-      <PageHeader
-        title={t("remotePageTitle")}
-        description={t("remotePageDescription")}
-      />
+    <SettingsPage 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='grid gap-7 xl:grid-cols-[1.2fr_0.8fr]'>
+        <SettingsSection
+          title={heroView.title}
+          description={heroView.description}
+          actions={<StatusDot status={heroView.badgeStatus} label={heroView.badgeLabel} />}
+        >
+          <SettingsGroup>
+            <div className='space-y-5 p-4'>
+              <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}
 
-            <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}
+                  variant='outline'
+                  onClick={() => void presenter.accountManager.openNextClawWeb()}
+                  disabled={busy || !canOpenDeviceList}
                 >
-                  {feedbackView.primaryAction.showRefreshIcon ? (
-                    <RefreshCcw className="mr-2 h-4 w-4" />
-                  ) : null}
-                  {actionLabel || feedbackView.primaryAction.label}
+                  <SquareArrowOutUpRight className='mr-2 h-4 w-4' />
+                  {t('remoteOpenDeviceList')}
                 </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>
 
-              {status?.settings.enabled ? (
-                <Button
-                  variant="outline"
-                  onClick={() =>
-                    void presenter.remoteAccessManager.disableRemoteAccess(
-                      status,
-                    )
-                  }
-                  disabled={busy}
-                >
-                  {t("remoteDisable")}
-                </Button>
+              {feedbackView.shouldShowIssueHint && issueHint ? (
+                <NoticeCard tone='warning' title={issueHint.title} description={issueHint.body} />
               ) : null}
+
+              <p className='text-xs text-muted-foreground'>{t('remoteOpenWebHint')}</p>
             </div>
+          </SettingsGroup>
+        </SettingsSection>
 
-            {feedbackView.shouldShowIssueHint && issueHint ? (
-              <NoticeCard
-                tone="warning"
-                title={issueHint.title}
-                description={issueHint.body}
-              />
-            ) : null}
+        <SettingsSection
+          title={
+            <span className='flex items-center gap-2'>
+              <Laptop className='h-4 w-4 text-primary' />
+              {t('remoteDeviceSectionTitle')}
+            </span>
+          }
+          description={t('remoteDeviceSectionDescription')}
+        >
+          <SettingsGroup>
+            <div className='space-y-5 p-4'>
+              <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>
 
-            <p className="text-xs text-gray-500">{t("remoteOpenWebHint")}</p>
-          </CardContent>
-        </Card>
+              <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>
 
-        <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")
+              <NoticeCard
+                tone='neutral'
+                borderStyle='dashed'
+                description={
+                  status?.account.loggedIn ? t('remoteOpenWebHint') : t('remoteStatusNeedsSignInDescription')
                 }
+                className='text-sm'
               />
             </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>
+          </SettingsGroup>
+        </SettingsSection>
       </div>
-    </PageLayout>
+    </SettingsPage>
   );
 }

package/src/features/settings/components/config/provider-auth-section.tsx

@@ -5,7 +5,22 @@ import { t } from '@/shared/lib/i18n';
 import type { ProviderTemplateView } from '@/shared/lib/api';
 import { ProviderPillSelector } from './provider-pill-selector';
 
-type ProviderAuthSectionProps = { providerAuth: ProviderTemplateView['auth']; providerAuthNote: string; providerAuthMethodOptions: Array<{ value: string; label: string }>; providerAuthMethodsCount: number; selectedAuthMethodHint: string; shouldUseAuthMethodPills: boolean; resolvedAuthMethodId: string; onAuthMethodChange: (value: string) => void; onStartProviderAuth: () => void; onImportProviderAuthFromCli: () => void; startPending: boolean; importPending: boolean; authSessionId: string | null; authStatusMessage: string };
+type ProviderAuthSectionProps = {
+  providerAuth: ProviderTemplateView['auth'];
+  providerAuthNote: string;
+  providerAuthMethodOptions: Array<{ value: string; label: string }>;
+  providerAuthMethodsCount: number;
+  selectedAuthMethodHint: string;
+  shouldUseAuthMethodPills: boolean;
+  resolvedAuthMethodId: string;
+  onAuthMethodChange: (value: string) => void;
+  onStartProviderAuth: () => void;
+  onImportProviderAuthFromCli: () => void;
+  startPending: boolean;
+  importPending: boolean;
+  authSessionId: string | null;
+  authStatusMessage: string;
+};
 
 export function ProviderAuthSection(props: ProviderAuthSectionProps) {
   const {
@@ -28,14 +43,14 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
   if (providerAuth?.kind !== 'device_code') return null;
 
   return (
-    <div className="space-y-2 rounded-xl border border-border/60 bg-muted/35 p-3">
-      <Label className="text-sm font-medium text-foreground">
+    <div className='space-y-2 rounded-xl bg-muted/45 p-3'>
+      <Label className='text-sm font-medium text-foreground'>
         {providerAuth.displayName || t('providerAuthSectionTitle')}
       </Label>
-      {providerAuthNote ? <p className="text-xs text-muted-foreground">{providerAuthNote}</p> : null}
+      {providerAuthNote ? <p className='text-xs text-muted-foreground'>{providerAuthNote}</p> : null}
       {providerAuthMethodsCount > 1 ? (
-        <div className="space-y-2">
-          <Label className="text-xs font-medium text-foreground">{t('providerAuthMethodLabel')}</Label>
+        <div className='space-y-2'>
+          <Label className='text-xs font-medium text-foreground'>{t('providerAuthMethodLabel')}</Label>
           {shouldUseAuthMethodPills ? (
             <ProviderPillSelector
               value={resolvedAuthMethodId}
@@ -44,7 +59,7 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
             />
           ) : (
             <Select value={resolvedAuthMethodId} onValueChange={onAuthMethodChange}>
-              <SelectTrigger className="h-8 rounded-lg">
+              <SelectTrigger className='h-8 rounded-lg'>
                 <SelectValue placeholder={t('providerAuthMethodPlaceholder')} />
               </SelectTrigger>
               <SelectContent>
@@ -56,14 +71,14 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
               </SelectContent>
             </Select>
           )}
-          {selectedAuthMethodHint ? <p className="text-xs text-muted-foreground">{selectedAuthMethodHint}</p> : null}
+          {selectedAuthMethodHint ? <p className='text-xs text-muted-foreground'>{selectedAuthMethodHint}</p> : null}
         </div>
       ) : null}
-      <div className="flex flex-wrap items-center gap-2">
+      <div className='flex flex-wrap items-center gap-2'>
         <Button
-          type="button"
-          variant="outline"
-          size="sm"
+          type='button'
+          variant='outline'
+          size='sm'
           onClick={onStartProviderAuth}
           disabled={startPending || Boolean(authSessionId)}
         >
@@ -75,9 +90,9 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
         </Button>
         {providerAuth.supportsCliImport ? (
           <Button
-            type="button"
-            variant="outline"
-            size="sm"
+            type='button'
+            variant='outline'
+            size='sm'
             onClick={onImportProviderAuthFromCli}
             disabled={importPending}
           >
@@ -85,12 +100,12 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
           </Button>
         ) : null}
         {authSessionId ? (
-          <span className="text-xs text-muted-foreground">
+          <span className='text-xs text-muted-foreground'>
             {t('providerAuthSessionLabel')}: {authSessionId.slice(0, 8)}…
           </span>
         ) : null}
       </div>
-      {authStatusMessage ? <p className="text-xs text-muted-foreground">{authStatusMessage}</p> : null}
+      {authStatusMessage ? <p className='text-xs text-muted-foreground'>{authStatusMessage}</p> : null}
     </div>
   );
 }

package/src/features/settings/components/config/provider-form.tsx

@@ -432,7 +432,7 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
 
   return (
     <ConfigSplitDetailPane>
-      <ConfigSplitPaneHeader className='px-6 py-4'>
+      <ConfigSplitPaneHeader className='px-5 py-4'>
         <div className='flex items-center justify-between'>
           <h3 className='truncate text-lg font-semibold text-foreground'>{providerTitle}</h3>
           <div className='flex items-center gap-3'>
@@ -451,7 +451,7 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
       </ConfigSplitPaneHeader>
 
       <form onSubmit={onSubmit} className='flex min-h-0 flex-1 flex-col'>
-        <ConfigSplitPaneBody className='space-y-5 px-6 py-5'>
+        <ConfigSplitPaneBody className='space-y-4 px-5 py-4'>
           <div className='space-y-2'>
             <Label htmlFor='providerDisplayName' className='text-sm font-medium text-foreground'>
               {t('providerDisplayName')}
@@ -469,7 +469,7 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
 
           <div className='space-y-2'>
             <Label htmlFor='apiKey' className='text-sm font-medium text-foreground'>
-              {context.apiKeyHint?.label ?? t('apiKey')}
+              {t('apiKey')}
             </Label>
             <MaskedInput
               id='apiKey'
@@ -501,7 +501,7 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
 
           <div className='space-y-2'>
             <Label htmlFor='apiBase' className='text-sm font-medium text-foreground'>
-              {context.apiBaseHint?.label ?? t('apiBase')}
+              {t('apiBase')}
             </Label>
             <Input
               id='apiBase'
@@ -534,12 +534,12 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
             showAdvanced={showAdvanced}
             onShowAdvancedChange={onShowAdvancedChange}
             supportsWireApi={context.supportsWireApi}
-            wireApiLabel={context.wireApiHint?.label ?? t('wireApi')}
+            wireApiLabel={t('wireApi')}
             wireApi={wireApi}
             onWireApiChange={onWireApiChange}
             shouldUseWireApiPills={context.shouldUseWireApiPills}
             wireApiSelectOptions={context.wireApiSelectOptions}
-            extraHeadersLabel={context.extraHeadersHint?.label ?? t('extraHeaders')}
+            extraHeadersLabel={t('extraHeaders')}
             extraHeaders={extraHeaders}
             onExtraHeadersChange={onExtraHeadersChange}
           />