root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): mobile chat New Chat button placement + merged fn-2469

Browse Source 
- ChatView mobile: hide the top sidebar header's "New Chat" button on
  <=768px and show the existing footer button as a pinned full-width
  action with safe-area padding. Both buttons existed in JSX; only
  CSS was needed.
- styles.css: comments compose/edit textareas use var(--surface) so
  they remain visible against the task detail modal's --card panel
  (in light theme --bg and --card both resolve to #ffffff).
- Includes resolved-conflict changes from fusion/fn-2469 in
  ModelOnboardingModal and SettingsModal (and the related test).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-04-24 20:43:17 -07:00
parent 2498b7d235
commit 1fba5ea60a
5 changed files with 208 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/dashboard/app/components/ChatView.css
View File

@@ -637,6 +637,12 @@
color: var(--text-muted);
}
/* The mobile-only "New Chat" footer button is hidden on desktop; the
desktop layout uses the .chat-sidebar-header button instead. */
.chat-sidebar-footer {
display: none;
}
/* === Mobile: one pane at a time =========================================
Sidebar (session list) and thread are siblings of .chat-view. On mobile
we show whichever one is "active" full-width: when the sidebar is
@@ -657,4 +663,25 @@
.chat-sidebar:not(.chat-sidebar--hidden) + .chat-thread {
display: none;
}
/* On mobile, the "New Chat" affordance moves to a full-width pinned
footer. The desktop top-header button is hidden to free the screen
space for the search field and session list. */
.chat-sidebar-header {
display: none;
}
.chat-sidebar-footer {
display: block;
padding: var(--space-sm) var(--space-md);
padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom, 0));
border-top: 1px solid var(--border);
background: var(--bg-secondary);
}
.chat-sidebar-footer .chat-sidebar-footer-btn {
width: 100%;
justify-content: center;
min-height: 40px;
}
}

65
packages/dashboard/app/components/ModelOnboardingModal.tsx
View File

@@ -577,6 +577,7 @@ export function ModelOnboardingModal({
const [ghCliStatus, setGhCliStatus] = useState<GhCliStatus | undefined>(undefined);
const [authLoading, setAuthLoading] = useState(true);
const [authActionInProgress, setAuthActionInProgress] = useState<string | null>(null);
const [loginInstructions, setLoginInstructions] = useState<Record<string, string>>({});
const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);
const [selectedModel, setSelectedModel] = useState<string>("");
const [saving, setSaving] = useState(false);
@@ -685,6 +686,16 @@ export function ModelOnboardingModal({
const { providers, ghCli } = await fetchAuthStatus();
setAuthProviders(providers);
setGhCliStatus(ghCli);
setLoginInstructions((prev) => {
const next: Record<string, string> = {};
for (const [providerId, instructions] of Object.entries(prev)) {
const provider = providers.find((candidate) => candidate.id === providerId);
if (provider && !provider.authenticated) {
next[providerId] = instructions;
}
}
return Object.keys(next).length === Object.keys(prev).length ? prev : next;
});
// Remove from skippedProviders when a provider becomes authenticated
setSkippedProviders((prev) => {
const updated = { ...prev };
@@ -961,13 +972,25 @@ export function ModelOnboardingModal({
return prev;
});
setLoginInstructions((prev) => {
if (!(providerId in prev)) {
return prev;
}
const next = { ...prev };
delete next[providerId];
return next;
});
// Set outcome to pending
setLoginOutcomes((prev) => ({ ...prev, [providerId]: "pending" }));
setAuthActionInProgress(providerId);
pollCountRef.current = 0;
try {
const { url } = await loginProvider(providerId);
const { url, instructions } = await loginProvider(providerId);
if (instructions?.trim()) {
setLoginInstructions((prev) => ({ ...prev, [providerId]: instructions }));
}
window.open(appendTokenQuery(url), "_blank");
// Poll for auth completion
@@ -982,6 +1005,14 @@ export function ModelOnboardingModal({
}
setAuthActionInProgress(null);
setLoginOutcomes((prev) => ({ ...prev, [providerId]: "timeout" }));
setLoginInstructions((prev) => {
if (!(providerId in prev)) {
return prev;
}
const next = { ...prev };
delete next[providerId];
return next;
});
addToast("Login timed out. Please try again.", "warning");
return;
}
@@ -998,6 +1029,14 @@ export function ModelOnboardingModal({
}
setAuthActionInProgress(null);
setLoginOutcomes((prev) => ({ ...prev, [providerId]: "success" }));
setLoginInstructions((prev) => {
if (!(providerId in prev)) {
return prev;
}
const next = { ...prev };
delete next[providerId];
return next;
});
if (providerId === "github") {
setGitHubSkippedState(false);
}
@@ -1021,6 +1060,14 @@ export function ModelOnboardingModal({
setLoginOutcomes((prev) => ({ ...prev, [providerId]: "failed" }));
}
setAuthActionInProgress(null);
setLoginInstructions((prev) => {
if (!(providerId in prev)) {
return prev;
}
const next = { ...prev };
delete next[providerId];
return next;
});
}
},
[addToast, setGitHubSkippedState],
@@ -1035,6 +1082,14 @@ export function ModelOnboardingModal({
setAuthActionInProgress(null);
pollCountRef.current = 0;
setLoginOutcomes((prev) => ({ ...prev, [providerId]: "cancelled" }));
setLoginInstructions((prev) => {
if (!(providerId in prev)) {
return prev;
}
const next = { ...prev };
delete next[providerId];
return next;
});
}, []);
// API key input update handler
@@ -1633,6 +1688,14 @@ export function ModelOnboardingModal({
</button>
)}
</div>
{authActionInProgress === provider.id && loginInstructions[provider.id] && (
<p
className="auth-login-instructions"
data-testid={`onboarding-login-instructions-${provider.id}`}
>
{loginInstructions[provider.id]}
</p>
)}
{loginOutcomes[provider.id] === "timeout" && authActionInProgress !== provider.id && (
<p className="onboarding-helper-text onboarding-inline-feedback">
Login timed out. Please try again.

49
packages/dashboard/app/components/SettingsModal.tsx
View File

@@ -176,6 +176,7 @@ export function SettingsModal({
const [authProviders, setAuthProviders] = useState<AuthProvider[]>([]);
const [authLoading, setAuthLoading] = useState(false);
const [authActionInProgress, setAuthActionInProgress] = useState<string | null>(null);
const [loginInstructions, setLoginInstructions] = useState<Record<string, string>>({});
const [apiKeyInputs, setApiKeyInputs] = useState<Record<string, string>>({});
const [apiKeyErrors, setApiKeyErrors] = useState<Record<string, string>>({});
const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
@@ -288,6 +289,16 @@ export function SettingsModal({
try {
const { providers } = await fetchAuthStatus();
setAuthProviders(providers);
setLoginInstructions((prev) => {
const next: Record<string, string> = {};
for (const [providerId, instructions] of Object.entries(prev)) {
const provider = providers.find((candidate) => candidate.id === providerId);
if (provider && !provider.authenticated) {
next[providerId] = instructions;
}
}
return Object.keys(next).length === Object.keys(prev).length ? prev : next;
});
} catch {
// Silently fail — auth may not be configured
}
@@ -386,8 +397,20 @@ export function SettingsModal({
const handleLogin = useCallback(async (providerId: string) => {
setAuthActionInProgress(providerId);
setLoginInstructions((prev) => {
if (!(providerId in prev)) {
return prev;
}
const next = { ...prev };
delete next[providerId];
return next;
});
try {
const { url } = await loginProvider(providerId);
const { url, instructions } = await loginProvider(providerId);
if (instructions?.trim()) {
setLoginInstructions((prev) => ({ ...prev, [providerId]: instructions }));
}
window.open(appendTokenQuery(url), "_blank");
// Poll for auth completion every 2 seconds
@@ -402,6 +425,14 @@ export function SettingsModal({
pollIntervalRef.current = null;
}
setAuthActionInProgress(null);
setLoginInstructions((prev) => {
if (!(providerId in prev)) {
return prev;
}
const next = { ...prev };
delete next[providerId];
return next;
});
addToast("Login successful", "success");
}
} catch {
@@ -411,6 +442,14 @@ export function SettingsModal({
} catch (err) {
addToast(getErrorMessage(err) || "Login failed", "error");
setAuthActionInProgress(null);
setLoginInstructions((prev) => {
if (!(providerId in prev)) {
return prev;
}
const next = { ...prev };
delete next[providerId];
return next;
});
}
}, [addToast]);
@@ -3257,6 +3296,14 @@ export function SettingsModal({
Login
</button>
)}
{loginInstructions[provider.id] && (
<p
className="auth-login-instructions"
data-testid={`auth-login-instructions-${provider.id}`}
>
{loginInstructions[provider.id]}
</p>
)}
</div>
)}
</div>

58
packages/dashboard/app/components/__tests__/ModelOnboardingModal.test.tsx
View File

@@ -2928,6 +2928,64 @@ describe("ModelOnboardingModal", () => {
});
});
it("shows OAuth login instructions during pending auth and clears them on cancel", async () => {
mockLoginProvider.mockResolvedValueOnce({
url: "https://auth.example.com/login",
instructions: "Use code WXYZ-9876 to finish authentication.",
});
render(<ModelOnboardingModal onComplete={vi.fn()} addToast={vi.fn()} projectId="proj_123" />);
await waitFor(() => {
expect(screen.getByText("Login")).toBeTruthy();
});
fireEvent.click(screen.getByText("Login"));
await waitFor(() => {
expect(screen.getByTestId("onboarding-login-instructions-anthropic").textContent).toContain("WXYZ-9876");
});
fireEvent.click(screen.getByText("Cancel"));
await waitFor(() => {
expect(screen.queryByTestId("onboarding-login-instructions-anthropic")).toBeNull();
});
});
it("shows GitHub login instructions during connect attempts", async () => {
mockFetchAuthStatus.mockImplementation(() => Promise.resolve({
providers: [
{ id: "anthropic", name: "Anthropic", authenticated: false, type: "oauth" },
{ id: "github", name: "GitHub", authenticated: false, type: "oauth" },
],
}));
mockLoginProvider.mockImplementation((providerId: string) => {
if (providerId === "github") {
return Promise.resolve({
url: "https://github.com/login/device",
instructions: "Enter device code GH-2469 on github.com/login/device.",
});
}
return Promise.resolve({ url: "https://auth.example.com/login" });
});
render(<ModelOnboardingModal onComplete={vi.fn()} addToast={vi.fn()} projectId="proj_123" />);
await navigateToGitHubStep();
fireEvent.click(screen.getByRole("button", { name: /Connect/ }));
await waitFor(() => {
expect(screen.getByTestId("onboarding-login-instructions-github").textContent).toContain("GH-2469");
});
fireEvent.click(screen.getByText("Cancel"));
await waitFor(() => {
expect(screen.queryByTestId("onboarding-login-instructions-github")).toBeNull();
});
});
it("login failure shows error toast and sets outcome to failed", async () => {
mockLoginProvider.mockRejectedValueOnce(new Error("Login failed: Invalid credentials"));

11
packages/dashboard/app/styles.css
View File

@@ -1942,6 +1942,17 @@ input[type="range"]:focus-visible {
border-top: 1px solid var(--border);
margin-top: 8px;
}
.auth-login-instructions {
margin-top: var(--space-sm);
margin-bottom: 0;
padding: var(--space-sm) var(--space-md);
border: 1px solid color-mix(in srgb, var(--color-info) 35%, var(--border));
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--color-info) 8%, transparent);
color: var(--text);
line-height: 1.5;
white-space: pre-wrap;
}
.auth-apikey-section {
display: flex;
flex-direction: column;