diff --git a/packages/open-workflow-diagram-editor/src/core/taskDetails.ts b/packages/open-workflow-diagram-editor/src/core/taskDetails.ts
index 1e849281..12396185 100644
--- a/packages/open-workflow-diagram-editor/src/core/taskDetails.ts
+++ b/packages/open-workflow-diagram-editor/src/core/taskDetails.ts
@@ -24,7 +24,11 @@ const MAX_DEPTH = 4;
 
 /* Flattened task row - kind: how the view should render it */
 export type DetailField =
-  | { path: string; kind: "text"; display: string }
+  | { path: string; kind: "scalar"; value: string | number | boolean }
+  | { path: string; kind: "enum"; value: string; options: string[] }
+  | { path: string; kind: "runtime-expression"; value: string }
+  | { path: string; kind: "duration"; value: string }
+  | { path: string; kind: "long-string"; value: string }
   | { path: string; kind: "array"; count: number }
   | { path: string; kind: "object" };
 
@@ -32,6 +36,27 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
+//  This is temporary function  until we dynamically build the form with field types
+function isLongStringField(path: string): boolean {
+  return path === "run.shell.command" || path === "run.script.code";
+}
+
+function isRuntimeExpressionField(path: string): boolean {
+  return path === "if";
+}
+
+function isDurationField(path: string): boolean {
+  return path === "timeout" || path === "timeout.after";
+}
+
+const ENUM_FIELDS: Record<string, string[]> = {
+  "with.output": ["raw", "content", "response"],
+};
+
+function getEnumOptions(path: string): string[] | undefined {
+  return ENUM_FIELDS[path];
+}
+
 function flattenFields(
   value: unknown,
   path: string = "",
@@ -57,9 +82,58 @@ function flattenFields(
     for (const [key, val] of Object.entries(value)) {
       flattenFields(val, path ? `${path}.${key}` : key, depth + 1, outputFields);
     }
+
+    return;
+  }
+
+  if (typeof value === "string" && isLongStringField(path)) {
+    outputFields.push({
+      path,
+      kind: "long-string",
+      value,
+    });
     return;
   }
-  outputFields.push({ path, kind: "text", display: String(value) });
+
+  if (typeof value === "string" && isRuntimeExpressionField(path)) {
+    outputFields.push({
+      path,
+      kind: "runtime-expression",
+      value,
+    });
+    return;
+  }
+
+  if (typeof value === "string" && isDurationField(path)) {
+    outputFields.push({
+      path,
+      kind: "duration",
+      value,
+    });
+    return;
+  }
+
+  if (typeof value === "string") {
+    const options = getEnumOptions(path);
+
+    if (options) {
+      outputFields.push({
+        path,
+        kind: "enum",
+        value,
+        options,
+      });
+      return;
+    }
+  }
+
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    outputFields.push({
+      path,
+      kind: "scalar",
+      value,
+    });
+  }
 }
 
 /* Builds the flattened detail rows for a task: task-specific fields first, inherited base fields last */
diff --git a/packages/open-workflow-diagram-editor/src/i18n/locales/en.ts b/packages/open-workflow-diagram-editor/src/i18n/locales/en.ts
index 55298bd5..170c4b5f 100644
--- a/packages/open-workflow-diagram-editor/src/i18n/locales/en.ts
+++ b/packages/open-workflow-diagram-editor/src/i18n/locales/en.ts
@@ -55,6 +55,9 @@ export const en = {
   "toast.clipboard.error": "Failed to copy",
   "toast.download.success": "Download started",
   "toast.download.error": "Download failed",
+  "sidebar.duration.title": "Enter an ISO 8601 duration, for example PT30S or PT5M",
+  "sidebar.field.item": "item",
+  "sidebar.field.items": "items",
 } as const;
 
 export type TranslationKeys = keyof typeof en;
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/FieldControls.tsx b/packages/open-workflow-diagram-editor/src/side-panel/FieldControls.tsx
new file mode 100644
index 00000000..e6df46da
--- /dev/null
+++ b/packages/open-workflow-diagram-editor/src/side-panel/FieldControls.tsx
@@ -0,0 +1,135 @@
+/*
+ * Copyright 2021-Present The Open Workflow Specification Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DetailField } from "@/core/taskDetails";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  ComboboxValue,
+} from "@/components/ui/combobox";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { useI18n } from "@openworkflowspec/i18n";
+
+type ControlProps<K extends DetailField["kind"]> = {
+  field: Extract<DetailField, { kind: K }>;
+  isReadOnly: boolean;
+};
+
+const ISO_8601_DURATION_REGEX =
+  /^P(?=\d|T)(?:\d+Y)?(?:\d+M)?(?:\d+W)?(?:\d+D)?(?:T(?=\d)(?:\d+H)?(?:\d+M)?(?:\d+(?:\.\d+)?S)?)?$/;
+
+function LongStringControl({ field, isReadOnly }: ControlProps<"long-string">) {
+  return <Textarea value={field.value} readOnly disabled={isReadOnly} />;
+}
+
+function DurationControl({ field, isReadOnly }: ControlProps<"duration">) {
+  const { t } = useI18n();
+  return (
+    <Input
+      value={field.value}
+      disabled={isReadOnly}
+      pattern={ISO_8601_DURATION_REGEX.source}
+      title={t("sidebar.duration.title")}
+    />
+  );
+}
+
+function ExpressionControl({ field, isReadOnly }: ControlProps<"runtime-expression">) {
+  return (
+    <div>
+      <span className="dec-sidebar-hint-text">Runtime expression</span>
+      <Input value={field.value} disabled={isReadOnly} />
+    </div>
+  );
+}
+
+function EnumControl({ field, isReadOnly }: ControlProps<"enum">) {
+  return (
+    <Combobox value={field.value} disabled={isReadOnly}>
+      <ComboboxTrigger>
+        <ComboboxValue placeholder="Select an option" />
+      </ComboboxTrigger>
+      <ComboboxContent>
+        <ComboboxList>
+          {field.options.map((option) => (
+            <ComboboxItem key={option} value={option}>
+              {option}
+            </ComboboxItem>
+          ))}
+        </ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
+function TextControl({ value, isReadOnly }: { value: string; isReadOnly: boolean }) {
+  return <Input value={value} disabled={isReadOnly} />;
+}
+
+function NumberControl({ value, isReadOnly }: { value: number; isReadOnly: boolean }) {
+  return <Input type="number" value={value} disabled={isReadOnly} />;
+}
+
+function BooleanControl({ value, isReadOnly }: { value: boolean; isReadOnly: boolean }) {
+  return <Switch checked={value} disabled={isReadOnly} />;
+}
+
+export function FieldControl({ field, isReadOnly }: { field: DetailField; isReadOnly: boolean }) {
+  const props = { isReadOnly };
+  const { t } = useI18n();
+
+  switch (field.kind) {
+    case "long-string":
+      return <LongStringControl field={field} {...props} />;
+
+    case "duration":
+      return <DurationControl field={field} {...props} />;
+
+    case "runtime-expression":
+      return <ExpressionControl field={field} {...props} />;
+
+    case "enum":
+      return <EnumControl field={field} {...props} />;
+
+    case "scalar":
+      if (typeof field.value === "string") {
+        return <TextControl value={field.value} {...props} />;
+      }
+
+      if (typeof field.value === "number") {
+        return <NumberControl value={field.value} {...props} />;
+      }
+
+      if (typeof field.value === "boolean") {
+        return <BooleanControl value={field.value} {...props} />;
+      }
+
+      return String(field.value);
+
+    case "array":
+      return `${field.count} ${t(
+        field.count === 1 ? "sidebar.field.item" : "sidebar.field.items",
+      )}`;
+
+    case "object":
+      return <>{"{...}"}</>;
+  }
+}
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx b/packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx
index debb04a8..f9f97aaf 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx
@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+import type { DetailField } from "@/core/taskDetails";
+import { FieldControl } from "./FieldControls";
+
 export function SectionHeader({ label }: { label: string }) {
   return (
     <div className="dec-sidebar-section-header">
@@ -32,11 +35,21 @@ export function InlineField({ label, value }: { label: string; value: string })
   );
 }
 
-export function PropertyField({ label, value }: { label: string; value: string }) {
+export function PropertyField({
+  label,
+  field,
+  isReadOnly,
+}: {
+  label: string;
+  field: DetailField;
+  isReadOnly: boolean;
+}) {
   return (
     <div className="dec-sidebar-prop">
       <dt className="dec-sidebar-prop-label">{label}</dt>
-      <dd className="dec-sidebar-prop-value">{value}</dd>
+      <dd className="dec-sidebar-prop-value">
+        <FieldControl field={field} isReadOnly={isReadOnly} />
+      </dd>
     </div>
   );
 }
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx b/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx
index 2609e547..b371e77d 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx
@@ -28,25 +28,16 @@ type NodeDetailsViewProps = {
   node: RF.Node<BaseNodeData>;
 };
 
-const OBJECT_GLYPH = "{...}";
-
-function itemCount(length: number): string {
-  return `${length} item${length === 1 ? "" : "s"}`;
-}
-
-function fieldText(field: DetailField): string {
-  switch (field.kind) {
-    case "array":
-      return itemCount(field.count);
-    case "text":
-      return field.display;
-    case "object":
-      return OBJECT_GLYPH;
-  }
-}
-
-function FieldRow({ label, field }: { label: string; field: DetailField }) {
-  return <PropertyField label={label} value={fieldText(field)} />;
+function FieldRow({
+  label,
+  field,
+  isReadOnly,
+}: {
+  label: string;
+  field: DetailField;
+  isReadOnly: boolean;
+}) {
+  return <PropertyField label={label} field={field} isReadOnly={isReadOnly} />;
 }
 
 export function NodeDetailsView({ node }: NodeDetailsViewProps) {
@@ -76,7 +67,7 @@ export function NodeDetailsView({ node }: NodeDetailsViewProps) {
           <SectionHeader label={t("sidebar.sectionProperties")} />
           <dl>
             {fields.map((field) => (
-              <FieldRow key={field.path} label={field.path} field={field} />
+              <FieldRow key={field.path} label={field.path} field={field} isReadOnly={isReadOnly} />
             ))}
           </dl>
         </>
diff --git a/packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts b/packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts
index 56ad7aac..d4d590f3 100644
--- a/packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts
+++ b/packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts
@@ -30,9 +30,9 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "call", kind: "text", display: "http" },
-      { path: "with.method", kind: "text", display: "GET" },
-      { path: "with.url", kind: "text", display: "http://example.com" },
+      { path: "call", kind: "scalar", value: "http" },
+      { path: "with.method", kind: "scalar", value: "GET" },
+      { path: "with.url", kind: "scalar", value: "http://example.com" },
     ]);
   });
 
@@ -43,9 +43,9 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "set.foo", kind: "text", display: "bar" },
-      { path: "if", kind: "text", display: "${ .ok }" },
-      { path: "then", kind: "text", display: "continue" },
+      { path: "set.foo", kind: "scalar", value: "bar" },
+      { path: "if", kind: "runtime-expression", value: "${ .ok }" },
+      { path: "then", kind: "scalar", value: "continue" },
     ]);
   });
 
@@ -61,11 +61,11 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "set.x", kind: "text", display: "1" },
-      { path: "input.from", kind: "text", display: "${ .input }" },
-      { path: "output.as", kind: "text", display: "${ .output }" },
-      { path: "export.as", kind: "text", display: "${ .export }" },
-      { path: "timeout.after", kind: "text", display: "${ .timeout }" },
+      { path: "set.x", kind: "scalar", value: 1 },
+      { path: "input.from", kind: "scalar", value: "${ .input }" },
+      { path: "output.as", kind: "scalar", value: "${ .output }" },
+      { path: "export.as", kind: "scalar", value: "${ .export }" },
+      { path: "timeout.after", kind: "duration", value: "${ .timeout }" },
     ]);
   });
 
@@ -77,8 +77,8 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "timeout.after.minutes", kind: "text", display: "5" },
-      { path: "timeout.after.seconds", kind: "text", display: "30" },
+      { path: "timeout.after.minutes", kind: "scalar", value: 5 },
+      { path: "timeout.after.seconds", kind: "scalar", value: 30 },
     ]);
   });
 
@@ -89,7 +89,7 @@ describe("getTaskDetails", () => {
       }),
     );
 
-    expect(fields).toEqual([{ path: "timeout", kind: "text", display: "MyTimeout" }]);
+    expect(fields).toEqual([{ path: "timeout", kind: "duration", value: "MyTimeout" }]);
   });
 
   it.each([{ length: 0 }, { length: 1 }, { length: 2 }])(
@@ -123,7 +123,7 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "with.a.b.client.name", kind: "text", display: "foo" },
+      { path: "with.a.b.client.name", kind: "scalar", value: "foo" },
       { path: "with.a.b.client.config", kind: "object" },
     ]);
   });
@@ -136,7 +136,7 @@ describe("getTaskDetails", () => {
       }),
     );
 
-    expect(fields).toEqual([{ path: "set.x", kind: "text", display: "1" }]);
+    expect(fields).toEqual([{ path: "set.x", kind: "scalar", value: 1 }]);
   });
 
   it("returns no fields for a task with no displayable fields", () => {
@@ -154,7 +154,7 @@ describe("getTaskDetails", () => {
       }),
     );
 
-    expect(fields).toEqual([{ path: "set.c", kind: "text", display: "value" }]);
+    expect(fields).toEqual([{ path: "set.c", kind: "scalar", value: "value" }]);
   });
 
   it("converts boolean values to text", () => {
@@ -168,8 +168,8 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "set.enabled", kind: "text", display: "true" },
-      { path: "set.disabled", kind: "text", display: "false" },
+      { path: "set.enabled", kind: "scalar", value: true },
+      { path: "set.disabled", kind: "scalar", value: false },
     ]);
   });
 
@@ -236,7 +236,7 @@ describe("getTaskDetails", () => {
       }),
     );
 
-    expect(fields).toEqual([{ path: "call", kind: "text", display: "123" }]);
+    expect(fields).toEqual([{ path: "call", kind: "scalar", value: 123 }]);
   });
 
   it("flattens fields exactly at the maximum supported depth", () => {
@@ -257,8 +257,8 @@ describe("getTaskDetails", () => {
     expect(fields).toEqual([
       {
         path: "with.a.b.c.value",
-        kind: "text",
-        display: "foo",
+        kind: "scalar",
+        value: "foo",
       },
     ]);
   });
@@ -277,12 +277,12 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "if", kind: "text", display: "${ .condition }" },
-      { path: "input.from", kind: "text", display: "${ .input }" },
-      { path: "output.as", kind: "text", display: "${ .output }" },
-      { path: "export.as", kind: "text", display: "${ .export }" },
-      { path: "timeout", kind: "text", display: "PT5M" },
-      { path: "then", kind: "text", display: "next" },
+      { path: "if", kind: "runtime-expression", value: "${ .condition }" },
+      { path: "input.from", kind: "scalar", value: "${ .input }" },
+      { path: "output.as", kind: "scalar", value: "${ .output }" },
+      { path: "export.as", kind: "scalar", value: "${ .export }" },
+      { path: "timeout", kind: "duration", value: "PT5M" },
+      { path: "then", kind: "scalar", value: "next" },
     ]);
   });
 
@@ -297,4 +297,74 @@ describe("getTaskDetails", () => {
 
     expect(fields).toEqual([]);
   });
+
+  it("classifies shell commands as long-string fields", () => {
+    const fields = getTaskDetails(
+      asTask({
+        run: {
+          shell: {
+            command: 'echo "Hello World"',
+          },
+        },
+      }),
+    );
+
+    expect(fields).toEqual([
+      {
+        path: "run.shell.command",
+        kind: "long-string",
+        value: 'echo "Hello World"',
+      },
+    ]);
+  });
+
+  it("classifies script code as a long-string field", () => {
+    const fields = getTaskDetails(
+      asTask({
+        run: {
+          script: {
+            code: 'console.log("Hello World");',
+          },
+        },
+      }),
+    );
+
+    expect(fields).toEqual([
+      {
+        path: "run.script.code",
+        kind: "long-string",
+        value: 'console.log("Hello World");',
+      },
+    ]);
+  });
+
+  it("extracts enum fields with their available options", () => {
+    const fields = getTaskDetails({
+      call: "http",
+      with: {
+        method: "GET",
+        endpoint: "https://example.com",
+        output: "content",
+      },
+    });
+
+    expect(fields).toContainEqual({
+      path: "with.output",
+      kind: "enum",
+      value: "content",
+      options: ["raw", "content", "response"],
+    });
+  });
+
+  it("classifies timeout as a duration field", () => {
+    const task = {
+      timeout: "PT30S",
+    } as Specification.Task;
+
+    expect(getTaskDetails(task)).toContainEqual({
+      path: "timeout",
+      kind: "duration",
+      value: "PT30S",
+    });
+  });
 });
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx
index 67bd2698..f3de883f 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx
@@ -46,11 +46,51 @@ describe("NodeDetailsView", () => {
     expect(screen.getByTestId("node-details")).toBeInTheDocument();
     expect(screen.getByText("Properties")).toBeInTheDocument();
     expect(screen.getByText("call")).toBeInTheDocument();
-    expect(screen.getByText("http")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("http")).toBeInTheDocument();
     expect(screen.getByText("with.endpoint")).toBeInTheDocument();
-    expect(screen.getByText("https://api.example.com")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("https://api.example.com")).toBeInTheDocument();
     expect(screen.getByText("then")).toBeInTheDocument();
-    expect(screen.getByText("continue")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("continue")).toBeInTheDocument();
+  });
+
+  it("renders number fields as number inputs", () => {
+    const node = makeNode({
+      label: "step",
+      task: {
+        with: {
+          retries: 42,
+        },
+      },
+    });
+
+    renderWithProviders(<NodeDetailsView node={node} />);
+
+    expect(screen.getByText("with.retries")).toBeInTheDocument();
+
+    const input = screen.getByDisplayValue("42");
+
+    expect(input).toHaveAttribute("type", "number");
+    expect(input).toBeDisabled();
+  });
+
+  it("renders boolean fields as switches", () => {
+    const node = makeNode({
+      label: "step",
+      task: {
+        with: {
+          enabled: true,
+        },
+      },
+    });
+
+    renderWithProviders(<NodeDetailsView node={node} />);
+
+    expect(screen.getByText("with.enabled")).toBeInTheDocument();
+
+    const switchControl = screen.getByRole("switch");
+
+    expect(switchControl).toBeChecked();
+    expect(switchControl).toBeDisabled();
   });
 
   it.each([
@@ -179,7 +219,10 @@ describe("NodeDetailsView", () => {
       renderWithProviders(<NodeDetailsView node={child} />, {
         taskReferences: new Set([containerReference, childReference]),
         errors: [
-          { path: `${childReference}/with`, message: "must have required property 'endpoint'" },
+          {
+            path: `${childReference}/with`,
+            message: "must have required property 'endpoint'",
+          },
         ],
       });