From 67e11edb48de694e0ae0e2090e83b86435fd5dbf Mon Sep 17 00:00:00 2001
From: simran-tavro <simran@tavro.ai>
Date: Fri, 5 Jun 2026 18:05:25 +0530
Subject: [PATCH] Updated edit functionality, removed home menu item and
 duplicate AI Assistant titles

---
 tavro_app/src/components/AgentHeader.tsx      |  80 ++++-
 .../src/components/AgentIdentificationTab.tsx | 128 ++++++-
 tavro_app/src/components/AgentView.tsx        |  54 ++-
 tavro_app/src/components/ChatPanel.tsx        |   1 -
 tavro_app/src/components/Layout.tsx           |  13 +-
 tavro_app/src/components/UseCaseView.tsx      | 339 ++++++++++++++++--
 tavro_app/src/pages/AgentViewPage.tsx         | 245 ++++++++++---
 .../src/pages/BusinessApplicationViewPage.tsx | 228 ++++++++++--
 .../src/pages/BusinessProcessViewPage.tsx     | 229 ++++++++++--
 tavro_app/src/pages/IntegrationViewPage.tsx   | 227 +++++++++---
 tavro_app/src/pages/UseCaseViewPage.tsx       | 212 +++++++++--
 11 files changed, 1472 insertions(+), 284 deletions(-)

diff --git a/tavro_app/src/components/AgentHeader.tsx b/tavro_app/src/components/AgentHeader.tsx
index d5245fc..4b2eb67 100644
--- a/tavro_app/src/components/AgentHeader.tsx
+++ b/tavro_app/src/components/AgentHeader.tsx
@@ -1,9 +1,22 @@
 import React from 'react';
 import { AgentData } from '../types/agent';
-import { Bot, ExternalLink, Globe, BookOpen, ShieldAlert, CheckCircle2 } from 'lucide-react';
+import { Bot, ExternalLink, Globe, BookOpen, ShieldAlert, CheckCircle2, Loader2 } from 'lucide-react';
 import { getAgentRiskLevel } from '../utils/agentRisk';
 
-interface AgentHeaderProps { agent: AgentData; }
+type AgentInlineField = 'name' | 'description' | 'instruction';
+
+interface AgentHeaderProps {
+    agent: AgentData;
+    isEditing?: boolean;
+    editName?: string;
+    onEditNameChange?: (v: string) => void;
+    inlineEdit?: { field: AgentInlineField; value: string } | null;
+    inlineSaving?: AgentInlineField | null;
+    onStartInlineEdit?: (field: AgentInlineField) => void;
+    onInlineValueChange?: (value: string) => void;
+    onSaveInlineEdit?: () => void;
+    onCancelInlineEdit?: () => void;
+}
 
 const Badge: React.FC<{ text: string; color?: 'blue' | 'emerald' | 'amber' | 'rose' | 'slate' }> = ({ text, color = 'slate' }) => {
     const cls = {
@@ -16,7 +29,18 @@ const Badge: React.FC<{ text: string; color?: 'blue' | 'emerald' | 'amber' | 'ro
     return <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold border uppercase tracking-wide ${cls}`}>{text}</span>;
 };
 
-const AgentHeader: React.FC<AgentHeaderProps> = ({ agent }) => {
+const AgentHeader: React.FC<AgentHeaderProps> = ({
+    agent,
+    isEditing,
+    editName,
+    onEditNameChange,
+    inlineEdit,
+    inlineSaving,
+    onStartInlineEdit,
+    onInlineValueChange,
+    onSaveInlineEdit,
+    onCancelInlineEdit,
+}) => {
     const id = agent.identification;
     const caps = agent.capabilities;
 
@@ -44,6 +68,9 @@ const AgentHeader: React.FC<AgentHeaderProps> = ({ agent }) => {
             : riskLevel === 'medium'
                 ? 'text-amber-600'
                 : 'text-emerald-600';
+    const isInlineName = inlineEdit?.field === 'name';
+    const isSavingName = inlineSaving === 'name';
+    const nameSaveDisabled = isSavingName || !inlineEdit?.value.trim();
     return (
         <div className="bg-white border border-slate-200 shadow-sm rounded-2xl overflow-hidden flex flex-col">
             <div className="p-6 bg-slate-50 border-b border-slate-100 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 flex-wrap">
@@ -51,8 +78,51 @@ const AgentHeader: React.FC<AgentHeaderProps> = ({ agent }) => {
                     <div className="p-3 bg-blue-600 text-white rounded-xl shadow-sm mt-1 shrink-0">
                         <Bot size={28} />
                     </div>
-                    <div className="flex flex-col gap-1.5 min-w-0">
-                        <h2 className="text-2xl font-bold text-slate-800 tracking-tight break-words">{agent.name}</h2>
+                    <div className="flex flex-col gap-1.5 min-w-0 flex-1">
+                        {isEditing ? (
+                            <input
+                                type="text"
+                                value={editName ?? agent.name}
+                                onChange={e => onEditNameChange?.(e.target.value)}
+                                className="text-2xl font-bold text-slate-800 tracking-tight w-full border-b-2 border-blue-400 bg-transparent outline-none pb-0.5"
+                            />
+                        ) : isInlineName && inlineEdit ? (
+                            <div className="flex items-center gap-2 w-full">
+                                <input
+                                    type="text"
+                                    value={inlineEdit.value}
+                                    onChange={e => onInlineValueChange?.(e.target.value)}
+                                    className="text-2xl font-bold text-slate-800 tracking-tight flex-1 border-b-2 border-blue-400 bg-transparent outline-none pb-0.5"
+                                    autoFocus
+                                />
+                                <button
+                                    type="button"
+                                    onClick={onSaveInlineEdit}
+                                    disabled={nameSaveDisabled}
+                                    title={!inlineEdit.value.trim() ? 'Agent Name is required' : 'Save'}
+                                    className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-blue-600 text-xs font-black text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-300"
+                                >
+                                    {isSavingName ? <Loader2 size={14} className="animate-spin" /> : '✓'}
+                                </button>
+                                <button
+                                    type="button"
+                                    onClick={onCancelInlineEdit}
+                                    disabled={isSavingName}
+                                    title="Cancel"
+                                    className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-slate-200 bg-white text-xs font-black text-slate-600 hover:bg-slate-50 disabled:opacity-50"
+                                >
+                                    ✕
+                                </button>
+                            </div>
+                        ) : (
+                            <h2
+                                onDoubleClick={() => onStartInlineEdit?.('name')}
+                                title="Double-click to edit"
+                                className="text-2xl font-bold text-slate-800 tracking-tight break-words cursor-text rounded-lg hover:bg-blue-50/50 transition-colors"
+                            >
+                                {agent.name}
+                            </h2>
+                        )}
                         <div className="flex items-center gap-2 flex-wrap">
                             <span className="font-mono text-xs bg-white px-2 py-0.5 rounded border border-slate-200 text-slate-600 break-all">
                                 {id?.agent_id || 'N/A'}
diff --git a/tavro_app/src/components/AgentIdentificationTab.tsx b/tavro_app/src/components/AgentIdentificationTab.tsx
index 60caf56..feaa903 100644
--- a/tavro_app/src/components/AgentIdentificationTab.tsx
+++ b/tavro_app/src/components/AgentIdentificationTab.tsx
@@ -1,15 +1,67 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { AgentData } from '../types/agent';
-import { User, Tag, ChevronDown, ChevronUp } from 'lucide-react';
+import { User, Tag, ChevronDown, ChevronUp, Loader2 } from 'lucide-react';
 
-interface AgentIdentificationTabProps { agent: AgentData; }
+type AgentInlineField = 'name' | 'description' | 'instruction';
 
-export const AgentIdentificationTab: React.FC<AgentIdentificationTabProps> = ({ agent }) => {
+interface AgentIdentificationTabProps {
+    agent: AgentData;
+    isEditing?: boolean;
+    editDescription?: string;
+    onEditDescriptionChange?: (v: string) => void;
+    editInstruction?: string;
+    onEditInstructionChange?: (v: string) => void;
+    inlineEdit?: { field: AgentInlineField; value: string } | null;
+    inlineSaving?: AgentInlineField | null;
+    onStartInlineEdit?: (field: AgentInlineField) => void;
+    onInlineValueChange?: (value: string) => void;
+    onSaveInlineEdit?: () => void;
+    onCancelInlineEdit?: () => void;
+}
+
+export const AgentIdentificationTab: React.FC<AgentIdentificationTabProps> = ({
+    agent, isEditing,
+    editDescription, onEditDescriptionChange,
+    editInstruction, onEditInstructionChange,
+    inlineEdit, inlineSaving, onStartInlineEdit,
+    onInlineValueChange, onSaveInlineEdit, onCancelInlineEdit,
+}) => {
     const [instrOpen, setInstrOpen] = useState(false);
     const [instrOverflow, setInstrOverflow] = useState(false);
     const instructionContainerRef = useRef<HTMLDivElement | null>(null);
     const id = agent.identification;
     const COLLAPSED_MAX_HEIGHT_PX = 128; // max-h-32
+    const isInlineDescription = inlineEdit?.field === 'description';
+    const isInlineInstruction = inlineEdit?.field === 'instruction';
+
+    const renderInlineActions = (field: AgentInlineField) => {
+        const isSaving = inlineSaving === field;
+        const isBlank = !inlineEdit?.value.trim();
+        const saveDisabled = isSaving || isBlank;
+
+        return (
+            <div className="flex shrink-0 gap-1">
+                <button
+                    type="button"
+                    onClick={onSaveInlineEdit}
+                    disabled={saveDisabled}
+                    title={isBlank ? 'This field is required' : 'Save'}
+                    className="inline-flex h-6 w-6 items-center justify-center rounded-lg bg-blue-600 text-xs font-black text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-300"
+                >
+                    {isSaving ? <Loader2 size={14} className="animate-spin" /> : '✓'}
+                </button>
+                <button
+                    type="button"
+                    onClick={onCancelInlineEdit}
+                    disabled={isSaving}
+                    title="Cancel"
+                    className="inline-flex h-6 w-6 items-center justify-center rounded-lg border border-slate-200 bg-white text-xs font-black text-slate-600 hover:bg-slate-50 disabled:opacity-50"
+                >
+                    ✕
+                </button>
+            </div>
+        );
+    };
 
     useEffect(() => {
         const node = instructionContainerRef.current;
@@ -26,9 +78,33 @@ export const AgentIdentificationTab: React.FC<AgentIdentificationTabProps> = ({
                     Identification & Role
                 </h3>
 
-                <p className="text-sm text-slate-600 leading-relaxed border-l-2 border-blue-200 pl-4 py-1 mb-4">
-                    {agent.description}
-                </p>
+                {isEditing ? (
+                    <textarea
+                        value={editDescription ?? agent.description ?? ''}
+                        onChange={e => onEditDescriptionChange?.(e.target.value)}
+                        rows={3}
+                        className="w-full text-sm text-slate-600 leading-relaxed border-l-2 border-blue-400 pl-4 py-1 mb-4 bg-blue-50/40 outline-none resize-none rounded-r-lg"
+                    />
+                ) : isInlineDescription && inlineEdit ? (
+                    <div className="flex items-start gap-2 mb-4">
+                        <textarea
+                            value={inlineEdit.value}
+                            onChange={e => onInlineValueChange?.(e.target.value)}
+                            rows={3}
+                            className="w-full text-sm text-slate-600 leading-relaxed border-l-2 border-blue-400 pl-4 py-1 bg-blue-50/40 outline-none resize-none rounded-r-lg"
+                            autoFocus
+                        />
+                        {renderInlineActions('description')}
+                    </div>
+                ) : (
+                    <p
+                        onDoubleClick={() => onStartInlineEdit?.('description')}
+                        title="Double-click to edit"
+                        className="text-sm text-slate-600 leading-relaxed border-l-2 border-blue-200 pl-4 py-1 mb-4 cursor-text rounded-r-lg hover:bg-blue-50/40 transition-colors"
+                    >
+                        {agent.description || '-'}
+                    </p>
+                )}
 
                 {(id?.owner || id?.tags) && (
                     <div className="flex flex-wrap gap-2 mb-4">
@@ -53,7 +129,7 @@ export const AgentIdentificationTab: React.FC<AgentIdentificationTabProps> = ({
                     <div className="flex flex-col gap-1">
                         <div className="flex items-center justify-between">
                             <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">System Instruction</span>
-                            {instrOverflow && (
+                            {instrOverflow && !isInlineInstruction && (
                                 <button
                                     onClick={() => setInstrOpen(o => !o)}
                                     className="text-[10px] font-semibold text-blue-500 hover:text-blue-700 flex items-center gap-1"
@@ -62,14 +138,36 @@ export const AgentIdentificationTab: React.FC<AgentIdentificationTabProps> = ({
                                 </button>
                             )}
                         </div>
-                        <div
-                            ref={instructionContainerRef}
-                            className={`overflow-hidden transition-all duration-300 ease-in-out ${instrOverflow ? (instrOpen ? 'max-h-[2500px]' : 'max-h-32') : 'max-h-none'} overflow-y-auto pr-1`}
-                        >
-                            <pre className="text-xs font-mono text-slate-600 whitespace-pre-wrap leading-relaxed">
-                                {id?.instruction || '-'}
-                            </pre>
-                        </div>
+                        {isEditing ? (
+                            <textarea
+                                value={editInstruction ?? id?.instruction ?? ''}
+                                onChange={e => onEditInstructionChange?.(e.target.value)}
+                                rows={8}
+                                className="w-full text-xs font-mono text-slate-600 leading-relaxed bg-white border border-blue-300 rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-blue-400/20 resize-none mt-1"
+                            />
+                        ) : isInlineInstruction && inlineEdit ? (
+                            <div className="flex items-start gap-2 mt-1">
+                                <textarea
+                                    value={inlineEdit.value}
+                                    onChange={e => onInlineValueChange?.(e.target.value)}
+                                    rows={8}
+                                    className="w-full text-xs font-mono text-slate-600 leading-relaxed bg-white border border-blue-300 rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-blue-400/20 resize-none"
+                                    autoFocus
+                                />
+                                {renderInlineActions('instruction')}
+                            </div>
+                        ) : (
+                            <div
+                                ref={instructionContainerRef}
+                                onDoubleClick={() => onStartInlineEdit?.('instruction')}
+                                title="Double-click to edit"
+                                className={`overflow-hidden transition-all duration-300 ease-in-out ${instrOverflow ? (instrOpen ? 'max-h-[2500px]' : 'max-h-32') : 'max-h-none'} overflow-y-auto pr-1`}
+                            >
+                                <pre className="text-xs font-mono text-slate-600 whitespace-pre-wrap leading-relaxed cursor-text rounded-lg hover:bg-blue-50/50 transition-colors">
+                                    {id?.instruction || '-'}
+                                </pre>
+                            </div>
+                        )}
                     </div>
                 </div>
             </div>
diff --git a/tavro_app/src/components/AgentView.tsx b/tavro_app/src/components/AgentView.tsx
index f643c44..85fdd21 100644
--- a/tavro_app/src/components/AgentView.tsx
+++ b/tavro_app/src/components/AgentView.tsx
@@ -10,9 +10,24 @@ import AgentLineage from './AgentLineage';
 import AgentRiskSummary from './AgentRiskSummary';
 import AgentContextGraph from './AgentContextGraphRF';
 
+type AgentInlineField = 'name' | 'description' | 'instruction';
+
 interface AgentViewProps {
     agent: AgentData;
     onBusinessImpactChange?: (snapshot: AgentBusinessImpactSnapshot) => void;
+    isEditing?: boolean;
+    editName?: string;
+    onEditNameChange?: (v: string) => void;
+    editDescription?: string;
+    onEditDescriptionChange?: (v: string) => void;
+    editInstruction?: string;
+    onEditInstructionChange?: (v: string) => void;
+    inlineEdit?: { field: AgentInlineField; value: string } | null;
+    inlineSaving?: AgentInlineField | null;
+    onStartInlineEdit?: (field: AgentInlineField) => void;
+    onInlineValueChange?: (value: string) => void;
+    onSaveInlineEdit?: () => void;
+    onCancelInlineEdit?: () => void;
 }
 
 type TabType =
@@ -32,7 +47,14 @@ const BASE_TABS: { id: TabType; label: string }[] = [
     { id: 'CONTEXT', label: 'Context Graph' },
 ];
 
-const AgentView: React.FC<AgentViewProps> = ({ agent, onBusinessImpactChange }) => {
+const AgentView: React.FC<AgentViewProps> = ({
+    agent, onBusinessImpactChange,
+    isEditing, editName, onEditNameChange,
+    editDescription, onEditDescriptionChange,
+    editInstruction, onEditInstructionChange,
+    inlineEdit, inlineSaving, onStartInlineEdit,
+    onInlineValueChange, onSaveInlineEdit, onCancelInlineEdit,
+}) => {
     const [activeTab, setActiveTab] = useState<TabType>('IDENTIFICATION');
     const agentId = agent.identification?.agent_id;
 
@@ -46,7 +68,18 @@ const AgentView: React.FC<AgentViewProps> = ({ agent, onBusinessImpactChange })
 
             {/* Header (always visible) */}
             <div className="-mt-6">
-                <AgentHeader agent={agent} />
+                <AgentHeader
+                    agent={agent}
+                    isEditing={isEditing}
+                    editName={editName}
+                    onEditNameChange={onEditNameChange}
+                    inlineEdit={inlineEdit}
+                    inlineSaving={inlineSaving}
+                    onStartInlineEdit={onStartInlineEdit}
+                    onInlineValueChange={onInlineValueChange}
+                    onSaveInlineEdit={onSaveInlineEdit}
+                    onCancelInlineEdit={onCancelInlineEdit}
+                />
             </div>
 
             {/* Tab Navigation */}
@@ -67,7 +100,22 @@ const AgentView: React.FC<AgentViewProps> = ({ agent, onBusinessImpactChange })
 
             {/* Tab Content */}
             <div>
-                {activeTab === 'IDENTIFICATION' && <AgentIdentificationTab agent={agent} />}
+                {activeTab === 'IDENTIFICATION' && (
+                    <AgentIdentificationTab
+                        agent={agent}
+                        isEditing={isEditing}
+                        editDescription={editDescription}
+                        onEditDescriptionChange={onEditDescriptionChange}
+                        editInstruction={editInstruction}
+                        onEditInstructionChange={onEditInstructionChange}
+                        inlineEdit={inlineEdit}
+                        inlineSaving={inlineSaving}
+                        onStartInlineEdit={onStartInlineEdit}
+                        onInlineValueChange={onInlineValueChange}
+                        onSaveInlineEdit={onSaveInlineEdit}
+                        onCancelInlineEdit={onCancelInlineEdit}
+                    />
+                )}
 
                 {activeTab === 'CONFIG' && <AgentTechConfigTab agent={agent} />}
 
diff --git a/tavro_app/src/components/ChatPanel.tsx b/tavro_app/src/components/ChatPanel.tsx
index ac7eb62..2099199 100644
--- a/tavro_app/src/components/ChatPanel.tsx
+++ b/tavro_app/src/components/ChatPanel.tsx
@@ -906,7 +906,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ onClose }) => {
                         <MessageCircle size={14} />
                     </div>
                     <div className="min-w-0">
-                        <h2 className="font-semibold text-slate-800 text-sm leading-tight truncate">Tavro AI Assistant</h2>
                         {getContextBadge(viewType, viewData) && (
                             <span className="text-[10px] font-semibold text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 px-1.5 py-0.5 rounded-full leading-tight mt-0.5">
                                 {getContextBadge(viewType, viewData)}
diff --git a/tavro_app/src/components/Layout.tsx b/tavro_app/src/components/Layout.tsx
index b8d10f6..2b6437a 100644
--- a/tavro_app/src/components/Layout.tsx
+++ b/tavro_app/src/components/Layout.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Outlet, useNavigate, useLocation } from 'react-router-dom';
 import {
-    Home, Bot, Workflow, BarChart2, Settings,
+    Bot, Workflow, BarChart2, Settings,
     LogOut, Database, RefreshCw, ClipboardList, MessageCircle, X, Terminal,
     ChevronLeft, ChevronRight, FlaskConical, Scale, ShieldCheck,
     AppWindow, Paperclip, Network, Zap, Plug, CircleHelp
@@ -185,17 +185,6 @@ const Layout: React.FC = () => {
                     <div className="flex flex-col">
                         {/* Nav links */}
                         <div className="flex flex-col p-4 gap-2">
-                            <button
-                                onClick={() => navigate('/')}
-                                className={`flex items-center py-2.5 rounded-lg transition-all text-sm font-medium w-full outline-none ${isLeftPanelOpen ? 'px-3 justify-start' : 'px-0 justify-center'} ${location.pathname === '/'
-                                    ? 'bg-blue-50 dark:bg-blue-600/20 text-blue-700 dark:text-blue-300 shadow-sm'
-                                    : 'bg-transparent text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-100'}`}
-                                title={!isLeftPanelOpen ? "Home" : undefined}
-                            >
-                                <Home size={18} className={`flex-shrink-0 ${location.pathname === '/' ? 'text-blue-600 dark:text-blue-400' : 'text-slate-400 dark:text-slate-500'}`} />
-                                <span className={`whitespace-nowrap overflow-hidden transition-all duration-300 ${isLeftPanelOpen ? 'max-w-[200px] ml-3 opacity-100' : 'max-w-0 ml-0 opacity-0'}`}>Home</span>
-                            </button>
-
                             <button
                                 onClick={() => navigate('/use-cases')}
                                 className={`flex items-center py-2.5 rounded-lg transition-all text-sm font-medium w-full outline-none ${isLeftPanelOpen ? 'px-3 justify-start' : 'px-0 justify-center'} ${location.pathname.startsWith('/use-cases') || location.pathname.startsWith('/use-case')
diff --git a/tavro_app/src/components/UseCaseView.tsx b/tavro_app/src/components/UseCaseView.tsx
index 721fb5d..080d73f 100644
--- a/tavro_app/src/components/UseCaseView.tsx
+++ b/tavro_app/src/components/UseCaseView.tsx
@@ -18,12 +18,42 @@ import {
     Info,
     CalendarDays,
     User,
+    Loader2,
 } from 'lucide-react';
 
+const PRIORITY_OPTIONS = [
+    '1 - Critical',
+    '2 - High',
+    '3 - Moderate',
+    '4 - Low',
+    '5 - Planning',
+];
+
 interface UseCaseViewProps {
     useCase: UseCaseDetail;
     agentsComponent?: React.ReactNode;
     businessImpactComponent?: React.ReactNode;
+    isEditing?: boolean;
+    editTitle?: string;
+    onEditTitleChange?: (v: string) => void;
+    editDescription?: string;
+    onEditDescriptionChange?: (v: string) => void;
+    editPriority?: string;
+    onEditPriorityChange?: (v: string) => void;
+    editOwner?: string;
+    onEditOwnerChange?: (v: string) => void;
+    editProblemStatement?: string;
+    onEditProblemStatementChange?: (v: string) => void;
+    editExpectedBenefits?: string;
+    onEditExpectedBenefitsChange?: (v: string) => void;
+    editSolutionApproach?: string;
+    onEditSolutionApproachChange?: (v: string) => void;
+    inlineEdit?: { field: string; value: string } | null;
+    inlineSaving?: string | null;
+    onStartInlineEdit?: (field: string, value: string) => void;
+    onInlineValueChange?: (v: string) => void;
+    onSaveInlineEdit?: () => void;
+    onCancelInlineEdit?: () => void;
 }
 
 function MetaBadge({ text, color = 'slate' }: { text: string; color?: 'blue' | 'emerald' | 'amber' | 'slate' }) {
@@ -112,15 +142,6 @@ function SectionCard({ icon, title, count, children }: { icon: React.ReactNode;
     );
 }
 
-function TextBlock({ icon, title, text }: { icon: React.ReactNode; title: string; text?: string | null }) {
-    if (!text) return null;
-    return (
-        <SectionCard icon={icon} title={title}>
-            <p className="text-sm text-slate-600 leading-relaxed whitespace-pre-line">{text}</p>
-        </SectionCard>
-    );
-}
-
 function MetaField({ label, children }: { label: string; children: React.ReactNode }) {
     return (
         <div className="flex flex-col gap-1">
@@ -161,7 +182,21 @@ function getId(item: any): string | undefined {
     return item?.sys_id ?? item?.id ?? item?.identifier ?? item?.value ?? item?.agent_id;
 }
 
-const UseCaseView: React.FC<UseCaseViewProps> = ({ useCase: uc, agentsComponent, businessImpactComponent }) => {
+const UseCaseView: React.FC<UseCaseViewProps> = ({
+    useCase: uc,
+    agentsComponent,
+    businessImpactComponent,
+    isEditing,
+    editTitle, onEditTitleChange,
+    editDescription, onEditDescriptionChange,
+    editPriority, onEditPriorityChange,
+    editOwner, onEditOwnerChange,
+    editProblemStatement, onEditProblemStatementChange,
+    editExpectedBenefits, onEditExpectedBenefitsChange,
+    editSolutionApproach, onEditSolutionApproachChange,
+    inlineEdit, inlineSaving,
+    onStartInlineEdit, onInlineValueChange, onSaveInlineEdit, onCancelInlineEdit,
+}) => {
     const [activeTab, setActiveTab] = React.useState('details');
 
     const applications = uc.applications?.filter(Boolean) ?? [];
@@ -180,6 +215,38 @@ const UseCaseView: React.FC<UseCaseViewProps> = ({ useCase: uc, agentsComponent,
     const createdAt = (uc as any).created_at ?? (uc as any).sys_created_on ?? (uc as any).created ?? null;
     const updatedAt = (uc as any).updated_at ?? (uc as any).sys_updated_on ?? (uc as any).updated ?? null;
     const description = uc.description ?? (uc as any).description ?? null;
+    const problemStatement = (uc as any).problem_statement ?? (uc as any).business_problem_statement ?? null;
+    const expectedBenefits = uc.expected_benefits ?? null;
+    const solutionApproach = (uc as any).solution_approach ?? null;
+
+    const REQUIRED_INLINE_FIELDS = new Set(['title', 'description']);
+    const renderInlineActions = (field: string) => {
+        const isSaving = inlineSaving === field;
+        const isBlank = REQUIRED_INLINE_FIELDS.has(field) && !inlineEdit?.value.trim();
+        const saveDisabled = isSaving || isBlank;
+        return (
+            <div className="flex shrink-0 gap-1">
+                <button
+                    type="button"
+                    onClick={onSaveInlineEdit}
+                    disabled={saveDisabled}
+                    title={isBlank ? 'This field is required' : 'Save'}
+                    className="inline-flex h-6 w-6 items-center justify-center rounded-lg bg-blue-600 text-xs font-black text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-300"
+                >
+                    {isSaving ? <Loader2 size={12} className="animate-spin" /> : '✓'}
+                </button>
+                <button
+                    type="button"
+                    onClick={onCancelInlineEdit}
+                    disabled={isSaving}
+                    title="Cancel"
+                    className="inline-flex h-6 w-6 items-center justify-center rounded-lg border border-slate-200 bg-white text-xs font-black text-slate-600 hover:bg-slate-50 disabled:opacity-50"
+                >
+                    ✕
+                </button>
+            </div>
+        );
+    };
 
     const tabs = [
         { id: 'details',          label: 'Details',                  icon: Info },
@@ -194,7 +261,7 @@ const UseCaseView: React.FC<UseCaseViewProps> = ({ useCase: uc, agentsComponent,
         <div className="flex flex-col gap-6 w-full animate-fade-in pb-6 max-w-[1400px] mx-auto">
             <div className="h-4 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-t-2xl w-full" />
 
-            {/* ── Header card ── */}
+            {/* Header card */}
             <div className="-mt-6 bg-white border border-slate-200 shadow-sm rounded-2xl overflow-hidden">
                 <div className="p-6 flex flex-col gap-4">
                     {/* Title row */}
@@ -203,9 +270,33 @@ const UseCaseView: React.FC<UseCaseViewProps> = ({ useCase: uc, agentsComponent,
                             <ClipboardList size={22} />
                         </div>
                         <div className="flex flex-col gap-1.5 min-w-0 flex-1">
-                            <h1 className="text-xl font-bold text-slate-800 tracking-tight leading-tight">
-                                {(uc as any).name ?? (uc as any).title ?? 'Unnamed Use Case'}
-                            </h1>
+                            {isEditing ? (
+                                <input
+                                    type="text"
+                                    value={editTitle ?? (uc as any).name ?? (uc as any).title ?? ''}
+                                    onChange={e => onEditTitleChange?.(e.target.value)}
+                                    className="text-xl font-bold text-slate-800 tracking-tight leading-tight w-full border-b-2 border-blue-400 bg-transparent outline-none pb-0.5"
+                                />
+                            ) : inlineEdit?.field === 'title' ? (
+                                <div className="flex items-center gap-2 min-w-0">
+                                    <input
+                                        type="text"
+                                        value={inlineEdit.value}
+                                        onChange={e => onInlineValueChange?.(e.target.value)}
+                                        className="text-xl font-bold text-slate-800 tracking-tight leading-tight w-full border-b-2 border-blue-400 bg-transparent outline-none pb-0.5"
+                                        autoFocus
+                                    />
+                                    {renderInlineActions('title')}
+                                </div>
+                            ) : (
+                                <h1
+                                    onDoubleClick={() => onStartInlineEdit?.('title', (uc as any).name ?? (uc as any).title ?? '')}
+                                    title="Double-click to edit"
+                                    className="text-xl font-bold text-slate-800 tracking-tight leading-tight cursor-text rounded-lg hover:bg-blue-50/50 transition-colors"
+                                >
+                                    {(uc as any).name ?? (uc as any).title ?? 'Unnamed Use Case'}
+                                </h1>
+                            )}
                             <div className="flex items-center gap-2 flex-wrap">
                                 {uc.identifier && (
                                     <span className="font-mono text-[10px] bg-slate-100 px-2 py-0.5 rounded border border-slate-200 text-slate-500">
@@ -225,12 +316,42 @@ const UseCaseView: React.FC<UseCaseViewProps> = ({ useCase: uc, agentsComponent,
                         </MetaField>
 
                         <MetaField label="Priority">
-                            {priorityValue ? (
-                                <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-bold border ${priorityTheme.badge}`}>
+                            {isEditing ? (
+                                <select
+                                    value={editPriority ?? ''}
+                                    onChange={e => onEditPriorityChange?.(e.target.value)}
+                                    className="text-xs border-b border-blue-400 bg-transparent outline-none py-0.5 pr-1"
+                                >
+                                    {PRIORITY_OPTIONS.map(p => <option key={p} value={p}>{p}</option>)}
+                                </select>
+                            ) : inlineEdit?.field === 'priority' ? (
+                                <div className="flex items-center gap-1">
+                                    <select
+                                        value={inlineEdit.value}
+                                        onChange={e => onInlineValueChange?.(e.target.value)}
+                                        className="text-xs border-b border-blue-400 bg-transparent outline-none py-0.5 pr-1"
+                                        autoFocus
+                                    >
+                                        {PRIORITY_OPTIONS.map(p => <option key={p} value={p}>{p}</option>)}
+                                    </select>
+                                    {renderInlineActions('priority')}
+                                </div>
+                            ) : priorityValue ? (
+                                <span
+                                    onDoubleClick={() => onStartInlineEdit?.('priority', priorityValue)}
+                                    title="Double-click to edit"
+                                    className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-bold border cursor-text hover:opacity-80 ${priorityTheme.badge}`}
+                                >
                                     <span className={`w-1.5 h-1.5 rounded-full ${priorityTheme.dot}`} />
                                     {priorityValue}
                                 </span>
-                            ) : <span className="text-slate-400 text-xs">—</span>}
+                            ) : (
+                                <span
+                                    onDoubleClick={() => onStartInlineEdit?.('priority', '')}
+                                    title="Double-click to edit"
+                                    className="text-slate-400 text-xs cursor-text hover:opacity-80"
+                                >—</span>
+                            )}
                         </MetaField>
 
                         <MetaField label="Owner">
@@ -248,7 +369,7 @@ const UseCaseView: React.FC<UseCaseViewProps> = ({ useCase: uc, agentsComponent,
                 </div>
             </div>
 
-            {/* ── Tab bar ── */}
+            {/* Tab bar */}
             <div className="flex items-center gap-1 overflow-x-auto pb-0 scrollbar-hide border-b border-slate-200">
                 {tabs.map(tab => {
                     const Icon = tab.icon;
@@ -269,28 +390,86 @@ const UseCaseView: React.FC<UseCaseViewProps> = ({ useCase: uc, agentsComponent,
                 })}
             </div>
 
-            {/* ── Tab content ── */}
+            {/* Tab content */}
             <div className="bg-slate-50 border border-slate-200 rounded-2xl p-6 shadow-sm min-h-[400px]">
 
-                {/* Details tab — description + all metadata */}
+                {/* Details tab */}
                 {activeTab === 'details' && (
                     <div className="flex flex-col gap-6 animate-fade-in">
-                        {description ? (
+                        {isEditing ? (
                             <SectionCard icon={<FileText size={16} />} title="Description">
-                                <p className="text-sm text-slate-600 leading-relaxed whitespace-pre-line">{description}</p>
+                                <textarea
+                                    value={editDescription ?? ''}
+                                    onChange={e => onEditDescriptionChange?.(e.target.value)}
+                                    rows={4}
+                                    className="w-full text-sm text-slate-600 leading-relaxed border border-blue-300 rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-blue-400/20 resize-none"
+                                />
+                            </SectionCard>
+                        ) : inlineEdit?.field === 'description' ? (
+                            <SectionCard icon={<FileText size={16} />} title="Description">
+                                <div className="flex items-start gap-2">
+                                    <textarea
+                                        value={inlineEdit.value}
+                                        onChange={e => onInlineValueChange?.(e.target.value)}
+                                        rows={4}
+                                        className="w-full text-sm text-slate-600 leading-relaxed border border-blue-300 rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-blue-400/20 resize-none"
+                                        autoFocus
+                                    />
+                                    {renderInlineActions('description')}
+                                </div>
+                            </SectionCard>
+                        ) : description ? (
+                            <SectionCard icon={<FileText size={16} />} title="Description">
+                                <p
+                                    onDoubleClick={() => onStartInlineEdit?.('description', description)}
+                                    title="Double-click to edit"
+                                    className="text-sm text-slate-600 leading-relaxed whitespace-pre-line cursor-text rounded-lg hover:bg-blue-50/40 transition-colors p-1 -m-1"
+                                >
+                                    {description}
+                                </p>
                             </SectionCard>
                         ) : (
-                            <div className="bg-white rounded-2xl border border-dashed border-slate-200 p-8 text-center text-slate-400 text-sm">
+                            <div
+                                onDoubleClick={() => onStartInlineEdit?.('description', '')}
+                                title="Double-click to add description"
+                                className="bg-white rounded-2xl border border-dashed border-slate-200 p-8 text-center text-slate-400 text-sm cursor-text hover:bg-blue-50/20 transition-colors"
+                            >
                                 No description provided.
                             </div>
                         )}
                         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                            {owner && (
-                                <div className="bg-white rounded-xl border border-slate-200 px-4 py-3 flex flex-col gap-1">
-                                    <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Owner</span>
-                                    <span className="text-sm font-semibold text-slate-700 flex items-center gap-1.5"><User size={13} className="text-slate-400" />{owner}</span>
-                                </div>
-                            )}
+                            <div className="bg-white rounded-xl border border-slate-200 px-4 py-3 flex flex-col gap-1">
+                                <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Owner</span>
+                                {isEditing ? (
+                                    <input
+                                        type="text"
+                                        value={editOwner ?? ''}
+                                        onChange={e => onEditOwnerChange?.(e.target.value)}
+                                        placeholder="Assign owner"
+                                        className="text-sm font-semibold text-slate-700 w-full border-b border-blue-400 bg-transparent outline-none"
+                                    />
+                                ) : inlineEdit?.field === 'owner' ? (
+                                    <div className="flex items-center gap-1">
+                                        <input
+                                            type="text"
+                                            value={inlineEdit.value}
+                                            onChange={e => onInlineValueChange?.(e.target.value)}
+                                            className="text-sm font-semibold text-slate-700 w-full border-b border-blue-400 bg-transparent outline-none"
+                                            autoFocus
+                                        />
+                                        {renderInlineActions('owner')}
+                                    </div>
+                                ) : (
+                                    <span
+                                        onDoubleClick={() => onStartInlineEdit?.('owner', owner ?? '')}
+                                        title="Double-click to edit"
+                                        className="text-sm font-semibold text-slate-700 flex items-center gap-1.5 cursor-text rounded hover:bg-blue-50/40 transition-colors"
+                                    >
+                                        <User size={13} className="text-slate-400" />
+                                        {owner || <span className="text-slate-400 font-normal">Unassigned</span>}
+                                    </span>
+                                )}
+                            </div>
                             {proposedBy && (
                                 <div className="bg-white rounded-xl border border-slate-200 px-4 py-3 flex flex-col gap-1">
                                     <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Proposed By</span>
@@ -318,9 +497,105 @@ const UseCaseView: React.FC<UseCaseViewProps> = ({ useCase: uc, agentsComponent,
                 {/* Business Case tab */}
                 {activeTab === 'business_case' && (
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-6 animate-fade-in">
-                        <TextBlock icon={<FileText size={16} />} title="Business Problem Statement" text={(uc as any).problem_statement ?? (uc as any).business_problem_statement} />
-                        <TextBlock icon={<CheckCircle2 size={16} />} title="Expected Benefits / Outcomes" text={uc.expected_benefits} />
-                        <TextBlock icon={<Target size={16} />} title="Solution Approach" text={(uc as any).solution_approach} />
+                        {/* Problem Statement */}
+                        {isEditing ? (
+                            <SectionCard icon={<FileText size={16} />} title="Business Problem Statement">
+                                <textarea
+                                    value={editProblemStatement ?? ''}
+                                    onChange={e => onEditProblemStatementChange?.(e.target.value)}
+                                    rows={4}
+                                    className="w-full text-sm text-slate-600 leading-relaxed border border-blue-300 rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-blue-400/20 resize-none"
+                                />
+                            </SectionCard>
+                        ) : inlineEdit?.field === 'problem_statement' ? (
+                            <SectionCard icon={<FileText size={16} />} title="Business Problem Statement">
+                                <div className="flex items-start gap-2">
+                                    <textarea
+                                        value={inlineEdit.value}
+                                        onChange={e => onInlineValueChange?.(e.target.value)}
+                                        rows={4}
+                                        className="w-full text-sm text-slate-600 leading-relaxed border border-blue-300 rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-blue-400/20 resize-none"
+                                        autoFocus
+                                    />
+                                    {renderInlineActions('problem_statement')}
+                                </div>
+                            </SectionCard>
+                        ) : problemStatement ? (
+                            <SectionCard icon={<FileText size={16} />} title="Business Problem Statement">
+                                <p
+                                    onDoubleClick={() => onStartInlineEdit?.('problem_statement', problemStatement)}
+                                    title="Double-click to edit"
+                                    className="text-sm text-slate-600 leading-relaxed whitespace-pre-line cursor-text rounded-lg hover:bg-blue-50/40 transition-colors p-1 -m-1"
+                                >{problemStatement}</p>
+                            </SectionCard>
+                        ) : null}
+
+                        {/* Expected Benefits */}
+                        {isEditing ? (
+                            <SectionCard icon={<CheckCircle2 size={16} />} title="Expected Benefits / Outcomes">
+                                <textarea
+                                    value={editExpectedBenefits ?? ''}
+                                    onChange={e => onEditExpectedBenefitsChange?.(e.target.value)}
+                                    rows={4}
+                                    className="w-full text-sm text-slate-600 leading-relaxed border border-blue-300 rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-blue-400/20 resize-none"
+                                />
+                            </SectionCard>
+                        ) : inlineEdit?.field === 'expected_benefits' ? (
+                            <SectionCard icon={<CheckCircle2 size={16} />} title="Expected Benefits / Outcomes">
+                                <div className="flex items-start gap-2">
+                                    <textarea
+                                        value={inlineEdit.value}
+                                        onChange={e => onInlineValueChange?.(e.target.value)}
+                                        rows={4}
+                                        className="w-full text-sm text-slate-600 leading-relaxed border border-blue-300 rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-blue-400/20 resize-none"
+                                        autoFocus
+                                    />
+                                    {renderInlineActions('expected_benefits')}
+                                </div>
+                            </SectionCard>
+                        ) : expectedBenefits ? (
+                            <SectionCard icon={<CheckCircle2 size={16} />} title="Expected Benefits / Outcomes">
+                                <p
+                                    onDoubleClick={() => onStartInlineEdit?.('expected_benefits', expectedBenefits)}
+                                    title="Double-click to edit"
+                                    className="text-sm text-slate-600 leading-relaxed whitespace-pre-line cursor-text rounded-lg hover:bg-blue-50/40 transition-colors p-1 -m-1"
+                                >{expectedBenefits}</p>
+                            </SectionCard>
+                        ) : null}
+
+                        {/* Solution Approach */}
+                        {isEditing ? (
+                            <SectionCard icon={<Target size={16} />} title="Solution Approach">
+                                <textarea
+                                    value={editSolutionApproach ?? ''}
+                                    onChange={e => onEditSolutionApproachChange?.(e.target.value)}
+                                    rows={4}
+                                    className="w-full text-sm text-slate-600 leading-relaxed border border-blue-300 rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-blue-400/20 resize-none"
+                                />
+                            </SectionCard>
+                        ) : inlineEdit?.field === 'solution_approach' ? (
+                            <SectionCard icon={<Target size={16} />} title="Solution Approach">
+                                <div className="flex items-start gap-2">
+                                    <textarea
+                                        value={inlineEdit.value}
+                                        onChange={e => onInlineValueChange?.(e.target.value)}
+                                        rows={4}
+                                        className="w-full text-sm text-slate-600 leading-relaxed border border-blue-300 rounded-lg px-3 py-2 outline-none focus:ring-2 focus:ring-blue-400/20 resize-none"
+                                        autoFocus
+                                    />
+                                    {renderInlineActions('solution_approach')}
+                                </div>
+                            </SectionCard>
+                        ) : solutionApproach ? (
+                            <SectionCard icon={<Target size={16} />} title="Solution Approach">
+                                <p
+                                    onDoubleClick={() => onStartInlineEdit?.('solution_approach', solutionApproach)}
+                                    title="Double-click to edit"
+                                    className="text-sm text-slate-600 leading-relaxed whitespace-pre-line cursor-text rounded-lg hover:bg-blue-50/40 transition-colors p-1 -m-1"
+                                >{solutionApproach}</p>
+                            </SectionCard>
+                        ) : null}
+
                         {(uc as any).business_sponsors && (
                             <SectionCard icon={<Users size={16} />} title="Business Sponsors">
                                 <p className="text-sm text-slate-700">{(uc as any).business_sponsors}</p>
diff --git a/tavro_app/src/pages/AgentViewPage.tsx b/tavro_app/src/pages/AgentViewPage.tsx
index 028bafc..417d716 100644
--- a/tavro_app/src/pages/AgentViewPage.tsx
+++ b/tavro_app/src/pages/AgentViewPage.tsx
@@ -5,16 +5,17 @@ import { AgentData } from '../types/agent';
 import { mcpClient } from '../services/mcpClient';
 import AgentView from '../components/AgentView';
 import type { AgentBusinessImpactSnapshot } from '../components/AgentRelatedTab';
-import { ArrowLeft, Code2, X, Copy, Check, ShieldAlert, Loader2, FlaskConical, ShieldCheck, Pencil, Trash2 } from 'lucide-react';
+import { ArrowLeft, Code2, X, Copy, Check, ShieldAlert, Loader2, FlaskConical, ShieldCheck, Pencil, Trash2, CheckCircle2 } from 'lucide-react';
 import { useChatSync } from '../hooks/useChatSync';
 import AuditInitModal from '../components/audit/AuditInitModal';
-import EditAgentModal from '../components/EditAgentModal';
 import { agentApi } from '../services/agentApi';
 import { useCatalog } from '../context/CatalogContext';
 
 const hasNonBlankText = (value: unknown): boolean =>
     typeof value === 'string' ? value.trim().length > 0 : value !== null && value !== undefined;
 
+type AgentInlineField = 'name' | 'description' | 'instruction';
+
 const EMPTY_APPLICATION_CARD = {
     identifier: null,
     name: null,
@@ -104,7 +105,14 @@ const AgentViewPage: React.FC = () => {
     const [agent, setAgent] = useState<AgentData | null>(null);
     const [loading, setLoading] = useState(true);
     const [assessing, setAssessing] = useState(false);
-    const [editOpen, setEditOpen] = useState(false);
+    const [isEditing, setIsEditing] = useState(false);
+    const [editName, setEditName] = useState('');
+    const [editDescription, setEditDescription] = useState('');
+    const [editInstruction, setEditInstruction] = useState('');
+    const [editSaving, setEditSaving] = useState(false);
+    const [editError, setEditError] = useState<string | null>(null);
+    const [inlineEdit, setInlineEdit] = useState<{ field: AgentInlineField; value: string } | null>(null);
+    const [inlineSaving, setInlineSaving] = useState<AgentInlineField | null>(null);
     const [deleteConfirm, setDeleteConfirm] = useState(false);
     const [deleting, setDeleting] = useState(false);
     const [jsonOpen, setJsonOpen] = useState(false);
@@ -357,6 +365,97 @@ const AgentViewPage: React.FC = () => {
         }
     };
 
+    const handleStartEdit = () => {
+        if (!agent) return;
+        setEditName(agent.name ?? '');
+        setEditDescription(agent.description ?? '');
+        setEditInstruction(agent.identification?.instruction ?? '');
+        setEditError(null);
+        setInlineEdit(null);
+        setIsEditing(true);
+    };
+
+    const handleCancelEdit = () => {
+        setIsEditing(false);
+        setEditError(null);
+        setInlineEdit(null);
+    };
+
+    const handleSaveEdit = async () => {
+        if (!agent) return;
+        setEditSaving(true);
+        setEditError(null);
+        try {
+            const agentId = agent.identification?.agent_id ?? agent.name;
+            await agentApi.updateAgent(agentId, {
+                agent_name: editName.trim() || undefined,
+                description: editDescription.trim() || undefined,
+                instruction: editInstruction.trim() || undefined,
+            });
+            handleAgentSaved({
+                name: editName.trim(),
+                description: editDescription.trim(),
+                instruction: editInstruction.trim(),
+            });
+            setInlineEdit(null);
+            setIsEditing(false);
+        } catch (err: any) {
+            setEditError(err.message || 'Failed to update agent. Please try again.');
+        } finally {
+            setEditSaving(false);
+        }
+    };
+
+    const handleStartInlineEdit = (field: AgentInlineField) => {
+        if (!agent || isEditing || editSaving || inlineSaving) return;
+        const value =
+            field === 'name'
+                ? agent.name ?? ''
+                : field === 'description'
+                    ? agent.description ?? ''
+                    : agent.identification?.instruction ?? '';
+        setEditError(null);
+        setInlineEdit({ field, value });
+    };
+
+    const handleCancelInlineEdit = () => {
+        setInlineEdit(null);
+        setEditError(null);
+    };
+
+    const handleSaveInlineEdit = async () => {
+        if (!agent || !inlineEdit) return;
+        const nextName = inlineEdit.field === 'name' ? inlineEdit.value.trim() : agent.name ?? '';
+        const nextDescription = inlineEdit.field === 'description' ? inlineEdit.value.trim() : agent.description ?? '';
+        const nextInstruction = inlineEdit.field === 'instruction' ? inlineEdit.value.trim() : agent.identification?.instruction ?? '';
+
+        if (!nextName.trim()) {
+            setEditError('Agent Name is required.');
+            return;
+        }
+
+        setInlineSaving(inlineEdit.field);
+        setEditError(null);
+        try {
+            const agentId = agent.identification?.agent_id ?? agent.name;
+            await agentApi.updateAgent(agentId, {
+                agent_name: nextName || undefined,
+                description: nextDescription || undefined,
+                instruction: nextInstruction || undefined,
+            });
+            handleAgentSaved({
+                name: nextName,
+                description: nextDescription,
+                instruction: nextInstruction,
+            });
+            setInlineEdit(null);
+        } catch (err: any) {
+            setEditError(err.message || 'Failed to update agent field. Please try again.');
+        } finally {
+            setInlineSaving(null);
+        }
+    };
+
     const handleAgentSaved = (updated: { name: string; description: string; instruction: string }) => {
         recentEditRef.current = {
             name: updated.name,
@@ -402,7 +501,7 @@ const AgentViewPage: React.FC = () => {
     const prettyJson = JSON.stringify(buildAgentCardPayload(agent), null, 2);
 
     return (
-        <div className="flex-col gap-6 w-full animate-fade-in relative">
+        <div className="flex flex-col gap-6 w-full animate-fade-in max-w-[1400px] mx-auto pb-12">
             {/* Top bar */}
             <div className="flex items-center justify-between mb-2">
                 <button
@@ -419,49 +518,71 @@ const AgentViewPage: React.FC = () => {
                 </button>
 
                 <div className="flex items-center gap-3">
-                    <button
-                        onClick={() => navigate(
-                            `/playground?useCase=${encodeURIComponent(agent.identification?.agent_id ?? agent.name)}&title=${encodeURIComponent(agent.name)}&desc=${encodeURIComponent(agent.description ?? '')}&instruction=${encodeURIComponent(agent.identification?.instruction ?? '')}`
-                        )}
-                        className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-500 transition-all shadow-sm"
-                    >
-                        <FlaskConical size={15} /> Playground
-                    </button>
-                    <button
-                        onClick={() => setAuditModalOpen(true)}
-                        className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 transition-all shadow-sm"
-                    >
-                        <ShieldCheck size={15} /> Audit
-                    </button>
-                    <button
-                        onClick={handleRequestRiskAssessment}
-                        disabled={assessing}
-                        className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 transition-all shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
-                    >
-                        {assessing ? <Loader2 size={16} className="animate-spin" /> : <ShieldAlert size={16} />}
-                        {assessing ? 'Assessing...' : 'Risk Assessment'}
-                    </button>
-
-                    <button
-                        onClick={() => setJsonOpen(true)}
-                        title="Agent Card"
-                        className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-slate-800 text-slate-100 hover:bg-slate-700 transition-all border border-slate-700 shadow-sm"
-                    >
-                        <Code2 size={14} />
-                        Agent Card
-                    </button>
-                    <button
-                        onClick={() => setEditOpen(true)}
-                        className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 transition-all shadow-sm"
-                    >
-                        <Pencil size={15} /> Edit
-                    </button>
-                    <button
-                        onClick={() => setDeleteConfirm(true)}
-                        className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-red-600 text-white hover:bg-red-700 transition-all shadow-sm"
-                    >
-                        <Trash2 size={15} /> Delete
-                    </button>
+                    {isEditing ? (
+                        <>
+                            {editError && <span className="text-xs text-red-500 font-medium">{editError}</span>}
+                            <button
+                                onClick={handleCancelEdit}
+                                disabled={editSaving}
+                                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 transition-all shadow-sm disabled:opacity-50"
+                            >
+                                Discard
+                            </button>
+                            <button
+                                onClick={handleSaveEdit}
+                                disabled={editSaving || !editName.trim() || !editDescription.trim() || !editInstruction.trim()}
+                                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 transition-all shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"
+                            >
+                                {editSaving
+                                    ? <><Loader2 size={14} className="animate-spin" /> Saving…</>
+                                    : 'Save'}
+                            </button>
+                        </>
+                    ) : (
+                        <>
+                            <button
+                                onClick={() => navigate(
+                                    `/playground?useCase=${encodeURIComponent(agent.identification?.agent_id ?? agent.name)}&title=${encodeURIComponent(agent.name)}&desc=${encodeURIComponent(agent.description ?? '')}&instruction=${encodeURIComponent(agent.identification?.instruction ?? '')}`
+                                )}
+                                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 dark:hover:bg-blue-500 transition-all shadow-sm"
+                            >
+                                <FlaskConical size={15} /> Playground
+                            </button>
+                            <button
+                                onClick={() => setAuditModalOpen(true)}
+                                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 transition-all shadow-sm"
+                            >
+                                <ShieldCheck size={15} /> Audit
+                            </button>
+                            <button
+                                onClick={handleRequestRiskAssessment}
+                                disabled={assessing}
+                                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 transition-all shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                                {assessing ? <Loader2 size={16} className="animate-spin" /> : <ShieldAlert size={16} />}
+                                {assessing ? 'Assessing...' : 'Risk Assessment'}
+                            </button>
+                            <button
+                                onClick={() => setJsonOpen(true)}
+                                title="Agent Card"
+                                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-slate-800 text-slate-100 hover:bg-slate-700 transition-all border border-slate-700 shadow-sm"
+                            >
+                                <Code2 size={14} /> Agent Card
+                            </button>
+                            <button
+                                onClick={handleStartEdit}
+                                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 transition-all shadow-sm"
+                            >
+                                <Pencil size={15} /> Edit
+                            </button>
+                            <button
+                                onClick={() => setDeleteConfirm(true)}
+                                className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-red-600 text-white hover:bg-red-700 transition-all shadow-sm"
+                            >
+                                <Trash2 size={15} /> Delete
+                            </button>
+                        </>
+                    )}
                 </div>
             </div>
 
@@ -472,7 +593,27 @@ const AgentViewPage: React.FC = () => {
                 </div>
             )}
 
-            <AgentView agent={agent} onBusinessImpactChange={handleBusinessImpactChange} />
+            {editError && (
+                <div className="text-xs text-red-600 bg-red-50 border border-red-200 rounded-xl px-3 py-2.5">{editError}</div>
+            )}
+
+            <AgentView
+                agent={agent}
+                onBusinessImpactChange={handleBusinessImpactChange}
+                isEditing={isEditing}
+                editName={editName}
+                onEditNameChange={setEditName}
+                editDescription={editDescription}
+                onEditDescriptionChange={setEditDescription}
+                editInstruction={editInstruction}
+                onEditInstructionChange={setEditInstruction}
+                inlineEdit={inlineEdit}
+                inlineSaving={inlineSaving}
+                onStartInlineEdit={handleStartInlineEdit}
+                onInlineValueChange={(value) => setInlineEdit(prev => prev ? { ...prev, value } : prev)}
+                onSaveInlineEdit={handleSaveInlineEdit}
+                onCancelInlineEdit={handleCancelInlineEdit}
+            />
 
             {/* JSON Inspector Modal */}
             {jsonOpen && createPortal(
@@ -563,14 +704,6 @@ const AgentViewPage: React.FC = () => {
                 </div>
             )}
 
-            {/* Edit modal */}
-            <EditAgentModal
-                agent={agent}
-                open={editOpen}
-                onClose={() => setEditOpen(false)}
-                onSaved={handleAgentSaved}
-            />
-
             {/* Audit modal */}
             <AuditInitModal
                 open={auditModalOpen}
diff --git a/tavro_app/src/pages/BusinessApplicationViewPage.tsx b/tavro_app/src/pages/BusinessApplicationViewPage.tsx
index 1db9923..f4ea315 100644
--- a/tavro_app/src/pages/BusinessApplicationViewPage.tsx
+++ b/tavro_app/src/pages/BusinessApplicationViewPage.tsx
@@ -90,6 +90,26 @@ interface ApplicationFormState {
   latest_release_documentation_link: string;
 }
 
+type ApplicationInlineField =
+  | 'application_name'
+  | 'emergency_tier'
+  | 'business_owner'
+  | 'application_portfolio_manager'
+  | 'vendor_name'
+  | 'business_criticality'
+  | 'it_application_owner'
+  | 'application_description'
+  | 'embedded_ai'
+  | 'opt_out_option'
+  | 'privacy_policy_url'
+  | 'data_excluded_from_ai_training'
+  | 'vendor_description'
+  | 'current_installed_version'
+  | 'is_current_version_supported'
+  | 'latest_released_version'
+  | 'latest_release_date'
+  | 'latest_release_documentation_link';
+
 const HINTS: Record<string, string> = {
   emergency_tier:
     "The Emergency Tier categorizes an application's crisis criticality to prioritize recovery execution order.",
@@ -279,6 +299,8 @@ const BusinessApplicationViewPage: React.FC = () => {
   const [tab, setTab] = useState<Tab>('overview');
   const [editing, setEditing] = useState(isCreateMode);
   const [saving, setSaving] = useState(false);
+  const [inlineEdit, setInlineEdit] = useState<{ field: ApplicationInlineField; value: string } | null>(null);
+  const [inlineSaving, setInlineSaving] = useState<ApplicationInlineField | null>(null);
   const [generatingDescription, setGeneratingDescription] = useState(false);
   const [deleting, setDeleting] = useState(false);
 
@@ -316,6 +338,7 @@ const BusinessApplicationViewPage: React.FC = () => {
       setApplication(null);
       setForm(emptyForm());
       setEditing(true);
+      setInlineEdit(null);
       setAttemptedSave(false);
       setLoading(false);
       setTab('overview');
@@ -323,6 +346,7 @@ const BusinessApplicationViewPage: React.FC = () => {
       return;
     }
     setEditing(false);
+    setInlineEdit(null);
     load();
   }, [id, isCreateMode]);
 
@@ -352,6 +376,120 @@ const BusinessApplicationViewPage: React.FC = () => {
     setForm(prev => ({ ...prev, [key]: value }));
   };
 
+  const startInlineEdit = (field: ApplicationInlineField) => {
+    if (editing || isCreateMode || saving || inlineSaving) return;
+    setActionError(null);
+    setInlineEdit({ field, value: form[field] });
+  };
+
+  const cancelInlineEdit = () => {
+    setInlineEdit(null);
+    setActionError(null);
+  };
+
+  const saveInlineEdit = async () => {
+    if (!application || !inlineEdit) return;
+    const nextForm = { ...form, [inlineEdit.field]: inlineEdit.value };
+    if (!nextForm.application_name.trim()) {
+      setActionError('Application Name is required.');
+      return;
+    }
+
+    setInlineSaving(inlineEdit.field);
+    setActionError(null);
+    try {
+      const updated = await businessRelationsApi.updateApplication(
+        application.business_application_id,
+        buildApplicationPayload(nextForm),
+      );
+      setApplication(updated);
+      setForm(formFromApplication(updated));
+      setInlineEdit(null);
+      setAttemptedSave(false);
+    } catch (err: any) {
+      setActionError(err.message || 'Failed to save application field');
+    } finally {
+      setInlineSaving(null);
+    }
+  };
+
+  const renderInlineEditable = (
+    field: ApplicationInlineField,
+    displayValue: string,
+    config: { kind?: 'text' | 'textarea' | 'select'; options?: Option[]; className?: string } = {},
+  ) => {
+    const isActive = inlineEdit?.field === field;
+    const kind = config.kind ?? 'text';
+    const valueClass = config.className ?? 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5';
+    const isSavingField = inlineSaving === field;
+    const saveDisabled = isSavingField || (field === 'application_name' && !inlineEdit?.value.trim());
+
+    if (!editing && !isCreateMode && isActive) {
+      return (
+        <div className="flex items-start gap-2">
+          {kind === 'textarea' ? (
+            <textarea
+              value={inlineEdit.value}
+              onChange={(e) => setInlineEdit({ field, value: e.target.value })}
+              rows={3}
+              className={textAreaCls}
+              autoFocus
+            />
+          ) : kind === 'select' ? (
+            <select
+              value={inlineEdit.value}
+              onChange={(e) => setInlineEdit({ field, value: e.target.value })}
+              className={inputCls}
+              autoFocus
+            >
+              <option value="">Select...</option>
+              {(config.options ?? []).map(opt => (
+                <option key={opt.value} value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+          ) : (
+            <input
+              value={inlineEdit.value}
+              onChange={(e) => setInlineEdit({ field, value: e.target.value })}
+              className={inputCls}
+              autoFocus
+            />
+          )}
+          <div className="flex shrink-0 gap-1">
+            <button
+              type="button"
+              onClick={saveInlineEdit}
+              disabled={saveDisabled}
+              title={field === 'application_name' && !inlineEdit.value.trim() ? 'Application Name is required' : 'Save'}
+              className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 text-xs font-black text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-300"
+            >
+              {isSavingField ? <Loader2 size={14} className="animate-spin" /> : '✓'}
+            </button>
+            <button
+              type="button"
+              onClick={cancelInlineEdit}
+              disabled={isSavingField}
+              title="Cancel"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-xs font-black text-slate-600 hover:bg-slate-50 disabled:opacity-50"
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <p
+        onDoubleClick={() => startInlineEdit(field)}
+        title="Double-click to edit"
+        className={`${valueClass} ${!editing && !isCreateMode ? 'cursor-text hover:border-blue-200 hover:bg-blue-50/40 transition-colors' : ''}`}
+      >
+        {displayValue}
+      </p>
+    );
+  };
+
   const handleSuggestDescription = async () => {
     if (!form.application_name.trim()) {
       setActionError('Application Name is required before generating the description.');
@@ -402,6 +540,7 @@ const BusinessApplicationViewPage: React.FC = () => {
       setApplication(updated);
       setForm(formFromApplication(updated));
       setAttemptedSave(false);
+      setInlineEdit(null);
       setEditing(false);
     } catch (err: any) {
       setActionError(err.message || 'Failed to save application');
@@ -412,6 +551,7 @@ const BusinessApplicationViewPage: React.FC = () => {
 
   const handleCancelEdit = () => {
     setActionError(null);
+    setInlineEdit(null);
     setAttemptedSave(false);
     if (isCreateMode) {
       navigate('/applications');
@@ -517,15 +657,15 @@ const BusinessApplicationViewPage: React.FC = () => {
                 disabled={saving}
                 className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-bold border border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
               >
-                <XCircle size={15} /> Cancel
+                <XCircle size={15} /> {isCreateMode ? 'Cancel' : 'Discard'}
               </button>
               <button
                 onClick={handleSave}
-                disabled={saving}
+                disabled={saving || isApplicationNameMissing}
                 className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
               >
                 {saving ? <Loader2 size={15} className="animate-spin" /> : <Save size={15} />}
-                {isCreateMode ? 'Create Application' : 'Save Changes'}
+                {isCreateMode ? 'Create Application' : 'Save'}
               </button>
             </>
           ) : (
@@ -534,6 +674,7 @@ const BusinessApplicationViewPage: React.FC = () => {
                 onClick={() => {
                   setTab('overview');
                   setAttemptedSave(false);
+                  setInlineEdit(null);
                   setEditing(true);
                 }}
                 className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-bold border border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
@@ -650,9 +791,7 @@ const BusinessApplicationViewPage: React.FC = () => {
                     )}
                   </>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.application_name || 'N/A'}
-                  </p>
+                  renderInlineEditable('application_name', form.application_name || 'N/A')
                 )}
               </div>
 
@@ -670,9 +809,10 @@ const BusinessApplicationViewPage: React.FC = () => {
                     ))}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {labelFromOptions(form.emergency_tier, EMERGENCY_TIER_OPTIONS)}
-                  </p>
+                  renderInlineEditable('emergency_tier', labelFromOptions(form.emergency_tier, EMERGENCY_TIER_OPTIONS), {
+                    kind: 'select',
+                    options: EMERGENCY_TIER_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -691,9 +831,10 @@ const BusinessApplicationViewPage: React.FC = () => {
                       className={inputCls}
                     />
                   ) : (
-                    <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                      {form[field as keyof ApplicationFormState] || 'N/A'}
-                    </p>
+                    renderInlineEditable(
+                      field as ApplicationInlineField,
+                      form[field as keyof ApplicationFormState] || 'N/A',
+                    )
                   )}
                 </div>
               ))}
@@ -712,9 +853,10 @@ const BusinessApplicationViewPage: React.FC = () => {
                     ))}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {labelFromOptions(form.business_criticality, BUSINESS_CRITICALITY_OPTIONS)}
-                  </p>
+                  renderInlineEditable('business_criticality', labelFromOptions(form.business_criticality, BUSINESS_CRITICALITY_OPTIONS), {
+                    kind: 'select',
+                    options: BUSINESS_CRITICALITY_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -751,9 +893,10 @@ const BusinessApplicationViewPage: React.FC = () => {
                     disabled={generatingDescription}
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 min-h-[84px]">
-                    {form.application_description || 'N/A'}
-                  </p>
+                  renderInlineEditable('application_description', form.application_description || 'N/A', {
+                    kind: 'textarea',
+                    className: 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 min-h-[84px]',
+                  })
                 )}
               </div>
             </div>
@@ -782,9 +925,10 @@ const BusinessApplicationViewPage: React.FC = () => {
                     {YES_NO_NONE_OPTIONS.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {labelFromOptions(form.embedded_ai, YES_NO_NONE_OPTIONS)}
-                  </p>
+                  renderInlineEditable('embedded_ai', labelFromOptions(form.embedded_ai, YES_NO_NONE_OPTIONS), {
+                    kind: 'select',
+                    options: YES_NO_NONE_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -796,9 +940,10 @@ const BusinessApplicationViewPage: React.FC = () => {
                     {YES_NO_NONE_OPTIONS.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {labelFromOptions(form.opt_out_option, YES_NO_NONE_OPTIONS)}
-                  </p>
+                  renderInlineEditable('opt_out_option', labelFromOptions(form.opt_out_option, YES_NO_NONE_OPTIONS), {
+                    kind: 'select',
+                    options: YES_NO_NONE_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -812,9 +957,9 @@ const BusinessApplicationViewPage: React.FC = () => {
                     placeholder="https://..."
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 break-all">
-                    {form.privacy_policy_url || 'N/A'}
-                  </p>
+                  renderInlineEditable('privacy_policy_url', form.privacy_policy_url || 'N/A', {
+                    className: 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 break-all',
+                  })
                 )}
               </div>
 
@@ -830,9 +975,10 @@ const BusinessApplicationViewPage: React.FC = () => {
                     {YES_NO_NONE_OPTIONS.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {labelFromOptions(form.data_excluded_from_ai_training, YES_NO_NONE_OPTIONS)}
-                  </p>
+                  renderInlineEditable('data_excluded_from_ai_training', labelFromOptions(form.data_excluded_from_ai_training, YES_NO_NONE_OPTIONS), {
+                    kind: 'select',
+                    options: YES_NO_NONE_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -846,9 +992,10 @@ const BusinessApplicationViewPage: React.FC = () => {
                     className={textAreaCls}
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 min-h-[84px]">
-                    {form.vendor_description || 'N/A'}
-                  </p>
+                  renderInlineEditable('vendor_description', form.vendor_description || 'N/A', {
+                    kind: 'textarea',
+                    className: 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 min-h-[84px]',
+                  })
                 )}
               </div>
             </div>
@@ -871,9 +1018,11 @@ const BusinessApplicationViewPage: React.FC = () => {
                       className={inputCls}
                     />
                   ) : (
-                    <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 break-all">
-                      {form[field as keyof ApplicationFormState] || 'N/A'}
-                    </p>
+                    renderInlineEditable(
+                      field as ApplicationInlineField,
+                      form[field as keyof ApplicationFormState] || 'N/A',
+                      { className: 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 break-all' },
+                    )
                   )}
                 </div>
               ))}
@@ -890,9 +1039,10 @@ const BusinessApplicationViewPage: React.FC = () => {
                     {YES_NO_NONE_OPTIONS.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {labelFromOptions(form.is_current_version_supported, YES_NO_NONE_OPTIONS)}
-                  </p>
+                  renderInlineEditable('is_current_version_supported', labelFromOptions(form.is_current_version_supported, YES_NO_NONE_OPTIONS), {
+                    kind: 'select',
+                    options: YES_NO_NONE_OPTIONS,
+                  })
                 )}
               </div>
             </div>
diff --git a/tavro_app/src/pages/BusinessProcessViewPage.tsx b/tavro_app/src/pages/BusinessProcessViewPage.tsx
index bd8c7c5..3bea4db 100644
--- a/tavro_app/src/pages/BusinessProcessViewPage.tsx
+++ b/tavro_app/src/pages/BusinessProcessViewPage.tsx
@@ -88,6 +88,21 @@ interface ProcessFormState {
   process_health_state: string;
 }
 
+type ProcessInlineField =
+  | 'process_number'
+  | 'process_name'
+  | 'process_description'
+  | 'parent_process_id'
+  | 'stakeholders'
+  | 'owner'
+  | 'operators'
+  | 'business_criticality'
+  | 'reputational_impact'
+  | 'financial_impact'
+  | 'regulatory_impact'
+  | 'sla'
+  | 'process_health_state';
+
 const HINTS: Record<string, string> = {
   business_criticality:
     'Business Criticality indicates how essential a process is. Tier 1 is mission-critical and Tier 4 has minimal business impact.',
@@ -266,6 +281,8 @@ const BusinessProcessViewPage: React.FC = () => {
   const [tab, setTab] = useState<Tab>('overview');
   const [editing, setEditing] = useState(isCreateMode);
   const [saving, setSaving] = useState(false);
+  const [inlineEdit, setInlineEdit] = useState<{ field: ProcessInlineField; value: string } | null>(null);
+  const [inlineSaving, setInlineSaving] = useState<ProcessInlineField | null>(null);
   const [generatingDescription, setGeneratingDescription] = useState(false);
   const [deleting, setDeleting] = useState(false);
 
@@ -337,6 +354,7 @@ const BusinessProcessViewPage: React.FC = () => {
       setProcess(null);
       setForm(emptyForm());
       setEditing(true);
+      setInlineEdit(null);
       setAttemptedSave(false);
       setLoading(false);
       setTab('overview');
@@ -345,6 +363,7 @@ const BusinessProcessViewPage: React.FC = () => {
       return;
     }
     setEditing(false);
+    setInlineEdit(null);
     load();
   }, [id, isCreateMode]);
 
@@ -424,6 +443,124 @@ const BusinessProcessViewPage: React.FC = () => {
     setForm(prev => ({ ...prev, [key]: value }));
   };
 
+  const startInlineEdit = (field: ProcessInlineField) => {
+    if (editing || isCreateMode || saving || inlineSaving) return;
+    setActionError(null);
+    setInlineEdit({ field, value: form[field] });
+  };
+
+  const cancelInlineEdit = () => {
+    setInlineEdit(null);
+    setActionError(null);
+  };
+
+  const saveInlineEdit = async () => {
+    if (!process || !inlineEdit) return;
+    const nextForm = { ...form, [inlineEdit.field]: inlineEdit.value };
+    if (!nextForm.process_name.trim()) {
+      setActionError('Process Name is required.');
+      return;
+    }
+
+    setInlineSaving(inlineEdit.field);
+    setActionError(null);
+    try {
+      const updated = await businessRelationsApi.updateProcess(
+        process.business_process_id,
+        buildProcessPayload(nextForm),
+      );
+      setProcess(updated);
+      setForm(formFromProcess(updated));
+      setInlineEdit(null);
+      setAttemptedSave(false);
+    } catch (err: any) {
+      setActionError(err.message || 'Failed to save process field');
+    } finally {
+      setInlineSaving(null);
+    }
+  };
+
+  const renderInlineEditable = (
+    field: ProcessInlineField,
+    displayValue: string,
+    config: { kind?: 'text' | 'textarea' | 'select'; options?: Option[]; className?: string; selectChildren?: React.ReactNode } = {},
+  ) => {
+    const isActive = inlineEdit?.field === field;
+    const kind = config.kind ?? 'text';
+    const valueClass = config.className ?? 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5';
+    const isSavingField = inlineSaving === field;
+    const saveDisabled = isSavingField || (field === 'process_name' && !inlineEdit?.value.trim());
+
+    if (!editing && !isCreateMode && isActive) {
+      return (
+        <div className="flex items-start gap-2">
+          {kind === 'textarea' ? (
+            <textarea
+              value={inlineEdit.value}
+              onChange={(e) => setInlineEdit({ field, value: e.target.value })}
+              rows={3}
+              className={textAreaCls}
+              autoFocus
+            />
+          ) : kind === 'select' ? (
+            <select
+              value={inlineEdit.value}
+              onChange={(e) => setInlineEdit({ field, value: e.target.value })}
+              className={inputCls}
+              autoFocus
+            >
+              {config.selectChildren ?? (
+                <>
+                  <option value="">Select...</option>
+                  {(config.options ?? []).map(opt => (
+                    <option key={opt.value} value={opt.value}>{opt.label}</option>
+                  ))}
+                </>
+              )}
+            </select>
+          ) : (
+            <input
+              value={inlineEdit.value}
+              onChange={(e) => setInlineEdit({ field, value: e.target.value })}
+              className={inputCls}
+              autoFocus
+            />
+          )}
+          <div className="flex shrink-0 gap-1">
+            <button
+              type="button"
+              onClick={saveInlineEdit}
+              disabled={saveDisabled}
+              title={field === 'process_name' && !inlineEdit.value.trim() ? 'Process Name is required' : 'Save'}
+              className="inline-flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600 text-xs font-black text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-300"
+            >
+              {isSavingField ? <Loader2 size={14} className="animate-spin" /> : '✓'}
+            </button>
+            <button
+              type="button"
+              onClick={cancelInlineEdit}
+              disabled={isSavingField}
+              title="Cancel"
+              className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-slate-200 bg-white text-xs font-black text-slate-600 hover:bg-slate-50 disabled:opacity-50"
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <p
+        onDoubleClick={() => startInlineEdit(field)}
+        title="Double-click to edit"
+        className={`${valueClass} ${!editing && !isCreateMode ? 'cursor-text hover:border-blue-200 hover:bg-blue-50/40 transition-colors' : ''}`}
+      >
+        {displayValue}
+      </p>
+    );
+  };
+
   const handleSuggestDescription = async () => {
     if (!form.process_name.trim()) {
       setActionError('Process Name is required before generating the description.');
@@ -483,6 +620,7 @@ const BusinessProcessViewPage: React.FC = () => {
       setProcess(updated);
       setForm(formFromProcess(updated));
       setAttemptedSave(false);
+      setInlineEdit(null);
       setEditing(false);
     } catch (err: any) {
       setActionError(err.message || 'Failed to save process');
@@ -493,6 +631,7 @@ const BusinessProcessViewPage: React.FC = () => {
 
   const handleCancelEdit = () => {
     setActionError(null);
+    setInlineEdit(null);
     setAttemptedSave(false);
     if (isCreateMode) {
       if (linkUseCaseId) {
@@ -647,15 +786,15 @@ const BusinessProcessViewPage: React.FC = () => {
                 disabled={saving}
                 className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-bold border border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
               >
-                <XCircle size={15} /> Cancel
+                <XCircle size={15} /> {isCreateMode ? 'Cancel' : 'Discard'}
               </button>
               <button
                 onClick={handleSave}
-                disabled={saving}
+                disabled={saving || !form.process_name.trim()}
                 className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
               >
                 {saving ? <Loader2 size={15} className="animate-spin" /> : <Save size={15} />}
-                {isCreateMode ? 'Create Process' : 'Save Changes'}
+                {isCreateMode ? 'Create Process' : 'Save'}
               </button>
             </>
           ) : (
@@ -664,6 +803,7 @@ const BusinessProcessViewPage: React.FC = () => {
                 onClick={() => {
                   setTab('overview');
                   setAttemptedSave(false);
+                  setInlineEdit(null);
                   setEditing(true);
                 }}
                 className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-bold border border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
@@ -811,9 +951,7 @@ const BusinessProcessViewPage: React.FC = () => {
                     className={inputCls}
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.process_number || 'N/A'}
-                  </p>
+                  renderInlineEditable('process_number', form.process_number || 'N/A')
                 )}
               </div>
 
@@ -836,9 +974,7 @@ const BusinessProcessViewPage: React.FC = () => {
                     )}
                   </>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.process_name || 'N/A'}
-                  </p>
+                  renderInlineEditable('process_name', form.process_name || 'N/A')
                 )}
               </div>
 
@@ -875,9 +1011,10 @@ const BusinessProcessViewPage: React.FC = () => {
                     disabled={generatingDescription}
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 min-h-[84px]">
-                    {form.process_description || 'N/A'}
-                  </p>
+                  renderInlineEditable('process_description', form.process_description || 'N/A', {
+                    kind: 'textarea',
+                    className: 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 min-h-[84px]',
+                  })
                 )}
               </div>
             </div>
@@ -901,11 +1038,25 @@ const BusinessProcessViewPage: React.FC = () => {
                     ))}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.parent_process_id
+                  renderInlineEditable(
+                    'parent_process_id',
+                    form.parent_process_id
                       ? `${processNameById.get(form.parent_process_id) || form.parent_process_id} (${form.parent_process_id})`
-                      : 'N/A'}
-                  </p>
+                      : 'N/A',
+                    {
+                      kind: 'select',
+                      selectChildren: (
+                        <>
+                          <option value="">None</option>
+                          {selectableParents.map(parent => (
+                            <option key={parent.business_process_id} value={parent.business_process_id}>
+                              {(parent.process_name || parent.business_process_id)} ({parent.business_process_id})
+                            </option>
+                          ))}
+                        </>
+                      ),
+                    },
+                  )
                 )}
               </div>
 
@@ -923,9 +1074,10 @@ const BusinessProcessViewPage: React.FC = () => {
                       className={inputCls}
                     />
                   ) : (
-                    <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                      {form[field as keyof ProcessFormState] || 'N/A'}
-                    </p>
+                    renderInlineEditable(
+                      field as ProcessInlineField,
+                      form[field as keyof ProcessFormState] || 'N/A',
+                    )
                   )}
                 </div>
               ))}
@@ -948,9 +1100,10 @@ const BusinessProcessViewPage: React.FC = () => {
                     ))}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {labelFromOptions(form.business_criticality, BUSINESS_CRITICALITY_OPTIONS)}
-                  </p>
+                  renderInlineEditable('business_criticality', labelFromOptions(form.business_criticality, BUSINESS_CRITICALITY_OPTIONS), {
+                    kind: 'select',
+                    options: BUSINESS_CRITICALITY_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -968,9 +1121,10 @@ const BusinessProcessViewPage: React.FC = () => {
                     ))}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {labelFromOptions(form.reputational_impact, REPUTATIONAL_IMPACT_OPTIONS)}
-                  </p>
+                  renderInlineEditable('reputational_impact', labelFromOptions(form.reputational_impact, REPUTATIONAL_IMPACT_OPTIONS), {
+                    kind: 'select',
+                    options: REPUTATIONAL_IMPACT_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -993,9 +1147,10 @@ const BusinessProcessViewPage: React.FC = () => {
                     ))}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {labelFromOptions(form.financial_impact, FINANCIAL_IMPACT_OPTIONS)}
-                  </p>
+                  renderInlineEditable('financial_impact', labelFromOptions(form.financial_impact, FINANCIAL_IMPACT_OPTIONS), {
+                    kind: 'select',
+                    options: FINANCIAL_IMPACT_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -1013,9 +1168,10 @@ const BusinessProcessViewPage: React.FC = () => {
                     ))}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {labelFromOptions(form.regulatory_impact, REGULATORY_IMPACT_OPTIONS)}
-                  </p>
+                  renderInlineEditable('regulatory_impact', labelFromOptions(form.regulatory_impact, REGULATORY_IMPACT_OPTIONS), {
+                    kind: 'select',
+                    options: REGULATORY_IMPACT_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -1037,9 +1193,7 @@ const BusinessProcessViewPage: React.FC = () => {
                     className={inputCls}
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.sla || 'N/A'}
-                  </p>
+                  renderInlineEditable('sla', form.sla || 'N/A')
                 )}
               </div>
 
@@ -1057,9 +1211,10 @@ const BusinessProcessViewPage: React.FC = () => {
                     ))}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {labelFromOptions(form.process_health_state, PROCESS_HEALTH_OPTIONS)}
-                  </p>
+                  renderInlineEditable('process_health_state', labelFromOptions(form.process_health_state, PROCESS_HEALTH_OPTIONS), {
+                    kind: 'select',
+                    options: PROCESS_HEALTH_OPTIONS,
+                  })
                 )}
               </div>
             </div>
diff --git a/tavro_app/src/pages/IntegrationViewPage.tsx b/tavro_app/src/pages/IntegrationViewPage.tsx
index 3996bff..65895ca 100644
--- a/tavro_app/src/pages/IntegrationViewPage.tsx
+++ b/tavro_app/src/pages/IntegrationViewPage.tsx
@@ -72,6 +72,22 @@ interface IntegrationFormState {
   parent_application_id: string;
 }
 
+type IntegrationInlineField =
+  | 'integration_name'
+  | 'owner'
+  | 'integration_description'
+  | 'capabilities'
+  | 'protocol'
+  | 'authentication_method'
+  | 'endpoint_url'
+  | 'documentation_url'
+  | 'version'
+  | 'rate_limit'
+  | 'data_sensitivity'
+  | 'availability_status'
+  | 'sla'
+  | 'parent_application_id';
+
 const inputCls =
   'w-full text-sm border border-slate-200 rounded-xl px-3.5 py-2.5 outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all bg-white text-slate-800 placeholder:text-slate-400 disabled:bg-slate-50 disabled:text-slate-500';
 const textAreaCls = `${inputCls} resize-y min-h-[84px]`;
@@ -172,6 +188,8 @@ const IntegrationViewPage: React.FC = () => {
   const [editing, setEditing] = useState(isCreateMode);
   const [saving, setSaving] = useState(false);
   const [deleting, setDeleting] = useState(false);
+  const [inlineEdit, setInlineEdit] = useState<{ field: IntegrationInlineField; value: string } | null>(null);
+  const [inlineSaving, setInlineSaving] = useState<IntegrationInlineField | null>(null);
 
   const load = async () => {
     if (!id || isCreateMode) return;
@@ -215,6 +233,124 @@ const IntegrationViewPage: React.FC = () => {
 
   const isNameMissing = !form.integration_name.trim();
 
+  // ── Inline edit handlers ───────────────────────────────────────────────────
+
+  const startInlineEdit = (field: IntegrationInlineField) => {
+    if (editing || isCreateMode || saving || inlineSaving) return;
+    setActionError(null);
+    setInlineEdit({ field, value: form[field] });
+  };
+
+  const cancelInlineEdit = () => {
+    setInlineEdit(null);
+    setActionError(null);
+  };
+
+  const saveInlineEdit = async () => {
+    if (!integration || !inlineEdit) return;
+    const nextForm = { ...form, [inlineEdit.field]: inlineEdit.value };
+    if (!nextForm.integration_name.trim()) {
+      setActionError('Integration Name is required.');
+      return;
+    }
+    setInlineSaving(inlineEdit.field);
+    setActionError(null);
+    try {
+      const updated = await businessRelationsApi.updateIntegration(
+        integration.integration_id,
+        buildIntegrationPayload(nextForm),
+        activeCompany?.id,
+      );
+      setIntegration(updated);
+      setForm(formFromIntegration(updated));
+      setInlineEdit(null);
+      setAttemptedSave(false);
+    } catch (err: unknown) {
+      setActionError(err instanceof Error ? err.message : 'Failed to save integration field');
+    } finally {
+      setInlineSaving(null);
+    }
+  };
+
+  const renderInlineEditable = (
+    field: IntegrationInlineField,
+    displayValue: string,
+    config: { kind?: 'text' | 'textarea' | 'select'; options?: Option[]; className?: string } = {},
+  ) => {
+    const isActive = inlineEdit?.field === field;
+    const kind = config.kind ?? 'text';
+    const valueClass = config.className ?? 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5';
+    const isSavingField = inlineSaving === field;
+    const saveDisabled = isSavingField || (field === 'integration_name' && !inlineEdit?.value.trim());
+
+    if (!editing && !isCreateMode && isActive) {
+      return (
+        <div className="flex items-start gap-2">
+          {kind === 'textarea' ? (
+            <textarea
+              value={inlineEdit.value}
+              onChange={(e) => setInlineEdit({ field, value: e.target.value })}
+              rows={3}
+              className={textAreaCls}
+              autoFocus
+            />
+          ) : kind === 'select' ? (
+            <select
+              value={inlineEdit.value}
+              onChange={(e) => setInlineEdit({ field, value: e.target.value })}
+              className={inputCls}
+              autoFocus
+            >
+              <option value="">Select...</option>
+              {(config.options ?? []).map(opt => (
+                <option key={opt.value} value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+          ) : (
+            <input
+              value={inlineEdit.value}
+              onChange={(e) => setInlineEdit({ field, value: e.target.value })}
+              className={inputCls}
+              autoFocus
+            />
+          )}
+          <div className="flex shrink-0 gap-1">
+            <button
+              type="button"
+              onClick={saveInlineEdit}
+              disabled={saveDisabled}
+              title={field === 'integration_name' && !inlineEdit.value.trim() ? 'Integration Name is required' : 'Save'}
+              className="inline-flex h-6 w-6 items-center justify-center rounded-lg bg-blue-600 text-xs font-black text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-300"
+            >
+              {isSavingField ? <Loader2 size={12} className="animate-spin" /> : '✓'}
+            </button>
+            <button
+              type="button"
+              onClick={cancelInlineEdit}
+              disabled={isSavingField}
+              title="Cancel"
+              className="inline-flex h-6 w-6 items-center justify-center rounded-lg border border-slate-200 bg-white text-xs font-black text-slate-600 hover:bg-slate-50 disabled:opacity-50"
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <p
+        onDoubleClick={() => startInlineEdit(field)}
+        title={!editing && !isCreateMode ? 'Double-click to edit' : undefined}
+        className={`${valueClass} ${!editing && !isCreateMode ? 'cursor-text hover:border-blue-200 hover:bg-blue-50/40 transition-colors' : ''}`}
+      >
+        {displayValue}
+      </p>
+    );
+  };
+
+  // ── Bulk save / cancel ─────────────────────────────────────────────────────
+
   const handleSave = async () => {
     setAttemptedSave(true);
     if (isNameMissing) {
@@ -320,15 +456,15 @@ const IntegrationViewPage: React.FC = () => {
                 disabled={saving}
                 className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-bold border border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
               >
-                <XCircle size={15} /> Cancel
+                <XCircle size={15} /> {isCreateMode ? 'Cancel' : 'Discard'}
               </button>
               <button
                 onClick={handleSave}
-                disabled={saving}
+                disabled={saving || isNameMissing}
                 className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
               >
                 {saving ? <Loader2 size={15} className="animate-spin" /> : <Save size={15} />}
-                {isCreateMode ? 'Create Integration' : 'Save Changes'}
+                {isCreateMode ? 'Create Integration' : 'Save'}
               </button>
             </>
           ) : (
@@ -337,6 +473,7 @@ const IntegrationViewPage: React.FC = () => {
                 onClick={() => {
                   setTab('overview');
                   setAttemptedSave(false);
+                  setInlineEdit(null);
                   setEditing(true);
                 }}
                 className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-bold border border-slate-200 bg-white text-slate-700 hover:bg-slate-50"
@@ -446,9 +583,7 @@ const IntegrationViewPage: React.FC = () => {
                     )}
                   </>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.integration_name || 'N/A'}
-                  </p>
+                  renderInlineEditable('integration_name', form.integration_name || 'N/A')
                 )}
               </div>
 
@@ -462,9 +597,7 @@ const IntegrationViewPage: React.FC = () => {
                     placeholder="Owner name or team"
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.owner || 'N/A'}
-                  </p>
+                  renderInlineEditable('owner', form.owner || 'N/A')
                 )}
               </div>
 
@@ -478,9 +611,10 @@ const IntegrationViewPage: React.FC = () => {
                     className={textAreaCls}
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 min-h-[84px] whitespace-pre-wrap">
-                    {form.integration_description || 'N/A'}
-                  </p>
+                  renderInlineEditable('integration_description', form.integration_description || 'N/A', {
+                    kind: 'textarea',
+                    className: 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 min-h-[84px] whitespace-pre-wrap',
+                  })
                 )}
               </div>
             </div>
@@ -501,9 +635,10 @@ const IntegrationViewPage: React.FC = () => {
                   placeholder={`e.g.\n1. Read real-time machine sensor data (OPC-UA)\n2. Push quality alerts to ERP work orders\n3. Subscribe to production schedule changes`}
                 />
               ) : (
-                <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 min-h-[100px] whitespace-pre-wrap">
-                  {form.capabilities || 'No capabilities defined.'}
-                </p>
+                renderInlineEditable('capabilities', form.capabilities || 'No capabilities defined.', {
+                  kind: 'textarea',
+                  className: 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 min-h-[100px] whitespace-pre-wrap',
+                })
               )}
             </div>
           </Section>
@@ -524,9 +659,10 @@ const IntegrationViewPage: React.FC = () => {
                     ))}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.protocol || 'N/A'}
-                  </p>
+                  renderInlineEditable('protocol', form.protocol || 'N/A', {
+                    kind: 'select',
+                    options: PROTOCOL_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -544,9 +680,10 @@ const IntegrationViewPage: React.FC = () => {
                     ))}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.authentication_method || 'N/A'}
-                  </p>
+                  renderInlineEditable('authentication_method', form.authentication_method || 'N/A', {
+                    kind: 'select',
+                    options: AUTH_METHOD_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -560,9 +697,9 @@ const IntegrationViewPage: React.FC = () => {
                     placeholder="https://..."
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 break-all">
-                    {form.endpoint_url || 'N/A'}
-                  </p>
+                  renderInlineEditable('endpoint_url', form.endpoint_url || 'N/A', {
+                    className: 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 break-all',
+                  })
                 )}
               </div>
 
@@ -576,9 +713,9 @@ const IntegrationViewPage: React.FC = () => {
                     placeholder="https://..."
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 break-all">
-                    {form.documentation_url || 'N/A'}
-                  </p>
+                  renderInlineEditable('documentation_url', form.documentation_url || 'N/A', {
+                    className: 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 break-all',
+                  })
                 )}
               </div>
 
@@ -592,9 +729,7 @@ const IntegrationViewPage: React.FC = () => {
                     placeholder="e.g. v1.2.0"
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.version || 'N/A'}
-                  </p>
+                  renderInlineEditable('version', form.version || 'N/A')
                 )}
               </div>
 
@@ -608,9 +743,7 @@ const IntegrationViewPage: React.FC = () => {
                     placeholder="e.g. 1000 req/min"
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.rate_limit || 'N/A'}
-                  </p>
+                  renderInlineEditable('rate_limit', form.rate_limit || 'N/A')
                 )}
               </div>
             </div>
@@ -632,9 +765,10 @@ const IntegrationViewPage: React.FC = () => {
                     ))}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.data_sensitivity || 'N/A'}
-                  </p>
+                  renderInlineEditable('data_sensitivity', form.data_sensitivity || 'N/A', {
+                    kind: 'select',
+                    options: DATA_SENSITIVITY_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -652,9 +786,10 @@ const IntegrationViewPage: React.FC = () => {
                     ))}
                   </select>
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.availability_status || 'N/A'}
-                  </p>
+                  renderInlineEditable('availability_status', form.availability_status || 'N/A', {
+                    kind: 'select',
+                    options: AVAILABILITY_STATUS_OPTIONS,
+                  })
                 )}
               </div>
 
@@ -668,9 +803,7 @@ const IntegrationViewPage: React.FC = () => {
                     placeholder="e.g. 99.9% uptime"
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5">
-                    {form.sla || 'N/A'}
-                  </p>
+                  renderInlineEditable('sla', form.sla || 'N/A')
                 )}
               </div>
 
@@ -684,13 +817,15 @@ const IntegrationViewPage: React.FC = () => {
                     placeholder="Application UUID"
                   />
                 ) : (
-                  <p className="text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 break-all">
-                    {form.parent_application_id
+                  renderInlineEditable(
+                    'parent_application_id',
+                    form.parent_application_id
                       ? form.parent_application_id
                       : integration?.parent_application_name
                         ? `${integration.parent_application_name}`
-                        : 'N/A'}
-                  </p>
+                        : 'N/A',
+                    { className: 'text-sm text-slate-700 bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2.5 break-all' },
+                  )
                 )}
               </div>
             </div>
diff --git a/tavro_app/src/pages/UseCaseViewPage.tsx b/tavro_app/src/pages/UseCaseViewPage.tsx
index 73fc7c9..61962e5 100644
--- a/tavro_app/src/pages/UseCaseViewPage.tsx
+++ b/tavro_app/src/pages/UseCaseViewPage.tsx
@@ -4,12 +4,11 @@ import { UseCaseDetail } from '../types/useCase';
 import { AgentData } from '../types/agent';
 import { mcpClient } from '../services/mcpClient';
 import UseCaseView from '../components/UseCaseView';
-import { ArrowLeft, RefreshCw, AlertCircle, Search, Loader2, Unlink2, PlusCircle, ShieldCheck, Pencil, Trash2, Code2, Copy, Check, X } from 'lucide-react';
+import { ArrowLeft, RefreshCw, AlertCircle, Search, Loader2, Unlink2, PlusCircle, ShieldCheck, Pencil, Trash2, Code2, Copy, Check, X, CheckCircle2 } from 'lucide-react';
 import { useCatalog } from '../context/CatalogContext';
 import { useUseCases } from '../context/UseCaseContext';
 import { useChatSync } from '../hooks/useChatSync';
 import AuditInitModal from '../components/audit/AuditInitModal';
-import EditUseCaseModal from '../components/EditUseCaseModal';
 import { useCaseApi } from '../services/useCaseApi';
 import { businessRelationsApi } from '../services/businessRelationsApi';
 import type { BusinessProcessRecord } from '../types/businessRelations';
@@ -671,7 +670,18 @@ const UseCaseViewPage: React.FC = () => {
   const [auditModalOpen, setAuditModalOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const [editOpen, setEditOpen] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState('');
+  const [editDescription, setEditDescription] = useState('');
+  const [editPriority, setEditPriority] = useState('');
+  const [editOwner, setEditOwner] = useState('');
+  const [editProblemStatement, setEditProblemStatement] = useState('');
+  const [editExpectedBenefits, setEditExpectedBenefits] = useState('');
+  const [editSolutionApproach, setEditSolutionApproach] = useState('');
+  const [editSaving, setEditSaving] = useState(false);
+  const [editError, setEditError] = useState<string | null>(null);
+  const [inlineEdit, setInlineEdit] = useState<{ field: string; value: string } | null>(null);
+  const [inlineSaving, setInlineSaving] = useState<string | null>(null);
   const [deleteConfirm, setDeleteConfirm] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [jsonOpen, setJsonOpen] = useState(false);
@@ -770,6 +780,98 @@ const UseCaseViewPage: React.FC = () => {
     }
   }, [useCase]);
 
+  const handleStartEdit = () => {
+    if (!useCase) return;
+    const uc = useCase as any;
+    setEditTitle(uc.name ?? uc.title ?? '');
+    setEditDescription(uc.description ?? '');
+    setEditPriority(uc.priority ?? '3 - Moderate');
+    setEditOwner(uc.owner ?? uc.use_case_owner ?? '');
+    setEditProblemStatement(uc.problem_statement ?? uc.business_problem_statement ?? '');
+    setEditExpectedBenefits(uc.expected_benefits ?? '');
+    setEditSolutionApproach(uc.solution_approach ?? '');
+    setEditError(null);
+    setIsEditing(true);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+    setEditError(null);
+  };
+
+  const handleSaveEdit = async () => {
+    if (!useCase || !id) return;
+    setEditSaving(true);
+    setEditError(null);
+    try {
+      await useCaseApi.updateUseCase(id, {
+        title: editTitle.trim() || undefined,
+        description: editDescription.trim() || undefined,
+        priority: editPriority || undefined,
+        use_case_owner: editOwner.trim() || undefined,
+        business_problem_statement: editProblemStatement.trim() || undefined,
+        expected_benefits: editExpectedBenefits.trim() || undefined,
+        solution_approach: editSolutionApproach.trim() || undefined,
+      } as any);
+      handleUseCaseSaved({
+        title: editTitle.trim(),
+        description: editDescription.trim(),
+        problemStatement: editProblemStatement.trim(),
+        expectedBenefits: editExpectedBenefits.trim(),
+        priority: editPriority,
+        solutionApproach: editSolutionApproach.trim(),
+        owner: editOwner.trim(),
+      });
+      setIsEditing(false);
+    } catch (err: any) {
+      setEditError(err.message || 'Failed to update use case.');
+    } finally {
+      setEditSaving(false);
+    }
+  };
+
+  const handleStartInlineEdit = (field: string, value: string) => {
+    setInlineEdit({ field, value });
+  };
+
+  const handleCancelInlineEdit = () => setInlineEdit(null);
+
+  const handleSaveInlineEdit = async () => {
+    if (!inlineEdit || !id) return;
+    const { field, value } = inlineEdit;
+    setInlineSaving(field);
+    try {
+      const payload: any = {};
+      if (field === 'title') payload.title = value.trim();
+      else if (field === 'description') payload.description = value.trim();
+      else if (field === 'priority') payload.priority = value;
+      else if (field === 'owner') payload.use_case_owner = value.trim();
+      else if (field === 'problem_statement') payload.business_problem_statement = value.trim();
+      else if (field === 'expected_benefits') payload.expected_benefits = value.trim();
+      else if (field === 'solution_approach') payload.solution_approach = value.trim();
+      await useCaseApi.updateUseCase(id, payload);
+      setUseCase(prev => {
+        if (!prev) return prev;
+        const next = { ...prev } as any;
+        if (field === 'title') { next.name = value.trim(); next.title = value.trim(); }
+        else if (field === 'description') next.description = value.trim();
+        else if (field === 'priority') next.priority = value;
+        else if (field === 'owner') { next.owner = value.trim(); next.use_case_owner = value.trim(); }
+        else if (field === 'problem_statement') { next.problem_statement = value.trim(); next.business_problem_statement = value.trim(); }
+        else if (field === 'expected_benefits') next.expected_benefits = value.trim();
+        else if (field === 'solution_approach') next.solution_approach = value.trim();
+        return next as UseCaseDetail;
+      });
+      setInlineEdit(null);
+      mcpClient.invalidateCache();
+      refreshUseCases();
+    } catch (err: any) {
+      console.error('Failed to save inline edit:', err);
+    } finally {
+      setInlineSaving(null);
+    }
+  };
+
   const handleUseCaseSaved = (updated: {
     title: string;
     description: string;
@@ -817,7 +919,7 @@ const UseCaseViewPage: React.FC = () => {
   const useCaseName = useCase ? ((useCase as any).name ?? (useCase as any).title ?? useCase.identifier ?? '') : '';
 
   return (
-    <div className="flex flex-col gap-6 w-full animate-fade-in pb-12">
+    <div className="flex flex-col gap-6 w-full animate-fade-in max-w-[1400px] mx-auto pb-12">
       <div className="flex items-center justify-between">
         <button
           onClick={() => {
@@ -838,31 +940,53 @@ const UseCaseViewPage: React.FC = () => {
         </button>
         {useCase && (
           <div className="flex items-center gap-3">
-            <button
-              onClick={() => setAuditModalOpen(true)}
-              className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-blue-600 hover:bg-blue-700 text-white transition-all shadow-sm"
-            >
-              <ShieldCheck size={15} /> Audit
-            </button>
-            <button
-              onClick={() => setJsonOpen(true)}
-              title="AI Use Case Card"
-              className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-slate-800 text-slate-100 hover:bg-slate-700 transition-all border border-slate-700 shadow-sm disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              <Code2 size={14} /> AI Use Case Card
-            </button>
-            <button
-              onClick={() => setEditOpen(true)}
-              className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 transition-all shadow-sm"
-            >
-              <Pencil size={15} /> Edit
-            </button>
-            <button
-              onClick={() => setDeleteConfirm(true)}
-              className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold bg-white border border-red-200 text-red-600 hover:bg-red-50 transition-all shadow-sm"
-            >
-              <Trash2 size={15} /> Delete
-            </button>
+            {isEditing ? (
+              <>
+                {editError && <span className="text-xs text-red-500 font-medium">{editError}</span>}
+                <button
+                  onClick={handleCancelEdit}
+                  disabled={editSaving}
+                  className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 transition-all shadow-sm disabled:opacity-50"
+                >
+                  Discard
+                </button>
+                <button
+                  onClick={handleSaveEdit}
+                  disabled={editSaving || !editTitle.trim() || !editDescription.trim()}
+                  className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold bg-blue-600 text-white hover:bg-blue-700 transition-all shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"
+                >
+                  {editSaving ? <><Loader2 size={14} className="animate-spin" /> Saving…</> : 'Save'}
+                </button>
+              </>
+            ) : (
+              <>
+                <button
+                  onClick={() => setAuditModalOpen(true)}
+                  className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-blue-600 hover:bg-blue-700 text-white transition-all shadow-sm"
+                >
+                  <ShieldCheck size={15} /> Audit
+                </button>
+                <button
+                  onClick={() => setJsonOpen(true)}
+                  title="AI Use Case Card"
+                  className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-bold bg-slate-800 text-slate-100 hover:bg-slate-700 transition-all border border-slate-700 shadow-sm"
+                >
+                  <Code2 size={14} /> AI Use Case Card
+                </button>
+                <button
+                  onClick={handleStartEdit}
+                  className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 transition-all shadow-sm"
+                >
+                  <Pencil size={15} /> Edit
+                </button>
+                <button
+                  onClick={() => setDeleteConfirm(true)}
+                  className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold bg-white border border-red-200 text-red-600 hover:bg-red-50 transition-all shadow-sm"
+                >
+                  <Trash2 size={15} /> Delete
+                </button>
+              </>
+            )}
           </div>
         )}
       </div>
@@ -894,15 +1018,27 @@ const UseCaseViewPage: React.FC = () => {
           useCase={useCase}
           agentsComponent={<AgentsSection useCase={useCase} agents={agents} onSilentRefetch={fetchUseCaseSilently} />}
           businessImpactComponent={<ProcessRelationsSection useCase={useCase} onSilentRefetch={fetchUseCaseSilently} />}
-        />
-      )}
-
-      {useCase && (
-        <EditUseCaseModal
-          useCase={useCase}
-          open={editOpen}
-          onClose={() => setEditOpen(false)}
-          onSaved={handleUseCaseSaved}
+          isEditing={isEditing}
+          editTitle={editTitle}
+          onEditTitleChange={setEditTitle}
+          editDescription={editDescription}
+          onEditDescriptionChange={setEditDescription}
+          editPriority={editPriority}
+          onEditPriorityChange={setEditPriority}
+          editOwner={editOwner}
+          onEditOwnerChange={setEditOwner}
+          editProblemStatement={editProblemStatement}
+          onEditProblemStatementChange={setEditProblemStatement}
+          editExpectedBenefits={editExpectedBenefits}
+          onEditExpectedBenefitsChange={setEditExpectedBenefits}
+          editSolutionApproach={editSolutionApproach}
+          onEditSolutionApproachChange={setEditSolutionApproach}
+          inlineEdit={inlineEdit}
+          inlineSaving={inlineSaving}
+          onStartInlineEdit={handleStartInlineEdit}
+          onInlineValueChange={(v) => setInlineEdit(prev => prev ? { ...prev, value: v } : null)}
+          onSaveInlineEdit={handleSaveInlineEdit}
+          onCancelInlineEdit={handleCancelInlineEdit}
         />
       )}