feat: refactored timeline dialog visuals and update keyboard shortcuts
This commit is contained in:
Bohdan Triapitsyn
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
- Added timeline dialog (`/timeline` command or Cmd/Ctrl+T) for navigating, reverting, and forking from any point in the conversation (thanks to @aptdnfapt).
|
||||
- Added `/undo` and `/redo` commands for reverting and restoring messages in a session (thanks to @aptdnfapt).
|
||||
- Added fork button on user messages to create a new session from any point (thanks to @aptdnfapt).
|
||||
- Desktop app: keyboard shortcuts now use Cmd on macOS and Ctrl on web/other platforms (thanks to @sakhnyuk).
|
||||
- Migrated to OpenCode SDK v2 with improved API types and streaming.
|
||||
|
||||
## [1.4.1] - 2026-01-02
|
||||
|
||||
- Added the ability to select the same model multiple times in multi-agent runs for response comparison.
|
||||
|
||||
@@ -11,7 +11,8 @@ import { Input } from '@/components/ui/input';
|
||||
import { useSessionStore } from '@/stores/useSessionStore';
|
||||
import { useMessageStore } from '@/stores/messageStore';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { RiLoader4Line, RiSearchLine, RiTimeLine, RiGitBranchLine } from '@remixicon/react';
|
||||
import { RiLoader4Line, RiSearchLine, RiTimeLine, RiGitBranchLine, RiArrowGoBackLine } from '@remixicon/react';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import type { Part } from '@opencode-ai/sdk/v2';
|
||||
|
||||
interface TimelineDialogProps {
|
||||
@@ -93,85 +94,89 @@ export const TimelineDialog: React.FC<TimelineDialogProps> = ({ open, onOpenChan
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<RiSearchLine className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="relative mt-2">
|
||||
<RiSearchLine className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search messages..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="flex-1"
|
||||
className="pl-9 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto space-y-2">
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{filteredMessages.length === 0 ? (
|
||||
<div className="text-center text-muted-foreground py-8">
|
||||
{searchQuery ? 'No messages found' : 'No messages in this session yet'}
|
||||
</div>
|
||||
) : (
|
||||
filteredMessages.map((message) => {
|
||||
filteredMessages.map((message, index) => {
|
||||
const preview = getMessagePreview(message.parts);
|
||||
const timestamp = message.info.time.created;
|
||||
const relativeTime = formatRelativeTime(timestamp);
|
||||
const messageNumber = userMessages.length - userMessages.indexOf(message);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={message.info.id}
|
||||
className={cn(
|
||||
"group flex items-start gap-3 p-3 rounded-lg border transition-all",
|
||||
"hover:border-primary/50 hover:bg-muted/30"
|
||||
)}
|
||||
className="group flex items-center gap-2 py-1.5 hover:bg-muted/30 rounded transition-colors cursor-pointer"
|
||||
onClick={() => {
|
||||
onScrollToMessage?.(message.info.id);
|
||||
onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="typography-meta text-muted-foreground">
|
||||
Message {userMessages.length - userMessages.indexOf(message)}
|
||||
</span>
|
||||
<span className="typography-meta text-muted-foreground">
|
||||
•
|
||||
</span>
|
||||
<span className="typography-meta text-muted-foreground">
|
||||
{relativeTime}
|
||||
</span>
|
||||
<span className="typography-meta text-muted-foreground w-5 text-right flex-shrink-0">
|
||||
{messageNumber}.
|
||||
</span>
|
||||
<p className="flex-1 min-w-0 typography-small text-foreground truncate ml-0.5">
|
||||
{preview || '[No text content]'}
|
||||
{preview && preview.length >= 80 && '…'}
|
||||
</p>
|
||||
|
||||
<div className="flex-shrink-0 h-5 flex items-center mr-2">
|
||||
<span className="typography-meta text-muted-foreground whitespace-nowrap group-hover:hidden">
|
||||
{relativeTime}
|
||||
</span>
|
||||
|
||||
<div className="hidden group-hover:flex gap-1">
|
||||
<Tooltip delayDuration={1000}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="h-5 w-5 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors"
|
||||
onClick={async (e) => {
|
||||
e.stopPropagation();
|
||||
await revertToMessage(currentSessionId, message.info.id);
|
||||
onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
<RiArrowGoBackLine className="h-4 w-4" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent sideOffset={6}>Revert from here</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip delayDuration={1000}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="h-5 w-5 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleFork(message.info.id);
|
||||
}}
|
||||
disabled={forkingMessageId === message.info.id}
|
||||
>
|
||||
{forkingMessageId === message.info.id ? (
|
||||
<RiLoader4Line className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<RiGitBranchLine className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent sideOffset={6}>Fork from here</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<p className="typography-small text-foreground mt-1 line-clamp-2">
|
||||
{preview || '[No text content]'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
onScrollToMessage?.(message.info.id);
|
||||
onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
Go here
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="default"
|
||||
onClick={async () => {
|
||||
await revertToMessage(currentSessionId, message.info.id);
|
||||
onOpenChange(false);
|
||||
}}
|
||||
>
|
||||
Revert
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="secondary"
|
||||
onClick={() => handleFork(message.info.id)}
|
||||
disabled={forkingMessageId === message.info.id}
|
||||
>
|
||||
{forkingMessageId === message.info.id ? (
|
||||
<RiLoader4Line className="h-4 w-4 animate-spin" />
|
||||
) : 'Fork'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -180,13 +185,18 @@ export const TimelineDialog: React.FC<TimelineDialogProps> = ({ open, onOpenChan
|
||||
</div>
|
||||
|
||||
<div className="mt-4 p-3 bg-muted/30 rounded-lg">
|
||||
<div className="flex items-start gap-2 typography-meta text-muted-foreground">
|
||||
<RiGitBranchLine className="h-4 w-4 mt-0.5" />
|
||||
<div>
|
||||
<p className="font-medium mb-1">Actions</p>
|
||||
<p>• <strong>Go here</strong> - Scroll to this message in the conversation</p>
|
||||
<p>• <strong>Revert</strong> - Undo to this point (message text will populate input)</p>
|
||||
<p>• <strong>Fork</strong> - Create a new session starting from here</p>
|
||||
<p className="typography-meta text-muted-foreground font-medium mb-2">Actions</p>
|
||||
<div className="flex flex-col gap-1.5 typography-meta text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>Click on a message to scroll to it in the conversation</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<RiArrowGoBackLine className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Undo to this point (message text will populate input)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<RiGitBranchLine className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Create a new session starting from here</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,7 @@ import { useSessionStore } from '@/stores/useSessionStore';
|
||||
import { useDirectoryStore } from '@/stores/useDirectoryStore';
|
||||
import { useThemeSystem } from '@/contexts/useThemeSystem';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { RiAddLine, RiChatAi3Line, RiCheckLine, RiCodeLine, RiComputerLine, RiGitBranchLine, RiLayoutLeftLine, RiMoonLine, RiQuestionLine, RiRestartLine, RiSettings3Line, RiSunLine, RiTerminalBoxLine } from '@remixicon/react';
|
||||
import { RiAddLine, RiChatAi3Line, RiCheckLine, RiCodeLine, RiComputerLine, RiGitBranchLine, RiLayoutLeftLine, RiMoonLine, RiQuestionLine, RiRestartLine, RiSettings3Line, RiSunLine, RiTerminalBoxLine, RiTimeLine } from '@remixicon/react';
|
||||
import { reloadOpenCodeConfiguration } from '@/stores/useAgentsStore';
|
||||
import { getModifierLabel } from '@/lib/utils';
|
||||
|
||||
@@ -27,6 +27,7 @@ export const CommandPalette: React.FC = () => {
|
||||
setActiveMainTab,
|
||||
setSettingsDialogOpen,
|
||||
setSessionSwitcherOpen,
|
||||
setTimelineDialogOpen,
|
||||
toggleSidebar,
|
||||
} = useUIStore();
|
||||
|
||||
@@ -107,6 +108,11 @@ export const CommandPalette: React.FC = () => {
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const handleOpenTimeline = () => {
|
||||
setTimelineDialogOpen(true);
|
||||
handleClose();
|
||||
};
|
||||
|
||||
const directorySessions = getSessionsByDirectory(currentDirectory ?? '');
|
||||
const currentSessions = React.useMemo(() => {
|
||||
return directorySessions.slice(0, 5);
|
||||
@@ -142,16 +148,21 @@ export const CommandPalette: React.FC = () => {
|
||||
<CommandItem onSelect={handleOpenDiffPanel}>
|
||||
<RiCodeLine className="mr-2 h-4 w-4" />
|
||||
<span>Open Diff Panel</span>
|
||||
<CommandShortcut>{getModifierLabel()} + E</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem onSelect={handleOpenGitPanel}>
|
||||
<RiGitBranchLine className="mr-2 h-4 w-4" />
|
||||
<span>Open Git Panel</span>
|
||||
<CommandShortcut>{getModifierLabel()} + G</CommandShortcut>
|
||||
<CommandShortcut>{getModifierLabel()} + 2</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem onSelect={handleOpenTerminal}>
|
||||
<RiTerminalBoxLine className="mr-2 h-4 w-4" />
|
||||
<span>Open Terminal</span>
|
||||
<CommandShortcut>{getModifierLabel()} + 3</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem onSelect={handleOpenGitPanel}>
|
||||
<RiGitBranchLine className="mr-2 h-4 w-4" />
|
||||
<span>Open Git Panel</span>
|
||||
<CommandShortcut>{getModifierLabel()} + 4</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem onSelect={handleOpenTimeline}>
|
||||
<RiTimeLine className="mr-2 h-4 w-4" />
|
||||
<span>Open Timeline</span>
|
||||
<CommandShortcut>{getModifierLabel()} + T</CommandShortcut>
|
||||
</CommandItem>
|
||||
<CommandItem onSelect={handleOpenSettings}>
|
||||
|
||||
@@ -21,6 +21,7 @@ import {
|
||||
RiSettings3Line,
|
||||
RiTerminalBoxLine,
|
||||
RiText,
|
||||
RiTimeLine,
|
||||
} from "@remixicon/react";
|
||||
import { getModifierLabel } from "@/lib/utils";
|
||||
|
||||
@@ -140,19 +141,24 @@ export const HelpDialog: React.FC = () => {
|
||||
icon: RiPaletteLine,
|
||||
},
|
||||
{
|
||||
keys: [`${mod} + E`],
|
||||
keys: [`${mod} + 2`],
|
||||
description: "Open Diff Panel",
|
||||
icon: RiCodeLine,
|
||||
},
|
||||
{
|
||||
keys: [`${mod} + G`],
|
||||
keys: [`${mod} + 3`],
|
||||
description: "Open Terminal",
|
||||
icon: RiTerminalBoxLine,
|
||||
},
|
||||
{
|
||||
keys: [`${mod} + 4`],
|
||||
description: "Open Git Panel",
|
||||
icon: RiGitBranchLine,
|
||||
},
|
||||
{
|
||||
keys: [`${mod} + T`],
|
||||
description: "Open Terminal",
|
||||
icon: RiTerminalBoxLine,
|
||||
description: "Open Timeline",
|
||||
icon: RiTimeLine,
|
||||
},
|
||||
{
|
||||
keys: [`${mod} + ,`],
|
||||
|
||||
@@ -99,24 +99,10 @@ export const useKeyboardShortcuts = () => {
|
||||
setThemeMode(modes[nextIndex]);
|
||||
}
|
||||
|
||||
if (hasModifier(e) && !e.shiftKey && e.key.toLowerCase() === 'g') {
|
||||
if (hasModifier(e) && !e.shiftKey && e.key.toLowerCase() === 't') {
|
||||
e.preventDefault();
|
||||
const { activeMainTab } = useUIStore.getState();
|
||||
setActiveMainTab(activeMainTab === 'git' ? 'chat' : 'git');
|
||||
return;
|
||||
}
|
||||
|
||||
if (hasModifier(e) && !e.shiftKey && e.key.toLowerCase() === 'e') {
|
||||
e.preventDefault();
|
||||
const { activeMainTab } = useUIStore.getState();
|
||||
setActiveMainTab(activeMainTab === 'diff' ? 'chat' : 'diff');
|
||||
return;
|
||||
}
|
||||
|
||||
if (hasModifier(e) && !e.shiftKey && e.key.toLowerCase() === 't') {
|
||||
e.preventDefault();
|
||||
const { activeMainTab } = useUIStore.getState();
|
||||
setActiveMainTab(activeMainTab === 'terminal' ? 'chat' : 'terminal');
|
||||
const { isTimelineDialogOpen, setTimelineDialogOpen } = useUIStore.getState();
|
||||
setTimelineDialogOpen(!isTimelineDialogOpen);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user