feat: search & chat UX improvements, sidebar fixes, and bug fixes

[androemeda]

Summary

Sidebar & navigation

• Move "Database tools" section above "AI tools" in the sidebar
• Fix the sidebar's bottom auth button, which always rendered "Logout" regardless of auth state — now correctly shows Login/Logout based on session
• Fix the homepage header to show "Sign Out" when already logged in (previously always showed Sign In / Sign Up)
• Relocate the Sign In / Sign Out button off the bottom-left of the sidebar to the top-right of each page's existing header row (search, chat, analyze, diagrams, sbml, vcml, analyze/[id], search/[bmid], admin knowledge-base) instead of a separate top bar

Search page (/search)

• Visual refresh : category filter pills, skeleton loading state, result card redesign (owner/date/simulation icons, public/private badge)
• Add a "Clear" button that resets all filters, search results, and collapses the advanced search section

Chat (ChatBox)

• Fix a bug where biomodel IDs and "Database Details" links were duplicatedin AI responses
• Add a Stop button that cancels an in-flight query; shown in place of Send while a response is loading, with a distinct "Response cancelled" message on abort

Backend

• Add formatting guidelines to the LLM system prompt: identifiers.org link formatting, structured biomodel listing format, and rules for long lists

[Copilot]

Pull request overview

UX-focused update across the Next.js frontend plus a backend system-prompt tweak to improve navigation/auth affordances, search results presentation, and chat response behavior.

Changes:

• Introduces a reusable SignInOutButton and relocates sign-in/out controls from the sidebar to page headers across multiple pages.
• Refreshes /search UX (category “pill” filters, loading skeletons, empty/initial states, and a Clear action).
• Improves ChatBox response handling (stop/cancel in-flight requests; reduce duplicated biomodel ID/link formatting) and expands LLM formatting rules in the backend prompt.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
frontend/components/sign-in-out-button.tsx	Adds shared login/logout button component for consistent header placement.
frontend/components/file-fetcher.tsx	Adds header-level sign-in/out control to file fetcher views.
frontend/components/ChatBox.tsx	Adds stop/cancel support and adjusts biomodel ID hyperlink formatting logic.
frontend/components/app-sidebar.tsx	Reorders sidebar sections and removes the bottom auth/logout button area.
frontend/app/search/page.tsx	Search UI refresh: filter pills, clear button, skeleton loading, and empty/initial states.
frontend/app/search/[bmid]/page.tsx	Adds header-level sign-in/out control to biomodel detail view.
frontend/app/sbml/page.tsx	Adds header-level sign-in/out control to SBML page.
frontend/app/page.tsx	Updates landing page header to show Sign Out when authenticated.
frontend/app/diagrams/page.tsx	Adds header-level sign-in/out control to diagrams page.
frontend/app/chat/page.tsx	Adds header-level sign-in/out control to chat page.
frontend/app/analyze/page.tsx	Adds header-level sign-in/out control to analyze page.
frontend/app/analyze/[id]/page.tsx	Adds header-level sign-in/out control to analysis results page.
frontend/app/admin/knowledge-base/page.tsx	Adds header-level sign-in/out control to knowledge base admin page.
backend/app/utils/system_prompt.py	Adds/adjusts LLM output-format guidance for identifiers.org links and biomodel listings.

Comments suppressed due to low confidence (3)

frontend/components/ChatBox.tsx:131

• bmId is interpolated directly into a RegExp without escaping. If the backend ever returns an ID containing regex metacharacters, this will either throw or match unintended text. Escape bmId before building the regex (and then build the regex from the escaped value).

      const db_link = `[Database Details](/search/${bmId})`;
      const replacementString = `**${bmId}** || ${db_link}`;
      const idRegex = new RegExp(`(?<!/search/)\\b${bmId}\\b`, "g");
      formattedContent = formattedContent.replace(idRegex, replacementString);

frontend/components/ChatBox.tsx:240

• Abort detection relies on error instanceof DOMException, but Fetch aborts aren't consistently surfaced as DOMException across runtimes. Checking the .name property is more robust and avoids misclassifying aborts as backend errors.

      if (error instanceof DOMException && error.name === "AbortError") {

backend/app/utils/system_prompt.py:34

• The biomodel listing template mixes ${biomodelID} and ${biomodelId}. Using inconsistent placeholder casing makes the required format ambiguous for the LLM; keep it consistent with ${biomodelID} used elsewhere in this section.

1. **[Biomodel Name](/search/${biomodelID})**
   - **Biomodel Key:** ${biomodelId}
   - **Owner:** ${owner}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.