@tt-a1i/openpi 0.6.1 → 0.7.0

package/web/ui/src/features/composer/Composer.tsx

@@ -0,0 +1,237 @@
+import { DropdownMenu } from "@astryxdesign/core/DropdownMenu";
+import { Tooltip } from "@astryxdesign/core/Tooltip";
+import { Check, ChevronDown, Folder, Plus, Send, Square } from "lucide-react";
+import { type FormEvent, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { WebSnapshot } from "../../../../protocol/types.ts";
+import { workspaceName } from "../../lib/format.ts";
+import type { WebStoreActions, WebStoreState } from "../../store/web-store.ts";
+import { ActivityBar } from "../activity/ActivityBar.tsx";
+
+interface ComposerProps {
+  snapshot: WebSnapshot | null;
+  selectedWorkspace: string | null;
+  sessionSwitching: boolean;
+  promptAdmissionPending: boolean;
+  liveRunning: boolean;
+  landing: boolean;
+  actions: WebStoreActions;
+  activeTurn: WebStoreState["activeTurn"];
+  turnCancellationPending: boolean;
+  turnTerminalStatus: string | null;
+  pendingFollowUpsReceipt: number | null;
+}
+
+export function Composer(props: ComposerProps) {
+  const { t } = useTranslation();
+  const [prompt, setPrompt] = useState("");
+  const textarea = useRef<HTMLTextAreaElement>(null);
+  const selected = props.snapshot?.selectedSession;
+  const active = Boolean(
+    selected?.id && selected.id === props.snapshot?.currentSessionId,
+  );
+  const draftSession = Boolean(
+    props.selectedWorkspace && !selected && !props.snapshot?.currentSessionId,
+  );
+  const canCompose = active || draftSession;
+  const running =
+    props.snapshot?.runtime.status === "running" || props.liveRunning;
+  const canStop =
+    active &&
+    running &&
+    Boolean(props.activeTurn ?? props.snapshot?.runtime.activeTurn);
+  const disabled =
+    props.sessionSwitching || (!canCompose && Boolean(props.selectedWorkspace));
+
+  const resize = (element: HTMLTextAreaElement) => {
+    element.style.height = "auto";
+    element.style.height = `${Math.min(element.scrollHeight, 220)}px`;
+    element.style.overflowY = element.scrollHeight > 220 ? "auto" : "hidden";
+  };
+
+  const send = async (event?: FormEvent) => {
+    event?.preventDefault();
+    if (!props.selectedWorkspace) {
+      await props.actions.chooseWorkspace();
+      return;
+    }
+    if (await props.actions.sendPrompt(prompt)) {
+      setPrompt("");
+      if (textarea.current) {
+        textarea.current.style.height = "auto";
+        textarea.current.style.overflowY = "hidden";
+      }
+    }
+  };
+
+  const workspaceItems = [
+    ...(props.snapshot?.workspaces ?? []).map((workspace) => ({
+      id: workspace.path,
+      label: workspace.name,
+      icon: <Folder />,
+      endContent:
+        workspace.path === props.selectedWorkspace ? <Check /> : undefined,
+      onClick: () => props.actions.setWorkspace(workspace.path),
+    })),
+    { type: "divider" as const },
+    {
+      id: "add",
+      label: t("addWorkspaceMenu"),
+      icon: <Plus />,
+      onClick: () => void props.actions.chooseWorkspace(),
+    },
+  ];
+  const currentModel =
+    props.snapshot?.models.find((model) => model.current) ??
+    props.snapshot?.models[0];
+  const modelItems = (props.snapshot?.models ?? []).map((model) => ({
+    id: `${model.provider}/${model.id}`,
+    label: model.label,
+    endContent: model.current ? <Check /> : undefined,
+    onClick: () =>
+      void props.actions.selectModel(`${model.provider}/${model.id}`),
+  }));
+  const placeholder = !props.selectedWorkspace
+    ? t("promptStart")
+    : props.landing
+      ? t("promptTask")
+      : active
+        ? t("promptMessage")
+        : t("promptReadonly");
+  const hint = props.turnCancellationPending
+    ? t("stoppingTurn")
+    : props.turnTerminalStatus === "cancelled"
+      ? t("stoppedTurn")
+      : props.pendingFollowUpsReceipt !== null
+        ? props.pendingFollowUpsReceipt > 0
+          ? t("pendingFollowUpsHint", { count: props.pendingFollowUpsReceipt })
+          : t("acceptedHint")
+        : canCompose
+          ? running
+            ? t("queuedHint")
+            : t("enterHint")
+          : t("activeOnlyHint");
+
+  return (
+    <div className="composer-dock">
+      {active && <ActivityBar snapshot={props.snapshot} />}
+      {props.landing && (
+        <div className="workspace-picker-row">
+          <DropdownMenu
+            className="workspace-picker-menu"
+            button={{
+              label: props.selectedWorkspace
+                ? workspaceName(props.selectedWorkspace)
+                : t("selectWorkspace"),
+              icon: <Folder />,
+              size: "md",
+              variant: "ghost",
+              className: "workspace-picker",
+            }}
+            items={workspaceItems}
+            menuWidth={240}
+            placement="above"
+            alignment="start"
+            hasChevron
+          />
+        </div>
+      )}
+      <form
+        className={`composer ${props.selectedWorkspace ? "" : "dormant"}`}
+        onSubmit={(event) => void send(event)}
+      >
+        {!props.selectedWorkspace && (
+          <button
+            className="dormant-overlay"
+            type="button"
+            aria-label={t("selectWorkspace")}
+            onClick={() => void props.actions.chooseWorkspace()}
+          />
+        )}
+        <textarea
+          ref={textarea}
+          value={prompt}
+          rows={1}
+          disabled={disabled}
+          readOnly={!props.selectedWorkspace}
+          aria-label={t("describeTask")}
+          placeholder={placeholder}
+          onChange={(event) => {
+            setPrompt(event.target.value);
+            resize(event.currentTarget);
+          }}
+          onKeyDown={(event) => {
+            if (
+              event.key === "Enter" &&
+              !event.shiftKey &&
+              !event.nativeEvent.isComposing
+            ) {
+              event.preventDefault();
+              void send();
+            }
+          }}
+        />
+        <div className="composer-toolbar">
+          <div className="model-picker-wrap">
+            <DropdownMenu
+              className="model-menu"
+              button={{
+                label: currentModel?.label || t("noModels"),
+                endContent: <ChevronDown />,
+                size: "sm",
+                variant: "ghost",
+                className: "model-picker",
+                isDisabled:
+                  props.sessionSwitching ||
+                  !active ||
+                  !props.selectedWorkspace ||
+                  props.liveRunning ||
+                  !modelItems.length,
+              }}
+              items={modelItems}
+              menuWidth={260}
+              placement="above"
+              alignment="end"
+              hasChevron={false}
+            />
+          </div>
+          {canStop ? (
+            <Tooltip content={t("stopTurn")} placement="above">
+              <button
+                className="send-button"
+                type="button"
+                aria-label={t("stopTurn")}
+                disabled={
+                  props.turnCancellationPending || props.sessionSwitching
+                }
+                onClick={() => void props.actions.cancelActiveTurn()}
+              >
+                <Square />
+              </button>
+            </Tooltip>
+          ) : (
+            <Tooltip content={t("send")} placement="above">
+              <button
+                className="send-button"
+                type="submit"
+                aria-label={t("send")}
+                disabled={
+                  props.sessionSwitching ||
+                  !canCompose ||
+                  !props.selectedWorkspace ||
+                  props.promptAdmissionPending ||
+                  !prompt.trim()
+                }
+              >
+                <Send />
+              </button>
+            </Tooltip>
+          )}
+        </div>
+        <div className="composer-hint" aria-live="polite">
+          {hint}
+        </div>
+      </form>
+    </div>
+  );
+}

package/web/ui/src/features/sessions/SessionSidebar.tsx

@@ -0,0 +1,418 @@
+import { Dialog } from "@astryxdesign/core/Dialog";
+import { DropdownMenu } from "@astryxdesign/core/DropdownMenu";
+import type { DropdownMenuOption } from "@astryxdesign/core/DropdownMenu";
+import { Tooltip } from "@astryxdesign/core/Tooltip";
+import {
+  Archive,
+  ChevronsLeft,
+  MoreHorizontal,
+  Plus,
+  Search,
+  SquarePen,
+  Trash2,
+  X,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { WebSnapshot } from "../../../../protocol/types.ts";
+import { OpenPiLogo } from "../../components/OpenPiLogo.tsx";
+import { relativeTime, sessionTitle } from "../../lib/format.ts";
+import type { WebStoreActions } from "../../store/web-store.ts";
+
+interface SessionSidebarProps {
+  snapshot: WebSnapshot | null;
+  selectedPath: string | null;
+  selectedWorkspace: string | null;
+  collapsed: Set<string>;
+  query: string;
+  searchOpen: boolean;
+  mobileOpen: boolean;
+  actions: WebStoreActions;
+}
+
+type EditTarget = { kind: "workspace" | "session"; path: string; name: string };
+type DeleteTarget = { path: string; name: string };
+
+function ActionMenu({
+  items,
+  label,
+}: {
+  items: DropdownMenuOption[];
+  label: string;
+}) {
+  return (
+    <span className="astryx-menu-trigger">
+      <DropdownMenu
+        button={{
+          label,
+          icon: <MoreHorizontal />,
+          isIconOnly: true,
+          size: "sm",
+          variant: "ghost",
+          className: "menu-action-button",
+        }}
+        items={items}
+        menuWidth={190}
+        placement="below"
+        alignment="end"
+        hasChevron={false}
+      />
+    </span>
+  );
+}
+
+export function SessionSidebar(props: SessionSidebarProps) {
+  const { t } = useTranslation();
+  const [editTarget, setEditTarget] = useState<EditTarget | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<DeleteTarget | null>(null);
+  const [draft, setDraft] = useState("");
+  const searchInput = useRef<HTMLInputElement>(null);
+  const editInput = useRef<HTMLInputElement>(null);
+  const snapshot = props.snapshot;
+
+  useEffect(() => {
+    if (props.searchOpen) searchInput.current?.focus();
+  }, [props.searchOpen]);
+  useEffect(() => {
+    if (!editTarget) return;
+    editInput.current?.focus();
+    editInput.current?.select();
+  }, [editTarget]);
+
+  const grouped = useMemo(() => {
+    const query = props.query.trim().toLowerCase();
+    const visible = (workspacePath?: string) =>
+      (snapshot?.sessions ?? []).filter(
+        (session) =>
+          !session.archived &&
+          (workspacePath === "__ungrouped__"
+            ? session.ungrouped
+            : session.cwd === workspacePath && !session.ungrouped) &&
+          (!query ||
+            `${sessionTitle(session, t("untitledSession"))} ${session.cwd}`
+              .toLowerCase()
+              .includes(query)),
+      );
+    return [
+      ...(snapshot?.workspaces ?? []).map((workspace) => ({
+        ...workspace,
+        sessions: visible(workspace.path),
+        ungrouped: false,
+      })),
+      {
+        path: "__ungrouped__",
+        name: t("ungrouped"),
+        current: false,
+        sessions: visible("__ungrouped__"),
+        ungrouped: true,
+      },
+    ].filter(
+      (group) => group.sessions.length > 0 || (!group.ungrouped && !query),
+    );
+  }, [props.query, snapshot, t]);
+
+  const openEdit = (target: EditTarget) => {
+    setDraft(target.name);
+    setEditTarget(target);
+  };
+  const saveEdit = async () => {
+    const name = draft.trim();
+    if (!editTarget || !name) return;
+    if (editTarget.kind === "workspace")
+      await props.actions.renameWorkspace(editTarget.path, name);
+    else await props.actions.renameSession(editTarget.path, name);
+    setEditTarget(null);
+  };
+
+  return (
+    <aside className="session-sidebar" aria-label="Session navigation">
+      <div className="sidebar-brand">
+        <OpenPiLogo compact />
+        <Tooltip content={t("collapseSidebar")} placement="end">
+          <button
+            className="collapse-button"
+            type="button"
+            aria-label={t("collapseSidebar")}
+            onClick={() =>
+              props.mobileOpen
+                ? props.actions.closeMobileSidebar()
+                : props.actions.toggleSidebar(false)
+            }
+          >
+            <ChevronsLeft />
+          </button>
+        </Tooltip>
+      </div>
+
+      <button
+        className="new-session-button"
+        type="button"
+        onClick={() =>
+          props.selectedWorkspace
+            ? void props.actions.createSession(props.selectedWorkspace)
+            : void props.actions.chooseWorkspace()
+        }
+      >
+        <SquarePen />
+        <span>{t("newSession")}</span>
+      </button>
+
+      <div
+        className={`workspace-heading ${props.searchOpen ? "is-searching" : ""}`}
+      >
+        <span className="workspace-heading-label">{t("workspaces")}</span>
+        <div className="session-search">
+          <Search />
+          <input
+            ref={searchInput}
+            type="search"
+            value={props.query}
+            placeholder={t("searchPlaceholder")}
+            aria-label={t("searchConversations")}
+            onChange={(event) => props.actions.setQuery(event.target.value)}
+          />
+          <button
+            type="button"
+            aria-label={t("closeSearch")}
+            onClick={() => props.actions.setSearchOpen(false)}
+          >
+            <X />
+          </button>
+        </div>
+        <div className="workspace-actions">
+          <Tooltip content={t("searchConversations")}>
+            <button
+              className="icon-button"
+              type="button"
+              aria-label={t("searchConversations")}
+              onClick={() => props.actions.setSearchOpen(true)}
+            >
+              <Search />
+            </button>
+          </Tooltip>
+          <Tooltip content={t("addWorkspace")}>
+            <button
+              className="icon-button"
+              type="button"
+              aria-label={t("addWorkspace")}
+              onClick={() => void props.actions.chooseWorkspace()}
+            >
+              <Plus />
+            </button>
+          </Tooltip>
+        </div>
+      </div>
+
+      <div className="workspace-tree">
+        {grouped.length ? (
+          grouped.map((group) => {
+            const collapsed = props.collapsed.has(group.path);
+            return (
+              <section
+                className={`workspace-group ${collapsed ? "collapsed" : ""}`}
+                key={group.path}
+              >
+                <div className="workspace-button">
+                  <button
+                    className="workspace-label"
+                    type="button"
+                    aria-expanded={!collapsed}
+                    title={
+                      group.path === "__ungrouped__" ? undefined : group.path
+                    }
+                    onClick={() => props.actions.toggleWorkspace(group.path)}
+                  >
+                    <span className="workspace-toggle" aria-hidden="true">
+                      <span className="workspace-chevron">⌄</span>
+                    </span>
+                    <strong>{group.name}</strong>
+                  </button>
+                  {!group.ungrouped && (
+                    <span className="workspace-row-actions">
+                      <ActionMenu
+                        label="Workspace options"
+                        items={[
+                          {
+                            id: "rename",
+                            label: t("renameWorkspace"),
+                            icon: <SquarePen />,
+                            onClick: () =>
+                              openEdit({
+                                kind: "workspace",
+                                path: group.path,
+                                name: group.name,
+                              }),
+                          },
+                          {
+                            id: "remove",
+                            label: t("removeWorkspace"),
+                            icon: <Trash2 />,
+                            variant: "destructive",
+                            onClick: () =>
+                              setDeleteTarget({
+                                path: group.path,
+                                name: group.name,
+                              }),
+                          },
+                        ]}
+                      />
+                      <Tooltip content={t("newSession")}>
+                        <button
+                          className="workspace-action"
+                          type="button"
+                          aria-label={`${t("newSession")} ${group.name}`}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void props.actions.createSession(group.path);
+                          }}
+                        >
+                          <Plus />
+                        </button>
+                      </Tooltip>
+                    </span>
+                  )}
+                </div>
+                <div className="workspace-sessions">
+                  {group.sessions.length ? (
+                    group.sessions.map((session) => (
+                      <div className="session-row" key={session.path}>
+                        <button
+                          className={`session ${session.path === props.selectedPath ? "active" : ""}`}
+                          type="button"
+                          aria-current={
+                            session.path === props.selectedPath
+                              ? "page"
+                              : undefined
+                          }
+                          title={sessionTitle(session, t("untitledSession"))}
+                          onClick={() =>
+                            void props.actions.selectSession(session.path)
+                          }
+                        >
+                          <span className="session-title">
+                            {sessionTitle(session, t("untitledSession"))}
+                          </span>
+                          <span className="session-time">
+                            {relativeTime(session.modified)}
+                          </span>
+                        </button>
+                        <ActionMenu
+                          label={t("conversationOptions")}
+                          items={[
+                            {
+                              id: "rename",
+                              label: t("renameConversation"),
+                              icon: <SquarePen />,
+                              onClick: () =>
+                                openEdit({
+                                  kind: "session",
+                                  path: session.path,
+                                  name: sessionTitle(
+                                    session,
+                                    t("untitledSession"),
+                                  ),
+                                }),
+                            },
+                            {
+                              id: "archive",
+                              label: t("archiveConversation"),
+                              icon: <Archive />,
+                              onClick: () =>
+                                void props.actions.archiveSession(session.path),
+                            },
+                          ]}
+                        />
+                      </div>
+                    ))
+                  ) : (
+                    <div className="empty">{t("noConversations")}</div>
+                  )}
+                </div>
+              </section>
+            );
+          })
+        ) : (
+          <div className="empty">
+            {props.query ? t("noMatching") : t("noSessions")}
+          </div>
+        )}
+      </div>
+
+      <Dialog
+        isOpen={Boolean(editTarget)}
+        onOpenChange={(open: boolean) => !open && setEditTarget(null)}
+        purpose="form"
+        width={400}
+        aria-label={
+          editTarget?.kind === "workspace"
+            ? t("renameWorkspace")
+            : t("renameConversation")
+        }
+      >
+        <form
+          className="openpi-dialog"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void saveEdit();
+          }}
+        >
+          <strong>
+            {editTarget?.kind === "workspace"
+              ? t("renameWorkspace")
+              : t("renameConversation")}
+          </strong>
+          <input
+            ref={editInput}
+            value={draft}
+            maxLength={80}
+            aria-label={
+              editTarget?.kind === "workspace"
+                ? t("workspaceName")
+                : t("conversationName")
+            }
+            onChange={(event) => setDraft(event.target.value)}
+          />
+          <div className="dialog-actions">
+            <button type="button" onClick={() => setEditTarget(null)}>
+              {t("cancel")}
+            </button>
+            <button type="submit" className="primary">
+              {t("save")}
+            </button>
+          </div>
+        </form>
+      </Dialog>
+
+      <Dialog
+        isOpen={Boolean(deleteTarget)}
+        onOpenChange={(open: boolean) => !open && setDeleteTarget(null)}
+        purpose="form"
+        width={440}
+        aria-label={t("deleteWorkspace")}
+      >
+        <div className="openpi-dialog">
+          <strong>{t("deleteWorkspace")}</strong>
+          <p>
+            {deleteTarget?.name}：{t("workspaceDeleteConfirm")}
+          </p>
+          <div className="dialog-actions">
+            <button type="button" onClick={() => setDeleteTarget(null)}>
+              {t("cancel")}
+            </button>
+            <button
+              type="button"
+              className="danger"
+              onClick={() => {
+                if (!deleteTarget) return;
+                void props.actions.removeWorkspace(deleteTarget.path);
+                setDeleteTarget(null);
+              }}
+            >
+              {t("deleteWorkspace")}
+            </button>
+          </div>
+        </div>
+      </Dialog>
+    </aside>
+  );
+}