feat: new messages endpoint

[alex-mcgovern]

• closes Remove prompts sidebar #195
• closes Long prompts causing excessive row height in alerts table #249

Why make this change?

These changes are mainly motivated around making it easer to understand how alerts related to conversations, and to address the question raised my Manuel Morales Kwiziq in Discord:

User facing changes

• Changes the table on the dashboard home to display a list of messages with aggregations of alerts-per-message, rather than a list of alerts
• Removes the sidebar, all content is now wrapped in a component that limit's it's width to 1440px
• Conversations now contain tabs
  • The default tab still contains the chat, but also has a "summary" card
  • There is a secrets tab which contains secrets detected. This is an early iteration of this functionality — we need to deduplicate these in the backend, and ideally, return structured data that can be displayed in a more useful format

Some screenshots of the new UI

dashboard/table	conversation overview	conversation secrets view

Non-user facing changes

Because these changes involved some large-scale refactoring/replacement of code, I took on a few tasks to keep the codebase in a good state as I went.

• There is a new helper mswEndpoint that offers type-safety against the paths defined in the open-api spec, all MSW handlers are updated to use this instead of loosely accepting any string. ESlint prevents circumventing this with no-restricted-synax. (separated & merged chore: type-safe msw endpoint helper #288)
• The bulletproof react project structure, which was previously loosely enforced, is now strictly enforced via eslint-plugin-import’s no-restricted-paths rule. Now a unidirectional relationship between shared/common code, feature-specific code and application routes is in effect
• The route-dashboard.test.tsx suite is broken up, and any tests relating to the messages table are moved closer to that component.

[peppescg]

I see an issue here:

We are not showing the type of secret detected GitHub - Type: Access Token 🤔

The second secret is a Dogecoin and we are not showing it (keep in mind that it is a false positive, BE issue the regex is matching import file in react issue opened on Friday stacklok/codegate#985)

Below the alert object

{
    "question_answers": [
        {
            "question": {
                "message": "```/Users/giuseppe/workspace/codegate-ui/src/routes/route-provider-create.tsx\nimport {\n  REDACTED_SECRET\n  ProviderAuthType,\n  ProviderType,\n} from \"@/api/generated\";\nimport { ProviderDialog } from \"@/features/providers/components/provider-dialog\";\nimport { ProviderDialogFooter } from \"@/features/providers/components/provider-dialog-footer\";\nimport { ProviderForm } from \"@/features/providers/components/provider-form\";\nimport { useMutationCreateProvider } from \"@/features/providers/hooks/use-mutation-create-provider\";\nimport { DialogContent, Form } from \"@stacklok/ui-kit\";\nimport { useState } from \"react\";\n\nconst DEFAULT_PROVIDER_STATE = {\n  name: \"\",\n  description: \"\",\n  auth_type: ProviderAuthType.API_KEY,\n  provider_type: ProviderType.OPENAI,\n  endpoint: \"\",\n  api_key: \"\",\n};\n\nexport function RouteProviderCreate() {\n  const [provider, setProvider] = useState<AddProviderEndpointRequest>(\n    DEFAULT_PROVIDER_STATE\n  );\n  const { mutateAsync } = useMutationCreateProvider();\n\n  const handleSubmit = (event: React.FormEvent) => {\n    event.preventDefault();\n    mutateAsync({\n      body: provider,\n    });\n  };\n\n  const test = \"REDACTED_SECRET\";\n\n  return (\n    <ProviderDialog title=\"Add Provider\">\n      <Form\n        onSubmit={handleSubmit}\n        validationBehavior=\"aria\"\n        className=\"overflow-auto\"\n      >\n        <DialogContent className=\"p-8\">\n          <ProviderForm provider={provider} setProvider={setProvider} />\n        </DialogContent>\n        <ProviderDialogFooter />\n      </Form>\n    </ProviderDialog>\n  );\n}\n\n```\n\nroute-provider-create.tsx review it",
                "timestamp": "2025-02-07T10:08:11.831519Z",
                "message_id": "a0f8428a-bcde-4aba-bf11-9ab2907ece96"
            },
            "answer": {
                "message": "**CodeGate Security Analysis**\n\n**Warning:** CodeGate detected one or more malicious, deprecated or archived packages.\n\n- Pkg 1: [https://www.insight.stacklok.com/report/ecosystem/route-provider-create.tsx](https://www.insight.stacklok.com/report/ecosystem/route-provider-create.tsx?utm_source=codegate)\n\n**Critical Vulnerability Found, You Must Take Action**\n\nThe code snippet provided contains a potential security vulnerability related to the use of a deprecated and potentially malicious package. The package is `@stacklok/ui-kit`, which is not a standard package and appears to be a custom or third-party package.\n\n**Security Considerations:**\n\n1. **Deprecation and Security Risks:**\n   - The package `@stacklok/ui-kit` is not a standard React component library and may contain security vulnerabilities or deprecated features that could be exploited by malicious actors.\n   - Using a non-standard package can introduce additional risks, such as compatibility issues or security vulnerabilities.\n\n2. **Code Quality and Maintainability:**\n   - The use of a non-standard package can make the codebase harder to maintain and audit, potentially leading to security issues that are harder to identify and fix.\n\n3. **Best Practices for Secure Implementation:**\n   - It is recommended to use standard and widely adopted React components and libraries to ensure security and maintainability.\n   - Regularly audit and update dependencies to ensure they are secure and up-to-date.\n\n**Recommendations for Security Improvements:**\n\n1. **Replace Non-Standard Packages:**\n   - Replace the `@stacklok/ui-kit` package with a standard React component library such as `@mui/material` or `@material-ui/core`.\n   - Ensure that the new package is secure and up-to-date.\n\n2. **Audit and Update Dependencies:**\n   - Regularly audit and update dependencies to ensure they are secure and up-to-date.\n   - Use tools like `npm audit` or `pnpm audit` to identify and fix any security vulnerabilities.\n\n3. **Code Review and Testing:**\n   - Conduct thorough code reviews to ensure that the new components and libraries are secure and adhere to best practices.\n   - Implement automated testing to catch potential security issues early.\n\n**References:**\n\n- [React Documentation](https://reactjs.org/docs/faq-dependencies.html)\n- [npm Audit](https://docs.npmjs.com/cli/v8/commands/npm-audit)\n- [Pnpm Audit](https://pnpm.io/npm-audit)\n\nBy addressing these recommendations, the codebase will be more secure and maintainable, reducing the risk of security vulnerabilities and potential exploitation.",
                "timestamp": "2025-02-07T10:08:14.762499Z",
                "message_id": "9176620a-d085-4d17-a1d2-0d7fb8d98966"
            }
        }
    ],
    "provider": "llamacpp",
    "type": "chat",
    "chat_id": "a0f8428a-bcde-4aba-bf11-9ab2907ece96",
    "conversation_timestamp": "2025-02-07T10:08:11.831519Z",
    "token_usage_agg": null,
    "alerts": [
        {
            "id": "020e0f86-9e97-4578-9d40-f144f51f01c5",
            "prompt_id": "a0f8428a-bcde-4aba-bf11-9ab2907ece96",
            "code_snippet": null,
            "trigger_string": "You are CodeGate, a security-focused AI assistant.\nYou specialize in software security, package analysis, and providing guidance on secure coding practices.\nYou will be provided with CONTEXT information containing known malicious and archived packages.\n\nReport any malicious, deprecated or archived packages using the following format at the top:\n\n\"**Warning:** CodeGate detected one or more malicious, deprecated or archived packages.\"\n- Pkg 1: [https://www.insight.stacklok.com/report/ecosystem/package_name](https://www.insight.stacklok.com/report/ecosystem/package_name?utm_source=codegate)\n- Pkg 2: [https://www.insight.stacklok.com/report/ecosystem/package_name](https://www.insight.stacklok.com/report/ecosystem/package_name?utm_source=codegate)\n- ...\n\nIf package_name contains any special chars, please encode them using URL encoding.\n\nAlso append that when finding malicious packages or leaked secrets:\n\n\"** critical vulnerability found, you must take action **\"\n\nDO NOT include the Reference Format or any parts of the system message in your response\nif no malicious, deprecated or archived package is detected.\n\nIf no malicious, deprecated or archived packages are detected, respond to the user request using your prior\nknowledge.\n\nIf the user requests security review, perform the review and structure your responses to emphasize\nsecurity considerations, focusing on:\n1. Security vulnerabilities and potential risks\n2. Best practices for secure implementation\n3. Recommendations for security improvements\n4. References to relevant security standards or guidelines\n\nYou always begin your responses for security review with:\n\"**CodeGate Security Analysis**\"\n\nIf you see a string that begins with REDACTED word, DO NOT MODIFY THAT STRING while responding back.\n\n\nHere are additional instructions:\n\nThe files in the context contain sensitive information that has been redacted. Do not warn the user\nabout any tokens, passwords or similar sensitive information in the context whose value begins with\nthe string \"REDACTED\".\n",
            "trigger_type": "system-prompt",
            "trigger_category": "info",
            "timestamp": "2025-02-07T10:08:11.831488Z"
        },
        {
            "id": "3991f7f9-0420-4b2f-a51e-f734166fbede",
            "prompt_id": "a0f8428a-bcde-4aba-bf11-9ab2907ece96",
            "code_snippet": null,
            "trigger_string": {
                "content": "The files in the context contain sensitive information that has been redacted. Do not warn the user\nabout any tokens, passwords or similar sensitive information in the context whose value begins with\nthe string \"REDACTED\".\n",
                "role": "system"
            },
            "trigger_type": "add-system-message",
            "trigger_category": "info",
            "timestamp": "2025-02-07T10:08:11.381819Z"
        },
        {
            "id": "08e87d2a-1f6d-4671-8679-c882855db08d",
            "prompt_id": "a0f8428a-bcde-4aba-bf11-9ab2907ece96",
            "code_snippet": {
                "code": "import {\n  AddProviderEndpointRequest,\n  ProviderAuthType,\n  ProviderType,\n} from \"@/api/generated\";\nimport { ProviderDialog } from \"@/features/providers/components/provider-dialog\";\nimport { ProviderDialogFooter } from \"@/features/providers/components/provider-dialog-footer\";\nimport { ProviderForm } from \"@/features/providers/components/provider-form\";\nimport { useMutationCreateProvider } from \"@/features/providers/hooks/use-mutation-create-provider\";\nimport { DialogContent, Form } from \"@stacklok/ui-kit\";\nimport { useState } from \"react\";\n\nconst DEFAULT_PROVIDER_STATE = {\n  name: \"\",\n  description: \"\",\n  auth_type: ProviderAuthType.API_KEY,\n  provider_type: ProviderType.OPENAI,\n  endpoint: \"\",\n  api_key: \"\",\n};\n\nexport function RouteProviderCreate() {\n  const [provider, setProvider] = useState<AddProviderEndpointRequest>(\n    DEFAULT_PROVIDER_STATE\n  );\n  const { mutateAsync } = useMutationCreateProvider();\n\n  const handleSubmit = (event: React.FormEvent) => {\n    event.preventDefault();\n    mutateAsync({\n      body: provider,\n    });\n  };\n\n  const test = \"ghp_blabla\";\n\n  return (\n    <ProviderDialog title=\"Add Provider\">\n      <Form\n        onSubmit={handleSubmit}\n        validationBehavior=\"aria\"\n        className=\"overflow-auto\"\n      >\n        <DialogContent className=\"p-8\">\n          <ProviderForm provider={provider} setProvider={setProvider} />\n        </DialogContent>\n        <ProviderDialogFooter />\n      </Form>\n    </ProviderDialog>\n  );\n}\n\n",
                "language": "javascript",
                "filepath": "/Users/giuseppe/workspace/codegate-ui/src/routes/route-provider-create.tsx",
                "libraries": [],
                "file_extension": ".tsx"
            },
            "trigger_string": "**Secret Detected** 🔒\n- Service: Addresses\n- Type: Dogecoin\n- Key: (Unknown)\n- Line Number: 2\n- Context:\n```\nimport {\n  REDACTED<$b6O0+MrZn/nzdqlcRZJhcEoe/fRvR6F+ulR3K75ZRZud5VTnfXYmAH+eyMJ3TKrv5EpQn/ieHYHcIcUTg/EOsZdn>\n  ProviderAuthType,\n  ProviderType,\n} from \"@/api/generated\";\n```",
            "trigger_type": "codegate-secrets",
            "trigger_category": "critical",
            "timestamp": "2025-02-07T10:08:11.381365Z"
        },
        {
            "id": "19176c8d-fb65-4e64-926e-7a88af8afdd1",
            "prompt_id": "a0f8428a-bcde-4aba-bf11-9ab2907ece96",
            "code_snippet": {
                "code": "import {\n  AddProviderEndpointRequest,\n  ProviderAuthType,\n  ProviderType,\n} from \"@/api/generated\";\nimport { ProviderDialog } from \"@/features/providers/components/provider-dialog\";\nimport { ProviderDialogFooter } from \"@/features/providers/components/provider-dialog-footer\";\nimport { ProviderForm } from \"@/features/providers/components/provider-form\";\nimport { useMutationCreateProvider } from \"@/features/providers/hooks/use-mutation-create-provider\";\nimport { DialogContent, Form } from \"@stacklok/ui-kit\";\nimport { useState } from \"react\";\n\nconst DEFAULT_PROVIDER_STATE = {\n  name: \"\",\n  description: \"\",\n  auth_type: ProviderAuthType.API_KEY,\n  provider_type: ProviderType.OPENAI,\n  endpoint: \"\",\n  api_key: \"\",\n};\n\nexport function RouteProviderCreate() {\n  const [provider, setProvider] = useState<AddProviderEndpointRequest>(\n    DEFAULT_PROVIDER_STATE\n  );\n  const { mutateAsync } = useMutationCreateProvider();\n\n  const handleSubmit = (event: React.FormEvent) => {\n    event.preventDefault();\n    mutateAsync({\n      body: provider,\n    });\n  };\n\n  const test = \"ghp_blabla\";\n\n  return (\n    <ProviderDialog title=\"Add Provider\">\n      <Form\n        onSubmit={handleSubmit}\n        validationBehavior=\"aria\"\n        className=\"overflow-auto\"\n      >\n        <DialogContent className=\"p-8\">\n          <ProviderForm provider={provider} setProvider={setProvider} />\n        </DialogContent>\n        <ProviderDialogFooter />\n      </Form>\n    </ProviderDialog>\n  );\n}\n\n",
                "language": "javascript",
                "filepath": "/Users/giuseppe/workspace/codegate-ui/src/routes/route-provider-create.tsx",
                "libraries": [],
                "file_extension": ".tsx"
            },
            "trigger_string": "**Secret Detected** 🔒\n- Service: GitHub\n- Type: Access Token\n- Key: test\n- Line Number: 35\n- Context:\n```\n  };\n\n  const test = \"REDACTED<$lfuIOGdWRgs7Cp4aLU5DmFoGiN+YISYiILqM1c8NSVqnjKE1uDb+YBtMAOWC725Pd3j167UjreEuf4i13fdycmqwKFu9AemaVpmLp6cBSg==>\";\n\n  return (\n    <ProviderDialog title=\"Add Provider\">\n```",
            "trigger_type": "codegate-secrets",
            "trigger_category": "critical",
            "timestamp": "2025-02-07T10:08:11.381337Z"
        }
    ]
}

[peppescg]

In terms of experience I guess makes sense this conversation summary, it is showing good insights...I think we can add more, like the filename, we should be able to do that from the BE response

[peppescg]

I guess sometimes we are receiving too much noise from BE, in this case, without having a valid AI answer I would skip the entire conversation, cause it should basically a false positive. This should be done on BE side honestly.

[kantord]

the vim-like search is a really cool touch 😄 although I am sometimes annoyed when websites do this, since it kinda collides with the behavior of browser plugins that also do it.

I don't know if there is anything you can do with this information tho 😸

[kantord]

kinda random thought, and I think it was actually me who originally introduced it like this but.... 😄 is the next/prev button really a primary action? This becomes extra weird when you have both of them enabled:

maybe we could make them secondary buttons, but to keep them visible, we could add some icons?

[kantord]

I guess the "type" column could have an icon? 🤔

[kantord]

sth like this I guess

[kantord]

I think I prefer the summary part to be a bit more visually distinct from the summary part, especially to balance the slightly more "colorful"/visually interesting design of the conversation summaries. I believe that the conversation summary is actually usually the less interesting/important part of the page, so this attention-drawing power should be balanced IMO.

Here's a very rough suggestion. It's still ugly, but I think it explains my idea:

[kantord]

I think I prefer the summary part to be a bit more visually distinct from the summary part, especially to balance the slightly more "colorful"/visually interesting design of the conversation summaries. I believe that the conversation summary is actually usually the less interesting/important part of the page, so this attention-drawing power should be balanced IMO.

Here's a very rough suggestion. It's still ugly, but I think it explains my idea:

a slightly improved version of my suggestion

[kantord]

I was also thkining that this page could have a whatsapp-like wallpaper. This is an extremely ugly implementation of that idea, in 5 minutes with an AI generated image, but I guess it demonstrates what I mean

[kantord]

I was also thkining that this page could have a whatsapp-like wallpaper. This is an extremely ugly implementation of that idea, in 5 minutes with an AI generated image, but I guess it demonstrates what I mean

some minimal visual improvements to my previous screenshot

[stacklok-cloud-staging]

Minder Vulnerability Report ✅

Minder analyzed this PR and found it does not add any new vulnerable dependencies.

Vulnerability scan of a38d0dc9:

• 🐞 vulnerable packages: 0
• 🛠 fixes available for: 0

[stacklok-cloud-staging]

Dependency Information

Minder analyzed the dependencies introduced in this pull request and detected that some dependencies do not meet your security profile.

📦 Dependency: @types/json5

⚠️ Deprecated Package: This package is marked as archived. Proceed with caution!

Scoring details

Component	Score
Provenance	unknown

📦 Dependency: doctrine

⚠️ Archived Package: This package is marked as deprecated. Proceed with caution!

Archived packages are no longer updated or maintained. This can lead to security vulnerabilities and compatibility issues.

Scoring details

Component	Score
Package activity	6.6
Repository activity	4.2
User activity	8.9
Provenance	historical_provenance_match

Proof of Origin (Provenance)

This package can be linked back to its source code using a historical provenance map.

We were able to correlate a significant number of git tags and tagged releases in this package’s source code to versions of the published package. This mapping creates a strong link from the package back to its source code repository, verifying proof of origin.

Published package versions	33
Number of git tags or releases	30
Versions matched to tags or releases	29

[stacklok-cloud-staging]

Dependency Information

Minder analyzed the dependencies introduced in this pull request and detected that some dependencies do not meet your security profile.

📦 Dependency: @types/json5

⚠️ Deprecated Package: This package is marked as archived. Proceed with caution!

Scoring details

Component	Score
Provenance	unknown

📦 Dependency: doctrine

⚠️ Archived Package: This package is marked as deprecated. Proceed with caution!

Archived packages are no longer updated or maintained. This can lead to security vulnerabilities and compatibility issues.

Scoring details

Component	Score
Package activity	6.6
Repository activity	4.2
User activity	8.9
Provenance	historical_provenance_match

Proof of Origin (Provenance)

This package can be linked back to its source code using a historical provenance map.

We were able to correlate a significant number of git tags and tagged releases in this package’s source code to versions of the published package. This mapping creates a strong link from the package back to its source code repository, verifying proof of origin.

Published package versions	33
Number of git tags or releases	30
Versions matched to tags or releases	29

[stacklok-cloud-staging]

Dependency Information

Minder analyzed the dependencies introduced in this pull request and detected that some dependencies do not meet your security profile.

📦 Dependency: @types/json5

⚠️ Deprecated Package: This package is marked as archived. Proceed with caution!

Scoring details

Component	Score
Provenance	unknown

📦 Dependency: doctrine

⚠️ Archived Package: This package is marked as deprecated. Proceed with caution!

Archived packages are no longer updated or maintained. This can lead to security vulnerabilities and compatibility issues.

Scoring details

Component	Score
Package activity	6.6
Repository activity	4.2
User activity	8.9
Provenance	historical_provenance_match

Proof of Origin (Provenance)

This package can be linked back to its source code using a historical provenance map.

We were able to correlate a significant number of git tags and tagged releases in this package’s source code to versions of the published package. This mapping creates a strong link from the package back to its source code repository, verifying proof of origin.

Published package versions	33
Number of git tags or releases	30
Versions matched to tags or releases	29

not useful

[kantord]

nice

[coveralls]

Pull Request Test Coverage Report for Build 13264047211

Warning: This coverage report may be inaccurate.

This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.

• For more information on this, see Tracking coverage changes with pull request builds.
• To avoid this issue with future PRs, see these Recommended CI Configurations.
• For a quick fix, rebase this PR at GitHub. Your next report should be accurate.

Details

• 102 of 112 (91.07%) changed or added relevant lines in 34 files are covered.
• 13 unchanged lines in 2 files lost coverage.
• Overall coverage decreased (-0.5%) to 67.727%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/features/dashboard-messages/components/search-field-messages.tsx	4	5	80.0%
src/features/dashboard-messages/components/token-usage-icon.tsx	1	2	50.0%
src/lib/format-time.ts	4	5	80.0%
src/features/dashboard-messages/lib/get-conversation-title.ts	3	5	60.0%
src/features/dashboard-messages/lib/get-provider-string.ts	2	4	50.0%
src/features/dashboard-messages/components/table-messages.tsx	13	16	81.25%

Files with Coverage Reduction	New Missed Lines	%
src/components/Markdown.tsx	5	21.05%
src/lib/utils.ts	8	50.91%

Totals
Change from base Build 13262122865:	-0.5%
Covered Lines:	782
Relevant Lines:	1085

---

💛 - Coveralls