Skip to content

Enhance file review status UI, improve error handling, and strengthen test coverage #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devarshishimpi merged 8 commits into from
May 25, 2026
Merged

Enhance file review status UI, improve error handling, and strengthen test coverage #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d0c2ee9
add: improve job id status ui
devarshishimpi May 23, 2026
fff9b05
add: improve sonner and job status ui
devarshishimpi May 23, 2026
80de33b
refactor: improve model error handling and webhook routing
devarshishimpi May 24, 2026
92507cc
add: bump model duration for slow requests
devarshishimpi May 24, 2026
fb1ac18
fix: synthesize inconclusive reviews for cf reasoning-only responses …
devarshishimpi May 24, 2026
09ac6bf
add: improve error reporting and better date parsing and null safety …
devarshishimpi May 24, 2026
dfc6372
add: optimize job polling with etag caching, adaptive delays, and str…
devarshishimpi May 24, 2026
2b2df7d
add: improve model resilience and increase token limits
devarshishimpi May 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
772 changes: 413 additions & 359 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

200 changes: 194 additions & 6 deletions src/client/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
--success: oklch(64% 0.24 115);
--success-bg: oklch(98% 0.04 115);
--success-border: oklch(85% 0.15 115);
--warning: oklch(82% 0.18 65);
--warning: oklch(56% 0.18 65);
--warning-bg: oklch(98% 0.04 65);
--warning-border: oklch(90% 0.12 65);
--danger: oklch(62% 0.22 25);
Expand Down Expand Up @@ -550,9 +550,9 @@
}

@utility badge-warning {
background-color: #fffbeb;
color: #d97706;
border-color: #fcd34d;
background-color: var(--warning-bg);
color: var(--warning);
border-color: var(--warning-border);

.dark & {
background-color: var(--warning-bg);
Expand Down Expand Up @@ -599,14 +599,14 @@

&.pending { background: color-mix(in oklch, var(--muted-foreground) 35%, transparent); }
&.running {
Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Removal of visual feedback animations

Animations (pulse-ring) were removed from the &.running state (line 602) and the .pulsing-dot utility (line 609). If these animations were the primary indicator of an active background process, their removal might lead to a perceived lack of responsiveness in the UI, as the user no longer receives a dynamic visual cue that a task is currently running.

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Removal of visual feedback animations

Animations (pulse-ring) were removed from the &.running state (line 602) and the .pulsing-dot utility (line 609). If these animations were the primary indicator of an active background process, their removal might lead to a perceived lack of responsiveness in the UI, as the user no longer receives a dynamic visual cue that a task is currently running.

@apply bg-info shadow-[0_0_0_3px_color-mix(in_oklch,var(--info)_25%,transparent)] animate-[pulse-ring_1.5s_var(--ease-out-quart)_infinite];
@apply bg-info;
}
&.done { @apply bg-success; }
&.failed { @apply bg-danger; }
}

@utility pulsing-dot {
@apply w-[7px] h-[7px] rounded-full bg-info inline-block animate-[pulse-ring_1.5s_var(--ease-out-quart)_infinite];
@apply w-[7px] h-[7px] rounded-full bg-info inline-block;
}

/* ─────────────────────────────────────────────────────
Expand Down Expand Up @@ -865,3 +865,191 @@
& a { @apply text-primary underline underline-offset-2; }
& hr { @apply border-border my-[1.5em]; }
}

/* ─────────────────────────────────────────────────────
Sonner Toast — Premium overrides
───────────────────────────────────────────────────── */
Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Excessive use of !important

The Sonner Toast overrides (lines 874-1055) utilize !important on nearly every property. This indicates a specificity war with the third-party library and creates a maintenance burden, as it prevents standard CSS cascading and makes future adjustments extremely difficult. It is recommended to increase selector specificity (e.g., by using a more specific parent class) instead of relying on !important.

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Excessive use of !important

The Sonner Toast overrides (lines 874-1055) utilize !important on nearly every property. This indicates a specificity war with the third-party library and creates a maintenance burden, as it prevents standard CSS cascading and makes future adjustments extremely difficult. It is recommended to increase selector specificity (e.g., by using a more specific parent class) instead of relying on !important.

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Excessive use of !important

The Sonner Toast overrides (lines 874-1055) utilize !important on nearly every property. This indicates a specificity war with the third-party library and creates a maintenance burden, as it prevents standard CSS cascading and makes future adjustments extremely difficult. It is recommended to increase selector specificity (e.g., by using a more specific parent class) instead of relying on !important.


Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Excessive use of !important modifiers

The new toast overrides (lines 875-1055) use !important on almost every single property. This is a significant maintainability issue and indicates a specificity war with the base library. Overusing !important breaks the CSS cascade, making it extremely difficult to apply conditional styles or perform future refinements without adding even more specific selectors or more !important flags.

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Excessive use of !important modifiers

The new toast overrides (lines 875-1055) use !important on almost every single property. This is a significant maintainability issue and indicates a specificity war with the base library. Overusing !important breaks the CSS cascade, making it extremely difficult to apply conditional styles or perform future refinements without adding even more specific selectors or more !important flags.

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Excessive use of !important

Almost every CSS property in the new Sonner Toast overrides (lines 875-1055) uses !important. This is a critical maintainability anti-pattern that creates specificity wars and makes future modifications extremely difficult. Instead of forcing styles with !important, you should increase selector specificity or utilize the library's intended theme configuration API.

Comment thread
devarshishimpi marked this conversation as resolved.
/* ── Outer list / viewport ───────────────────────── */
Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Non-responsive toast width

The --width variable is hardcoded to 22rem (approx. 352px) with !important. On small mobile devices (e.g., 320px wide screens), this will cause the toast to overflow the viewport. This should be changed to a max-width or a relative unit (e.g., calc(100vw - 2rem)) to ensure responsiveness.

Suggested change
/* ── Outer list / viewport ───────────────────────── */
--width: min(22rem, calc(100vw - 2rem)) !important;

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Non-responsive toast width

The --width variable is hardcoded to 22rem (approx. 352px) with !important. On small mobile devices (e.g., 320px wide screens), this will cause the toast to overflow the viewport. This should be changed to a max-width or a relative unit (e.g., calc(100vw - 2rem)) to ensure responsiveness.

Suggested change
/* ── Outer list / viewport ───────────────────────── */
--width: min(22rem, calc(100vw - 2rem)) !important;

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Non-responsive toast width

The --width variable is hardcoded to 22rem (approx. 352px) with !important. On small mobile devices (e.g., 320px wide screens), this will cause the toast to overflow the viewport. This should be changed to a max-width or a relative unit (e.g., calc(100vw - 2rem)) to ensure responsiveness.

Suggested change
/* ── Outer list / viewport ───────────────────────── */
--width: min(22rem, calc(100vw - 2rem)) !important;

[data-sonner-toaster] {
--offset: 1.25rem !important;
--width: min(22rem, calc(100vw - 2rem)) !important;
font-family: var(--font-sans) !important;
}

/* ── Base toast shell ─────────────────────────────── */
.codra-toast {
Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Hardcoded magic numbers for layout and typography

Values such as 0.8125rem, 0.625rem, and 1.45 are used repeatedly as magic numbers for font sizes, padding, and line heights. These should be mapped to existing design tokens or variables to maintain visual consistency across the UI.

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Hardcoded magic numbers for layout and typography

Values such as 0.8125rem, 0.625rem, and 1.45 are used repeatedly as magic numbers for font sizes, padding, and line heights. These should be mapped to existing design tokens or variables to maintain visual consistency across the UI.

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Hardcoded magic numbers for layout and typography

Values such as 0.8125rem, 0.625rem, and 1.45 are used repeatedly as magic numbers for font sizes, padding, and line heights. These should be mapped to existing design tokens or variables to maintain visual consistency across the UI.

display: flex !important;
align-items: flex-start !important;
gap: 0.625rem !important;
padding: 0.75rem 0.875rem !important;
border-radius: 0.625rem !important;
border-width: 1px !important;
border-style: solid !important;
font-family: var(--font-sans) !important;
font-size: 0.8125rem !important;
line-height: 1.45 !important;
box-shadow:
0 4px 16px oklch(0% 0 0 / 0.10),
0 1px 4px oklch(0% 0 0 / 0.06),
inset 0 1px 0 oklch(100% 0 0 / 0.05) !important;
Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Hardcoded colors instead of design tokens

The toast overrides use hardcoded oklch() values for backgrounds, borders, and text (e.g., lines 898, 969, 992, 1033). To maintain visual consistency and enable easier theme updates, these should reference the existing CSS variables defined at the top of the file (like --success, --warning, --danger) or new design tokens. Using literals throughout the component styles creates a fragmented design system.

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Hardcoded colors instead of design tokens

The toast overrides use hardcoded oklch() values for backgrounds, borders, and text (e.g., lines 898, 969, 992, 1033). To maintain visual consistency and enable easier theme updates, these should reference the existing CSS variables defined at the top of the file (like --success, --warning, --danger) or new design tokens. Using literals throughout the component styles creates a fragmented design system.

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Hardcoded color values instead of design tokens

The toast styles use hardcoded oklch() values for backgrounds, borders, and text throughout the various states (success, error, warning, info). Since the project already uses CSS variables for these semantic colors (lines 55-61), these should be referenced (e.g., var(--success-bg)) to ensure consistency and allow for global theme changes without manually updating dozens of lines.

Suggested change
inset 0 1px 0 oklch(100% 0 0 / 0.05) !important;
background: var(--success-bg) !important;

Comment thread
devarshishimpi marked this conversation as resolved.

/* light defaults (overridden per-variant below) */
background: oklch(99.5% 0.004 115) !important;
border-color: oklch(88% 0.008 115) !important;
color: oklch(15% 0.02 115) !important;

/* smooth entrance */
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dark .codra-toast {
background: oklch(13% 0.018 115) !important;
border-color: oklch(22% 0.022 115) !important;
color: oklch(94% 0.006 115) !important;
box-shadow:
0 6px 24px oklch(0% 0 0 / 0.5),
0 1px 6px oklch(0% 0 0 / 0.3),
inset 0 1px 0 oklch(100% 0 0 / 0.04) !important;
}

/* ── Title ────────────────────────────────────────── */
.codra-toast-title {
font-size: 0.8125rem !important;
font-weight: 600 !important;
letter-spacing: 0.005em !important;
line-height: 1.35 !important;
}

/* ── Description ──────────────────────────────────── */
.codra-toast-description {
font-size: 0.74rem !important;
font-weight: 400 !important;
opacity: 0.72 !important;
margin-top: 0.15rem !important;
line-height: 1.5 !important;
}

/* ── Icon wrapper ─────────────────────────────────── */
.codra-toast-icon {
margin-top: 0.05rem !important;
flex-shrink: 0 !important;
}

/* ── Close button ─────────────────────────────────── */
.codra-toast-close {
top: 0.55rem !important;
right: 0.55rem !important;
width: 1.25rem !important;
height: 1.25rem !important;
border-radius: 0.3rem !important;
background: oklch(88% 0.006 115 / 0.6) !important;
border: 1px solid oklch(82% 0.008 115 / 0.8) !important;
color: oklch(40% 0.015 115) !important;
transition: background 150ms, opacity 150ms !important;
}

.dark .codra-toast-close {
background: oklch(22% 0.018 115 / 0.7) !important;
border-color: oklch(30% 0.02 115 / 0.8) !important;
color: oklch(65% 0.012 115) !important;
}

.codra-toast-close:hover {
background: oklch(82% 0.010 115) !important;
opacity: 1 !important;
}

.dark .codra-toast-close:hover {
background: oklch(28% 0.022 115) !important;
}

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Hardcoded colors instead of design tokens

The toast variants (lines 969-1055) use hardcoded oklch values that closely mirror but do not exactly match the CSS variables defined at the top of the file (e.g., --success, --warning). This fragments the design system and makes global theme updates tedious and error-prone.

Suggested change
background: var(--success-bg) !important;

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Hardcoded colors instead of design tokens

The toast variants (lines 969-1055) use hardcoded oklch values that closely mirror but do not exactly match the CSS variables defined at the top of the file (e.g., --success, --warning). This fragments the design system and makes global theme updates tedious and error-prone.

Suggested change
background: var(--success-bg) !important;

Copy link
Copy Markdown

@codra-app-personal codra-app-personal Bot May 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Hardcoded colors instead of design tokens

The toast variants (lines 969-1055) use hardcoded oklch values that closely mirror but do not exactly match the CSS variables defined at the top of the file (e.g., --success, --warning). This fragments the design system and makes global theme updates tedious and error-prone.

Suggested change
background: var(--success-bg) !important;

/* ── SUCCESS ─────────────────────────────────────── */
.codra-toast-success {
background: oklch(98.5% 0.045 115) !important;
border-color: oklch(82% 0.16 115) !important;
color: oklch(28% 0.10 115) !important;
}

.dark .codra-toast-success {
background: oklch(16% 0.08 115) !important;
border-color: oklch(32% 0.14 115) !important;
color: oklch(90% 0.18 115) !important;
}

.codra-toast-success .codra-toast-description {
color: oklch(38% 0.10 115) !important;
opacity: 0.85 !important;
}

.dark .codra-toast-success .codra-toast-description {
color: oklch(72% 0.12 115) !important;
opacity: 0.9 !important;
}

/* ── ERROR ───────────────────────────────────────── */
.codra-toast-error {
background: oklch(98.5% 0.03 25) !important;
border-color: oklch(80% 0.14 25) !important;
color: oklch(32% 0.14 25) !important;
}

.dark .codra-toast-error {
background: oklch(15% 0.07 25) !important;
border-color: oklch(35% 0.14 25) !important;
color: oklch(85% 0.08 25) !important;
}

.codra-toast-error .codra-toast-description {
color: oklch(42% 0.12 25) !important;
opacity: 0.85 !important;
}

.dark .codra-toast-error .codra-toast-description {
color: oklch(68% 0.10 25) !important;
opacity: 0.9 !important;
}

/* ── LOADING ─────────────────────────────────────── */
.codra-toast-loading {
background: oklch(98% 0.004 115) !important;
border-color: oklch(86% 0.010 115) !important;
color: oklch(20% 0.020 115) !important;
}

.dark .codra-toast-loading {
background: oklch(14% 0.020 115) !important;
border-color: oklch(24% 0.025 115) !important;
color: oklch(88% 0.008 115) !important;
}

/* spinner inherits accent color */
.codra-toast-loader svg {
color: var(--primary) !important;
}

/* ── WARNING ─────────────────────────────────────── */
.codra-toast-warning {
background: oklch(98.5% 0.04 65) !important;
border-color: oklch(82% 0.13 65) !important;
color: oklch(35% 0.12 65) !important;
}

.dark .codra-toast-warning {
background: oklch(16% 0.08 65) !important;
border-color: oklch(35% 0.14 65) !important;
color: oklch(82% 0.14 65) !important;
}

/* ── INFO ────────────────────────────────────────── */
.codra-toast-info {
background: oklch(98.5% 0.03 250) !important;
border-color: oklch(80% 0.12 250) !important;
color: oklch(30% 0.12 250) !important;
}

.dark .codra-toast-info {
background: oklch(15% 0.07 250) !important;
border-color: oklch(33% 0.12 250) !important;
color: oklch(80% 0.12 250) !important;
}
8 changes: 4 additions & 4 deletions src/client/components/features/dashboard/updates-email-prompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,12 @@ export function UpdatesEmailPrompt() {
try {
const response = await api.subscribeUpdates(email);
setStatus(response);
toast.success('Updates email saved', {
description: 'You will only get important Codra release and security notes.',
toast.success('You’re subscribed', {
description: 'We’ll only reach out for important releases and security notices.',
});
} catch (error) {
toast.error('Could not save updates email', {
description: error instanceof Error ? error.message : 'Please try again.',
toast.error('Subscription failed', {
description: 'We couldn’t save your email. Please check it and try again.',
});
} finally {
setSubmitting(false);
Expand Down
1 change: 0 additions & 1 deletion src/client/components/features/job-detail/job-findings-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ export function JobFindingsList({ job }: JobFindingsListProps) {
<div className="flex items-center gap-2.5">
<FileText size={14} strokeWidth={1.75} className="text-primary" />
<h2 className="text-sm font-semibold text-foreground">Findings</h2>
{job.status === 'running' && <span className="pulsing-dot" />}
</div>
<div className="flex items-center gap-2">
<span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground/60">View by</span>
Expand Down
Loading