Moduletrace/cobble
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases 11 Wiki Activity

Reuse computer rows and open computers in the viewer

Browse Source
This commit is contained in:
tben
2026-10-19 13:50:04 +01:00
parent e5747effa8
commit 47c58bc76b
9 changed files with 257 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/general/computer-open-button.tsx
+76
View File
@@ -0,0 +1,76 @@
import { useState } from "react";
import Button from "@moduletrace/twui/layout/Button";
import type {
TWUIButtonColorType,
TWUIButtonSizeType,
TWUIButtonVariantType,
} from "@moduletrace/twui/layout/Button";
import { AppWindow } from "lucide-react";
import { twMerge } from "tailwind-merge";
import ComputerViewerModal from "./computer-viewer-modal";
type Props = {
computer_id: number;
/**
* The computer's name, for the modal and the button's title.
*/
name: string;
/**
* Words after the icon; without them it's an icon button.
*/
label?: string;
title?: string;
variant?: TWUIButtonVariantType;
color?: TWUIButtonColorType;
size?: TWUIButtonSizeType;
disabled?: boolean;
className?: string;
};
const IconButtonClasses =
"shrink-0 p-2! text-ink-secondary dark:text-ink-secondary hover:text-ink hover:dark:text-ink hover:bg-sunken hover:dark:bg-sunken rounded-default transition-colors duration-[var(--m-fast)] focus-visible:ring-2 focus-visible:ring-ink";
/**
* Opens a computer in the viewer over the page, in its browser, terminal
* or code editor. Lists use it as an icon button; the computer's own page
* adds a label.
*/
export default function ComputerOpenButton({
computer_id,
name,
label,
title,
variant = "ghost",
color = "text",
size,
disabled,
className,
}: Props) {
const [open, setOpen] = useState(false);
const button_title = title || `Open ${name}`;
return (
<>
<Button
title={button_title}
aria-label={label ? undefined : button_title}
type="button"
variant={variant}
color={color}
size={size}
disabled={disabled}
onClick={() => setOpen(true)}
className={twMerge(label ? "shrink-0 gap-1!" : IconButtonClasses, className)}
>
<AppWindow size={16} aria-hidden />
{label}
</Button>
<ComputerViewerModal
open={open}
onClose={() => setOpen(false)}
computer_id={computer_id}
name={name}
/>
</>
);
}
src/components/general/computer-viewer-modal.tsx
+82
View File
@@ -0,0 +1,82 @@
import type { ReactNode } from "react";
import Modal from "@moduletrace/twui/elements/Modal";
import H2 from "@moduletrace/twui/layout/H2";
import Row from "@moduletrace/twui/layout/Row";
import Span from "@moduletrace/twui/layout/Span";
import Stack from "@moduletrace/twui/layout/Stack";
import type { ComputerViewMode } from "@/src/dict/computer-dict";
import ComputerView from "./computer-view";
type Props = {
open: boolean;
onClose: () => void;
computer_id: number;
/**
* The computer's name, in the header and the frame titles.
*/
name: string;
/**
* The mode it opens in.
*/
default_mode?: ComputerViewMode;
/**
* A line under the name, e.g. a take-over note.
*/
note?: string;
/**
* Controls at the end of the header, e.g. handing it back.
*/
action?: ReactNode;
};
/**
* A computer, large, in its browser, terminal or code editor, over the
* page. `ComputerOpenButton` opens it from lists; chat's viewer adds a
* note and the hand-back action after a take-over.
*/
export default function ComputerViewerModal({
open,
onClose,
computer_id,
name,
default_mode,
note,
action,
}: Props) {
if (!open) return null;
return (
<Modal
open
setOpen={(next_open) => {
if (!next_open) onClose();
}}
className="max-w-[95vw]! h-[90vh] p-0 bg-paper flex flex-col overflow-hidden"
>
<Row className="w-full gap-3! flex-nowrap items-center pl-5 pr-14 py-3 border-0 border-b border-solid border-hairline">
<Stack className="min-w-0 gap-0! items-start">
<H2 className="text-base! leading-6! tracking-normal! font-bold text-ink truncate w-full">
{name}
</H2>
{note ? (
<Span className="text-[13px] leading-[18px] text-ink-secondary">
{note}
</Span>
) : null}
</Stack>
{action ? (
<Stack className="ml-auto shrink-0 gap-1! items-end">
{action}
</Stack>
) : null}
</Row>
<ComputerView
key={`${computer_id}-${default_mode}`}
computer_id={computer_id}
name={name}
default_mode={default_mode}
className="grow"
/>
</Modal>
);
}
src/pages/admin/bots/[bot_id]/(partials)/computer-viewer-modal.tsx
+17 -33
View File
@@ -1,12 +1,9 @@
import { useContext, useState } from "react";
import { AppContext } from "@/src/pages/__root";
import Modal from "@moduletrace/twui/elements/Modal";
import Button from "@moduletrace/twui/layout/Button";
import H2 from "@moduletrace/twui/layout/H2";
import Row from "@moduletrace/twui/layout/Row";
import Span from "@moduletrace/twui/layout/Span";
import Stack from "@moduletrace/twui/layout/Stack";
import ComputerView from "@/src/components/general/computer-view";
import SharedComputerViewerModal from "@/src/components/general/computer-viewer-modal";
import type { BotWithLastMessage } from "@/src/types";
import { BotComputersContext } from "../(data)/bot-computers-context";
import sendBotMessage from "../(functions)/send-bot-message";
@@ -53,26 +50,20 @@ export default function ComputerViewerModal({ bot }: Props) {
};
return (
<Modal
<SharedComputerViewerModal
open
setOpen={(open) => {
if (!open) closeComputer();
}}
className="max-w-[95vw]! h-[90vh] p-0 bg-paper flex flex-col overflow-hidden"
>
<Row className="w-full gap-3! flex-nowrap items-center pl-5 pr-14 py-3 border-0 border-b border-solid border-hairline">
<Stack className="min-w-0 gap-0! items-start">
<H2 className="text-base! leading-6! tracking-normal! font-bold text-ink truncate w-full">
{name}
</H2>
{viewing.take_over ? (
<Span className="text-[13px] leading-[18px] text-ink-secondary">
{`${bot_name} asked you to take over. Hand it back when you're done.`}
</Span>
) : null}
</Stack>
{viewing.take_over ? (
<Stack className="ml-auto shrink-0 gap-1! items-end">
onClose={closeComputer}
computer_id={Number(computer.id)}
name={name}
default_mode={viewing.mode}
note={
viewing.take_over
? `${bot_name} asked you to take over. Hand it back when you're done.`
: undefined
}
action={
viewing.take_over ? (
<>
<Button
type="button"
size="small"
@@ -90,16 +81,9 @@ export default function ComputerViewerModal({ bot }: Props) {
{error}
</Span>
) : null}
</Stack>
) : null}
</Row>
<ComputerView
key={`${computer.id}-${viewing.mode}`}
computer_id={computer.id}
name={name}
default_mode={viewing.mode}
className="grow"
</>
) : undefined
}
/>
</Modal>
);
}
src/pages/admin/settings/(partials)/computer-list-row.tsx
+57
View File
@@ -0,0 +1,57 @@
import type { ReactNode } from "react";
import ComputerIconTile from "@/src/components/general/computer-icon-tile";
import ComputerOpenButton from "@/src/components/general/computer-open-button";
import type { ComputerWithStatus } from "@/src/types";
import computerResourcesLabel from "@/src/utils/computer-resources-label";
import computerStatusLabel from "@/src/utils/computer-status-label";
import SettingsListRow from "./settings-list-row";
type Props = {
computer: ComputerWithStatus;
badge?: string;
/**
* Defaults to its state, resources and description.
*/
subtitle?: string;
/**
* What can be done with it, after the open button.
*/
children?: ReactNode;
};
/**
* One computer in a settings list: its avatar and details, opening its
* settings page from the title. Every list uses it, so the row behaves the
* same, and the open button shows it in the viewer over the page.
*/
export default function ComputerListRow({ computer, badge, subtitle, children }: Props) {
const name = computer.name || `Computer ${computer.id}`;
const ready = computer.status == "running";
return (
<SettingsListRow
avatar={<ComputerIconTile />}
href={`/admin/settings/computers/${computer.id}`}
title={name}
badge={badge}
subtitle={
subtitle ??
[
computerStatusLabel({ computer }),
computerResourcesLabel({ computer }),
computer.description,
]
.filter(Boolean)
.join(" · ")
}
>
<ComputerOpenButton
computer_id={Number(computer.id)}
name={name}
title={ready ? `Open ${name}` : `${name} isn't running yet`}
disabled={!ready}
/>
{children}
</SettingsListRow>
);
}
src/pages/admin/settings/bots/[bot_id]/(partials)/bot-computer-row.tsx
+3 -16
View File
@@ -1,8 +1,5 @@
import ComputerIconTile from "@/src/components/general/computer-icon-tile";
import type { ComputerWithStatus } from "@/src/types";
import computerResourcesLabel from "@/src/utils/computer-resources-label";
import computerStatusLabel from "@/src/utils/computer-status-label";
import SettingsListRow from "../../../(partials)/settings-list-row";
import ComputerListRow from "../../../(partials)/computer-list-row";
import SettingsRowAction from "../../../(partials)/settings-row-action";
type Props = {
@@ -22,17 +19,7 @@ export default function BotComputerRow({
const name = computer.name || `Computer ${computer.id}`;
return (
<SettingsListRow
avatar={<ComputerIconTile />}
title={name}
subtitle={[
computerStatusLabel({ computer }),
computerResourcesLabel({ computer }),
computer.description,
]
.filter(Boolean)
.join(" · ")}
>
<ComputerListRow computer={computer}>
{onRemove ? (
<SettingsRowAction
title={`Take ${name}'s access away`}
@@ -41,6 +28,6 @@ export default function BotComputerRow({
onClick={onRemove}
/>
) : null}
</SettingsListRow>
</ComputerListRow>
);
}
src/pages/admin/settings/computers/(partials)/computer-settings-row.tsx
+4 -16
View File
@@ -1,8 +1,5 @@
import ComputerIconTile from "@/src/components/general/computer-icon-tile";
import type { ComputerWithStatus } from "@/src/types";
import computerResourcesLabel from "@/src/utils/computer-resources-label";
import computerStatusLabel from "@/src/utils/computer-status-label";
import SettingsListRow from "../../(partials)/settings-list-row";
import ComputerListRow from "../../(partials)/computer-list-row";
import SettingsRowAction from "../../(partials)/settings-row-action";
type Props = {
@@ -29,18 +26,9 @@ export default function ComputerSettingsRow({
const busy_here = busy || computer.status == "creating";
return (
<SettingsListRow
avatar={<ComputerIconTile />}
href={`/admin/settings/computers/${computer.id}`}
title={name}
<ComputerListRow
computer={computer}
badge={computer.kind == "main" ? "Main" : undefined}
subtitle={[
computerStatusLabel({ computer }),
computerResourcesLabel({ computer }),
computer.description,
]
.filter(Boolean)
.join(" · ")}
>
{is_super_admin && computer.status == "failed" ? (
<SettingsRowAction
@@ -58,6 +46,6 @@ export default function ComputerSettingsRow({
onClick={onDelete}
/>
) : null}
</SettingsListRow>
</ComputerListRow>
);
}
src/pages/admin/settings/computers/[computer_id]/(partials)/computer-overview-group.tsx
+8 -21
View File
@@ -1,13 +1,11 @@
import Button from "@moduletrace/twui/layout/Button";
import Row from "@moduletrace/twui/layout/Row";
import Span from "@moduletrace/twui/layout/Span";
import Stack from "@moduletrace/twui/layout/Stack";
import { ExternalLink } from "lucide-react";
import ComputerIconTile from "@/src/components/general/computer-icon-tile";
import ComputerOpenButton from "@/src/components/general/computer-open-button";
import type { ComputerWithStatus } from "@/src/types";
import computerResourcesLabel from "@/src/utils/computer-resources-label";
import computerStatusLabel from "@/src/utils/computer-status-label";
import computerViewUrl from "@/src/utils/computer-view-url";
import SettingsGroup from "../../../(partials)/settings-group";
type Props = {
@@ -16,7 +14,7 @@ type Props = {
/**
* The computer at a glance: its state, resources and what it's for, and a
* way to open it in the browser.
* way to open it in the viewer.
*/
export default function ComputerOverviewGroup({ computer }: Props) {
const name = computer.name || `Computer ${computer.id}`;
@@ -51,31 +49,20 @@ export default function ComputerOverviewGroup({ computer }: Props) {
.join(" · ")}
</Span>
</Stack>
<Button
<ComputerOpenButton
computer_id={Number(computer.id)}
name={name}
label="Open"
title={
ready
? `Open ${name} in the browser`
? `Open ${name}`
: `${name} isn't running yet`
}
type="button"
variant="outlined"
color="gray"
size="small"
href={
ready
? computerViewUrl({
computer_id: Number(computer.id),
mode: "browser",
})
: undefined
}
target="_blank"
disabled={!ready}
beforeIcon={<ExternalLink size={14} aria-hidden />}
className="shrink-0"
>
Open
</Button>
/>
</Row>
</SettingsGroup>
);
src/pages/admin/settings/workspaces/[workspace_id]/(partials)/workspace-computer-row.tsx
+5 -9
View File
@@ -1,8 +1,6 @@
import ComputerIconTile from "@/src/components/general/computer-icon-tile";
import SettingsListRow from "@/src/pages/admin/settings/(partials)/settings-list-row";
import SettingsRowAction from "@/src/pages/admin/settings/(partials)/settings-row-action";
import type { ComputerWithStatus } from "@/src/types";
import computerStatusLabel from "@/src/utils/computer-status-label";
import ComputerListRow from "@/src/pages/admin/settings/(partials)/computer-list-row";
import SettingsRowAction from "@/src/pages/admin/settings/(partials)/settings-row-action";
type Props = {
computer: ComputerWithStatus;
@@ -32,11 +30,9 @@ export default function WorkspaceComputerRow({
const name = computer.name || `Computer ${computer.id}`;
return (
<SettingsListRow
avatar={<ComputerIconTile />}
title={name}
<ComputerListRow
computer={computer}
badge={is_default ? "Default" : undefined}
subtitle={`${computerStatusLabel({ computer })}${computer.description ? ` · ${computer.description}` : ""}`}
>
{is_default ? null : (
<SettingsRowAction title={`Make ${name} the default`} label="Make default" disabled={busy} onClick={onMakeDefault} />
@@ -48,6 +44,6 @@ export default function WorkspaceComputerRow({
{is_super_admin && computer.kind != "main" ? (
<SettingsRowAction title={`Delete ${name}; its files are kept`} label="Delete" disabled={busy} onClick={onDelete} />
) : null}
</SettingsListRow>
</ComputerListRow>
);
}
src/pages/admin/workspaces/[workspace_id]/(partials)/workspace-dashboard-computer-row.tsx
+4 -14
View File
@@ -1,7 +1,5 @@
import ComputerIconTile from "@/src/components/general/computer-icon-tile";
import SettingsListRow from "@/src/pages/admin/settings/(partials)/settings-list-row";
import ComputerListRow from "@/src/pages/admin/settings/(partials)/computer-list-row";
import type { ComputerWithStatus } from "@/src/types";
import computerStatusLabel from "@/src/utils/computer-status-label";
type Props = {
computer: ComputerWithStatus;
@@ -9,17 +7,9 @@ type Props = {
};
/**
* A computer in the workspace dashboard: its state and what it's for.
* A computer in the workspace dashboard: its state, resources and what
* it's for, opening its settings page.
*/
export default function WorkspaceDashboardComputerRow({ computer, is_default }: Props) {
const name = computer.name || `Computer ${computer.id}`;
return (
<SettingsListRow
avatar={<ComputerIconTile />}
title={name}
badge={is_default ? "Default" : undefined}
subtitle={`${computerStatusLabel({ computer })}${computer.description ? ` · ${computer.description}` : ""}`}
/>
);
return <ComputerListRow computer={computer} badge={is_default ? "Default" : undefined} />;
}