fix(ui): keep remote read-only notice accurate

tests/unit/web-server/api-routes-remote-write-guard.test.ts

@@ -1,10 +1,15 @@
 import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it } from 'bun:test';
+import bcrypt from 'bcrypt';
 import express from 'express';
 import type { Server } from 'http';
 import * as fs from 'fs';
 import * as os from 'os';
 import * as path from 'path';
 import { apiRoutes } from '../../../src/web-server/routes';
+import {
+  authMiddleware,
+  createSessionMiddleware,
+} from '../../../src/web-server/middleware/auth-middleware';
 
 describe('api-routes remote write guard', () => {
   let server: Server;
@@ -107,12 +112,93 @@ describe('api-routes remote write guard', () => {
     });
   });
 
-  it('allows remote writes again when dashboard auth is enabled', async () => {
+  it('blocks remote PUT requests when dashboard auth is disabled', async () => {
-    process.env.CCS_DASHBOARD_AUTH_ENABLED = 'true';
+    const response = await fetch(`${baseUrl}/api/cliproxy-server`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({}),
+    });
 
-    const response = await fetch(`${baseUrl}/api/profiles`, {
+    expect(response.status).toBe(403);
+    expect(await response.json()).toEqual({
+      error: 'Remote dashboard writes require localhost access when dashboard auth is disabled.',
+    });
+  });
+
+  it('blocks remote PATCH requests when dashboard auth is disabled', async () => {
+    const response = await fetch(`${baseUrl}/api/codex/config/patch`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({}),
+    });
+
+    expect(response.status).toBe(403);
+    expect(await response.json()).toEqual({
+      error: 'Remote dashboard writes require localhost access when dashboard auth is disabled.',
+    });
+  });
+
+  it('blocks remote DELETE requests when dashboard auth is disabled', async () => {
+    const response = await fetch(`${baseUrl}/api/profiles/demo`, {
+      method: 'DELETE',
+    });
+
+    expect(response.status).toBe(403);
+    expect(await response.json()).toEqual({
+      error: 'Remote dashboard writes require localhost access when dashboard auth is disabled.',
+    });
+  });
+
+  it('allows remote writes again when dashboard auth is enabled', async () => {
+    const password = 'testpassword123';
+    process.env.CCS_DASHBOARD_AUTH_ENABLED = 'true';
+    process.env.CCS_DASHBOARD_USERNAME = 'admin';
+    process.env.CCS_DASHBOARD_PASSWORD_HASH = await bcrypt.hash(password, 10);
+
+    const authApp = express();
+    authApp.use(express.json());
+    authApp.use((req, _res, next) => {
+      Object.defineProperty(req.socket, 'remoteAddress', {
+        value: forcedRemoteAddress,
+        configurable: true,
+      });
+      next();
+    });
+    authApp.use(createSessionMiddleware());
+    authApp.use(authMiddleware);
+    authApp.use('/api', apiRoutes);
+
+    const authServer = await new Promise<Server>((resolve, reject) => {
+      const instance = authApp.listen(0, '127.0.0.1');
+      instance.once('error', reject);
+      instance.once('listening', () => resolve(instance));
+    });
+
+    const address = authServer.address();
+    if (!address || typeof address === 'string') {
+      throw new Error('Unable to resolve auth-enabled test server port');
+    }
+    const authBaseUrl = `http://127.0.0.1:${address.port}`;
+
+    const loginResponse = await fetch(`${authBaseUrl}/api/auth/login`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        username: 'admin',
+        password,
+      }),
+    });
+    const cookie = loginResponse.headers.get('set-cookie');
+
+    expect(loginResponse.status).toBe(200);
+    expect(cookie).toBeTruthy();
+
+    const response = await fetch(`${authBaseUrl}/api/profiles`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Cookie: cookie as string,
+      },
       body: JSON.stringify({
         name: 'demo',
         baseUrl: 'https://api.example.com',
@@ -120,6 +206,11 @@ describe('api-routes remote write guard', () => {
       }),
     });
 
-    expect(response.status).not.toBe(403);
+    expect(response.status).toBe(201);
+
+    await new Promise<void>((resolve) => authServer.close(() => resolve()));
+
+    delete process.env.CCS_DASHBOARD_USERNAME;
+    delete process.env.CCS_DASHBOARD_PASSWORD_HASH;
   });
 });

ui/src/components/shared/localhost-disclaimer.tsx

@@ -4,11 +4,12 @@ import { useAuth } from '@/contexts/auth-context';
 
 export function LocalhostDisclaimer() {
   const [dismissed, setDismissed] = useState(false);
-  const { authEnabled, isLocalAccess, loading } = useAuth();
+  const { authEnabled, authConfigured, isLocalAccess, loading } = useAuth();
-
-  if (dismissed || loading) return null;
 
   const isRemoteReadonly = !isLocalAccess && !authEnabled;
+
+  if ((dismissed && !isRemoteReadonly) || loading) return null;
+
   const wrapperClasses = isRemoteReadonly
     ? 'w-full border-t border-amber-200 bg-amber-50 px-4 py-2 text-amber-900 transition-colors duration-200 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200'
     : 'w-full border-t border-yellow-200 bg-yellow-50 px-4 py-2 text-yellow-800 transition-colors duration-200 dark:border-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-200';
@@ -17,12 +18,26 @@ export function LocalhostDisclaimer() {
     : 'text-yellow-600 hover:bg-yellow-100 hover:text-yellow-800 dark:text-yellow-400 dark:hover:bg-yellow-800/30';
   const message = isRemoteReadonly ? (
     <>
-      <span className="hidden sm:inline">
+      {authConfigured ? (
-        Remote dashboard access is read-only until you run ccs config auth setup on the host.
+        <>
-      </span>
+          <span className="hidden sm:inline">
-      <span className="sm:hidden">
+            Remote dashboard access is read-only because dashboard auth is currently disabled on the
-        Remote dashboard is read-only until host auth is configured.
+            host. Re-enable dashboard auth on the host to unlock remote changes.
-      </span>
+          </span>
+          <span className="sm:hidden">
+            Remote dashboard is read-only until dashboard auth is re-enabled on the host.
+          </span>
+        </>
+      ) : (
+        <>
+          <span className="hidden sm:inline">
+            Remote dashboard access is read-only until you run ccs config auth setup on the host.
+          </span>
+          <span className="sm:hidden">
+            Remote dashboard is read-only until host auth is configured.
+          </span>
+        </>
+      )}
     </>
   ) : (
     <>
@@ -40,13 +55,15 @@ export function LocalhostDisclaimer() {
           <Shield className="w-4 h-4 flex-shrink-0" />
           {message}
         </div>
-        <button
+        {!isRemoteReadonly ? (
-          onClick={() => setDismissed(true)}
+          <button
-          className={`flex-shrink-0 rounded p-1 transition-colors ${dismissClasses}`}
+            onClick={() => setDismissed(true)}
-          aria-label="Dismiss disclaimer"
+            className={`flex-shrink-0 rounded p-1 transition-colors ${dismissClasses}`}
-        >
+            aria-label="Dismiss disclaimer"
-          <X className="w-4 h-4" />
+          >
-        </button>
+            <X className="w-4 h-4" />
+          </button>
+        ) : null}
       </div>
     </div>
   );

ui/tests/unit/components/shared/localhost-disclaimer.test.tsx

@@ -18,6 +18,7 @@ describe('LocalhostDisclaimer', () => {
   it('shows the local safety copy for loopback sessions', () => {
     useAuthMock.mockReturnValue({
       authEnabled: false,
+      authConfigured: false,
       isLocalAccess: true,
       loading: false,
     });
@@ -32,6 +33,7 @@ describe('LocalhostDisclaimer', () => {
   it('shows the remote read-only copy when auth is disabled for remote access', () => {
     useAuthMock.mockReturnValue({
       authEnabled: false,
+      authConfigured: false,
       isLocalAccess: false,
       loading: false,
     });
@@ -43,5 +45,24 @@ describe('LocalhostDisclaimer', () => {
         'Remote dashboard access is read-only until you run ccs config auth setup on the host.'
       )
     ).toBeVisible();
+    expect(screen.queryByLabelText('Dismiss disclaimer')).toBeNull();
+  });
+
+  it('shows the re-enable message when host credentials already exist', () => {
+    useAuthMock.mockReturnValue({
+      authEnabled: false,
+      authConfigured: true,
+      isLocalAccess: false,
+      loading: false,
+    });
+
+    render(<LocalhostDisclaimer />);
+
+    expect(
+      screen.getByText(
+        'Remote dashboard access is read-only because dashboard auth is currently disabled on the host. Re-enable dashboard auth on the host to unlock remote changes.'
+      )
+    ).toBeVisible();
+    expect(screen.queryByLabelText('Dismiss disclaimer')).toBeNull();
   });
 });