Skip to content

Redesign session detail view #1327

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
annavik merged 11 commits into from
May 29, 2026
Merged

Redesign session detail view #1327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
1410edb
layout: setup new page for session details
annavik May 27, 2026
3f33386
layout: render capture and include capture navigation and star button
annavik May 27, 2026
4f2be11
layout: render activity plot and timeline slider + cleanup
annavik May 28, 2026
1c18ca6
layout: include capture info
annavik May 29, 2026
16c6d59
layout: setup view settings
annavik May 29, 2026
a4f3ec4
layout: setup processing popover
annavik May 29, 2026
82c2bf5
chore: cleanup code
annavik May 29, 2026
24bffc5
layout: adjust for small screens
annavik May 29, 2026
e8c848e
feat: add new translation keys
annavik May 29, 2026
5333611
feat: add snap to detections controls
annavik May 29, 2026
1a9ffeb
fix: address PR comments
annavik May 29, 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
9 changes: 1 addition & 8 deletions ui/src/components/filtering/default-filter-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,20 +49,13 @@ export const DefaultFiltersControl = ({ field }: { field: string }) => {
}

export const DefaultFiltersTooltip = ({
className,
project,
}: {
className?: string
project: ProjectDetails
}) => (
<Popover.Root>
<Popover.Trigger asChild>
<Button
aria-label={translate(STRING.INFO)}
className={className}
size="icon"
variant="ghost"
>
<Button aria-label={translate(STRING.INFO)} size="icon" variant="ghost">
<InfoIcon className="w-4 h-4" />
</Button>
</Popover.Trigger>
Expand Down
16 changes: 0 additions & 16 deletions ui/src/nova-ui-kit/components/checkbox/checkbox.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,6 @@
border: 1px solid var(--color-border);
flex-shrink: 0;

&.neutral {
border-color: var(--color-neutral-400);
}

&:focus-visible {
box-shadow: 0 0 0 2px var(--color-generic-black);
}
Expand Down Expand Up @@ -50,18 +46,6 @@
color: var(--color-muted-foreground);
margin-left: 6px;

&.success {
color: var(--color-success);
}

&.alert {
color: var(--color-accent);
}

&.neutral {
color: var(--color-generic-white);
}

&.disabled {
opacity: 0.5;
}
Expand Down
16 changes: 1 addition & 15 deletions ui/src/nova-ui-kit/components/checkbox/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,11 @@ import classNames from 'classnames'
import { CheckIcon, MinusIcon } from 'lucide-react'
import styles from './checkbox.module.scss'

export enum CheckboxTheme {
Default = 'default',
Success = 'success',
Alert = 'alert',
Neutral = 'neutral',
}

interface CheckboxProps {
checked: boolean | 'indeterminate'
disabled?: boolean
id?: string
label?: string
theme?: CheckboxTheme
onCheckedChange?: (checked: boolean) => void
}

Expand All @@ -24,15 +16,12 @@ export const Checkbox = ({
disabled,
id,
label,
theme = CheckboxTheme.Default,
onCheckedChange,
}: CheckboxProps) => (
<div className={styles.wrapper}>
<_Checkbox.Root
checked={checked}
className={classNames(styles.checkboxRoot, {
[styles.neutral]: theme === CheckboxTheme.Neutral,
})}
className={styles.checkboxRoot}
disabled={disabled}
id={id}
onCheckedChange={onCheckedChange}
Expand All @@ -48,9 +37,6 @@ export const Checkbox = ({
<label
htmlFor={id}
className={classNames(styles.label, {
[styles.success]: theme === CheckboxTheme.Success,
[styles.alert]: theme === CheckboxTheme.Alert,
[styles.neutral]: theme === CheckboxTheme.Neutral,
[styles.disabled]: disabled,
})}
>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/nova-ui-kit/components/info-block/info-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export const InfoBlockFieldValue = ({
</span>
</Link>
) : (
<span className="body-base">{valueLabel}</span>
<span className="body-base break-all">{valueLabel}</span>

@coderabbitai coderabbitai Bot May 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Prefer break-words/overflow-wrap:anywhere here.

break-all will split filenames and paths in the middle of tokens, which makes the new capture metadata panel much harder to scan. A softer wrap mode still prevents overflow without mangling the text.

Suggested fix 
-        <span className="body-base break-all">{valueLabel}</span>
+        <span className="body-base break-words">{valueLabel}</span>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<span className="body-base break-all">{valueLabel}</span>
<span className="body-base break-words">{valueLabel}</span>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/src/nova-ui-kit/components/info-block/info-block.tsx` at line 65, Replace
the hard wrap class on the value label span so tokens aren't split mid-word: in
the InfoBlock component update the span rendering {valueLabel} (the <span
className="body-base break-all"> element) to use a softer wrap, e.g. replace
"break-all" with "break-words" or add/replace with CSS that applies
"overflow-wrap: anywhere" (or "overflow-wrap: break-word") so long paths and
filenames wrap without being mangled.

)}
</>
)
Expand Down
3 changes: 0 additions & 3 deletions ui/src/nova-ui-kit/components/slider/dial.svg
View file
Open in desktop

This file was deleted.

46 changes: 0 additions & 46 deletions ui/src/nova-ui-kit/components/slider/timestamp-slider.tsx
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions ui/src/nova-ui-kit/components/status/status-marker/status-marker.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.statusMarker {
width: 12px;
height: 12px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--color-border);
}
20 changes: 0 additions & 20 deletions ui/src/nova-ui-kit/components/table/column-settings/column-settings.module.scss
View file
Open in desktop

This file was deleted.

45 changes: 21 additions & 24 deletions ui/src/nova-ui-kit/components/table/column-settings/column-settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Columns3CogIcon } from 'lucide-react'
import { BasicTooltip, Button, Checkbox, Popover } from 'nova-ui-kit'
import { STRING, translate } from 'utils/language'
import styles from './column-settings.module.scss'

interface ColumnSettingsProps {
columns: { id: string; name: string }[]
Expand All @@ -27,29 +26,27 @@ export const ColumnSettings = ({
</Button>
</Popover.Trigger>
</BasicTooltip>
<Popover.Content className={styles.wrapper} align="end" side="bottom">
<div>
<span className={styles.description}>
{translate(STRING.TABLE_COLUMNS)}
</span>
<div className={styles.settings}>
{columns.map((column) =>
column.name.length ? (
<Checkbox
key={column.id}
checked={columnSettings[column.id]}
id={column.id}
label={column.name}
onCheckedChange={(checked) => {
onColumnSettingsChange({
...columnSettings,
[column.id]: checked,
})
}}
/>
) : null
)}
</div>
<Popover.Content className="grid gap-4" align="end" side="bottom">
<span className="body-base font-semibold text-muted-foreground">
{translate(STRING.TABLE_COLUMNS)}
</span>
<div className="grid gap-2">
{columns.map((column) =>
column.name.length ? (
<Checkbox
key={column.id}
checked={columnSettings[column.id]}
id={column.id}
label={column.name}
onCheckedChange={(checked) => {
onColumnSettingsChange({
...columnSettings,
[column.id]: checked,
})
}}
/>
) : null
)}
</div>
</Popover.Content>
</Popover.Root>
Expand Down
8 changes: 5 additions & 3 deletions ui/src/nova-ui-kit/components/tabs/tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,15 @@ const Trigger = ({ value, label }: { value: string; label: string }) => (
)

const Content = ({
value,
children,
className,
value,
}: {
value: string
children: ReactNode
className?: string
value: string
}) => (
<Tabs.Content value={value} tabIndex={-1}>
<Tabs.Content className={className} tabIndex={-1} value={value}>
{children}
</Tabs.Content>
)
Expand Down
26 changes: 13 additions & 13 deletions ui/src/nova-ui-kit/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,53 +41,53 @@
}

.heading-large {
@include heading-large();
@include heading-large;
}

.heading-medium {
@include heading-medium();
@include heading-medium;
}

.heading-small {
@include heading-small();
@include heading-small;
}

.body-xlarge {
@include body-xlarge();
@include body-xlarge;
}

.body-large {
@include body-large();
@include body-large;
}

.body-base {
@include body-base();
@include body-base;
}

.body-small {
@include body-small();
@include body-small;
}

.body-overline {
@include body-overline();
@include body-overline;
}

.body-overline-small {
@include body-overline-small();
@include body-overline-small;
}

.body-overline-xsmall {
@include body-overline-xsmall();
@include body-overline-xsmall;
}

.body-number {
@include body-number();
@include body-number;
}

.body-number-small {
@include body-number-small();
@include body-number-small;
}

.bubble-label {
@include body-number-small();
@include bubble-label;
}
2 changes: 1 addition & 1 deletion ui/src/nova-ui-kit/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export { Button } from './components/button/index'
export { SaveButton } from './components/button/save-button'
export { Calendar } from './components/calendar'
export { Card, CardSize } from './components/card/card'
export { Checkbox, CheckboxTheme } from './components/checkbox/checkbox'
export { Checkbox } from './components/checkbox/checkbox'
export { CodeBlock } from './components/code-block'
export * as Collapsible from './components/collapsible'
export { ComboBox } from './components/combo-box/combo-box'
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/deployments/deployment-columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const columns = ({
},
{
id: 'status',
name: 'Latest job status',
name: translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS),
tooltip: translate(STRING.TOOLTIP_LATEST_JOB_STATUS, {
type: translate(STRING.ENTITY_TYPE_DEPLOYMENT),
}),
Expand Down
2 changes: 1 addition & 1 deletion ui/src/pages/project/capture-sets/capture-set-columns.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const columns = ({
},
{
id: 'status',
name: 'Latest job status',
name: translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS),
tooltip: translate(STRING.TOOLTIP_LATEST_JOB_STATUS, {
type: translate(STRING.ENTITY_TYPE_CAPTURE_SET),
}),
Expand Down
Loading