style(ui): restore rounding for buttons, comments, and company/project icons

Per feedback on PAP-186: containers should have hard edges but buttons,
comment containers, project icons, and company icons should keep rounding.

- Restore --radius-sm (6px) and --radius-md (8px) for buttons/inputs
- Keep --radius-lg and --radius-xl at 0 for cards/containers/dialogs
- Add rounded-sm to comment container divs in CommentThread
- Replace rounded-xl with rounded-[14px] on company icons (CompanyRail,
  CompanySettings) since --radius-xl is 0
- Fix brand color dot in Sidebar (rounded → rounded-sm)

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

ui/src/components/CommentThread.tsx

@@ -6,6 +6,7 @@ import { Paperclip } from "lucide-react";
 import { Identity } from "./Identity";
 import { MarkdownBody } from "./MarkdownBody";
 import { MarkdownEditor, type MarkdownEditorRef, type MentionOption } from "./MarkdownEditor";
+import { StatusBadge } from "./StatusBadge";
 import { formatDateTime } from "../lib/utils";
 
 interface CommentWithRunMeta extends IssueComment {
@@ -13,9 +14,28 @@ interface CommentWithRunMeta extends IssueComment {
   runAgentId?: string | null;
 }
 
+interface LinkedRunItem {
+  runId: string;
+  status: string;
+  agentId: string;
+  createdAt: Date | string;
+  startedAt: Date | string | null;
+}
+
+interface CommentReassignment {
+  assigneeAgentId: string | null;
+  assigneeUserId: string | null;
+}
+
+interface ReassignOption {
+  value: string;
+  label: string;
+}
+
 interface CommentThreadProps {
   comments: CommentWithRunMeta[];
-  onAdd: (body: string, reopen?: boolean) => Promise<void>;
+  linkedRuns?: LinkedRunItem[];
+  onAdd: (body: string, reopen?: boolean, reassignment?: CommentReassignment) => Promise<void>;
   issueStatus?: string;
   agentMap?: Map<string, Agent>;
   imageUploadHandler?: (file: File) => Promise<string>;
@@ -23,6 +43,8 @@ interface CommentThreadProps {
   onAttachImage?: (file: File) => Promise<void>;
   draftKey?: string;
   liveRunSlot?: React.ReactNode;
+  enableReassign?: boolean;
+  reassignOptions?: ReassignOption[];
 }
 
 const CLOSED_STATUSES = new Set(["done", "cancelled"]);
@@ -56,22 +78,70 @@ function clearDraft(draftKey: string) {
   }
 }
 
-export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUploadHandler, onAttachImage, draftKey, liveRunSlot }: CommentThreadProps) {
+function parseReassignment(target: string): CommentReassignment | null {
+  if (!target) return null;
+  if (target === "__none__") {
+    return { assigneeAgentId: null, assigneeUserId: null };
+  }
+  if (target.startsWith("agent:")) {
+    const assigneeAgentId = target.slice("agent:".length);
+    return assigneeAgentId ? { assigneeAgentId, assigneeUserId: null } : null;
+  }
+  if (target.startsWith("user:")) {
+    const assigneeUserId = target.slice("user:".length);
+    return assigneeUserId ? { assigneeAgentId: null, assigneeUserId } : null;
+  }
+  return null;
+}
+
+type TimelineItem =
+  | { kind: "comment"; id: string; createdAtMs: number; comment: CommentWithRunMeta }
+  | { kind: "run"; id: string; createdAtMs: number; run: LinkedRunItem };
+
+export function CommentThread({
+  comments,
+  linkedRuns = [],
+  onAdd,
+  issueStatus,
+  agentMap,
+  imageUploadHandler,
+  onAttachImage,
+  draftKey,
+  liveRunSlot,
+  enableReassign = false,
+  reassignOptions = [],
+}: CommentThreadProps) {
   const [body, setBody] = useState("");
   const [reopen, setReopen] = useState(true);
   const [submitting, setSubmitting] = useState(false);
   const [attaching, setAttaching] = useState(false);
+  const [reassign, setReassign] = useState(false);
+  const [reassignTarget, setReassignTarget] = useState("");
   const editorRef = useRef<MarkdownEditorRef>(null);
   const attachInputRef = useRef<HTMLInputElement | null>(null);
   const draftTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const isClosed = issueStatus ? CLOSED_STATUSES.has(issueStatus) : false;
 
-  // Display oldest-first
-  const sorted = useMemo(
-    () => [...comments].sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()),
-    [comments],
-  );
+  const timeline = useMemo<TimelineItem[]>(() => {
+    const commentItems: TimelineItem[] = comments.map((comment) => ({
+      kind: "comment",
+      id: comment.id,
+      createdAtMs: new Date(comment.createdAt).getTime(),
+      comment,
+    }));
+    const runItems: TimelineItem[] = linkedRuns.map((run) => ({
+      kind: "run",
+      id: run.runId,
+      createdAtMs: new Date(run.startedAt ?? run.createdAt).getTime(),
+      run,
+    }));
+    return [...commentItems, ...runItems].sort((a, b) => {
+      if (a.createdAtMs !== b.createdAtMs) return a.createdAtMs - b.createdAtMs;
+      if (a.kind === b.kind) return a.id.localeCompare(b.id);
+      return a.kind === "comment" ? -1 : 1;
+    });
+  }, [comments, linkedRuns]);
 
   // Build mention options from agent map (exclude terminated agents)
   const mentions = useMemo<MentionOption[]>(() => {
@@ -103,16 +173,26 @@ export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUpl
     };
   }, []);
 
+  useEffect(() => {
+    if (enableReassign) return;
+    setReassign(false);
+    setReassignTarget("");
+  }, [enableReassign]);
+
   async function handleSubmit() {
     const trimmed = body.trim();
     if (!trimmed) return;
+    const reassignment = reassign ? parseReassignment(reassignTarget) : null;
+    if (reassign && !reassignment) return;
 
     setSubmitting(true);
     try {
-      await onAdd(trimmed, isClosed && reopen ? true : undefined);
+      await onAdd(trimmed, isClosed && reopen ? true : undefined, reassignment ?? undefined);
       setBody("");
       if (draftKey) clearDraft(draftKey);
       setReopen(false);
+      setReassign(false);
+      setReassignTarget("");
     } finally {
       setSubmitting(false);
     }
@@ -130,45 +210,85 @@ export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUpl
     }
   }
 
+  const canSubmit = !submitting && !!body.trim() && (!reassign || !!parseReassignment(reassignTarget));
+
   return (
     <div className="space-y-4">
-      <h3 className="text-sm font-semibold">Comments ({comments.length})</h3>
+      <h3 className="text-sm font-semibold">Comments &amp; Runs ({timeline.length})</h3>
 
-      {comments.length === 0 && (
-        <p className="text-sm text-muted-foreground">No comments yet.</p>
+      {timeline.length === 0 && (
+        <p className="text-sm text-muted-foreground">No comments or runs yet.</p>
       )}
 
       <div className="space-y-3">
-        {sorted.map((comment) => (
-          <div key={comment.id} className="border border-border p-3 overflow-hidden min-w-0">
-            <div className="flex items-center justify-between mb-1">
-              {comment.authorAgentId ? (
-                <Link to={`/agents/${comment.authorAgentId}`} className="hover:underline">
-                  <Identity
-                    name={agentMap?.get(comment.authorAgentId)?.name ?? comment.authorAgentId.slice(0, 8)}
-                    size="sm"
-                  />
-                </Link>
-              ) : (
-                <Identity name="You" size="sm" />
-              )}
-              <span className="text-xs text-muted-foreground">
-                {formatDateTime(comment.createdAt)}
-              </span>
-            </div>
-            <MarkdownBody className="text-sm">{comment.body}</MarkdownBody>
-            {comment.runId && comment.runAgentId && (
-              <div className="mt-2 pt-2 border-t border-border/60">
-                <Link
-                  to={`/agents/${comment.runAgentId}/runs/${comment.runId}`}
-                  className="inline-flex items-center rounded-md border border-border bg-accent/30 px-2 py-1 text-[10px] font-mono text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
-                >
-                  run {comment.runId.slice(0, 8)}
-                </Link>
+        {timeline.map((item) => {
+          if (item.kind === "run") {
+            const run = item.run;
+            return (
+              <div key={`run:${run.runId}`} className="border border-border bg-accent/20 p-3 overflow-hidden min-w-0 rounded-sm">
+                <div className="flex items-center justify-between mb-2">
+                  <Link to={`/agents/${run.agentId}`} className="hover:underline">
+                    <Identity
+                      name={agentMap?.get(run.agentId)?.name ?? run.agentId.slice(0, 8)}
+                      size="sm"
+                    />
+                  </Link>
+                  <span className="text-xs text-muted-foreground">
+                    {formatDateTime(run.startedAt ?? run.createdAt)}
+                  </span>
+                </div>
+                <div className="flex items-center gap-2 text-xs">
+                  <span className="text-muted-foreground">Run</span>
+                  <Link
+                    to={`/agents/${run.agentId}/runs/${run.runId}`}
+                    className="inline-flex items-center rounded-md border border-border bg-accent/40 px-2 py-1 font-mono text-muted-foreground hover:text-foreground hover:bg-accent/60 transition-colors"
+                  >
+                    {run.runId.slice(0, 8)}
+                  </Link>
+                  <StatusBadge status={run.status} />
+                </div>
               </div>
-            )}
-          </div>
-        ))}
+            );
+          }
+
+          const comment = item.comment;
+          return (
+            <div key={comment.id} className="border border-border p-3 overflow-hidden min-w-0 rounded-sm">
+              <div className="flex items-center justify-between mb-1">
+                {comment.authorAgentId ? (
+                  <Link to={`/agents/${comment.authorAgentId}`} className="hover:underline">
+                    <Identity
+                      name={agentMap?.get(comment.authorAgentId)?.name ?? comment.authorAgentId.slice(0, 8)}
+                      size="sm"
+                    />
+                  </Link>
+                ) : (
+                  <Identity name="You" size="sm" />
+                )}
+                <span className="text-xs text-muted-foreground">
+                  {formatDateTime(comment.createdAt)}
+                </span>
+              </div>
+              <MarkdownBody className="text-sm">{comment.body}</MarkdownBody>
+              {comment.runId && (
+                <div className="mt-2 pt-2 border-t border-border/60">
+                  {comment.runAgentId ? (
+                    <Link
+                      to={`/agents/${comment.runAgentId}/runs/${comment.runId}`}
+                      className="inline-flex items-center rounded-md border border-border bg-accent/30 px-2 py-1 text-[10px] font-mono text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
+                    >
+                      run {comment.runId.slice(0, 8)}
+                    </Link>
+                  ) : (
+                    <span className="inline-flex items-center rounded-md border border-border bg-accent/30 px-2 py-1 text-[10px] font-mono text-muted-foreground">
+                      run {comment.runId.slice(0, 8)}
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
       </div>
 
       {liveRunSlot}
@@ -185,26 +305,62 @@ export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUpl
           contentClassName="min-h-[60px] text-sm"
         />
         <div className="flex items-center justify-end gap-3">
-          {onAttachImage && (
-            <>
-              <input
-                ref={attachInputRef}
-                type="file"
-                accept="image/png,image/jpeg,image/webp,image/gif"
-                className="hidden"
-                onChange={handleAttachFile}
-              />
-              <Button
-                variant="ghost"
-                size="icon-sm"
-                className="mr-auto"
-                onClick={() => attachInputRef.current?.click()}
-                disabled={attaching}
-                title="Attach image"
-              >
-                <Paperclip className="h-4 w-4" />
-              </Button>
-            </>
+          {(onAttachImage || enableReassign) && (
+            <div className="mr-auto flex items-center gap-3">
+              {onAttachImage && (
+                <>
+                  <input
+                    ref={attachInputRef}
+                    type="file"
+                    accept="image/png,image/jpeg,image/webp,image/gif"
+                    className="hidden"
+                    onChange={handleAttachFile}
+                  />
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={() => attachInputRef.current?.click()}
+                    disabled={attaching}
+                    title="Attach image"
+                  >
+                    <Paperclip className="h-4 w-4" />
+                  </Button>
+                </>
+              )}
+              {enableReassign && (
+                <div className="flex items-center gap-2">
+                  <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
+                    <input
+                      type="checkbox"
+                      checked={reassign}
+                      onChange={(e) => {
+                        setReassign(e.target.checked);
+                        if (!e.target.checked) setReassignTarget("");
+                      }}
+                      className="rounded border-border"
+                    />
+                    Reassign
+                  </label>
+                  <select
+                    value={reassignTarget}
+                    onFocus={() => setReassign(true)}
+                    onMouseDown={() => setReassign(true)}
+                    onChange={(event) => {
+                      setReassign(true);
+                      setReassignTarget(event.target.value);
+                    }}
+                    className="h-8 rounded border border-border bg-background px-2 text-xs"
+                  >
+                    <option value="">Select assignee...</option>
+                    {reassignOptions.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              )}
+            </div>
           )}
           {isClosed && (
             <label className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none">
@@ -217,7 +373,7 @@ export function CommentThread({ comments, onAdd, issueStatus, agentMap, imageUpl
               Re-open
             </label>
           )}
-          <Button size="sm" disabled={!body.trim() || submitting} onClick={handleSubmit}>
+          <Button size="sm" disabled={!canSubmit} onClick={handleSubmit}>
             {submitting ? "Posting..." : "Comment"}
           </Button>
         </div>

ui/src/components/CompanyRail.tsx

@@ -116,8 +116,8 @@ function SortableCompanyItem({
                 brandColor={company.brandColor}
                 className={cn(
                   isSelected
-                    ? "rounded-xl"
-                    : "rounded-[22px] group-hover:rounded-xl",
+                    ? "rounded-[14px]"
+                    : "rounded-[22px] group-hover:rounded-[14px]",
                   isDragging && "shadow-lg",
                 )}
               />
@@ -243,7 +243,7 @@ export function CompanyRail() {
           <TooltipTrigger asChild>
             <button
               onClick={() => openOnboarding()}
-              className="flex items-center justify-center w-11 h-11 rounded-[22px] hover:rounded-xl border-2 border-dashed border-border text-muted-foreground hover:border-foreground/30 hover:text-foreground transition-all duration-200"
+              className="flex items-center justify-center w-11 h-11 rounded-[22px] hover:rounded-[14px] border-2 border-dashed border-border text-muted-foreground hover:border-foreground/30 hover:text-foreground transition-all duration-200"
             >
               <Plus className="h-5 w-5" />
             </button>

ui/src/components/Sidebar.tsx

@@ -8,6 +8,7 @@ import {
   Search,
   SquarePen,
   Network,
+  Settings,
 } from "lucide-react";
 import { useQuery } from "@tanstack/react-query";
 import { SidebarSection } from "./SidebarSection";
@@ -46,6 +47,12 @@ export function Sidebar() {
     <aside className="w-60 h-full min-h-0 border-r border-border bg-background flex flex-col">
       {/* Top bar: Company name (bold) + Search — aligned with top sections (no visible border) */}
       <div className="flex items-center gap-1 px-3 h-12 shrink-0">
+        {selectedCompany?.brandColor && (
+          <div
+            className="w-4 h-4 rounded-sm shrink-0 ml-1"
+            style={{ backgroundColor: selectedCompany.brandColor }}
+          />
+        )}
         <span className="flex-1 text-sm font-bold text-foreground truncate pl-1">
           {selectedCompany?.name ?? "Select company"}
         </span>
@@ -94,6 +101,7 @@ export function Sidebar() {
             <SidebarNavItem to="/org" label="Org" icon={Network} />
             <SidebarNavItem to="/costs" label="Costs" icon={DollarSign} />
             <SidebarNavItem to="/activity" label="Activity" icon={History} />
+            <SidebarNavItem to="/company/settings" label="Settings" icon={Settings} />
           </SidebarSection>
         </nav>
       </ScrollArea>

ui/src/index.css

@@ -36,8 +36,8 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-  --radius-sm: 0px;
-  --radius-md: 0px;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
   --radius-lg: 0px;
   --radius-xl: 0px;
 }

ui/src/pages/CompanySettings.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useCompany } from "../context/CompanyContext";
 import { useBreadcrumbs } from "../context/BreadcrumbContext";
@@ -7,16 +7,44 @@ import { accessApi } from "../api/access";
 import { queryKeys } from "../lib/queryKeys";
 import { Button } from "@/components/ui/button";
 import { Settings } from "lucide-react";
+import { CompanyPatternIcon } from "../components/CompanyPatternIcon";
+import { Field, ToggleField, HintIcon } from "../components/agent-config-primitives";
 
 export function CompanySettings() {
   const { selectedCompany, selectedCompanyId } = useCompany();
   const { setBreadcrumbs } = useBreadcrumbs();
   const queryClient = useQueryClient();
-  const [joinType, setJoinType] = useState<"human" | "agent" | "both">("both");
-  const [expiresInHours, setExpiresInHours] = useState(72);
+
+  // General settings local state
+  const [companyName, setCompanyName] = useState("");
+  const [description, setDescription] = useState("");
+  const [brandColor, setBrandColor] = useState("");
+
+  // Sync local state from selected company
+  useEffect(() => {
+    if (!selectedCompany) return;
+    setCompanyName(selectedCompany.name);
+    setDescription(selectedCompany.description ?? "");
+    setBrandColor(selectedCompany.brandColor ?? "");
+  }, [selectedCompany]);
+
   const [inviteLink, setInviteLink] = useState<string | null>(null);
   const [inviteError, setInviteError] = useState<string | null>(null);
 
+  const generalDirty =
+    !!selectedCompany &&
+    (companyName !== selectedCompany.name ||
+      description !== (selectedCompany.description ?? "") ||
+      brandColor !== (selectedCompany.brandColor ?? ""));
+
+  const generalMutation = useMutation({
+    mutationFn: (data: { name: string; description: string | null; brandColor: string | null }) =>
+      companiesApi.update(selectedCompanyId!, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.companies.all });
+    },
+  });
+
   const settingsMutation = useMutation({
     mutationFn: (requireApproval: boolean) =>
       companiesApi.update(selectedCompanyId!, {
@@ -30,8 +58,8 @@ export function CompanySettings() {
   const inviteMutation = useMutation({
     mutationFn: () =>
       accessApi.createCompanyInvite(selectedCompanyId!, {
-        allowedJoinTypes: joinType,
-        expiresInHours,
+        allowedJoinTypes: "both",
+        expiresInHours: 72,
       }),
     onSuccess: (invite) => {
       setInviteError(null);
@@ -47,11 +75,6 @@ export function CompanySettings() {
     },
   });
 
-  const inviteExpiryHint = useMemo(() => {
-    const expiresAt = new Date(Date.now() + expiresInHours * 60 * 60 * 1000);
-    return expiresAt.toLocaleString();
-  }, [expiresInHours]);
-
   useEffect(() => {
     setBreadcrumbs([
       { label: selectedCompany?.name ?? "Company", href: "/dashboard" },
@@ -67,6 +90,14 @@ export function CompanySettings() {
     );
   }
 
+  function handleSaveGeneral() {
+    generalMutation.mutate({
+      name: companyName.trim(),
+      description: description.trim() || null,
+      brandColor: brandColor || null,
+    });
+  }
+
   return (
     <div className="max-w-2xl space-y-6">
       <div className="flex items-center gap-2">
@@ -74,69 +105,132 @@ export function CompanySettings() {
         <h1 className="text-lg font-semibold">Company Settings</h1>
       </div>
 
+      {/* General */}
+      <div className="space-y-4">
+        <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          General
+        </div>
+        <div className="space-y-3 rounded-md border border-border px-4 py-4">
+          <Field label="Company name" hint="The display name for your company.">
+            <input
+              className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
+              type="text"
+              value={companyName}
+              onChange={(e) => setCompanyName(e.target.value)}
+            />
+          </Field>
+          <Field label="Description" hint="Optional description shown in the company profile.">
+            <input
+              className="w-full rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm outline-none"
+              type="text"
+              value={description}
+              placeholder="Optional company description"
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </Field>
+        </div>
+      </div>
+
+      {/* Appearance */}
+      <div className="space-y-4">
+        <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+          Appearance
+        </div>
+        <div className="space-y-3 rounded-md border border-border px-4 py-4">
+          <div className="flex items-start gap-4">
+            <div className="shrink-0">
+              <CompanyPatternIcon
+                companyName={companyName || selectedCompany.name}
+                brandColor={brandColor || null}
+                className="rounded-[14px]"
+              />
+            </div>
+            <div className="flex-1 space-y-2">
+              <Field label="Brand color" hint="Sets the hue for the company icon. Leave empty for auto-generated color.">
+                <div className="flex items-center gap-2">
+                  <input
+                    type="color"
+                    value={brandColor || "#6366f1"}
+                    onChange={(e) => setBrandColor(e.target.value)}
+                    className="h-8 w-8 cursor-pointer rounded border border-border bg-transparent p-0"
+                  />
+                  <input
+                    type="text"
+                    value={brandColor}
+                    onChange={(e) => {
+                      const v = e.target.value;
+                      if (v === "" || /^#[0-9a-fA-F]{0,6}$/.test(v)) {
+                        setBrandColor(v);
+                      }
+                    }}
+                    placeholder="Auto"
+                    className="w-28 rounded-md border border-border bg-transparent px-2.5 py-1.5 text-sm font-mono outline-none"
+                  />
+                  {brandColor && (
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => setBrandColor("")}
+                      className="text-xs text-muted-foreground"
+                    >
+                      Clear
+                    </Button>
+                  )}
+                </div>
+              </Field>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Save button for General + Appearance */}
+      {generalDirty && (
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            onClick={handleSaveGeneral}
+            disabled={generalMutation.isPending || !companyName.trim()}
+          >
+            {generalMutation.isPending ? "Saving..." : "Save changes"}
+          </Button>
+          {generalMutation.isSuccess && (
+            <span className="text-xs text-muted-foreground">Saved</span>
+          )}
+          {generalMutation.isError && (
+            <span className="text-xs text-destructive">
+              {generalMutation.error instanceof Error
+                ? generalMutation.error.message
+                : "Failed to save"}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Hiring */}
       <div className="space-y-4">
         <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
           Hiring
         </div>
-        <div className="flex items-center justify-between gap-3 rounded-md border border-border px-4 py-3">
-          <div>
-            <div className="text-sm font-medium">
-              Require board approval for new hires
-            </div>
-            <div className="text-xs text-muted-foreground">
-              New agent hires stay pending until approved by board.
-            </div>
-          </div>
-          <Button
-            size="sm"
-            variant={
-              selectedCompany.requireBoardApprovalForNewAgents
-                ? "default"
-                : "outline"
-            }
-            onClick={() =>
-              settingsMutation.mutate(
-                !selectedCompany.requireBoardApprovalForNewAgents,
-              )
-            }
-            disabled={settingsMutation.isPending}
-          >
-            {selectedCompany.requireBoardApprovalForNewAgents ? "On" : "Off"}
-          </Button>
+        <div className="rounded-md border border-border px-4 py-3">
+          <ToggleField
+            label="Require board approval for new hires"
+            hint="New agent hires stay pending until approved by board."
+            checked={!!selectedCompany.requireBoardApprovalForNewAgents}
+            onChange={(v) => settingsMutation.mutate(v)}
+          />
         </div>
       </div>
 
+      {/* Invites */}
       <div className="space-y-4">
         <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
           Invites
         </div>
         <div className="space-y-3 rounded-md border border-border px-4 py-4">
-          <div className="grid gap-3 md:grid-cols-2">
-            <label className="text-sm">
-              <span className="mb-1 block text-muted-foreground">Allowed join type</span>
-              <select
-                className="w-full rounded-md border border-border bg-background px-2 py-2 text-sm"
-                value={joinType}
-                onChange={(event) => setJoinType(event.target.value as "human" | "agent" | "both")}
-              >
-                <option value="both">Human or agent</option>
-                <option value="human">Human only</option>
-                <option value="agent">Agent only</option>
-              </select>
-            </label>
-            <label className="text-sm">
-              <span className="mb-1 block text-muted-foreground">Expires in hours</span>
-              <input
-                className="w-full rounded-md border border-border bg-background px-2 py-2 text-sm"
-                type="number"
-                min={1}
-                max={720}
-                value={expiresInHours}
-                onChange={(event) => setExpiresInHours(Math.max(1, Math.min(720, Number(event.target.value) || 72)))}
-              />
-            </label>
+          <div className="flex items-center gap-1.5">
+            <span className="text-xs text-muted-foreground">Generate a link to invite humans or agents to this company.</span>
+            <HintIcon text="Invite links expire after 72 hours and allow both human and agent joins." />
           </div>
-          <p className="text-xs text-muted-foreground">Invite will expire around {inviteExpiryHint}.</p>
           <div className="flex flex-wrap items-center gap-2">
             <Button size="sm" onClick={() => inviteMutation.mutate()} disabled={inviteMutation.isPending}>
               {inviteMutation.isPending ? "Creating..." : "Create invite link"}