Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 | import type { JSX } from "react";
import { useLocation, useMatch } from "react-router";
import type { Session, TaskData, Environment } from "../../hooks/types.js";
import { newTaskUrl, newChatUrl, useAppNavigate } from "../../utils/navigation.js";
import styles from "./BottomStatusBar.module.scss";
/**
* Thin, read-only status bar that shows contextual hints based on the current
* route and application state. Does NOT contain any form inputs or send/spawn
* actions — those live in {@link ChatInput} on each page.
*
* Returns an empty fragment when the current page is showing a ChatInput or
* when the route has no meaningful hint to display.
*/
/** Props for the BottomStatusBar component. */
interface BottomStatusBarProps {
/** All sessions. */
sessions: Session[];
/** All tasks. */
tasks: TaskData[];
/** All environments. */
environments: Environment[];
}
export function BottomStatusBar({
sessions,
tasks,
environments,
}: BottomStatusBarProps): JSX.Element {
const navigate = useAppNavigate();
const location = useLocation();
// Match current route (both global and workspace-scoped task URLs)
const sessionMatch = useMatch("/sessions/:sessionId");
const taskMatch = useMatch("/tasks/:taskId");
const taskStreamMatch = useMatch("/tasks/:taskId/stream");
const taskEditMatch = useMatch("/tasks/:taskId/edit");
const wsTaskMatch = useMatch(
"/environments/:environmentId/workspaces/:workspaceId/tasks/:taskId",
);
const wsTaskStreamMatch = useMatch(
"/environments/:environmentId/workspaces/:workspaceId/tasks/:taskId/stream",
);
const wsTaskEditMatch = useMatch(
"/environments/:environmentId/workspaces/:workspaceId/tasks/:taskId/edit",
);
const newChatMatch = useMatch("/sessions/new");
const workspaceMatch = useMatch("/environments/:environmentId/workspaces/:workspaceId");
const newTaskMatch = useMatch("/tasks/new");
const chatMatch = useMatch("/chat");
const emptyMatch = useMatch("/");
const settingsMatch = useMatch("/settings/*");
// Derive current page context
const sessionId = sessionMatch?.params.sessionId;
const taskId =
taskMatch?.params.taskId ??
taskStreamMatch?.params.taskId ??
wsTaskMatch?.params.taskId ??
wsTaskStreamMatch?.params.taskId ??
wsTaskEditMatch?.params.taskId;
const wsMatch = wsTaskMatch ?? wsTaskStreamMatch ?? wsTaskEditMatch;
const routeEnvironmentId = wsMatch?.params.environmentId ?? workspaceMatch?.params.environmentId;
const isEnvironments =
location.pathname.startsWith("/environments") && !workspaceMatch && !wsMatch;
const isChat = !!chatMatch;
const isNewChat = !!newChatMatch;
const isWorkspace = !!workspaceMatch && !wsTaskMatch && !wsTaskStreamMatch && !wsTaskEditMatch;
const isNewTask = !!newTaskMatch;
const isTaskEdit = !!taskEditMatch || !!wsTaskEditMatch;
const isEmpty = !!emptyMatch && !isNewChat && !isWorkspace && !isNewTask;
const isSettings = !!settingsMatch;
// --- dashboard / settings / edit / new / environments / new_chat — empty ---
if (isEmpty || isSettings || isTaskEdit || isNewTask || isEnvironments || isNewChat) {
return <></>;
}
// --- /chat route — ChatInput handles input on the page; only show hint if no local env ---
if (isChat) {
const localEnv = environments.find(
(e) => e.adapterType === "local" && e.status === "connected",
);
if (!localEnv) {
return (
<div className={styles.bar}>
<span className={styles.hintText}>Add a local environment to start chatting</span>
</div>
);
}
return <></>;
}
// --- workspace mode (no specific task) ---
if (isWorkspace) {
return (
<div className={styles.bar}>
<span className={styles.hintText}>Select a task or click + to create one</span>
</div>
);
}
// --- task modes ---
if (taskId) {
const task = tasks.find((t) => t.id === taskId);
if (!task) {
return (
<div className={styles.bar}>
<span className={styles.hintText}>Loading...</span>
</div>
);
}
const tasksById = new Map(tasks.map((t) => [t.id, t]));
const isTaskBlocked = task.dependsOn.some((depId) => {
const dep = tasksById.get(depId);
return dep !== undefined && dep.status !== "complete";
});
// Not started (blocked or unblocked)
if (task.status === "not_started") {
const blockerNames = isTaskBlocked
? task.dependsOn
.map((depId) => tasksById.get(depId))
.filter((t) => t && t.status !== "complete")
.map((t) => t!.title)
: [];
return (
<div className={styles.bar}>
{isTaskBlocked ? (
<span className={styles.statusBlocked}>Blocked by: {blockerNames.join(", ")}</span>
) : (
<span className={styles.hintText}>
Use the buttons above to start or manage this task
</span>
)}
</div>
);
}
// Working / paused — check if session is active
if (task.status === "working" || task.status === "paused") {
const taskSessionId = task.latestSessionId || undefined;
const taskSession = taskSessionId ? sessions.find((s) => s.id === taskSessionId) : undefined;
const isActive = taskSession && taskSession.status !== "stopped";
// Active session — ChatInput on the page handles this; return empty
if (isActive) {
return <></>;
}
return (
<div className={styles.bar}>
<span className={styles.hintText}>Waiting for agent...</span>
</div>
);
}
// Complete
if (task.status === "complete") {
return (
<div className={styles.bar}>
<span className={`${styles.statusText} ${styles.statusCompleted}`}>Task completed</span>
<button
onClick={() => navigate(newTaskUrl(task.workspaceId, undefined, routeEnvironmentId))}
className={styles.btnPrimary}
>
+ New Task
</button>
</div>
);
}
// Failed
if (task.status === "failed") {
return (
<div className={styles.bar}>
<span className={`${styles.statusText} ${styles.statusFailed}`}>Task failed</span>
</div>
);
}
}
// --- session mode ---
if (sessionId) {
const session = sessions.find((s) => s.id === sessionId);
if (!session) {
return (
<div className={styles.bar}>
<span className={styles.hintText}>Loading...</span>
</div>
);
}
const isEnded = session.status === "stopped";
// Active session — ChatInput on the page handles this; return empty
if (!isEnded) {
return <></>;
}
return (
<div className={styles.bar}>
<span className={`${styles.statusText} ${styles.hintText}`}>
Session {session.endReason || session.status}
</span>
<button
onClick={() => navigate(newChatUrl(session.environmentId))}
className={styles.btnPrimary}
>
+ New Chat
</button>
</div>
);
}
// No task or session context on this route — nothing to display.
return <></>;
}
|