@vibe80/vibe80 0.1.1

package/client/src/components/Settings/SettingsPanel.jsx

@@ -0,0 +1,212 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
+
+export default function SettingsPanel({
+  t,
+  activePane,
+  handleSettingsBack,
+  language,
+  setLanguage,
+  showChatCommands,
+  setShowChatCommands,
+  showToolResults,
+  setShowToolResults,
+  notificationsEnabled,
+  setNotificationsEnabled,
+  themeMode,
+  setThemeMode,
+  gitIdentityName,
+  setGitIdentityName,
+  gitIdentityEmail,
+  setGitIdentityEmail,
+  gitIdentityGlobal,
+  gitIdentityRepo,
+  gitIdentityLoading,
+  gitIdentitySaving,
+  gitIdentityError,
+  gitIdentityMessage,
+  handleSaveGitIdentity,
+  attachmentSession,
+}) {
+  return (
+    <div className={`settings-panel ${activePane === "settings" ? "" : "is-hidden"}`}>
+      <div className="settings-header">
+        <button
+          type="button"
+          className="settings-back icon-button"
+          onClick={handleSettingsBack}
+          aria-label={t("Back to previous view")}
+          title={t("Back")}
+        >
+          <span aria-hidden="true">
+            <FontAwesomeIcon icon={faArrowLeft} />
+          </span>
+        </button>
+        <div className="settings-heading">
+          <div className="settings-title">{t("User settings")}</div>
+          <div className="settings-subtitle">
+            {t("These settings are stored in your browser.")}
+          </div>
+        </div>
+      </div>
+      <div className="settings-group">
+        <label className="settings-item">
+          <span className="settings-text">
+            <span className="settings-name">{t("Language")}</span>
+            <span className="settings-hint">{t("Select a language")}</span>
+          </span>
+          <select
+            className="settings-select"
+            value={language}
+            onChange={(event) => setLanguage(event.target.value)}
+          >
+            <option value="fr">{t("French")}</option>
+            <option value="en">{t("English")}</option>
+          </select>
+        </label>
+        <label className="settings-item">
+          <span className="settings-text">
+            <span className="settings-name">{t("Show commands in chat")}</span>
+            <span className="settings-hint">
+              {t("Show executed command blocks in the conversation.")}
+            </span>
+          </span>
+          <input
+            type="checkbox"
+            className="settings-toggle"
+            checked={showChatCommands}
+            onChange={(event) => setShowChatCommands(event.target.checked)}
+          />
+        </label>
+        <label className="settings-item">
+          <span className="settings-text">
+            <span className="settings-name">{t("Show tool results in chat")}</span>
+            <span className="settings-hint">
+              {t("Show tool_result blocks in the conversation.")}
+            </span>
+          </span>
+          <input
+            type="checkbox"
+            className="settings-toggle"
+            checked={showToolResults}
+            onChange={(event) => setShowToolResults(event.target.checked)}
+          />
+        </label>
+        <label className="settings-item">
+          <span className="settings-text">
+            <span className="settings-name">{t("Notifications")}</span>
+            <span className="settings-hint">
+              {t("Show a notification and sound when a new message arrives.")}
+            </span>
+          </span>
+          <input
+            type="checkbox"
+            className="settings-toggle"
+            checked={notificationsEnabled}
+            onChange={(event) => setNotificationsEnabled(event.target.checked)}
+          />
+        </label>
+        <label className="settings-item">
+          <span className="settings-text">
+            <span className="settings-name">{t("Dark mode")}</span>
+            <span className="settings-hint">
+              {t("Enable the dark theme for the interface.")}
+            </span>
+          </span>
+          <input
+            type="checkbox"
+            className="settings-toggle"
+            checked={themeMode === "dark"}
+            onChange={(event) =>
+              setThemeMode(event.target.checked ? "dark" : "light")
+            }
+          />
+        </label>
+      </div>
+      <div className="settings-group">
+        <div className="settings-item settings-item--stacked">
+          <div className="settings-text">
+            <span className="settings-name">
+              {t("Git identity for this repository")}
+            </span>
+            <span className="settings-hint">
+              {t("Provide user.name and user.email for repository commits.")}
+            </span>
+            <span className="settings-hint">
+              {t("Global values: {{name}} / {{email}}.", {
+                name: gitIdentityGlobal.name || t("Not set"),
+                email: gitIdentityGlobal.email || t("Not set"),
+              })}
+            </span>
+            <span className="settings-hint">
+              {gitIdentityRepo.name || gitIdentityRepo.email
+                ? t("Repository values: {{name}} / {{email}}.", {
+                    name: gitIdentityRepo.name || t("Not set"),
+                    email: gitIdentityRepo.email || t("Not set"),
+                  })
+                : t("No repository-specific values.")}
+            </span>
+          </div>
+          <div className="settings-fields">
+            <label className="settings-field">
+              <span className="settings-field-label">{t("user.name")}</span>
+              <input
+                type="text"
+                className="settings-input"
+                value={gitIdentityName}
+                onChange={(event) => setGitIdentityName(event.target.value)}
+                placeholder={gitIdentityGlobal.name || t("Full name")}
+                disabled={
+                  gitIdentityLoading ||
+                  gitIdentitySaving ||
+                  !attachmentSession?.sessionId
+                }
+              />
+            </label>
+            <label className="settings-field">
+              <span className="settings-field-label">{t("user.email")}</span>
+              <input
+                type="email"
+                className="settings-input"
+                value={gitIdentityEmail}
+                onChange={(event) => setGitIdentityEmail(event.target.value)}
+                placeholder={
+                  gitIdentityGlobal.email || t("your.email@example.com")
+                }
+                disabled={
+                  gitIdentityLoading ||
+                  gitIdentitySaving ||
+                  !attachmentSession?.sessionId
+                }
+              />
+            </label>
+          </div>
+          <div className="settings-actions">
+            <button
+              type="button"
+              className="settings-button"
+              onClick={handleSaveGitIdentity}
+              disabled={
+                gitIdentityLoading ||
+                gitIdentitySaving ||
+                !attachmentSession?.sessionId
+              }
+            >
+              {gitIdentitySaving ? t("Saving...") : t("Save")}
+            </button>
+            {gitIdentityLoading ? (
+              <span className="settings-status">{t("Loading...")}</span>
+            ) : null}
+            {gitIdentityError ? (
+              <span className="settings-status is-error">{gitIdentityError}</span>
+            ) : null}
+            {gitIdentityMessage ? (
+              <span className="settings-status">{gitIdentityMessage}</span>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/src/components/Terminal/TerminalPanel.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+export default function TerminalPanel({
+  t,
+  terminalEnabled,
+  activePane,
+  repoName,
+  activeWorktree,
+  isInWorktree,
+  terminalContainerRef,
+  attachmentSession,
+}) {
+  if (!terminalEnabled) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`terminal-panel ${activePane === "terminal" ? "" : "is-hidden"}`}
+    >
+      <div className="terminal-header">
+        <div className="terminal-title">{t("Terminal")}</div>
+        {(repoName || activeWorktree?.branchName || activeWorktree?.name) && (
+          <div className="terminal-meta">
+            {isInWorktree
+              ? activeWorktree?.branchName || activeWorktree?.name
+              : repoName}
+          </div>
+        )}
+      </div>
+      <div className="terminal-body" ref={terminalContainerRef} />
+      {!attachmentSession?.sessionId && (
+        <div className="terminal-empty">
+          {t("Start a session to open the terminal.")}
+        </div>
+      )}
+    </div>
+  );
+}

package/client/src/components/Topbar/Topbar.jsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGear, faQrcode, faRightFromBracket } from "@fortawesome/free-solid-svg-icons";
+import WorktreeTabs from "../WorktreeTabs.jsx";
+
+export default function Topbar({
+  t,
+  brandLogo,
+  allTabs,
+  activeWorktreeId,
+  handleSelectWorktree,
+  createWorktree,
+  openCloseConfirm,
+  renameWorktreeHandler,
+  llmProvider,
+  availableProviders,
+  branches,
+  defaultBranch,
+  currentBranch,
+  branchLoading,
+  branchError,
+  defaultInternetAccess,
+  defaultDenyGitCredentialsAccess,
+  deploymentMode,
+  loadBranches,
+  providerModelState,
+  loadProviderModels,
+  connected,
+  isMobileLayout,
+  requestHandoffQr,
+  attachmentSession,
+  handoffLoading,
+  handleOpenSettings,
+  handleLeaveSession,
+}) {
+  return (
+    <header className="header">
+      <div className="topbar-left">
+        <div className="topbar-spacer" />
+        <div className="topbar-brand">
+          <img className="brand-logo" src={brandLogo} alt="vibe80" />
+        </div>
+        <div className="topbar-tabs">
+          <WorktreeTabs
+            worktrees={allTabs}
+            activeWorktreeId={activeWorktreeId}
+            onSelect={handleSelectWorktree}
+            onCreate={createWorktree}
+            onClose={openCloseConfirm}
+            onRename={renameWorktreeHandler}
+            provider={llmProvider}
+            providers={
+              availableProviders.length ? availableProviders : [llmProvider]
+            }
+            branches={branches}
+            defaultBranch={defaultBranch || currentBranch}
+            branchLoading={branchLoading}
+            branchError={branchError}
+            defaultInternetAccess={defaultInternetAccess}
+            defaultDenyGitCredentialsAccess={defaultDenyGitCredentialsAccess}
+            deploymentMode={deploymentMode}
+            onRefreshBranches={loadBranches}
+            providerModelState={providerModelState}
+            onRequestProviderModels={loadProviderModels}
+            disabled={!connected}
+            isMobile={isMobileLayout}
+          />
+        </div>
+      </div>
+
+      <div className="topbar-right">
+        <button
+          type="button"
+          className="icon-button"
+          aria-label={t("Resume on mobile")}
+          title={t("Resume on mobile")}
+          onClick={requestHandoffQr}
+          disabled={!attachmentSession?.sessionId || handoffLoading}
+        >
+          <FontAwesomeIcon icon={faQrcode} />
+        </button>
+        <button
+          type="button"
+          className="icon-button"
+          aria-label={t("Open settings")}
+          onClick={handleOpenSettings}
+        >
+          <FontAwesomeIcon icon={faGear} />
+        </button>
+        <button
+          type="button"
+          className="icon-button"
+          aria-label={t("Leave session")}
+          onClick={handleLeaveSession}
+        >
+          <FontAwesomeIcon icon={faRightFromBracket} />
+        </button>
+      </div>
+    </header>
+  );
+}