fix(web): tidy button placement across chat, settings and PR views

apps/web/src/components/ProjectCloneToastCoordinator.tsx

@@ -117,6 +117,7 @@ function EnvironmentCloneToasts({ environmentId }: { environmentId: EnvironmentI
               );
             },
           },
+          actionVariant: "outline",
           data: { hideCopyButton: true },
         });
         if (tracked) {

apps/web/src/components/ProviderUpdatePrimaryNotification.tsx

@@ -298,7 +298,7 @@ export function ProviderUpdatePrimaryNotification() {
               children: "Settings",
               onClick: openSettings,
             },
-      actionVariant: "outline",
+      actionVariant: oneClickProviders.length > 0 ? "default" : "outline",
       data: {
         leadingIcon:
           updateProviders.length === 1 ? (
@@ -312,7 +312,7 @@ export function ProviderUpdatePrimaryNotification() {
                 children: "Settings",
                 onClick: openSettings,
               },
-              secondaryActionVariant: "outline" as const,
+              secondaryActionVariant: "ghost" as const,
             }
           : {}),
       },

apps/web/src/components/ThreadTabGroupNameDialog.tsx

@@ -69,7 +69,7 @@ function NameDialog({ initial }: { initial: string | null }) {
             />
           </DialogPanel>
           <DialogFooter>
-            <Button type="button" variant="ghost" onClick={() => finish(undefined)}>
+            <Button type="button" variant="outline" onClick={() => finish(undefined)}>
               Cancel
             </Button>
             <Button type="submit">Save</Button>

apps/web/src/components/chat/ChatOverlayHosts.tsx

@@ -217,7 +217,7 @@ export function RevertConfirmHost(props: {
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogClose render={<Button variant="outline" />}>Cancel</AlertDialogClose>
-          <Button variant="destructive" onClick={() => confirm(true)}>
+          <Button variant="destructive-outline" onClick={() => confirm(true)}>
             Revert files too
           </Button>
           <Button onClick={() => confirm(false)}>Revert and keep changes</Button>

apps/web/src/components/chat/MessageCopyButton.tsx

@@ -16,15 +16,13 @@ export const MessageCopyButton = memo(function MessageCopyButton({
   label = "Copy message",
   icon = Copy,
   extraFlavors,
-  size = "xs",
   variant = "outline",
   className,
 }: {
   text: string;
   label?: string;
   icon?: typeof Copy;
   extraFlavors?: Readonly<Record<string, string>>;
-  size?: "xs" | "icon-xs";
   variant?: "outline" | "ghost";
   className?: string;
 }) {
@@ -46,7 +44,7 @@ export const MessageCopyButton = memo(function MessageCopyButton({
             onClick={() => copyToClipboard(text)}
             ref={ref}
             type="button"
-            size={size}
+            size="icon-xs"
             variant={variant === "ghost" ? "ghost-muted" : variant}
             className={className}
           />

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -162,7 +162,6 @@ import {
   Code2Icon,
   XIcon,
   ZapIcon,
-  RotateCcwIcon,
   MessageSquareTextIcon,
 } from "lucide-react";
 import {
@@ -2645,7 +2644,7 @@ function RevertUserMessageButton({
         render={
           <Button
             type="button"
-            size="xs"
+            size="icon-xs"
             variant="ghost"
             disabled={activity.isRevertingCheckpoint || activity.isWorking}
             onClick={() => ctx.onRevertToTurnCount(turnCount, messageId)}
@@ -2673,7 +2672,7 @@ function ForkMessageButton({
         render={
           <Button
             type="button"
-            size="xs"
+            size="icon-xs"
             variant="ghost"
             onClick={() => onFork(messageId)}
             aria-label="Fork into new tab"
@@ -2848,7 +2847,7 @@ function AssistantForkButton({
         render={
           <Button
             type="button"
-            size="xs"
+            size="icon-xs"
             variant="ghost"
             disabled={busy}
             onClick={() => {
@@ -5667,43 +5666,37 @@ function WorkEntryLogRow(props: WorkEntryRowProps) {
           </span>
         }
         trailing={
-          <TimelineRowTimestamp
-            createdAt={workEntry.createdAt}
-            timestampFormat={timestampFormat}
-            alwaysVisible
-          />
+          // Matches the timestamp's size and centres on the first label line, since wrapLabel top-aligns the row.
+          <span className="flex min-h-6 shrink-0 items-center gap-2 text-xs">
+            {retryRunId !== null && onRetryWorkspacePreparation ? (
+              <InlineButton onClick={() => onRetryWorkspacePreparation(retryRunId)}>
+                Retry
+              </InlineButton>
+            ) : null}
+            <InlineButton
+              tone="muted"
+              render={
+                <Link
+                  to="/settings/diagnostics"
+                  search={{ machine: ctx.activeThreadEnvironmentId }}
+                />
+              }
+            >
+              View diagnostics
+            </InlineButton>
+            <TimelineRowTimestamp
+              createdAt={workEntry.createdAt}
+              timestampFormat={timestampFormat}
+              alwaysVisible
+            />
+          </span>
         }
       >
         {!warning ? (
-          <p className="ms-7 whitespace-pre-wrap break-words py-1 text-sm leading-relaxed text-foreground/80">
+          <p className="ms-7 whitespace-pre-wrap break-words px-0.5 py-1 text-sm leading-relaxed text-foreground/80">
             {failureItem.failure.message}
           </p>
         ) : null}
-        <div className="ms-7 flex flex-wrap gap-2 pb-1">
-          <Button
-            size="xs"
-            variant="outline"
-            render={
-              <Link
-                to="/settings/diagnostics"
-                search={{ machine: ctx.activeThreadEnvironmentId }}
-              />
-            }
-          >
-            View diagnostics
-          </Button>
-          {retryRunId !== null && onRetryWorkspacePreparation ? (
-            <Button
-              type="button"
-              size="xs"
-              variant="outline"
-              onClick={() => onRetryWorkspacePreparation(retryRunId)}
-            >
-              <RotateCcwIcon aria-hidden />
-              Retry
-            </Button>
-          ) : null}
-        </div>
       </WorkLogRow>
     );
   }
@@ -5900,9 +5893,7 @@ function WorkEntryLogRow(props: WorkEntryRowProps) {
       trailing={
         <>
           {createdThread ? (
-            <button
-              type="button"
-              className="shrink-0 rounded-sm text-sm text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+            <InlineButton
               aria-label={`Open ${createdThread.title ?? "created thread"}`}
               onClick={(event) => {
                 event.stopPropagation();
@@ -5911,7 +5902,7 @@ function WorkEntryLogRow(props: WorkEntryRowProps) {
               onKeyDown={stopRowToggle}
             >
               Open chat
-            </button>
+            </InlineButton>
           ) : null}
           {notifiedSubagentThreadId ? (
             <InlineButton

apps/web/src/components/chat/ProposedPlanCard.tsx

@@ -299,10 +299,10 @@ function SavePlanToWorkspaceForm({
         </label>
       </DialogPanel>
       <DialogFooter>
-        <Button variant="outline" size="sm" onClick={onCancel} disabled={saving}>
+        <Button variant="outline" onClick={onCancel} disabled={saving}>
           Cancel
         </Button>
-        <Button size="sm" onClick={() => onSave(savePath)} disabled={!canWriteFiles || saving}>
+        <Button onClick={() => onSave(savePath)} disabled={!canWriteFiles || saving}>
           {saving ? "Saving..." : "Save"}
         </Button>
       </DialogFooter>

apps/web/src/components/chat/SecretRequestCard.tsx

@@ -137,33 +137,27 @@ function PendingSecretRequestForm(props: {
             onChange={(event) => setSecret(event.currentTarget.value)}
           />
         </div>
-        <Button type="submit" disabled={submitting || secret.trim().length === 0}>
-          Save securely
-        </Button>
-      </div>
-      {error !== null ? (
-        <p id={errorId} role="alert" className="text-xs text-destructive">
-          {error}
-        </p>
-      ) : null}
-      <div className="flex min-w-0 items-center justify-between gap-2">
-        <p
-          id={privacyId}
-          className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground"
-        >
-          <ShieldCheckIcon className="size-3.5 shrink-0" aria-hidden />
-          {SECRET_REQUEST_PRIVACY_NOTE}
-        </p>
         <Button
           type="button"
-          size="xs"
           variant="ghost-muted"
           disabled={submitting}
           onClick={() => void send({ type: "decline" })}
         >
           Decline
         </Button>
+        <Button type="submit" disabled={submitting || secret.trim().length === 0}>
+          Save securely
+        </Button>
       </div>
+      {error !== null ? (
+        <p id={errorId} role="alert" className="text-xs text-destructive">
+          {error}
+        </p>
+      ) : null}
+      <p id={privacyId} className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
+        <ShieldCheckIcon className="size-3.5 shrink-0" aria-hidden />
+        {SECRET_REQUEST_PRIVACY_NOTE}
+      </p>
     </form>
   );
 }

apps/web/src/components/chat/ThreadDetailsPrRow.tsx

@@ -462,11 +462,8 @@ export function ThreadDetailsPrRow({
               </AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>
-              <AlertDialogClose render={<Button variant="outline" size="sm" />}>
-                Cancel
-              </AlertDialogClose>
+              <AlertDialogClose render={<Button variant="outline" />}>Cancel</AlertDialogClose>
               <Button
-                size="sm"
                 disabled={actionPending}
                 onClick={() => {
                   setConfirmingMerge(false);

apps/web/src/components/chat/ThreadLinkedCheckouts.tsx

@@ -75,36 +75,35 @@ export function ThreadLinkedCheckouts(props: { environmentId: EnvironmentId; thr
                 <div className="truncate text-xs">{link.name}</div>
                 <div className="truncate text-muted-foreground text-xs">{detail}</div>
                 {missing ? (
-                  <div className="mt-1 flex items-center gap-1 text-warning text-xs">
-                    <span className="min-w-0 flex-1">Folder not found</span>
-                    <Button
-                      type="button"
-                      size="xs"
-                      variant="outline"
-                      onClick={() =>
-                        openCheckoutAttachPicker(threadRef, { relocateFrom: link.path })
-                      }
-                    >
-                      Locate
-                    </Button>
-                    <Button
-                      type="button"
-                      size="xs"
-                      variant="outline"
-                      onClick={() =>
-                        void unlink({
-                          environmentId: props.environmentId,
-                          input: { threadId: props.threadId, path: link.path },
-                        })
-                      }
-                    >
-                      Unlink
-                    </Button>
-                  </div>
+                  <div className="truncate text-warning text-xs">Folder not found</div>
                 ) : null}
               </div>
-              {missing ? null : (
-                <div className="flex opacity-0 group-hover:opacity-100">
+              {missing ? (
+                <div className="flex shrink-0 items-center gap-0.5">
+                  <Button
+                    type="button"
+                    size="xs"
+                    variant="ghost-muted"
+                    onClick={() => openCheckoutAttachPicker(threadRef, { relocateFrom: link.path })}
+                  >
+                    Locate
+                  </Button>
+                  <Button
+                    type="button"
+                    size="xs"
+                    variant="ghost-muted"
+                    onClick={() =>
+                      void unlink({
+                        environmentId: props.environmentId,
+                        input: { threadId: props.threadId, path: link.path },
+                      })
+                    }
+                  >
+                    Unlink
+                  </Button>
+                </div>
+              ) : (
+                <div className="flex opacity-0 group-focus-within:opacity-100 group-hover:opacity-100">
                   <Button
                     type="button"
                     size="icon-xs"