UI: mobile responsive layout, streamline agent budget display, and xs avatar size

Make agents list force list view on mobile with condensed trailing
info. Add mobile bottom bar for config save/cancel and live run
indicator on agent detail. Make MetricCard, PageTabBar, Dashboard
tasks, and ActivityRow responsive for small screens. Add xs avatar
size for inline text flow. Remove redundant budget displays from
agent overview, properties panel, costs tab, and config form.
Add attachment activity verb labels.

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

ui/src/components/AgentProperties.tsx

@@ -6,7 +6,7 @@ import { useCompany } from "../context/CompanyContext";
 import { queryKeys } from "../lib/queryKeys";
 import { StatusBadge } from "./StatusBadge";
 import { Identity } from "./Identity";
-import { formatCents, formatDate } from "../lib/utils";
+import { formatDate } from "../lib/utils";
 import { Separator } from "@/components/ui/separator";
 
 interface AgentPropertiesProps {
@@ -62,24 +62,6 @@ export function AgentProperties({ agent, runtimeState }: AgentPropertiesProps) {
 
       <Separator />
 
-      <div className="space-y-1">
-        <PropertyRow label="Budget">
-          <span className="text-sm">
-            {formatCents(agent.spentMonthlyCents)} / {formatCents(agent.budgetMonthlyCents)}
-          </span>
-        </PropertyRow>
-        <PropertyRow label="Utilization">
-          <span className="text-sm">
-            {agent.budgetMonthlyCents > 0
-              ? Math.round((agent.spentMonthlyCents / agent.budgetMonthlyCents) * 100)
-              : 0}
-            %
-          </span>
-        </PropertyRow>
-      </div>
-
-      <Separator />
-
       <div className="space-y-1">
         {(runtimeState?.sessionDisplayId ?? runtimeState?.sessionId) && (
           <PropertyRow label="Session">