@mittwald/cli 1.0.0-alpha.4 → 1.0.0-alpha.41

package/dist/rendering/process/process_fancy.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactElement, ReactNode } from "react";
+import { ProcessRenderer, RunnableHandler } from "./process.js";
+export declare class FancyProcessRenderer implements ProcessRenderer {
+    private readonly title;
+    private started;
+    private currentHandler;
+    private cleanupFns;
+    constructor(title: string);
+    start(): void;
+    addStep(title: ReactNode): RunnableHandler;
+    runStep<TRes>(title: ReactNode, fn: () => Promise<TRes>): Promise<TRes>;
+    addInfo(title: ReactElement): void;
+    addInput(question: React.ReactElement, mask?: boolean): Promise<string>;
+    addSelect<TVal>(question: React.ReactNode, options: {
+        value: TVal;
+        label: React.ReactNode;
+    }[]): Promise<TVal>;
+    addConfirmation(question: ReactElement): Promise<boolean>;
+    complete(summary: ReactElement): Promise<void>;
+    error(err: unknown): Promise<void>;
+    private renderStart;
+    addCleanup(title: ReactNode, fn: () => Promise<unknown>): void;
+    private cleanup;
+}

package/dist/rendering/process/process_fancy.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RunnableHandler, } from "./process.js";
+import { Header } from "../react/components/Header.js";
+import { Box, render, Text } from "ink";
+import { ProcessState } from "./components/ProcessState.js";
+import { ProcessConfirmation } from "./components/ProcessConfirmation.js";
+import { ProcessInput } from "./components/ProcessInput.js";
+import { ProcessSelect } from "./components/ProcessSelect.js";
+export class FancyProcessRenderer {
+    title;
+    started = false;
+    currentHandler = null;
+    cleanupFns = [];
+    constructor(title) {
+        this.title = title;
+    }
+    start() {
+        if (this.started) {
+            return;
+        }
+        this.started = true;
+        render(this.renderStart(), {}).unmount();
+    }
+    addStep(title) {
+        this.start();
+        if (this.currentHandler !== null) {
+            this.currentHandler.abort();
+        }
+        const state = { type: "step", title, phase: "running" };
+        const renderHandle = render(_jsx(ProcessState, { step: state }));
+        this.currentHandler = new RunnableHandler(state, () => {
+            renderHandle.rerender(_jsx(ProcessState, { step: state }));
+            if (this.currentHandler?.done) {
+                this.currentHandler = null;
+                renderHandle.unmount();
+            }
+        });
+        return this.currentHandler;
+    }
+    async runStep(title, fn) {
+        const step = this.addStep(title);
+        try {
+            const result = await fn();
+            step.complete();
+            return result;
+        }
+        catch (err) {
+            await this.error(err);
+            throw err;
+        }
+    }
+    addInfo(title) {
+        this.start();
+        if (this.currentHandler !== null) {
+            this.currentHandler.complete();
+        }
+        const state = { type: "info", title };
+        render(_jsx(ProcessState, { step: state })).unmount();
+    }
+    addInput(question, mask) {
+        this.start();
+        if (this.currentHandler !== null) {
+            this.currentHandler.complete();
+        }
+        const state = {
+            type: "input",
+            title: question,
+            mask,
+        };
+        return new Promise((res) => {
+            const onInput = (value) => {
+                res(value);
+                state.value = value;
+                if (renderHandle) {
+                    renderHandle.rerender(_jsx(ProcessInput, { step: state, onSubmit: onInput }));
+                    renderHandle.unmount();
+                }
+            };
+            const renderHandle = render(_jsx(ProcessInput, { step: state, onSubmit: onInput }));
+        });
+    }
+    addSelect(question, options) {
+        this.start();
+        if (this.currentHandler !== null) {
+            this.currentHandler.complete();
+        }
+        const state = {
+            type: "select",
+            title: question,
+            options,
+            selected: undefined,
+        };
+        return new Promise((res, rej) => {
+            const onSelect = (selected) => {
+                res(selected);
+                state.selected = selected;
+                if (renderHandle) {
+                    renderHandle.rerender(_jsx(ProcessSelect, { step: state, onSubmit: onSelect }));
+                    renderHandle.unmount();
+                }
+            };
+            const onError = (err) => {
+                if (renderHandle) {
+                    renderHandle.unmount();
+                }
+                rej(err);
+            };
+            const renderHandle = render(_jsx(ProcessSelect, { step: state, onSubmit: onSelect, onError: onError }));
+        });
+    }
+    addConfirmation(question) {
+        this.start();
+        if (this.currentHandler !== null) {
+            this.currentHandler.complete();
+        }
+        const state = {
+            type: "confirm",
+            title: question,
+            confirmed: undefined,
+        };
+        return new Promise((res) => {
+            const onConfirm = (confirmed) => {
+                res(confirmed);
+                state.confirmed = confirmed;
+                if (renderHandle) {
+                    renderHandle.rerender(_jsx(ProcessConfirmation, { step: state, onConfirm: onConfirm }));
+                    renderHandle.unmount();
+                }
+            };
+            const renderHandle = render(_jsx(ProcessConfirmation, { step: state, onConfirm: onConfirm }));
+        });
+    }
+    async complete(summary) {
+        if (this.currentHandler) {
+            this.currentHandler.complete();
+        }
+        await this.cleanup();
+        render(_jsx(Box, { marginY: 1, marginX: 2, children: summary })).unmount();
+    }
+    async error(err) {
+        if (this.currentHandler) {
+            this.currentHandler.error(err);
+            await this.cleanup();
+        }
+        else {
+            await this.cleanup();
+            render(_jsx(Box, { marginY: 1, marginX: 2, borderStyle: "round", borderColor: "red", children: _jsxs(Text, { color: "red", children: ["Error: ", err?.toString()] }) })).unmount();
+        }
+    }
+    renderStart() {
+        return (_jsx(Box, { marginY: 1, marginX: 2, children: _jsx(Header, { title: this.title }) }));
+    }
+    addCleanup(title, fn) {
+        this.cleanupFns.push({ title, fn });
+    }
+    async cleanup() {
+        if (this.cleanupFns.length === 0) {
+            return;
+        }
+        for (const { title, fn } of this.cleanupFns) {
+            await this.runStep(title, async () => {
+                await fn();
+            });
+        }
+    }
+}

package/dist/rendering/process/process_flags.d.ts

@@ -0,0 +1,20 @@
+import { ProcessRenderer } from "./process.js";
+import { InferredFlags } from "@oclif/core/lib/interfaces/index.js";
+export declare const processFlags: {
+    quiet: import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
+};
+export type ProcessFlags = InferredFlags<typeof processFlags>;
+/**
+ * Create a ProcessRenderer based on the given flags. Currently, only two
+ * renderers are available:
+ *
+ * - `FancyProcessRenderer` for interactive output
+ * - `SilentProcessRenderer` for non-interactive output when the `quiet` flag is
+ *   set
+ *
+ * More renderers may be added in the future.
+ *
+ * @param flags
+ * @param title
+ */
+export declare const makeProcessRenderer: (flags: ProcessFlags, title: string) => ProcessRenderer;

package/dist/rendering/process/process_flags.js

@@ -0,0 +1,29 @@
+import { FancyProcessRenderer } from "./process_fancy.js";
+import { Flags } from "@oclif/core";
+import { SilentProcessRenderer } from "./process_quiet.js";
+export const processFlags = {
+    quiet: Flags.boolean({
+        char: "q",
+        summary: "suppress process output and only display a machine-readable summary.",
+        description: "This flag controls if you want to see the process output or only a summary. When using <%= config.bin %> non-interactively (e.g. in scripts), you can use this flag to easily get the IDs of created resources for further processing.",
+    }),
+};
+/**
+ * Create a ProcessRenderer based on the given flags. Currently, only two
+ * renderers are available:
+ *
+ * - `FancyProcessRenderer` for interactive output
+ * - `SilentProcessRenderer` for non-interactive output when the `quiet` flag is
+ *   set
+ *
+ * More renderers may be added in the future.
+ *
+ * @param flags
+ * @param title
+ */
+export const makeProcessRenderer = (flags, title) => {
+    if (flags.quiet) {
+        return new SilentProcessRenderer();
+    }
+    return new FancyProcessRenderer(title);
+};

package/dist/rendering/process/process_quiet.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { ProcessRenderer, RunnableHandler } from "./process.js";
+export declare class SilentProcessRenderer implements ProcessRenderer {
+    private cleanupFns;
+    start(): void;
+    addStep(title: ReactNode): RunnableHandler;
+    runStep<TRes>(unusedTitle: ReactNode, fn: () => Promise<TRes>): Promise<TRes>;
+    addInfo(): void;
+    complete(): Promise<void>;
+    error(err: unknown): Promise<void>;
+    addConfirmation(): Promise<boolean>;
+    addInput(): Promise<string>;
+    addSelect<TVal>(): Promise<TVal>;
+    addCleanup(_: ReactNode, fn: () => Promise<unknown>): void;
+    private cleanup;
+}

package/dist/rendering/process/process_quiet.js

@@ -0,0 +1,43 @@
+import { RunnableHandler } from "./process.js";
+import * as console from "console";
+export class SilentProcessRenderer {
+    cleanupFns = [];
+    start() {
+        // 🤐
+    }
+    addStep(title) {
+        return new RunnableHandler({ type: "step", title, phase: "aborted" }, () => {
+            // empty
+        });
+    }
+    runStep(unusedTitle, fn) {
+        return fn();
+    }
+    addInfo() {
+        // 🤐
+    }
+    async complete() {
+        await this.cleanup();
+    }
+    error(err) {
+        console.error(err);
+        return Promise.resolve();
+    }
+    addConfirmation() {
+        return Promise.resolve(true);
+    }
+    addInput() {
+        throw new Error("no interactive input available in quiet mode");
+    }
+    addSelect() {
+        throw new Error("no interactive input available in quiet mode");
+    }
+    addCleanup(_, fn) {
+        this.cleanupFns.push(fn);
+    }
+    async cleanup() {
+        for (const fn of this.cleanupFns) {
+            await fn();
+        }
+    }
+}

package/dist/rendering/react/ComponentPrinter.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from "react";
+import { Printer } from "../../Printer.js";
+export declare class ComponentPrinter<T> implements Printer<T> {
+    private render;
+    constructor(render: (r: T) => ReactElement);
+    log(content: T): void;
+}

package/dist/rendering/react/ComponentPrinter.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { Render } from "./components/Render.js";
+import { render, Text } from "ink";
+export class ComponentPrinter {
+    render;
+    constructor(render) {
+        this.render = render;
+    }
+    log(content) {
+        render(_jsx(Suspense, { fallback: _jsx(Text, { children: "Loading..." }), children: _jsx(Render, { render: () => this.render(content) }) })).unmount();
+    }
+}

package/dist/rendering/react/ExecRenderBaseCommand.d.ts

@@ -0,0 +1,8 @@
+import { BaseCommand } from "../../BaseCommand.js";
+import { ReactNode } from "react";
+import { ExtendedBaseCommand } from "../../ExtendedBaseCommand.js";
+export declare abstract class ExecRenderBaseCommand<T extends typeof BaseCommand, TRes> extends ExtendedBaseCommand<T> {
+    protected abstract exec(): Promise<TRes>;
+    run(): Promise<void>;
+    protected abstract render(executionResult: TRes): ReactNode;
+}

package/dist/rendering/react/ExecRenderBaseCommand.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { render, Text } from "ink";
+import { RenderContextProvider } from "./context.js";
+import { ExtendedBaseCommand } from "../../ExtendedBaseCommand.js";
+const RenderComponent = (p) => (_jsx(_Fragment, { children: p.render() }));
+function wrapRender(fn) {
+    return (result) => {
+        const innerResult = fn(result);
+        if (typeof innerResult === "string") {
+            return _jsx(Text, { children: innerResult });
+        }
+        return innerResult;
+    };
+}
+export class ExecRenderBaseCommand extends ExtendedBaseCommand {
+    async run() {
+        const result = await this.exec();
+        const wrappedRender = wrapRender(this.render.bind(this));
+        render(_jsx(RenderContextProvider, { value: {
+                apiClient: this.apiClient,
+                renderAsJson: false,
+            }, children: _jsx(Suspense, { fallback: _jsx(Text, { children: "Loading..." }), children: _jsx(RenderComponent, { render: () => wrappedRender(result) }) }) }));
+    }
+}

package/dist/rendering/react/RenderBaseCommand.d.ts

@@ -0,0 +1,22 @@
+import { BaseCommand } from "../../BaseCommand.js";
+import { ReactNode } from "react";
+import { ExtendedBaseCommand } from "../../ExtendedBaseCommand.js";
+import { Interfaces } from "@oclif/core";
+import { FlagInput } from "@oclif/core/lib/interfaces/parser.js";
+import { CommandType } from "../../lib/context_flags.js";
+declare const renderFlags: {
+    output: Interfaces.OptionFlag<string, Interfaces.CustomOptions>;
+};
+export declare abstract class RenderBaseCommand<T extends typeof BaseCommand> extends ExtendedBaseCommand<T> {
+    protected static renderFlags: {
+        output: Interfaces.OptionFlag<string, Interfaces.CustomOptions>;
+    };
+    protected renderFlags: Interfaces.InferredFlags<typeof renderFlags>;
+    static buildFlags(): FlagInput;
+    init(): Promise<void>;
+    run(): Promise<void>;
+    protected abstract render(): ReactNode;
+    protected useAppInstallationId(command: CommandType<"installation"> | "flag" | "arg"): string;
+    protected useProjectId(command: CommandType<"project"> | "flag" | "arg"): string;
+}
+export {};

package/dist/rendering/react/RenderBaseCommand.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { render } from "ink";
+import { RenderContextProvider } from "./context.js";
+import { ExtendedBaseCommand } from "../../ExtendedBaseCommand.js";
+import { JsonCollectionProvider } from "./json/JsonCollectionProvider.js";
+import { Flags } from "@oclif/core";
+import { Render } from "./components/Render.js";
+import { useIncreaseInkStdoutColumns } from "./hooks/useIncreaseInkStdoutColumns.js";
+import { usePromise } from "@mittwald/react-use-promise";
+const renderFlags = {
+    output: Flags.string({
+        description: "The output format to use; use 'txt' for a human readable text representation, and 'json' for a machine-readable JSON representation.",
+        char: "o",
+        required: true,
+        default: "txt",
+        options: ["txt", "json"],
+    }),
+};
+export class RenderBaseCommand extends ExtendedBaseCommand {
+    static renderFlags = renderFlags;
+    renderFlags;
+    static buildFlags() {
+        return RenderBaseCommand.renderFlags;
+    }
+    async init() {
+        await super.init();
+        const { args, flags } = await this.parse({
+            flags: {
+                ...renderFlags,
+                ...this.ctor.flags,
+            },
+            baseFlags: super.ctor.baseFlags,
+            args: this.ctor.args,
+            strict: this.ctor.strict,
+        });
+        this.flags = flags;
+        this.renderFlags = flags;
+        this.args = args;
+    }
+    async run() {
+        render(_jsx(RenderContextProvider, { value: {
+                apiClient: this.apiClient,
+                renderAsJson: this.renderFlags.output === "json",
+            }, children: _jsx(JsonCollectionProvider, { children: _jsx(Suspense, { children: _jsx(Render, { render: () => {
+                            useIncreaseInkStdoutColumns();
+                            return this.render();
+                        } }) }) }) }));
+    }
+    useAppInstallationId(command) {
+        return usePromise(() => this.withAppInstallationId(command), []);
+    }
+    useProjectId(command) {
+        return usePromise(() => this.withProjectId(command), []);
+    }
+}

package/dist/rendering/react/components/AppInstallation/AppInstallationDetails.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import type { MittwaldAPIV2 } from "@mittwald/api-client";
+type AppAppInstallation = MittwaldAPIV2.Components.Schemas.AppAppInstallation;
+type AppApp = MittwaldAPIV2.Components.Schemas.AppApp;
+export declare const AppInstallationDetails: FC<{
+    appInstallation: AppAppInstallation;
+    app: AppApp;
+}>;
+export {};

package/dist/rendering/react/components/AppInstallation/AppInstallationDetails.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAppVersion } from "../../../../lib/app/hooks.js";
+import { Value } from "../Value.js";
+import { AppInstallationStatus } from "./AppInstallationStatus.js";
+import { SingleResult, SingleResultTable } from "../SingleResult.js";
+import { AppSystemSoftware } from "./AppSystemSoftware.js";
+import { Box, Text } from "ink";
+import { phpInstaller } from "../../../../commands/app/create/php.js";
+import { nodeInstaller } from "../../../../commands/app/create/node.js";
+import { useProject } from "../../../../lib/project/hooks.js";
+import { IDAndShortID } from "../IDAndShortID.js";
+import path from "path";
+export const AppInstallationDetails = ({ app, appInstallation }) => {
+    const customInstallation = [phpInstaller.appId, nodeInstaller.appId].includes(app.id);
+    const desiredAppVersion = useAppVersion(app.id, appInstallation.appVersion.desired);
+    const currentAppVersion = appInstallation.appVersion.current
+        ? useAppVersion(app.id, appInstallation.appVersion.current)
+        : undefined;
+    const project = appInstallation.projectId
+        ? useProject(appInstallation.projectId)
+        : null;
+    const absoluteInstallPath = project
+        ? path.join(project.directories["Web"], appInstallation.installationPath)
+        : null;
+    const rows = {
+        "Installation ID": _jsx(Value, { children: appInstallation.id }),
+        App: (_jsx(SingleResultTable, { rows: {
+                ID: _jsx(Value, { children: app.id }),
+                Name: _jsx(Value, { children: app.name }),
+            } })),
+        Project: project ? (_jsx(SingleResultTable, { rows: {
+                ID: _jsx(IDAndShortID, { object: project }),
+                Description: _jsx(Value, { children: project.description }),
+            } })) : (_jsx(Value, { notSet: true })),
+        "Installation Path": absoluteInstallPath ? (_jsx(Value, { children: absoluteInstallPath })) : (_jsx(Value, { notSet: true })),
+        "Document root (in installation path)": (_jsx(Value, { children: appInstallation.customDocumentRoot ?? "/" })),
+        Description: _jsx(Value, { children: appInstallation.description }),
+        Status: customInstallation ? (_jsx(Text, { children: "custom application" })) : (_jsx(AppInstallationStatus, { appInstallation: appInstallation, desired: desiredAppVersion, current: currentAppVersion })),
+    };
+    const title = (_jsxs(_Fragment, { children: ["APP INSTALLATION: ", _jsx(Value, { children: app.name }), " in", " ", _jsx(Value, { children: appInstallation.installationPath })] }));
+    const sections = [
+        _jsx(SingleResult, { title: title, rows: rows }, "primary"),
+        _jsx(SingleResult, { title: "Access", rows: {
+                "SSH/SFTP Host": (_jsxs(Text, { children: [_jsxs(Value, { children: ["ssh.", project?.clusterID, ".", project?.clusterDomain] }), " ", _jsx(Text, { color: "gray", children: "(Use the \"app ssh\" command to connect directly using the CLI)" })] })),
+            } }, "access"),
+        _jsx(AppSystemSoftware, { appInstallation: appInstallation }, "systemsoftware"),
+    ];
+    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: sections }));
+};

package/dist/rendering/react/components/AppInstallation/AppInstallationStatus.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import type { MittwaldAPIV2 } from "@mittwald/api-client";
+type AppAppInstallation = MittwaldAPIV2.Components.Schemas.AppAppInstallation;
+type AppAppVersion = MittwaldAPIV2.Components.Schemas.AppAppVersion;
+export declare const AppInstallationStatus: FC<{
+    appInstallation: AppAppInstallation;
+    desired: AppAppVersion;
+    current: AppAppVersion | undefined;
+}>;
+export {};

package/dist/rendering/react/components/AppInstallation/AppInstallationStatus.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Value } from "../Value.js";
+import { Text } from "ink";
+export const AppInstallationStatus = ({ desired, current }) => {
+    if (!current) {
+        return (_jsxs(Text, { children: ["installing version ", _jsx(Value, { children: desired.externalVersion })] }));
+    }
+    if (current.id === desired.id) {
+        return (_jsxs(Text, { children: ["up-to-date at version ", _jsx(Value, { children: current.externalVersion })] }));
+    }
+    return (_jsxs(Text, { children: ["upgrading from version ", _jsx(Value, { children: current.externalVersion }), ", desired version is ", _jsx(Value, { children: desired.externalVersion })] }));
+};

package/dist/rendering/react/components/AppInstallation/AppSystemSoftware.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import type { MittwaldAPIV2 } from "@mittwald/api-client";
+type AppAppInstallation = MittwaldAPIV2.Components.Schemas.AppAppInstallation;
+export declare const AppSystemSoftware: FC<{
+    appInstallation: AppAppInstallation;
+}>;
+export {};

package/dist/rendering/react/components/AppInstallation/AppSystemSoftware.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Header } from "../Header.js";
+import { useSystemSoftware, useSystemSoftwareVersion, } from "../../../../lib/app/hooks.js";
+import { Value } from "../Value.js";
+import { SingleResult } from "../SingleResult.js";
+import { Text } from "ink";
+export const AppSystemSoftware = ({ appInstallation, }) => {
+    if (!appInstallation.systemSoftware) {
+        return (_jsxs(_Fragment, { children: [_jsx(Header, { title: "System software" }), _jsx(Text, { children: "No system software defined" })] }));
+    }
+    const rows = {};
+    for (const systemSoftwareDef of appInstallation.systemSoftware || []) {
+        const systemSoftware = useSystemSoftware(systemSoftwareDef.systemSoftwareId);
+        const systemSoftwareVersion = useSystemSoftwareVersion(systemSoftware.id, systemSoftwareDef.systemSoftwareVersion.desired);
+        rows[systemSoftware.name] = (_jsxs(Text, { children: [_jsx(Value, { children: systemSoftwareVersion.externalVersion }), " (update policy:", " ", _jsx(Value, { children: systemSoftwareDef.updatePolicy }), ")"] }));
+    }
+    return _jsx(SingleResult, { title: "System software", rows: rows });
+};

package/dist/rendering/react/components/BooleanValue.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+export declare const BooleanValue: FC<{
+    value: boolean | undefined;
+}>;

package/dist/rendering/react/components/BooleanValue.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+import { Value } from "./Value.js";
+export const BooleanValue = ({ value }) => {
+    if (value === undefined) {
+        return _jsx(Value, { notSet: true });
+    }
+    return value ? _jsx(Text, { color: "green", children: "yes" }) : _jsx(Text, { color: "red", children: "no" });
+};

package/dist/rendering/react/components/ByteFormat.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+export declare const ByteFormat: FC<{
+    bytes: number;
+}>;

package/dist/rendering/react/components/ByteFormat.js

@@ -0,0 +1,12 @@
+export const ByteFormat = ({ bytes }) => {
+    if (bytes > 1 << 30) {
+        return Math.round(bytes / (1 << 30)) + "Gi";
+    }
+    if (bytes > 1 << 20) {
+        return Math.round(bytes / (1 << 20)) + "Mi";
+    }
+    if (bytes > 1 << 10) {
+        return Math.round(bytes / (1 << 10)) + "Ki";
+    }
+    return bytes + "B";
+};

package/dist/rendering/react/components/Conversation/ConversationMessage.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import type { MittwaldAPIV2 } from "@mittwald/api-client";
+type Message = MittwaldAPIV2.Components.Schemas.ConversationMessage | MittwaldAPIV2.Components.Schemas.ConversationStatusUpdate;
+interface Props {
+    message: Message;
+}
+export declare const ConversationMessage: FC<Props>;
+export {};

package/dist/rendering/react/components/Conversation/ConversationMessage.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { useMyUserProfile } from "../../hooks/useMyUserProfile.js";
+export const ConversationMessage = (props) => {
+    const { message } = props;
+    const { userId } = useMyUserProfile();
+    if (message.type === "MESSAGE") {
+        const isMyMessage = userId === message.createdBy?.userId;
+        return (_jsx(Box, { borderStyle: "round", padding: 1, marginLeft: isMyMessage ? 10 : 0, marginRight: isMyMessage ? 0 : 10, children: _jsx(Text, { children: message.messageContent }) }));
+    }
+    return (_jsx(Box, { justifyContent: "center", padding: 1, children: _jsx(Text, { dimColor: true, children: message.messageContent }) }));
+};

package/dist/rendering/react/components/Conversation/ConversationMessages.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import type { MittwaldAPIV2 } from "@mittwald/api-client";
+type Message = MittwaldAPIV2.Components.Schemas.ConversationMessage | MittwaldAPIV2.Components.Schemas.ConversationStatusUpdate;
+interface Props {
+    messages: Message[];
+}
+export declare const ConversationMessages: FC<Props>;
+export {};

package/dist/rendering/react/components/Conversation/ConversationMessages.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "ink";
+import { ConversationMessage } from "./ConversationMessage.js";
+import { useRenderContext } from "../../context.js";
+import { RenderJson } from "../../json/RenderJson.js";
+export const ConversationMessages = (props) => {
+    const { messages } = props;
+    const { renderAsJson } = useRenderContext();
+    if (renderAsJson) {
+        return _jsx(RenderJson, { name: "messages", data: messages });
+    }
+    return (_jsx(Box, { flexDirection: "column", children: messages.map((msg) => (_jsx(ConversationMessage, { message: msg }, msg.createdAt + msg.type))) }));
+};