refactor(frontend): clean up code by consolidating multi-line JSX into single lines where feasible

- Refactored JSX elements to improve readability by collapsing multi-line props and attributes into single lines if their length permits.
- Improved consistency in component imports by grouping and consolidating them.
- No functional changes, purely restructuring for clarity and maintainability.

frontend/src/app/[locale]/(authenticated)/activity/page.tsx

@@ -199,13 +199,10 @@ export default function ActivityFeedPage() {
                 <BellOff className="h-4 w-4" />
               )}
             </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={reconnect}
-              aria-label="Refresh connection"
-            >
-              <RefreshCw className={connectionState === 'connecting' ? 'h-4 w-4 animate-spin' : 'h-4 w-4'} />
+            <Button variant="ghost" size="icon" onClick={reconnect} aria-label="Refresh connection">
+              <RefreshCw
+                className={connectionState === 'connecting' ? 'h-4 w-4 animate-spin' : 'h-4 w-4'}
+              />
             </Button>
           </div>
         </div>
@@ -214,7 +211,8 @@ export default function ActivityFeedPage() {
         {(!isConnected || sseEvents.length === 0) && (
           <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4 dark:border-yellow-800 dark:bg-yellow-950">
             <p className="text-sm text-yellow-800 dark:text-yellow-200">
-              <strong>Demo Mode:</strong> Showing sample events. Connect to a real project to see live updates.
+              <strong>Demo Mode:</strong> Showing sample events. Connect to a real project to see
+              live updates.
             </p>
           </div>
         )}

frontend/src/app/[locale]/(authenticated)/agents/[id]/page.tsx

@@ -32,11 +32,7 @@ export default function AgentTypeDetailPage() {
   const [viewMode, setViewMode] = useState<ViewMode>(isNew ? 'create' : 'detail');
 
   // Fetch agent type data (skip if creating new)
-  const {
-    data: agentType,
-    isLoading,
-    error,
-  } = useAgentType(isNew ? null : id);
+  const { data: agentType, isLoading, error } = useAgentType(isNew ? null : id);
 
   // Mutations
   const createMutation = useCreateAgentType();
@@ -171,7 +167,7 @@ export default function AgentTypeDetailPage() {
     <div className="container mx-auto px-4 py-6">
       {(viewMode === 'create' || viewMode === 'edit') && (
         <AgentTypeForm
-          agentType={viewMode === 'edit' ? agentType ?? undefined : undefined}
+          agentType={viewMode === 'edit' ? (agentType ?? undefined) : undefined}
           onSubmit={handleSubmit}
           onCancel={handleCancel}
           isSubmitting={createMutation.isPending || updateMutation.isPending}

frontend/src/app/[locale]/(authenticated)/projects/[id]/issues/[issueId]/page.tsx

@@ -10,13 +10,7 @@
 
 import { use } from 'react';
 import Link from 'next/link';
-import {
-  ArrowLeft,
-  Calendar,
-  Clock,
-  ExternalLink,
-  Edit,
-} from 'lucide-react';
+import { ArrowLeft, Calendar, Clock, ExternalLink, Edit } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -65,10 +59,7 @@ export default function IssueDetailPage({ params }: IssueDetailPageProps) {
             <Link href={`/${locale}/projects/${projectId}/issues`}>
               <Button variant="outline">Back to Issues</Button>
             </Link>
-            <Button
-              variant="outline"
-              onClick={() => window.location.reload()}
-            >
+            <Button variant="outline" onClick={() => window.location.reload()}>
               Retry
             </Button>
           </div>
@@ -171,9 +162,7 @@ export default function IssueDetailPage({ params }: IssueDetailPageProps) {
               </CardHeader>
               <CardContent>
                 <div className="prose prose-sm max-w-none dark:prose-invert">
-                  <pre className="whitespace-pre-wrap font-sans text-sm">
-                    {issue.description}
-                  </pre>
+                  <pre className="whitespace-pre-wrap font-sans text-sm">{issue.description}</pre>
                 </div>
               </CardContent>
             </Card>

frontend/src/app/[locale]/(authenticated)/projects/[id]/issues/page.tsx

@@ -14,12 +14,7 @@ import { useRouter } from 'next/navigation';
 import { Plus, Upload } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
-import {
-  IssueFilters,
-  IssueTable,
-  BulkActions,
-  useIssues,
-} from '@/features/issues';
+import { IssueFilters, IssueTable, BulkActions, useIssues } from '@/features/issues';
 import type { IssueFiltersType, IssueSort } from '@/features/issues';
 
 interface ProjectIssuesPageProps {
@@ -95,11 +90,7 @@ export default function ProjectIssuesPage({ params }: ProjectIssuesPageProps) {
           <p className="mt-2 text-sm text-muted-foreground">
             Failed to load issues. Please try again later.
           </p>
-          <Button
-            variant="outline"
-            className="mt-4"
-            onClick={() => window.location.reload()}
-          >
+          <Button variant="outline" className="mt-4" onClick={() => window.location.reload()}>
             Retry
           </Button>
         </div>
@@ -169,26 +160,15 @@ export default function ProjectIssuesPage({ params }: ProjectIssuesPageProps) {
           <div className="flex items-center justify-between text-sm text-muted-foreground">
             <span>
               Showing {(data.pagination.page - 1) * data.pagination.page_size + 1} to{' '}
-              {Math.min(
-                data.pagination.page * data.pagination.page_size,
-                data.pagination.total
-              )}{' '}
-              of {data.pagination.total} issues
+              {Math.min(data.pagination.page * data.pagination.page_size, data.pagination.total)} of{' '}
+              {data.pagination.total} issues
             </span>
             {data.pagination.total_pages > 1 && (
               <div className="flex gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  disabled={!data.pagination.has_prev}
-                >
+                <Button variant="outline" size="sm" disabled={!data.pagination.has_prev}>
                   Previous
                 </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  disabled={!data.pagination.has_next}
-                >
+                <Button variant="outline" size="sm" disabled={!data.pagination.has_next}>
                   Next
                 </Button>
               </div>

frontend/src/app/[locale]/prototypes/ISSUE_COMMENTS.md

@@ -14,44 +14,52 @@ This document contains the comments to be added to each Gitea issue for the desi
 The Project Dashboard prototype has been created and is ready for review.
 
 ### How to View
+
 1. Start the frontend dev server: `cd frontend && npm run dev`
 2. Navigate to: `http://localhost:3000/en/prototypes/project-dashboard`
 
 ### What's Included
 
 **Header Section**
+
 - Project name with status badge (In Progress, Completed, Paused, Blocked)
 - Autonomy level indicator (Full Control, Milestone, Autonomous)
 - Quick action buttons (Pause Project, Run Sprint)
 
 **Agent Panel**
+
 - List of all project agents with avatars
 - Real-time status indicators (active = green, idle = yellow, pending = gray)
 - Current task description for each agent
 - Last activity timestamp
 
 **Sprint Overview**
+
 - Current sprint progress bar
 - Issue statistics grid (Completed, In Progress, Blocked, To Do)
 - Visual burndown chart with ideal vs actual lines
 - Sprint selector dropdown
 
 **Issue Summary Sidebar**
+
 - Count of issues by status with color-coded icons
 - Quick links to view all issues
 
 **Recent Activity Feed**
+
 - Chronological event list with type icons
 - Agent attribution
 - Highlighted approval requests with action buttons
 
 ### Key Design Decisions
+
 - Three-column layout on desktop (2/3 main, 1/3 sidebar)
 - Agent status uses traffic light colors for intuitive understanding
 - Burndown chart is simplified for quick scanning
 - Activity feed limited to 5 items with "View All" link
 
 ### Questions for Review
+
 1. Is the burndown chart detailed enough?
 2. Should agent cards be expandable for more details?
 3. Is the 5-item activity feed sufficient?
@@ -59,6 +67,7 @@ The Project Dashboard prototype has been created and is ready for review.
 **Please review and approve or provide feedback.**
 
 Files:
+
 - `/frontend/src/app/[locale]/prototypes/project-dashboard/page.tsx`
 - `/frontend/src/app/[locale]/prototypes/project-dashboard/README.md`
 ```
@@ -75,6 +84,7 @@ Files:
 The Agent Configuration UI prototype has been created and is ready for review.
 
 ### How to View
+
 1. Start the frontend dev server: `cd frontend && npm run dev`
 2. Navigate to: `http://localhost:3000/en/prototypes/agent-configuration`
 
@@ -102,18 +112,21 @@ The Agent Configuration UI prototype has been created and is ready for review.
    - **Personality Tab**: Large textarea for personality prompt
 
 ### Key Design Decisions
+
 - Separate views for browsing, viewing, and editing
 - Tabbed editor reduces cognitive load
 - MCP permissions show nested scopes when enabled
 - Model parameters have helpful descriptions
 
 ### User Flows to Test
+
 1. Click any card to see detail view
 2. Click "Edit" to see editor view
 3. Click "Create Agent Type" for blank editor
 4. Navigate tabs in editor
 
 ### Questions for Review
+
 1. Is the tabbed editor the right approach?
 2. Should expertise be free-form tags or predefined list?
 3. Should model parameters have "presets"?
@@ -121,6 +134,7 @@ The Agent Configuration UI prototype has been created and is ready for review.
 **Please review and approve or provide feedback.**
 
 Files:
+
 - `/frontend/src/app/[locale]/prototypes/agent-configuration/page.tsx`
 - `/frontend/src/app/[locale]/prototypes/agent-configuration/README.md`
 ```
@@ -137,12 +151,14 @@ Files:
 The Issue List and Detail Views prototype has been created and is ready for review.
 
 ### How to View
+
 1. Start the frontend dev server: `cd frontend && npm run dev`
 2. Navigate to: `http://localhost:3000/en/prototypes/issue-management`
 
 ### What's Included
 
 **List View**
+
 - Filterable table with sortable columns
 - Quick status filter + expandable advanced filters
 - Bulk action bar (appears when selecting issues)
@@ -150,6 +166,7 @@ The Issue List and Detail Views prototype has been created and is ready for revi
 - Labels displayed as badges
 
 **Filter Options**
+
 - Status: Open, In Progress, In Review, Blocked, Done
 - Priority: High, Medium, Low
 - Sprint: Current sprints, Backlog
@@ -157,6 +174,7 @@ The Issue List and Detail Views prototype has been created and is ready for revi
 - Labels: Feature, Bug, Backend, Frontend, etc.
 
 **Detail View**
+
 - Full issue content (markdown-like display)
 - Status workflow panel (click to change status)
 - Assignment panel with agent avatar
@@ -168,12 +186,14 @@ The Issue List and Detail Views prototype has been created and is ready for revi
 - Development section (branch, PR link)
 
 ### Key Design Decisions
+
 - Table layout for density and scannability
 - Status workflow matches common issue tracker patterns
 - Sync status indicator shows data freshness
 - Activity timeline shows issue history
 
 ### User Flows to Test
+
 1. Use search and filters
 2. Click checkboxes to see bulk actions
 3. Sort by clicking column headers
@@ -181,6 +201,7 @@ The Issue List and Detail Views prototype has been created and is ready for revi
 5. Click status buttons in detail view
 
 ### Questions for Review
+
 1. Should we add Kanban view as alternative?
 2. Is the sync indicator clear enough?
 3. Should there be inline editing?
@@ -188,6 +209,7 @@ The Issue List and Detail Views prototype has been created and is ready for revi
 **Please review and approve or provide feedback.**
 
 Files:
+
 - `/frontend/src/app/[locale]/prototypes/issue-management/page.tsx`
 - `/frontend/src/app/[locale]/prototypes/issue-management/README.md`
 ```
@@ -204,12 +226,14 @@ Files:
 The Real-time Activity Feed prototype has been created and is ready for review.
 
 ### How to View
+
 1. Start the frontend dev server: `cd frontend && npm run dev`
 2. Navigate to: `http://localhost:3000/en/prototypes/activity-feed`
 
 ### What's Included
 
 **Event Types Displayed**
+
 - Agent Status: Started, paused, resumed, stopped
 - Agent Message: Updates, questions, progress reports
 - Issue Update: Status changes, assignments, creation
@@ -219,6 +243,7 @@ The Real-time Activity Feed prototype has been created and is ready for review.
 - Milestone: Goals achieved, completions
 
 **Features**
+
 - Real-time connection indicator (pulsing green when connected)
 - Time-based event grouping (New, Earlier Today, Yesterday, etc.)
 - Search functionality
@@ -231,6 +256,7 @@ The Real-time Activity Feed prototype has been created and is ready for review.
 - Mark all read functionality
 
 ### Key Design Decisions
+
 - Card-based layout for clear event separation
 - Orange left border highlights action-required items
 - Time grouping helps users orient in timeline
@@ -238,6 +264,7 @@ The Real-time Activity Feed prototype has been created and is ready for review.
 - Real-time indicator builds trust in data freshness
 
 ### User Flows to Test
+
 1. Scroll through the event feed
 2. Click events to expand details
 3. Open filter panel and select filters
@@ -245,6 +272,7 @@ The Real-time Activity Feed prototype has been created and is ready for review.
 5. Click "Mark all read"
 
 ### Questions for Review
+
 1. Should events be grouped by time or show flat?
 2. Should there be sound notifications for urgent items?
 3. Should users be able to "star" events?
@@ -252,6 +280,7 @@ The Real-time Activity Feed prototype has been created and is ready for review.
 **Please review and approve or provide feedback.**
 
 Files:
+
 - `/frontend/src/app/[locale]/prototypes/activity-feed/page.tsx`
 - `/frontend/src/app/[locale]/prototypes/activity-feed/README.md`
 ```
@@ -269,6 +298,7 @@ The comments above should be added to the respective Gitea issues at:
 - Issue #39: Real-time Activity Feed
 
 After the user reviews each prototype and provides feedback:
+
 1. Iterate on the design based on feedback
 2. Get explicit approval
 3. Begin implementation

frontend/src/app/[locale]/prototypes/page.tsx

@@ -1,13 +1,7 @@
 'use client';
 
 import Link from 'next/link';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {