diff --git a/gadget-code/frontend/src/pages/ChatSessionView.tsx b/gadget-code/frontend/src/pages/ChatSessionView.tsx
index b2ce064..083e2b7 100644
--- a/gadget-code/frontend/src/pages/ChatSessionView.tsx
+++ b/gadget-code/frontend/src/pages/ChatSessionView.tsx
@@ -39,7 +39,6 @@ export default function ChatSessionView() {
   const [workspaceMode, setWorkspaceMode] = useState<WorkspaceMode>(WorkspaceMode.Idle);
   const [isUpdatingMode, setIsUpdatingMode] = useState(false);
   const [isUpdatingProvider, setIsUpdatingProvider] = useState(false);
-  const [isUpdatingModel, setIsUpdatingModel] = useState(false);
   const [isUpdatingReasoning, setIsUpdatingReasoning] = useState(false);
   const [logExpanded, setLogExpanded] = useState(false);
   const [logs, setLogs] = useState<LogEntry[]>([]);
@@ -48,6 +47,12 @@ export default function ChatSessionView() {
   const [selectedProviderId, setSelectedProviderId] = useState<string>('');
   const [selectedModelId, setSelectedModelId] = useState<string>('');
   const [sessionReasoningEffort, setSessionReasoningEffort] = useState<string>('off');
+  const [isEditingProvider, setIsEditingProvider] = useState(false);
+  const [editProviderId, setEditProviderId] = useState('');
+  const [editModelId, setEditModelId] = useState('');
+  const [isEditingName, setIsEditingName] = useState(false);
+  const [editName, setEditName] = useState('');
+  const [isUpdatingName, setIsUpdatingName] = useState(false);
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
@@ -435,29 +440,6 @@ export default function ChatSessionView() {
     }
   };
 
-  const handleProviderChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
-    if (!session) return;
-
-    const newProviderId = e.target.value;
-    if (newProviderId === selectedProviderId) return;
-
-    setIsUpdatingProvider(true);
-    try {
-      const updatedSession = await chatSessionApi.update(session._id, { 
-        provider: newProviderId,
-        selectedModel: ''
-      });
-      setSession(updatedSession);
-      setSelectedProviderId(newProviderId);
-      setSelectedModelId('');
-      showToast('Provider changed. Please select a model.');
-    } catch (err) {
-      showToast(`Failed to change provider: ${err instanceof Error ? err.message : 'Unknown error'}`);
-    } finally {
-      setIsUpdatingProvider(false);
-    }
-  };
-
   const getSelectedModelCapabilities = useCallback(() => {
     const provider = providers.find(p => p._id === selectedProviderId);
     if (!provider) return null;
@@ -486,25 +468,14 @@ export default function ChatSessionView() {
     }
   };
 
-  const handleModelChange = async (e: React.ChangeEvent<HTMLSelectElement>) => {
-    if (!session) return;
+  const getProviderName = (id: string) => {
+    return providers.find(p => p._id === id)?.name ?? 'None';
+  };
 
-    const newModelId = e.target.value;
-    if (newModelId === selectedModelId) return;
-
-    setIsUpdatingModel(true);
-    try {
-      const updatedSession = await chatSessionApi.update(session._id, { 
-        selectedModel: newModelId 
-      });
-      setSession(updatedSession);
-      setSelectedModelId(newModelId);
-      showToast(`Model changed`);
-    } catch (err) {
-      showToast(`Failed to change model: ${err instanceof Error ? err.message : 'Unknown error'}`);
-    } finally {
-      setIsUpdatingModel(false);
-    }
+  const getModelName = (providerId: string, modelId: string) => {
+    if (!providerId || !modelId) return 'None';
+    const provider = providers.find(p => p._id === providerId);
+    return provider?.models.find(m => m.id === modelId)?.name ?? modelId;
   };
 
   const getSortedModels = (providerId: string) => {
@@ -518,6 +489,62 @@ export default function ChatSessionView() {
     return name.slice(0, maxLength - 3) + '...';
   };
 
+  const handleStartEditProvider = () => {
+    setEditProviderId(selectedProviderId);
+    setEditModelId(selectedModelId);
+    setIsEditingProvider(true);
+  };
+
+  const handleSaveProvider = async () => {
+    if (!session || !editProviderId || !editModelId) return;
+    setIsUpdatingProvider(true);
+    try {
+      const updatedSession = await chatSessionApi.update(session._id, {
+        provider: editProviderId,
+        selectedModel: editModelId,
+      });
+      setSession(updatedSession);
+      setSelectedProviderId(editProviderId);
+      setSelectedModelId(editModelId);
+      setIsEditingProvider(false);
+      showToast('Provider and model updated');
+    } catch (err) {
+      showToast(`Failed to update: ${err instanceof Error ? err.message : 'Unknown error'}`);
+    } finally {
+      setIsUpdatingProvider(false);
+    }
+  };
+
+  const handleCancelEditProvider = () => {
+    setEditProviderId(selectedProviderId);
+    setEditModelId(selectedModelId);
+    setIsEditingProvider(false);
+  };
+
+  const handleStartEditName = () => {
+    setEditName(session?.name || '');
+    setIsEditingName(true);
+  };
+
+  const handleSaveName = async () => {
+    if (!session || !editName.trim()) return;
+    setIsUpdatingName(true);
+    try {
+      const updatedSession = await chatSessionApi.update(session._id, { name: editName.trim() });
+      setSession(updatedSession);
+      setIsEditingName(false);
+      showToast('Session name updated');
+    } catch (err) {
+      showToast(`Failed to update name: ${err instanceof Error ? err.message : 'Unknown error'}`);
+    } finally {
+      setIsUpdatingName(false);
+    }
+  };
+
+  const handleCancelEditName = () => {
+    setIsEditingName(false);
+  };
+
   const handleSubmitPrompt = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!promptInput.trim() || isProcessing || !socketClient.connected || !sessionLocked) return;
@@ -595,8 +622,10 @@ export default function ChatSessionView() {
     );
   }, []);
 
-  const promptDisabled = isProcessing || workspaceMode !== WorkspaceMode.Agent || !sessionLocked || !session?.selectedModel;
-  const promptPlaceholder = workspaceMode !== WorkspaceMode.Agent
+  const promptDisabled = isProcessing || workspaceMode !== WorkspaceMode.Agent || !sessionLocked || !session?.selectedModel || isEditingProvider;
+  const promptPlaceholder = isEditingProvider
+    ? 'Save or cancel provider changes to continue.'
+    : workspaceMode !== WorkspaceMode.Agent
     ? 'Select Agent mode to enter a prompt.'
     : !session?.selectedModel
     ? 'Please select a model first.'
@@ -636,7 +665,10 @@ export default function ChatSessionView() {
       )}
 
       {/* Content Area */}
-      <div className="flex-1 flex flex-col">
+      <div className="flex-1 flex flex-col relative">
+        {isEditingProvider && (
+          <div className="absolute inset-0 bg-bg-primary/80 z-30" />
+        )}
         {/* Chat View (75%) */}
         <div className="flex-1 flex flex-col overflow-hidden">
           {/* Messages */}
@@ -700,53 +732,151 @@ export default function ChatSessionView() {
             <WorkspaceModeIndicator
               mode={workspaceMode}
               onChange={handleWorkspaceModeChange}
-              disabled={!sessionLocked}
+              disabled={!sessionLocked || isEditingProvider}
             />
           </div>
             <div className="p-4 space-y-3">
               <div>
                 <div className="text-xs text-text-muted">Name</div>
-                <div className="text-text-primary">{session?.name}</div>
+                {isEditingName ? (
+                  <div className="flex gap-2 mt-1">
+                    <input
+                      type="text"
+                      value={editName}
+                      onChange={(e) => setEditName(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') { e.preventDefault(); handleSaveName(); }
+                        if (e.key === 'Escape') { e.preventDefault(); handleCancelEditName(); }
+                      }}
+                      className="flex-1 px-2 py-1.5 bg-bg-tertiary border border-border-default rounded text-text-primary text-sm focus:border-brand focus:outline-none"
+                      autoFocus
+                    />
+                    <button
+                      title="Save"
+                      onClick={handleSaveName}
+                      disabled={!editName.trim() || isUpdatingName}
+                      className="text-green-500 hover:text-green-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors self-center"
+                    >
+                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                      </svg>
+                    </button>
+                    <button
+                      title="Cancel"
+                      onClick={handleCancelEditName}
+                      disabled={isUpdatingName}
+                      className="text-red-500 hover:text-red-400 disabled:opacity-30 transition-colors self-center"
+                    >
+                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </button>
+                  </div>
+                ) : (
+                  <div className="flex gap-2 items-center mt-1">
+                    <div className="text-text-primary flex-1">{session?.name}</div>
+                    <button
+                      title="Edit name"
+                      onClick={handleStartEditName}
+                      className="text-text-muted hover:text-text-primary transition-colors"
+                    >
+                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      </svg>
+                    </button>
+                  </div>
+                )}
               </div>
-              <div className="flex gap-2">
-                <div className="flex-1">
-                  <div className="text-xs text-text-muted">Provider</div>
-                  <select
-                    value={selectedProviderId || ''}
-                    onChange={handleProviderChange}
-                    disabled={isUpdatingProvider}
-                    className="w-full mt-1 px-2 py-1.5 bg-bg-tertiary border border-border-default rounded text-text-primary text-sm focus:border-brand focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
-                  >
-                    {providers.map((provider) => (
-                      <option key={provider._id} value={provider._id}>
-                        {provider.name}
-                      </option>
-                    ))}
-                  </select>
+              {isEditingProvider ? (
+                <div className="flex gap-2">
+                  <div className="flex-1">
+                    <div className="text-xs text-text-muted">Provider</div>
+                    <select
+                      value={editProviderId || ''}
+                      onChange={(e) => { setEditProviderId(e.target.value); setEditModelId(''); }}
+                      className="w-full mt-1 px-2 py-1.5 bg-bg-tertiary border border-border-default rounded text-text-primary text-sm focus:border-brand focus:outline-none"
+                    >
+                      <option value="">-- Select Provider --</option>
+                      {providers.map((provider) => (
+                        <option key={provider._id} value={provider._id}>
+                          {provider.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className="flex-1">
+                    <div className="text-xs text-text-muted">Model</div>
+                    <select
+                      value={editModelId || ''}
+                      onChange={(e) => setEditModelId(e.target.value)}
+                      disabled={!editProviderId}
+                      className="w-full mt-1 px-2 py-1.5 bg-bg-tertiary border border-border-default rounded text-text-primary text-sm focus:border-brand focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed truncate"
+                    >
+                      {!editProviderId ? (
+                        <option value="">Select provider first</option>
+                      ) : (
+                        <>
+                          <option value="">-- Select Model --</option>
+                          {getSortedModels(editProviderId).map((model) => (
+                            <option key={model.id} value={model.id}>
+                              {truncateModelName(model.name)}
+                            </option>
+                          ))}
+                        </>
+                      )}
+                    </select>
+                  </div>
+                  <div className="flex items-end gap-1 pb-1">
+                    <button
+                      title="Save"
+                      onClick={handleSaveProvider}
+                      disabled={!editProviderId || !editModelId || isUpdatingProvider}
+                      className="text-green-500 hover:text-green-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                    >
+                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                      </svg>
+                    </button>
+                    <button
+                      title="Cancel"
+                      onClick={handleCancelEditProvider}
+                      disabled={isUpdatingProvider}
+                      className="text-red-500 hover:text-red-400 disabled:opacity-30 transition-colors"
+                    >
+                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                      </svg>
+                    </button>
+                  </div>
                 </div>
-                <div className="flex-1">
-                  <div className="text-xs text-text-muted">Model</div>
-                  <select
-                    value={selectedModelId || ''}
-                    onChange={handleModelChange}
-                    disabled={isUpdatingModel || !selectedProviderId}
-                    className="w-full mt-1 px-2 py-1.5 bg-bg-tertiary border border-border-default rounded text-text-primary text-sm focus:border-brand focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed truncate"
+              ) : (
+                <div className="flex gap-2">
+                  <div className="flex-1">
+                    <div className="text-xs text-text-muted">Provider</div>
+                    <div className="text-text-primary text-sm mt-1">{getProviderName(selectedProviderId)}</div>
+                  </div>
+                  <div className="flex-1">
+                    <div className="text-xs text-text-muted">Model</div>
+                    <div
+                      className="text-text-primary text-sm mt-1 truncate"
+                      title={getModelName(selectedProviderId, selectedModelId)}
+                    >
+                      {getModelName(selectedProviderId, selectedModelId)}
+                    </div>
+                  </div>
+                  <button
+                    title="Change provider/model..."
+                    onClick={handleStartEditProvider}
+                    className="self-end pb-1 text-text-muted hover:text-text-primary transition-colors"
                   >
-                    {!selectedProviderId ? (
-                      <option value="">Select provider first</option>
-                    ) : (
-                      <>
-                        <option value="">-- Select Model --</option>
-                        {getSortedModels(selectedProviderId).map((model) => (
-                          <option key={model.id} value={model.id}>
-                            {truncateModelName(model.name)}
-                          </option>
-                        ))}
-                      </>
-                    )}
-                  </select>
+                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  </button>
                 </div>
-              </div>
+              )}
               <div>
                 <div className="text-xs text-text-muted">Mode</div>
                 <select