feat: app descriptions

[rohan-chaturvedi]

🔍 Overview

This PR introduces the ability for users to add detailed, markdown-supported descriptions to their Apps. This allows teams to document application requirements, setup instructions, useful commands, and environment variable context directly within the Phase Console.

💡 Proposed Changes

New Components

• MarkdownViewer: A centralized, reusable component for rendering Markdown.
  • Supports syntax highlighting for code blocks (using react-syntax-highlighter).
  • Auto-detects Light/Dark mode and switches code themes accordingly.
  • Includes a "Copy" button and language identifier for code snippets.
  • Standardized typography using JetBrains Mono for code.
• AppDescriptionViewer: A wrapper component that displays a truncated view of the description with a "Show More" modal for full-screen reading.
• AppDescriptionEditor: A specialized editor found in App Settings that supports "Write" and "Preview" modes.

Pages & Integrations

• App Settings: Integrated the AppDescriptionEditor to allow users to update the app description.
• App Dashboard: Added the AppDescription component to display the documentation at the top of the app view.

🖼️ Screenshots or Demo

🎯 Reviewer Focus

1. Editing Description:

   • Navigate to an App's Settings tab.
   • Use the new editor to add markdown content (headings, lists, code blocks).
   • Switch between "Write" and "Preview" tabs to verify rendering.

2. Viewing:

   • Go to the App Dashboard (main app view).
   • Verify the description appears.
   • Click "Expand" to open the modal view.

3. Code Blocks:

   • Add a code snippet (e.g., json ... ).
   • Verify syntax highlighting works.
   • Toggle the app theme (Light/Dark) and ensure code block colors adapt correctly.
   • Test the "Copy to Clipboard" button on the code block.

4. Deep Linking:

   • Open the Description modal.
   • Click the Edit button in the header.
     *... ```).
   • Verify syntax highlighting works.
   • Toggle the app theme (Light/Dark) and ensure code block colors adapt correctly.
   • Test the "Copy to Clipboard" button on the code block.

5. Deep Linking:

   • Open the Description modal.
   • Click the Edit button in the header.
   • Ensure you are redirected to Settings and the editor automatically opens in "Edit" mode.

💚 Did You...

• Ensure linting passes (code style checks)?
• Update dependencies and lockfiles (if required)
• Update migrations (if required)
• Regenerate graphql schema and types (if required)
• Verify the app builds locally?
• Manually test the changes on different browsers/devices?

[Copilot]

Pull request overview

This pull request adds markdown-supported app descriptions to the Phase Console, allowing teams to document application requirements, setup instructions, and environment variable context.

Changes:

• Added new React components for viewing and editing markdown descriptions with syntax highlighting
• Created backend mutation and database migration to store app descriptions
• Updated GraphQL schema and queries to include description field
• Integrated description viewer into app dashboard and settings pages

Reviewed changes

Copilot reviewed 22 out of 24 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
frontend/package.json	Added react-markdown and react-syntax-highlighter dependencies
frontend/package-lock.json	Updated lockfile with new dependencies including OpenTelemetry packages from posthog-js upgrade
frontend/components/common/MarkdownViewer.tsx	New reusable component for rendering markdown with code syntax highlighting
frontend/components/apps/AppDescriptionViewer.tsx	Component displaying truncated description with expandable modal view
frontend/app/[team]/apps/[app]/settings/_components/AppDescriptionEditor.tsx	Editor component with Write/Preview tabs for editing descriptions
frontend/app/[team]/apps/[app]/_components/AppDescription.tsx	Component integrating description viewer into app dashboard
backend/api/models.py	Added description TextField to App model
backend/api/migrations/0116_app_description.py	Database migration adding description column
backend/backend/graphene/mutations/app.py	New UpdateAppInfoMutation for updating app name and description
backend/backend/graphene/types.py	Added description field to AppType GraphQL type
frontend/graphql/queries/*.gql	Updated queries to fetch description field
frontend/apollo/graphql.ts & frontend/apollo/schema.graphql	Regenerated GraphQL types and schema

---

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

[Copilot]

Missing validation for description length. Unlike the name field which has a maximum length validation (64 characters), the description field has no length limit. This could potentially allow very large text inputs that may cause performance or storage issues. Consider adding a reasonable maximum length constraint (e.g., 10,000 or 50,000 characters) to prevent abuse.

Suggested change

	if description is not None:
	if description is not None:
	# Validate description length
	if len(description) > 10000:
	raise GraphQLError("App description cannot exceed 10000 characters")

[Copilot]

Unused import detected. The app import from 'next/app' is not used anywhere in this file and should be removed.

Suggested change

import app from 'next/app'

[Copilot]

The any type is used for the props parameter. Consider using proper typing for the code component props. React-markdown provides types for component props that should be used instead of any to improve type safety.

Suggested change

	interface MarkdownViewerProps {
	text: string
	className?: string
	}
	export const MarkdownViewer = ({ text, className }: MarkdownViewerProps) => {
	const { theme } = useContext(ThemeContext)
	const components = {
	code(props: any) {
	import type { Components } from 'react-markdown'
	import type { CodeComponent } from 'react-markdown/lib/ast-to-react'
	interface MarkdownViewerProps {
	text: string
	className?: string
	}
	type CodeProps = Parameters<CodeComponent>[0]
	export const MarkdownViewer = ({ text, className }: MarkdownViewerProps) => {
	const { theme } = useContext(ThemeContext)
	const components: Components = {
	code(props: CodeProps) {

[Copilot]

The non-null assertion operator ! is used here without prior validation. While the GraphQL schema indicates serviceAccounts can contain nullable items (Array<Maybe<ServiceAccountType>>), the code assumes they're non-null. Consider adding a filter to remove null values or handle the potential null case explicitly.